最近两周断断续续开发了一个内部的作业管理系统,用不成熟的产品观开发了这个系统,希望自己可以从中得到锻炼,提升自己,个人的项目贡献率在70%左右。由于是内部的作业管理系统,所以暂时不能对外开放链接,期间会贴几张图。主要从一下几个方面来介绍一下:
- 需求提出
- 进行产品分析与设计
- 选定技术架构
- 设计数据库,数据接口,前端开发同时进行
- 后期整合,部署
- 经验与教训
需求提出
之前,我们工作室内部新生上传每周课后作业都直接通过百度云,可是后来,那个公共的百度云账号历经了好几代人,时常会出现登录验证的情况,但是验证的手机号我们谁都不知道;而且,在传输一些大文件时,百度云还会有限速,没有会员的话只有200k的下载速度,也是心累。
需求有了,那这个能不能搞呢?答案是当然能。我们下设平面组,策划组和程序组,资源杠杠的。然而,emmmmm,平面组的小伙伴在忙着设计学校的banner,根本没有人来支援我们。策划的话前期提了一些需求,但毕竟没有在互联网公司锻炼过,显然产品观还有待加强。后来,我们程序的自己开ps撸了图。
产品分析与设计
通过策划和程序简单进行功能分析后,画出了简单的设计图。在设计图定稿后,大家聚在一起分析了一下设计图以及产品设计中的不足,后来发现,没有实习经验产品观念确实有待加强。逐步完善产品设计以后,又增加了对人员的后台管理系统,以及人员分级,权限控制的功能。
最后,我们决定做一个包含作业上传,下载,人员管理的一个简单的作业管理系统。
客户端方面,每周培训后,培训的人员(级别为学长学姐),会在第一时间内把本周作业上传到系统;新生进行注册,登录,查看本周的作业并下载,完成作业后上传自己的作业。培训人员随后可以查看自己最近一次上传作业后的时间段内新生上传的作业,并有下载权限作业。
管理端方面,每个组都有一个总管理员,负责管理本组的人员,编辑本组人员的信息,调整人员的级别,删除人员。
选定技术架构
技术选型主要是我负责的,毕竟之前有过全栈开发的经验和实习经验。前端主要用vue,客户端方面为了锻炼学弟学妹,组件,界面主要以手写为主,管理端页面主要采用iview框架来快速实现;后端使用express + mysql;部署方面,采用centos6.8服务器系统,使用pm2常驻后台。
大致的技术架构就是这样的。
设计数据库,数据接口,前端开发同时进行
我主要负责后端接口和数据库设计。首先设计了两个表,一个存储用户信息,一个存储文件信息;之后使用rap大致规划出关于用户和文件的接口。见下图:
基本的接口就是这样了,后端主要以此进行开发,后期根据实际情况进行微调。
前端开发部分,由于之前合作开发的伙伴较少接触vue,所以项目开始前一周让他们看了一个vue的基础视频教程进行熟悉,并把自己之前编写的一些vue代码分享给他们。正式开发的时候,每天晚上我们会一起开发,帮助他们解决vue开发中遇到的问题。
后端开发持续了5天,我每天抽出大概3-4个小时用于后端开发和指导前端开发;开发初步完成后,我自己写了简单的页面进行接口测试,测试无误后部署到工作室服务器和自己服务器上并设置了cors,方便前端远程调用。
后来,开发成员中有的接了新的项目,他原来的正在开发的项目我接收过来继续开发完善。本周末两天,集中进行后续工作的完善。
后期整合,部署
由于其他人没有后端开发,前后端调试以及服务器部署的经验,所有的活儿都堆到我这儿了。利用周六周日两天时间,最终完成了这个项目。
前端方面,由于是前后端分离,所以前端需要控制所有的页面跳转。在登录页面和主页面分别进行登录态的检验,避免已经登陆还可以停留在登录页面,以及未登录可以停留在主页面的情况。有些样式瞅着也实在别扭,就一并改了。文件上传是个大问题,试了axios的好几种方式进行文件上传,就是上传不上去,出于项目进度的考虑,就先采用了我之前测试接口时采用的jquery的ajax来提交;
管理端方面,之前的成员开发到一半被别的项目拽走了,没办法,我只能接着搞了。还缺少人员信息的编辑,删除功能,以及退出登录,修改密码没有搞,于是这些我都顺手搞完了。
在本地测试没问题了,就开始通过git往服务器端进行部署。考虑到我的服务器硬盘只有40g,故采用学校的云服务器进行部署。之前那个服务器上有部署过其它的项目,所以不能引起端口冲突,通过设置apache实现了反向代理,解决了端口冲突和访问的问题。
之后呢,在部署过程中又陆续踩了静态文件访问以及js,css资源文件链接的坑,文件下载的坑,都挺过来了。页面也能大致访问了,现在需要添加成员进行上传测试以及作业访问了。本来以为项目要这么愉快地解决了,没想到这时候遇到了最大的问题:文件上传问题。
在本地测试的时候,我用的是我自己的远程服务器,没有过多的安全设置和安全防护系统,一切都很顺利,文件上传正常。可是在学校的云服务器上就不这么乐观了。对云服务器的每一个请求,都会经过学校的安全防护系统,一旦系统觉得这个请求不符合要求,就会被waf拦截,从而无法正常发送请求。之前用ajax做post请求时,也遇到过被拦截的情况,后来用原生表单上传测试后发现是可以的,于是就观察了原生表单的请求参数对ajax的数据请求上传进行对应的修改就可以了,但是之前没有遇到过上传文件的情况,这次真得是被坑惨了。无论怎么设置进行ajax上传文件,都被waf拦截了;后来改成了form表单提交,设置了enctype,依旧被waf识别成了不安全的请求…后来也想了其它的办法,还是不行。最后决定还是部署在自己的服务器上吧,学校的waf,有时候主管的老师也说不好什么时候它会拦截请求。
最后在自己服务器上完成了部署测试,一切都没问题,等待后期的投入使用…
客户端:
管理端:
经验与教训
- 设计到复杂的系统开发,尽量自己搞服务器,不用学校的云服务器,因为你将会遇到比在一般服务器上的更多问题,而这些问题的起因你往往接触不到,找原因的话也无从查起。
- 要提前问清项目成员的近期项目情况,对于可能有项目要做的成员,尽量自己搞。
- 至于产品方面,要尽量和有产品经验的人进行设计和沟通,以保证业务流程的稳固性和可控性。这次的作业上传与下载,只是以时间为依据,如果用户在不合适的时间上传了作业,将会导致管理员看不到他本周的作业。
- 开发方面,想好在动手。这次在开发之前我尽量做到了这一点,但难免还是有想得不周到的地方,导致后期开发过程中需要重新调整之前的规划,好在是微调,不过以后还是尽可能完全想清楚想明白在动手,这样才能事半功倍。
好了,今天就到这里了,以后有开发的话再继续总结喽……