项目口语化描述

后台管理系统项目口语化

本人参与的一个项目是人力资源管理后台系统，该系统所拥有的功能包括权限管理、员工管理、部门管理、权限管理等，可以通过该系统进行更好的员工信息管理以及维护，本人负责的模块包括权限路由的分配，部门管理，权限管理，员工管理。静态结构主要用了 Element-ui 组件进行编写，通过 Vue-router 进行页面之间的相互跳转，在各个管理的页面引入相对应的接口函数，请求并保存数据，然后进行渲染。

权限路由的分配

通过使用 Vue-router 进行嵌套式路由功能，展示对应的视图内容，这个功能是与同事合作完成的，设置好每个页面的路由，并且通过 router.beforeEach() 配置路由的前置守卫进行登录拦截的控制，然后设置白名单，根据vuex中的token判断用户是否登录，如果有token，说明登录了，直接通过next放行，如果没有token，判断to的路径是否在白名单中，如果在白名单中，可以直接放行， 如果不在白名单中且没有token，跳转到登录页，解决了主页 token 的访问权限处理问题。

路由懒加载

懒加载的目的是为了优化打包问题，从而降低页面加载的压力，优化用户的体验，需要跳转到要用的页面的时候在对该页面进行加载，这样大大提高了效率 。 这种方法则是使用懒加载方式，是 ES6 方式的懒加载，还有vue异步组件加载

部门管理

部门管理部分是要通过 element ui 中的树形组件来渲染，这是其中的一个难点，利用递归算法封装一个专门将列表型的数据，转换成树形结构的方法，并结合 Tree 树形控件行组织架构 的模块渲染，具体来说就是把一个列表的数据转成树形结构的数据，这是通过部门的 pid 来进行确定的。最后使用 element-ui 的 Tree 组件来进行渲染结构。

权限管理

权限管理则需要用到 RBAC 概念，给用户分配角色，给角色分配权限，在前置导航守卫中，判断用户是否登录，如果有token，发送请求获取到了用户的权限信息，并且存储在vuex，用 addRoutes 动态添加路由从而控制页面访问权，根据vuex的数据动态渲染菜单，利用根据 vuex 的个人信息的权限点信息进行 v-if 处理按钮操作权，封装成一个通用指令，这样员工就拥有了该角色对应的权限，该员工登录后，在用户信息就会有一个权限标识列表

员工管理

员工管理主要是对于员工的一些增删改查的操作，这些都是比较简单的逻辑，都是发送带 token 的请求到后端进行数据的增加、删除、修改、数据的获取，其中获取员工的头像是通过单独封装一个图片上传的组件，通过腾讯云文档，将项目和腾讯云储存的存储桶的名字和存储桶所在的地域进行关联，实现步骤其实就是先把从后台拿到的图片上传到腾讯云后会返回一个fileList，也就是管理图片的数组，这个数组里面有个url就是图片的途径地址，再用这个地址把图片渲染到页面中，最后获得员工的头像

项目优化&代码编写过程

增加员工、修改员工信息弹窗还有图片上传的组件封装， ESlint 的代码格式化，编写代码时更加严谨，运用 Git 管理 多人共同开发

小程序项目口语化

登录流程

• 通过 wx.login() 获取到用户的code判断用户是否授权读取用户信息，调用wx.getUserInfo 读取用户数据
• 由于小程序后台授权域名无法授权微信的域名，所以需要自身后端调用微信服务器获取用户信息
• 通过 wx.request() 方法请求业务方服务器，后端把 appid , appsecret 和 code 一起发送到微信服务器。 appid 和 appsecret 都是微信提供的，可以在管理员后台找到
• 微信服务器返回了 openid 及本次登录的会话密钥 session_key
• 后端从数据库中查找 openid ，如果没有查到记录，说明该用户没有注册，如果有记录，则继续往下走
• session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输
• 然后生成 session并返回给小程序
• 小程序把 session 存到 storage 里面
• 下次请求时，先从 storage 里面读取，然后带给服务端
• 服务端对比 session 对应的记录，然后校验有效期

支付流程

• 打开某小程序，点击直接下单
• wx.login获取用户临时登录凭证code，发送到后端服务器换取openId
• 在下单时，小程序需要将购买的商品Id，商品数量，以及用户的openId传送到服务器
• 服务器在接收到商品Id、商品数量、openId后，生成服务期订单数据，同时经过一定的签名算法，向微信支付发送请求，获取预付单信息(prepay_id)，同时将获取的数据再次进行相应规则的签名，向小程序端响应必要的信息
• 小程序端在获取对应的参数后，调用wx.requestPayment()发起微信支付，唤醒支付工作台，进行支付
• 接下来的一些列操作都是由用户来操作的包括了微信支付密码，指纹等验证，确认支付之后执行鉴权调起支付
• 鉴权调起支付：在微信后台进行鉴权，微信后台直接返回给前端支付的结果，前端收到返回数据后对支付结果进行展示
• 推送支付结果：微信后台在给前端返回支付的结果后，也会向后台也返回一个支付结果，后台通过这个支付结果来更新订单的状态