一、项目简介：

项目功用：针对目前高龄独身、离婚等人群，开辟第二世界空间，进行撮合、匹配，经过会员机 制可以更高效地匹配成功。

担任内容：担任总领；运用 Vue-cli3 建立前端结构、Express 建立后端结构；完结首要前端页面 动效；运用聚合 API 完结短信验证功用、百度 API 完结身份认证；完结后台首要功用接口；用户 登录运用 JWT 加密、配置路由护卫。

二、项目背景：

首要这个项目是我大四上做的一个项目。当初立项开端选的咖啡线上购买的网站，因为受到老师批评说功用太简略！！！不得已带领着小部队从头选型，从确认开端到最后项目辩论进程，全程都是咱们自己在不断学习，不断完善的。因为咱们没有一定的设计才能，咱们便依据彼爱网站进行婚恋网站的改造。

或许咱们觉得很简略，可是关于大学生的我而言，尽管之前也写过项目，可是都只是一小模块罢了，但这次确是自己真正触摸，带领小部队完结一个网站的开端。

三、实践进程：

运用技能

Vue、Vue-cli3 建立项目、Bootstrap、MySQL、Node.js(Express)、 图片上传、身份认证等技能、选用 token 完结鉴权机制。

网站展示

hmdh7-vtioy.gif

上图是咱们项目的首页，咱们研究过国内外的婚恋网站，发现他们的网站内容多并且页面都比较丑。起初做这个项目的目的便是，把婚恋网站做好看。前端便是担任美丽！！！

在页面美化的基础上，再增加复杂功用。

功用模块：

image.png

网站权限：

image.png
三类用户中，普通用户依据游客权限之上在增加检查指定ID空间动态(有约束地依据亲密度展示信息)、挑选目标(有条件约束)、搜索ID(有次数约束)、商城购买、会员积分充值等七大权限；
会员用户则是在普通用户的基础上又增加依据会员等级对相应产品打折、无约束条件挑选目标、挑选匹配目标依据会员等级展示对方信息等五大权限功用。

下图是会员搜索展示：
bxj8z-winx1.gif

困难：

  1. 动画作用

在完结头部导航栏菜单下落时，运用的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;
}
...
  1. 增加老友功用

在寻求者和被寻求者亲密度到达一定等级，即可解锁增加老友功用。点击增加老友后，后台逻辑中我是这样做的：

image.png
fri_classified表明老友分类：0代表老友，1代表重视，2代表黑名单；
fri_status表明是否是老友：0代表不是，1代表是（双向老友）。
用户发送恳求后，会在数据库中新建一条信息，被增加方就会收到如下图老友恳求。
image.png
删去音讯则会删去记载，同意则会修改老友状况，并增加到老友列表中。

  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谈天。没有完结服务器布置。
骄傲: 可以完结美观的页面，高效完结所需后端接口，及页面接口的调用。

源码地址：github.com/ClyingDeng/…

本文正在参加「 2021 春招闯关活动」, 点击检查 活动详情。