9.1软工集市项目复盘
项目介绍
SSE_MARKET，也称为软工集市。SSE_MARKET是一个跨校区的学院内部交流平台，主要以论坛的形式为软工师生提供自由交流和信息汇集的半匿名空间，可在上面看帖、搜索、发帖、评论、回复、点赞和收藏等，提供宽松、平等的交流氛围，致力于消除学院内部的信息差以及促进文化传承。
软工集市是“软工人定义的世界”，这个一方面是指软工集市平台本身由学院的同学自主开发运营，另一方面是指平台上的信息也是由学院师生创造或者搬运的。
软工集市主要由21级本科生组成的SSE_MARKET小组负责设计、开发、部署和维护，它脱胎于软件中级实训课，并在学院的支持下逐步发展。现注册加入师生约400人。
在技术上，软工集市前端采用Vue2框架，后端采用Golang Gin框架。前端又分为电脑端和手机端，是分开开发的。
项目难题及解决
- 技术和经验不足导致代码写得很烂。
工程化很随意。npm和yarn混合使用。elementUI和bootstrap混合使用。
缺少组件化。比如，帖子列表，在主页、发帖历史和帖子收藏重复使用，但是没有组件化。比如，页面详情，整个页面直接写在一个Vue文件中(一共一千二百多行)，单是template就有480行，没有进行组件化。
请求发送不统一。我们统一封装了axios，不过有些漏网之鱼没用上统一的axio。比如elementUI的图片上传。此外，有些axios的封装其实不太合理，或者过于冗余，像用户登录这些确实有必要加多一层Promise做处理，但是像返回页面详情、评论列表这些只是获取数据在页面展示的，其实并不需要中间再加一层处理。
缺乏样式管理。有样式污染问题，而且不小。
代码不优雅。一些重复的元素直接靠增加template和method来实现，比如导航栏。
没有深入正确使用Vue框架。只是简单地“模板填充”。没有注意到一些细致的问题，比如页面详情的v-for加载评论列表和回复列表的时候把key设为index，这会可能导致一些问题(我们允许用户发表和删除评论)。vue中使用v-for时为什么不能用index作为key？。
解决方案：让新成员用Vue3把前端重构/重写。
- 布局****兼容性 问题。 电脑端布局一开始设计得不好，在某些比例、缩放和分辨率的显示下不太美观，比如一些元素会出现重叠和变位，比如出现横向滚动条不方便查看。
要彻底解决这个问题要搞清楚三个方面。一是HTML和CSS本身的布局排版。二是设备像素、设备独立像素(逻辑像素)和CSS像素。三是布局视口、视觉视口和理想视口。
一开始是强制调缩放，调整body的zoom，后来发现会引发一些问题，比如有些用户确实需要放大，element的modal遮罩层会出问题。
后面取消强制缩放。优化了一下布局暂时缓解一下。
正如问题一提到的，因为样式写得有点杂乱，不好维护，目前其实没有响应式。
- 项目入口问题。 这个其实是目前亟待解决的一个问题，我们希望能够用户方便地进入软工集市，而且能够及时收到软工集市的通知。
目前嵌入钉钉。
解决方案：1.建立微信公众号。2.建立前端应用。