Vue项目功能模块的业务逻辑

一.什么是业务逻辑

我们可以先简单理解一下业务逻辑。不同的项目有不同的功能，不同的功能需要不同的实现，实现这些核心功能的代码就叫业务逻辑。所以说业务逻辑是指一个实体单元为了向另一个实体单元提供服务，应该具备的规则与流程。

二.Vue项目中的模块业务

1. 权限管理功能模块的业务逻辑

1. 首先是页面框架。明确这个权限管理模块分为三个页面，分别是员工管理，角色管理，菜单管理。
   (1)实现员工管理页面
   01 获取员工的数据（其中有员工列表和搜索框），定义一个获取员工列表以及删除员工管理的api方法，可以多次调用
   02 渲染员工管理页面的数据
   其中user_group 对应的是角色
   (2)实现角色管理页面
   01 定义角色管理的api
   02 定义角色管理的路由
   03 渲染角色
   permission 对应的该角色的权限
   

   (3)实现菜单管理页面
   01 定义菜单管理的api
   02 定义菜单管理的路由
   03 渲染菜单
   其中id 与角色的permission对应

2. 菜单的渲染是如何实现的
   01 用户登录，获取token
   02 请求用户的菜单（带上token）
   03 存储在vuex中存储菜单
   04 admin页面根据vuex中store的menus来动态的渲染菜单

3. 动态路由（实现了动态路由，也就实现动态权限菜单)
   01 获取后端给到菜单信息
   02 把菜单映射为路由配置
   03 通过router.addRoute() 动态添加路由

4. 如何动态的把菜单，路由，角色联动(重要）
   01 编辑员工时候，能够指定不同的角色

02 编辑角色时候,可以给每个角色不同的菜单与权限

03 对所有的菜单进行增删改查

04 用户登录时候
(1)后端通过token来识别当前用户拿到用的角色,通过角色拿到用户的权限与菜单
(2)前端把菜单存储在vuex里面并渲染出来
(3)前端根据菜单通过addRoute方法动态的更新路由

2. 订单管理模块的业务逻辑（子菜单无限分类）

订单管理分为订单列表，订单设置，退款申请等，他与上一个的不同就是，他的侧边栏是无限分类的，可以无限点开，点击一项展开一项。下图就是一个子菜单无限分类的简单案例。

1. 将菜单存储在vuex
   01 定义permission权限模块，里面设置api等方法
   02 在adminVue获取菜单
   03 在侧边栏渲染菜单
2. 新创建一个subMenu组件，形成递归嵌套。然后在subMenu组件引用subMenu实现无限分类
3. 根据用户自动切换菜单
   服务器是根据用户传递的token判断当前用户的

三. 实现上述业务逻辑的代码

1. 定义方法的api

// 导入request
import request from '@/utils/request.js'
// 导出登录方法
export function GetStaffList(data){
   
    return request.get("/api/user",{
   params:data})
}
export function DelStaff(id){
   
    return request.delete("/api/user/"+id)
}

// 导出获取用户组件的角色
export function GetUserGroup(data){
   
    return request.get("/api/yp/user_group",{
   params:data})
}

// 定义菜单管理的api
export function GetMenu(data){
   
    return request.get("/api/yp/permission",{
   params:data})
}

// 获取当前用户的菜单
export function GetUserMenu(data){
   
    return request.get("/api/yp/user_permission",{
   params:data})
}

2. 子菜单无限分类的组件代码

<template>
    <template v-for="item in children" :key="item.id">
            <!-- 没有子菜单就是菜单项 -->
            <el-sub-menu v-if="item.children" :index="item.path">
                <template #title>                    
                    <span>{
   {
   item.name}}</span