一、项目简介：
项目功能：针对目前高龄单身、离异等人群，开辟第二世界空间，进行撮合、匹配，通过会员机 制可以更高效地匹配成功。
负责内容：负责总领；使用 Vue-cli3 搭建前端框架、Express 搭建后端框架；完成主要前端页面 动效；利用聚合 API 实现短信验证功能、百度 API 实现身份认证；完成后台主要功能接口；用户 登录使用 JWT 加密、配置路由守卫。
二、项目背景：
首先这个项目是我大四上做的一个项目。当初立项开始选的咖啡线上购买的网站，由于受到老师批评说功能太简单！！！不得已带领着小部队重新选型，从确定开始到最后项目答辩过程，全程都是我们自己在不断学习，不断完善的。由于我们没有一定的设计能力，我们便基于彼爱网站进行婚恋网站的改造。
可能大家觉得很简单，但是对于大学生的我而言，虽然之前也写过项目，但是都只是一小模块而已，但这次确是自己真正接触，带领小部队实现一个网站的开始。
三、实践过程：
运用技术
Vue、Vue-cli3 搭建项目、Bootstrap、MySQL、Node.js(Express)、 图片上传、身份认证等技术、采用 token 实现鉴权机制。
网站展示
上图是我们项目的首页，我们研究过国内外的婚恋网站，发现他们的网站内容多而且页面都比较丑。起初做这个项目的意图就是，把婚恋网站做好看。前端就是负责漂亮！！！
在页面美化的基础上，再增加复杂功能。
功能模块：
网站权限：
三类用户中，普通用户基于游客权限之上在增加查看指定ID空间动态(有限制地根据亲密度展示信息)、筛选对象(有条件限制)、搜索ID(有次数限制)、商城购买、会员积分充值等七大权限；
会员用户则是在普通用户的基础上又增加根据会员等级对相应商品打折、无限制条件筛选对象、筛选匹配对象根据会员等级展示对方信息等五大权限功能。
下图是会员搜索展示：
困难：
- 动画效果
在实现头部导航栏菜单下落时，使用的animate计算掉落时间时，需要一个个计算。
@keyframes fushang { 0% { transform: translateY(-300px); -webkit-transform: translateY(-300px); opacity: 0; } 10% { opacity: 0; } 100% { transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1; } }
使用css动画keyframes属性，实现掉落功能，然后再li上依次延迟动画时间即可。
#nav_1 { width: 90px; animation-name: fushang; animation-duration: 0.5s; } #nav_2 { width: 90px; animation-name: fushang; animation-duration: 0.75s; } ...
- 添加好友功能
在追求者和被追求者亲密度达到一定等级，即可解锁添加好友功能。点击添加好友后，后台逻辑中我是这样做的：
fri_classified表示好友分类：0代表好友，1代表关注，2代表黑名单； fri_status表示是否是好友：0代表不是，1代表是（双向好友）。 用户发送请求后，会在数据库中新建一条信息，被添加方就会收到如下图好友请求。
- 登录权限
使用bcrypt包作为加密工具，登录时,调用登录接口，记录成功后的token。
jwt.sign({ telephone: user.telephone,userId:infos[0].base_info_Id}, 'privateKey', { expiresIn: 60 * 60 }, function(err, token) { console.log(token); //注意token的固定格式“Bearer ”前缀 res.status(200).json({ msg: '登录成功！！', token: 'Bearer ' + token }) });
查看商品，必须是用户或会员才能查看，所以在非游客模式下，调用查看商品接口，并需要携带授权的jwt，否则无法浏览商品。
// 商品 router.get('/product', passport.authenticate('jwt', { session: false }), function(req, res, next) { shopController.product(req, res) });
技术难点
- 实现布局头部、侧边栏、内容大块div连带内含div实现进出动画效果；
- 通过用户完成登录使用反馈的 token 进行存储后，判断用户模式配置路由守卫；
- 使用百度 API 完成身份证，图片格式需要转换成 base64 格式，再进行调用第三方接口；
- 通过用户之间亲密度进行判断，亲密度不同显示的用户信息不同。
四、总结思考：
成长： 这个项目不仅锻炼了我的沟通能力，还锻炼我管理代码、监督项目进度作为领导者的能力。自己可以带领小组开发一个项目，锻炼统筹能力。
有待提高： 在这个项目，需要优化一下聊天功能，当时由于时间关系，并未正在实现1对1聊天。没有实现服务器部署。
自豪: 能够实现美观的页面，高效完成所需后端接口，及页面接口的调用。
作者：ClyingDeng
链接：https://juejin.cn/post/6939714615966171144
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
