这次大作业是Web应用系统开发技术与实践的大作业，有很多选题可以选择，我们小组选择的是企业级论坛系统。本来老师要求的是使用Java + Spring（或者再加一个Spring Boot）用MVC框架实现，需求很简单，就是基本你能想到的论坛该有的功能，其他需求的表述老师自己可能都不知道。我们准备模仿百度贴吧和Discuz。

后来我们觉得JSP页面开发起来有些麻烦，就改用了前后端分离的写法，前端使用Vue 3开发，后端使用Spring加一些后端的东西来开发接口，接口使用Restful API规范。前后端分离的写法最大的好处就是它可以让前后端分别注重自己开发的部分，不需要后端根据前端页面进行修改，不需要前端在页面中进行逻辑操作，并且JSTL的自定义标签和Vue的自定义组件我认为在一定程度上其实是一样的，这种方式的缺点也很明显，其他开发者想对这套系统添加新功能时不好开发补丁插件（因为要同时修改前端和后端的东西）。例如Wordpress就是前后不分离的程序（当然Wordpress提供的Restful API接口，想的话还是可以分离的），因此想要添加功能仅需要安装插件就行，当然也要得益于Wordpress提供了非常多的钩子。

我负责的是前端的部分，项目使用vue-cli创建，使用Element Plus；API接口文档及调试使用Apifox。

一、 最大的问题：时间分配

大概是11月初布置的大作业，原定于11月28日提交，在DDL前，依次分布着：网络与分布计算考试（11月14日）、软件测试考试（11月19日）、算法分析与设计考试（11月29日），还有以上课程实验课的作业。最后因为一些同学的请求，实验截止时间改为了12月5日。

因为各种各样的事情交加，后端根据基本初步完成了API的编写，但是我们前端一直没能给出原型图和初稿，导致了后期很多字段不匹配的问题，一定程度拖延了进度。

二、 组内合作问题

在项目创建之初，我就在Gitee仓库中初始化了项目，使用Vue3，但是中间另一个和我合作的同学（没有系统学习过前端），自己新建了一个项目，明明在一开始有教过Git基本操作，npm基本操作和使用，想不明白为什么要新建一个项目，如果还是Vue3的也好，她的新项目是 Vue2 + Element UI，导致后期她的代码push不到仓库，又整合不起来，花了很长时间重构。虽然说是初学，但是也应该在已有仓库项目上操作啊，如果安装依赖包的时候安装不上也应该及时来问啊，为什么还要新建一个项目，导致后面版本和以来都不一样了，做了很多无用功。（Element UI在Vue3中为Element Plus，语法和迁移都有一定困难）。其实她还自己按照网上的方法封装了axios请求和Vuex的store，但是本来Vue全局就已经导入了axios并配置了默认Authorization的Header，并且store的结构也是网上的，而不是项目的user结构。

在最开始的时候分工也没有分配好任务，最开始分配给那个同学写某一个组件，后来没有了音讯，没有做好项目管理，没有及时跟进进度。后来那个同学没有写那个组件，我也把前台静态页面写完了，好在她写的管理员后台，没有冲突（假设整合不了不算冲突）。

三、 接口问题

3.1 接口命名

在完成前端的设计稿、绑接口之前，根本没有注意过接口内容，等到绑接口的时候才知道接口的命名有多奇怪。例如帖子叫blog而不是post，板块叫tag而不是forum（并且也没有预想中的板块头像、板块描述，当然这是因为UI设计图没有给到），获取所有一级二级评论叫做 ‘/firstLevel’, ‘/secondLevel’，而不是’/comment’, ‘/subcomment’，诸如此类。虽然说影响不大，但是主要是看起来别扭。

3.2 接口请求参数

以下是一个样例：

明明是一个POST请求，参数却放到了query里（就是url中?后面的部分），如果不仔细看可能就直接放到POST body里了，感觉很反常。

更严重的是下面这张图：

不同注册信息直接放到了不同位置，既有query又有body，非常难搞。（而且password还在query中）

另外还需要注意的一点：如果参数规定格式是application/x-www-form-urlencoded，则应该使用qs.stringify(data)对参数进行序列化，否则Spring收到的对象请求对象就会是null。

import qs from 'qs'
// ...
this.$axios.post('/user/login',qs.stringify({email: email, password: password})).then(resp => /*...*/)

3.3 接口返回值问题

最开始与后端沟通的时候，本来预想的是每个一级评论中包含2条二级评论，以防止一级评论获取后再重复发送请求再获取二级评论，等待用户点击显示更多时再去获取，这是我预想的结构

data: { // 返回的一级评论结构
  // ...
  subComment: [{}, {}]
}

后端成功的理解成了：

data: [
  {}, // 获取的一级评论
  {}, // 第一条二级评论
  {}, // 第二条二级评论
]

因为的的组件只能接受一个参数，所以多余的两条二级评论直接废弃了。

<PostReply :replyObject="data[0]" />

然后后来突然什么时候接口给改了，数组没了，页面突然崩了，就是那个我好好的什么都没干就崩了，怎么回事呢的那种感觉，一检查发现data变成一个对象了，要把绑定内容从data[0]改成data。所以后端改接口的时候也要及时说。

还有一个地方，就是返回文章列表的时候，我们感觉常识应该是返回文章对象数组，所以没有说，也就是这种格式：

data: [{}, {}, {}, {}]

结果后端成功给我们返回成了对象：

data: {
  "Blog1": {},
  "Blog2": {},
  // ...
}

我使用的时原生v-for，对这种还是支持的，但是写管理员页面的同学使用Element Plus 的 el-table就不是很支持了，导致页面频频出错，后来只得让后端去改接口返回值，才解决问题。

<el-table :data="data"> <!-- 这里的data只能是数组 -->
  <!-- ... -->
</el-table>

四、 总结

最终在赶DDL中，我们成功在12月5日23:56 提交作业，虽然还有很多bug没有修复……

在这里还是总结以下出现的问题：

1. 前期一定要定好需求文档、界面原型图和接口文档
2. 一定要做好项目管理并跟踪进度，最好使用一些DevOps平台监工
3. 组内合作一定要明确，并且流程要清楚。

今晚就先写到这吧，希望本片文章可以帮助一些团队避免一些开发中的问题。项目成果展示之后再贴在这里。

代码时间统计：（截止2021年12月6日）

项目成果展示：