个人职责
本人(组长):
1.根据编运rp原型图进行开发,完成20多个页面的开发
2.完成计时,数据统计,编写/发布/查看行程计划三个核心功能
3.完成登录,注册,修改个人资料(上传头像,修改昵称,性别,个性签名等基本信息)等基础功能
4.设计数据库,设计登录注册logo图片,编写开发情况总结性PPT,录制开发情况视频
组件树图片
logo设计图片
数据库设计
部分接口截图
客户端封装的组件
客户端部分路由截图(路由懒加载)
Cube自律空间[设开]开发进度视频:
https://reccloud.cn/u/iz7w02y?action=client-auto-login
收获和体会
1.作为本次项目的开发者,本人采用vue-cli3脚手架搭建前端框架开发客户端,采用node(egg)搭建后端框架与阿里云数据库(mysql)进行连接,完成并实现了前后端分离的一个实战性小项目,基本的功能和核心的功能都具备。
2.在开发中,本人注重对代码的优化处理:
比如把一个可以共用的抽离出来封装成一个组件,在需要的地方对组件进行引用即可。
3.在开发中,对于一些样式较为一致的,使用了for循环进行渲染,避免了代码的冗余。
4.本次开发中,本人使用了SASS预处理器进行CSS的开发。
通过查阅资料,我们知道CSS书写代码规模较大的Web应用时,容易造成选择器、层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开发,SASS提供的变量、嵌套、混合、继承等特性,让CSS的书写更加有趣与程式化。
5.对于路由的处理,我使用了懒加载,像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力。
6.对于与客户端搭配的elementUI和mintUI,如果是需要改变组件样式的话,需要加/deep/深度选择器。
通过查阅可以了解到,在vue组件中,在style设置为scoped的时候,里面在写样式对子组件是不生效的,如果想让某些样式对所以子组件都生效,可以使用 /deep/ 深度选择器。
7.对于客户端的适配问题,本人采用了flex+rem+%等布局和单位对移动端的适配问题进行了最大程度的优化。
问题和不足
1.本次完成了计时,统计数据,编辑/发布/查看行程计划三大核心功能,也实现了聊天界面中的JS交互,但是IM通讯功能没有实现,聊天的数据没有保存到数据库,因此刷新之后数据不会存在。
2.有两个地方的样式初次进去之后会有点小乱,但是刷新之后就正常。经过查阅之后,是需要在vue文件中,做样式分离:
将覆盖样式单独写在一个style标签内,原页面写在 scoped样式作用域下。但是这种方法并没有解决。
还有尝试了一种,就是在我们的入口文件main.js文件中,将css相关文件挪到较前的位置,让加载的时候优先加载样式,但是这种方法也没有解决问题。
3.本次虽然开发了二十多个界面,但是部分界面属于静态界面,没有写后端接口进行前后端的打通。
4.本次没有写视频,因为考虑到视频文件过大,存放等问题,所以没有写视频这个模块。
后期展望
经过毕设指导老师的同意,该项目具有可开发意义,所以该项目将作为毕设继续开发。
1.首页的建造城市(丢弃)和公益捐书
2.加入/参与自律计划活动,比如:早起打卡,每天背诵十个单词,每天做瑜伽十分钟等活动可以获得积分,按照要求在合理的时间上完成了任务,则积分翻倍增加。
3.在首页对接第三方接口,进行一些自律活动等进行推荐。
4.在首页显示一些好友的自律情况,好友可以设置是否公开显示自己的自律计划,选择否,则不会公开被他人所见。
5.可以将计时情况/数据统计等内容打卡或者分享给好友或者分享到朋友圈。
6.将自己的项目部署到自己的阿里云服务器,使这个项目可以通过链接让用户进行阶段性的尝试使用。