软件工程导论 结对项目 前端开发记录

页面构想、设计

作为一个完全没有设计灵感的人来说，对没有产品原型的项目我是很难下手的，因此这个项目的前端开发有一大半的时间是花在了页面样式修改、调整上。
结对项目的前端页面一共经历了三次渡劫，最终才定版。

第一版页面

在第一版的前端页面中，我把整个项目分成了3个部分，这3个部分也就对应了3个页面——首页、出题、做题：

项目文件结构

其中，setQuestion.vue是出题页面，answer.vue是答题页面。
那首页在哪儿呢？——首页我就使用的是vue项目自带的HelloWorld.vue，在里面增删改一些代码。

1. 首页：首页的样式参照vue项目自带的入口页面样式；
   项目的首页之中将“V”图片替换了，并且其下的超链接切换了文字和路由，新增了登录、注册（由于第一版页面已经被修改，所以无法给出页面图片），这些代码的删改都是在HelloWorld.vue中进行的。
2. 出题页面(setQuestion.vue) ：按照老师给出的出题样式
   
   使用element-ui组件库做了一个大致相同的样子，单作为一个页面，并设置了页面路由，在首页之中有一个“我要做题”的链接，通过路由可以直接到达setQuestion.vue页面（类似于html中的a标签的效果，唯一不同的就是跳转的路径不再是文件间的相互路径，而变成了http路径）；
   路由设置
   
   启动整个vue项目后，在浏览器的地址栏中输入路由路径即可访问到该setQuestion.vue页面
   
3. 答题页面(answer.vue) ：是一个含有计算算式、答题域、计时器的页面，在这个页面中能根据所填入的答案与正确答案进行比对，输出正确率并给出最终的答题时间。

• 在第一版的答题页面之中，正确答案是前端请求后端计算算式的时候一起传到前端的，这个后端承包计算算式和答案的模式在后面的版本中被修改。
• 答题页面中有“开始答题”和“提交答案”两个按钮：点击“开始答题”后，计时器开始工作，显示在页面上的时间开始有变化；点击“提交答案”后，答题结束，计时器停止计时，给出最终正确率和答题用时时长。这两个按钮在后来考虑到实际情况后有所修改。
• 由于第一版页面已不存在了，因此不做页面展示

在第一版页面做完以后，真是又丑又别扭。
加之前后端传值过程均是我写了一个和后端给出的一样格式的json文件，来模拟钱后端传值过程，以测试代码。
在考虑到页面美观程度以及和后端传值的问题，决定将第一版页面推翻，做了第二版。

第二版页面

在第二版的页面中，较第一版而言做了一些改动：

• 合并了首页和setQuestion.vue页面；
• 删去了原来首页中的登录和删除；
  原因：加上登录注册会再给前后端添加太多需求——例如前端还会涉及到拦截器的问题，后端还会涉及到数据库等等。与小伙伴多番商议之下，一切从简，删去了登录注册功能。
  总体而言，在第二版页面中，我把整个项目分成了2个部分（首页[也就是出题页面]、做题），即对应了两个页面

1. 首页(即出题页面 HelloWorld.vue)：这一版的首页中，我使用到了element-ui中的布局（el-container、el-header、el-aside、el-main、el-footer），添加了一个导航侧边栏(el-aside)，在页面的中间给出了设置题目的部件(el-main)，在App.vue中设置了公共的标题（Math Helper 欢迎进入数学提分助手……）。具体页面样式见下图：
   
2. 答题页面(answer.vue) ：答题页面与第一版无差别。

这一版的页面总体来说比第一版的好看了太多，有一个网站的样子了。
然而，现实是如此的让我头秃……
在我使用自己写的json文件模拟前后端传值的过程很顺利之后，我们两个伙伴开始了第一次真正的前后端传值交互——传过去，很好，后端收到了，前台也得到了计算式子和正确答案的反馈（虽然这个令人欣喜的结果是在让我闹心了一整天了之后实现的），但是answer.vue页面请求就是请求失败，具体原因和解决见困难和解决，在解决了很久仍然毫无效果之后，我选择向现实妥协——把答题页面整个版到首页来：藏着！在需要它的时候再出来！
于是项目的前端第三版也就是最终版诞生了……

第三版（最终版）页面

在第三版的页面中，较第二版而言也是做了一些改动：

• 如上所言，将答题页面放到了首页中；
• 页面之中也加上了上传、下载功能，于是后端承包计算算式和答案的模式变成了：后端只负责给我计算式子，正确答案前端通过强大的eval()函数去计算；
  原因：因为添加了上传功能，在上传的文件中，后端将文件当中“=”前面的计算式子分割出来生成json格式的文件传递给前端，也就是说，后端对上传文件的内容分割仅限于将“=”之前的式子，“=”之后的正确答案由于分割起来太过麻烦，于是放弃了对正确答案的获取；而通过后端代码按要求生成的计算式子又是带有正确答案的，相商之下，我们决定——后端只负责提供计算式子，前端拿到计算式子之后，运用eval()函数进行计算，得到的正确答案再与用户所填入的答案进行比对。
• 答题部分由原来的触发“开始做题”计时器开始工作，改成了计算算式在后端生成、前端获取到并渲染到页面的同时，计时器开始计时，这就避免了由于忘记点击或者故意不点击“开始做题”而导致的不能正确反映做题速度的问题。

最终，还是“三‘页’合璧”，结对项目中前端只包含有一个页面：HelloWorld.vue，在这个页面中模块该藏的藏，该现的现，各司其职。

首页(集出题、做题、上传、下载于一体)：在第二版的基础上，添加了“下载题集”和“扩充题库”于导航侧边栏中。具体页面样式见下图：

出题部分：

答题部分：



上传部分：

下载部分：

遇到的困难和痛苦的解决过程

这次结对项目的前端开发是基于vue.js+element-ui模式来进行。这个框架的好处就在于不用和后端代码进行套页，前后端代码完全分离，用接口（url）在进行传值和交互，这就省去了一大把的套页时间。
对于我这样的一个新(cai)手(niao)来说，这个框架一！点！也！不！好！上！手！（都说容易上手是骗人的……）因此在做结对项目的时候，基本上就是一脚一个坑，一个坑陷一天的状态……真的是让人很头秃。
所以我把一些我认为我以后还会踩坑的地方记下来，免得以后踩了坑，爬起来快一点……

1. 与后端的交互

坑?：与后端进行数据交互时，后端没有办法获取到前端通过axios传过去的值，这是我通过查博客写的向后台传值的代码

//传值给后端