WEB结课项目报告

1、项目内容

这个项目是一个简单的背题闯关系统，一开始题库里包含25道基础题目，可以直接开始背题，背题页面会提示做对了多少道题，如果做对了就可以背下一道题，如果没有做对会显示出他的答案，但是加入做对队列，然后会开始下一轮的题目，每一轮的题目都是从数据库随机选出还没有做对的。当作对了全部题目就会提示通关，并会显示是否重置，重置会把所有题目设为未答。除了背题，还可以自己添加想背的题目。同时也有所有题目列表，上面会显示题目和答案，方便记忆，同时也可以删除或者修改他的内容。

2、开发过程

先是创建一个问题和答案类braintears，他有question和answer两个属性，然后通过mybatis操作数据库完成CRUD，创建service层，它的作用是获取连接完成CRUD。然后是servlet层完成前端数据与后端的交互。

然后创建HTML页面，把后端出过来的数据进行接收，并展示在页面上，其中了Vue和element-ui这两个框架。

最后创建数据库，输入测试数据，并测试是否运行有问题，发现问题进行调试，找到问题并解决。

3、遇到的问题

遇到的问题一般是前端的问题，比如Vue里的哪一个model没有获取到数据，HTML哪一个元素没有绑定对象或者HTML展示在web上的元素并不是在我想要的位置。前面两个都还是很好解决，一般都是定义的变量名称和后端传过来的数据名称不一致，导致vue获取不到数据。HTML元素没有绑定好对象一般都是元素还没有在页面加载完成就开始在JavaScript中获取或者调用。解决办法就是把标签提前加载或者JavaScript延后加载。对于最后一个是CSS方面的问题，特别是元素位置最让人头痛，比如想让一个按钮放在最中间或者让他居中，一直找不到合适的办法来解决。其实还有很多小问题，比如想要查看一个问题是否已经回答但是其他数据就不在需要，如果其他数据为空就会导致报错。这时就需要加一个if判断语句。

4、解决问题

复制报错信息，面向百度编程，根据提示修改自己的问题。

5、未解决的问题

HTML元素的位置不尽人意

6、总结

这个项目虽然简单，但是麻雀虽小，五脏俱全，CRUE全部都有。但是虽然完成了这些简单的需求，这次项目所用到的技术都还比较落后，Vue也只是用到了皮毛，还有很多新的技术还需要学习，后端也只是用到了mybatis的皮毛，以后还需要学习springboot，完成更简洁，维护更方便的代码编写！