Cesar竞赛平台项目中期总结

Cesar竞赛平台项目中期总结

软件51 谢运帷 2015013185

我们小组的选题是大学生竞赛平台项目，经过我们需求分析，原型设计等等步骤，我们终于要开始着手实现这一个庞大的竞赛平台项目。我们使用Django+mysql处理后端逻辑，加上Vue实现一个相应式的前端设计。参考我们微信项目的框架，我们设计实现了一套前后端接口，并约定写成接口文档，让我们整体项目可以前后端分离的进行开发。这篇总结将一一点评我们前端部分从开始到现在遇到的点点

Vue多页面应用的配置

我负责的任务是前端的开发。首先我们面临的第一个问题就是：Vue-cli生成的是一个单页应用的框架，而我们的项目不太好做成一个单页的项目（加载时间太长，跳转过快等等）。所以我们着手将这个框架改造成可以生成多页应用。网上有许多的多页面框架，经过了各种踩坑阶段，排除了不少网上的错误实现，我们终于找到了一个合适的Vue项目目录结构和Webpack打包的配置方法。

ESLint：从弃用到重拾

一开始，我十分讨厌Vue框架自带的ESLint代码风格检查，因为它和我一贯写的JS的风格不太相同……后来听了老师对于我们整个项目的要求，着实感受到代码风格对于我们的项目实现也有十分重要的意义。这样我们去阅读他人的代码时，会变得十分方便，整个项目调试的时候，也会变得非常方便。

Vue单文件组件的学习

一旦开始真正编写Vue框架下的项目，单文件组件这一新的模式必然是躲不开的。父子组件间的通信，在单文件组件的实现中至关重要，组件该如何在一个网页上应用，我们都必须从头开始学习。这之中我们阅读了Vue的官方文档和很多他人的实例代码，终于明白了如何应用组件，如何使用组件。

ElementUI组件库

我们的Vue项目不可能从头开始写我们的一个个组件，于是我们选用了目前应用最多的ElementUI组件库来帮助我们美化我们的页面。在熟悉使用Element组件的同时，我们也渐渐熟悉了Vue的语法和使用形式。目前，我们已经基本摆脱了四处乱撞的尝试模式，已经可以在自己的理解下写一个个前端页面了。

GET/POST时Django的CSRF检查

这个是困扰我们很长一段时间的一个问题。当我们弃用Django的template+views来绘制和重定向页面时，我们必然需要采用GET和POST请求来完成前后端的数据通信。但是Django有一个防范跨域访问的方式——CSRFToken检查，这样我们普通的POST一个表单给Django，会被无情地拒绝。。看网上很多的说法说只要在表单中加上CSRFToken这一项就可以解决这个问题，但各种尝试还是会出错。所以我们就放弃了去解决这个问题，直接关掉了Django的CSRF检查。

到这里，前端从开始到中期遇到的所有问题大概就说完了。下面谈谈我对于我们中期的实现情况的一些感受吧：

1. 我们抱着学习的心态来接触Vue框架和前端工程化这些东西，说实话有很大的学习成本，相比熟悉的引入一个JQuery.js上手起来慢了许多
2. 大学生竞赛平台的工作量还是很大的……要考虑的东西太多了，能付出的时间又有限，感觉可能最终完成的不太好
3. 后端的功能接口还是要先想好，实现好……感觉之前没有想太好的地方给前后端都造成了麻烦
4. 进度还是有一些慢……不过绝大部分原因是之前各种其他的作业太多了。。。后面估计其他的事情也不会少，看来需要提前安排好进度了

最后我们对于前端的要求可能不能太高，不过我们还是想要尽力去完成，给我们的用户一个简洁明了的交互界面。如果谈一点希望的话，希望我们人能更多点吧。。