软工课程总结

从一开始的拖沓磨洋工到后来的推翻重做,心路历程可谓大起大落。最初绘制项目初蓝图一阵功能齐全,随着时间慢慢推移不得不去阉割掉一些心仪的用户之间交互功能,最后做成了大佬个人展示博客。

开始的开始

搭建前端的框架和准备布局时,遗忘了一些之前学过的CSS,JS不得不回头再看案例和方法。慢慢编写定下来一个相较而言简陋的布局。
最初所定的文章主页界面类似于这样

初期只是完成了简单的布局界面,没有过多的界面渲染,看起来很简陋。

遇到的一些问题和新的不一样的点

最初排版设定部件时会遇到某个部件将另一部件“挤出”原设定好“方框”需进入的位点一情况,索性全部从头再来,我们统一了需要应用的CSS差数。同时在博客中会有功能的切换,为了体现组件化的思想,使用了使用全局绝对布局,应用nuxt框架,此项目是建立在一个2G的服务器上运行的,可以防止由爬虫引起的服务器压力过大导致崩溃。在nuxt布局当中 用nuxt标签处理每个页面的切换 当vue-router路由不断切换页面时 在nuxt标签中进行内容的切换 为了保证切换效果的一个完美性,在外围加一个transition表现一个很平滑的展示效果 。同时我们自建了一个Navbar组件用来进行不同页面之间的切换,并且为了提高交互性,实时监听鼠标的放置位置和滚动条的滚动状态,让状态栏可以满足视觉要求上的改变(比如鼠标放置相应位置改变背景颜色或状态)在其左右两端分别提供回到首页和跳转至后台的按钮。我们还使用了v-for的重复加载由于并不需要太华丽的界面,主要注重数据性和功能性,采用了element-UIvant-UI结合的方式,使用这些组件库中的表格组件、按钮组件、开关组件、文件选择,遮罩层以及v-md-editor组件。v-md-editor)Makrdown轻量级编辑器 可以在开发周期中大大减小对于源生md的配置困难问题 并且依托其功能可以实现提示消息 展示emoji表情 公式 流程图 等功能。
引用的组件组件 | Element

最后的感言.

从确定做博客开始的迷茫再往后的再学习踏踏实实静坐一点点码代码,其中的付出在最后做出来的成果看来一切都是值得的。完成任务途中遇到了不少的技术上的问题也查阅了不少的相关知识资料,不得不说学习最快的方法就是实践,开发探索也能更快掌握技能。程序员这一行得紧跟潮流,有一些热门的框架方法虽然有一点难度,但是在使用之后只能说真香,代码简洁美观还能养成引用统一参数这个好习惯。另外我觉得很重要的一点,单从解决项目问题或者要达成自己想要的功能和页面效果时,最好先运用自己所拥有的知识和技巧去尽量完成,在这之后再翻阅相关功能的文章去学习,反复掌握即能用的框架方法更得心应手。要感谢老师和大佬康康的指导和帮助,项目中有很多方案和有新意的想法都是他提出来的。401yyds.