基于开源项目 vue-admin-beautiful 的业务剖析

原项目地址：vue-admin-beautiful

本文档不涉及ui 等方面修改，仅针对业务逻辑的开发，使其可以配合后端开发，减少后端开发的压力

在ui 涉及业务等方面尽量黑盒处理或者跳过

为保证不必要的异常发生，撰写文档的同时保证不修改原项目，即便有修改的地方仅为测试使用

目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── config                 # 全局配置
│   ├── colorfulIcon           # 项目所有多彩图标存放的位置
│   ├── remixIcon              # 项目所有小清新图标存放的位置
│   ├── layouts                # 全局外框
│   ├── plugins                # 部分组件export
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用utils
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   └── main.js                # 入口文件 加载组件 初始化等
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .editorconfig              # 编辑器配置
├── .stylelintrc.js            # stylelintrc配置
├── prettier.config.js         # prettier 配置
├── vue.config.js              # vue-cli 配置
└── package.json               # package.json

业务功能流程图

根据作者提供的功能图来逐步剖析业务逻辑（代码层面）

路由与权限

根据功能的示意图基本由路由守卫配置文件所设置，因此从路由守卫文件src\config\permission.js 入手

按照功能顺序逐步分解实现原理

获取令牌

从 store 引入获取角色令牌的函数

src\store\modules\user.js 文件引入 “getAccessToken” 函数

其中store的user文件定义的 state 状态树含有一个指向 '@/utils/accessToken' 的accessToken的数据属性

src\utils\accessToken.js 文件的 getAccessToken 是根据存储的位置来获取指定的数据

根据令牌获取访问该页面的权限并且拿到路由菜单列表

底层实现要结合sotre来分析，具体的实现不建议修改作者原来的设计

持有令牌并且拿到路由菜单后放行进入下一个页面

不持有令牌检查访问的路由是否处于免检白名单中

src\config\setting.config.js

<img alt="image-20210720091149139">

与后端的交互 | api的修改和自定义

api请求地址：详见 config/settting.config.js 中的 baseURL，

配置规格如下：

“ ? ” 后面配置配置开发环境

“ : ” 后面配置生成环境

使用 springboot为后端 简单测试， 来逐步剖析项目的api交互逻辑

1. 使用vue项目自带命令创建view、api、store等文件

   # 创建 view
   npm run template
   #选择创建view，填入名称会自动为您创建
   
   # 创建 api 与 mock
   npm run template
   #选择创建mock，填入名称会自动为您创建
   
   # 新增组件
   npm run template
   #选择创建components，填入名称会自动为您创建
   
   # 新增 store
   npm run template
   #选择创建vuex，填入名称会自动为您创建
   

   

   

   思路：从view页面实现某一函数，该函数调用store的方法，store方法引入api的访问接口函数，从而访问后端，并且在sotre中设计处理返回值的方法。

2. 查看配置文件（src\config\setting.config.js）是否已经修改了baseurl

     // 默认的接口地址 如果是开发环境和生产环境走vab-mock-server，当然你也可以选择自己配置成需要的接口地址
     // “ ? ” 后面配置配置开发环境
     // “ : ” 后面配置生成环境
     baseURL:
       process.env.NODE_ENV === 'development'
         ? 'vab-mock-server'
         : 'vab-mock-server',
   

   例如：修改如下所示

   baseURL:
   process.env.NODE_ENV === 'development'
       ? 'http://127.0.0.1:8099'
   	: 'http://127.0.0.1:8099',
   

3. 修改api函数

   // api例子
   
   import request from "@/utils/request";
   
   export function getList(data) {
     return request({
       url: "/table/list",
       method: "post",
       data,
     });
   }
   

   

4. 修改store函数

   store需要写好三个部分（state，commit，actions）

   如下方例子：

   // src\store\modules\myselfstoretest.js
   
   import Vue from 'vue'
   import {
     getUser,
     getLoginInfo,
     deleteLoginInfo,
   } from '../../api/myself_api_test'
   
   const state = {
     myself_api_test: [],
   }
   
   const mutations = {
     setMyselfApiTest(state, myself_api_test) {
       if (myself_api_test) {
         state.myself_api_test = myself_api_test
       } else {
         state.myself_api_test = []
       }
     },
   }
   
   const actions = {
     setMyselfApiTest({ commit }, myself_api_test) {
       commit('setMyselfApiTest', myself_api_test)
     },
   
     // 异步请求后端的方法
     async logintest({ commit }, datainfo) {
       const { _datainfo } = await getLoginInfo(datainfo)
       if (_datainfo) {
         commit('setMyselfApiTest', _datainfo)
         Vue.prototype.$baseNotify(`欢迎登录`)
       } else {
         Vue.prototype.$baseMessage(`登录接口异常，未正确返回`, 'error')
       }
     },
   }
   
   export default {
     state,
     mutations,
     actions,
   }
   

   逐步分析开始：

   1. 引入必要的方法

      

   2. 定义所需要的状态

      

   3. 定义actions方法，这里的方法主要负责异步访问api，和提交commit等功能

      

   4. 修改commit方法。commit方法是用来改变state状态的，这也是commit和actions的区别。并且从view发布过来的任务都是用actions接收

      

   5. 至此store的三个重要部分修改完毕，接下来可以从view页面定义一些方法来对store发布任务从而实现状态数的改变等操作。

5. 开始修改view页面

   view页面对发布store的行动是十分多变的。

   触发方式可以有非常多，由开发者思考来做更好的处理

   以下为最简单的一个必要步骤讲解

   // 这是触发store的actions的代码，但是这段代码应该是嵌入在其他的js函数中。作为其他函数功能中的一部分（发布store行动的一部分，也可以说是修改状态数或者修改存储数据的一部分）
   
   this.$store
   	.dispatch('myselfstoretest/logintest', this.datainfo)
   	.then(() => {
   		this.datainfo['userid'] = '200'
   	   })
   	 .catch(() => {
           this.loading = false
          })
   

   

6. 编写后端对应接口

   此篇蚊帐为前端的模板剖析将不深入分析后端实现

   可以参考模板中的mock来编写后端接口

   // 后端返回 JSON 数据的约定
   
   {
     "code": 200,//成功的状态码
     "msg": "success",//提示信息
     "totalCount": 238,//总条数（表格中用到）
     "data": [{}，{}，{}]//返回数据
   }
   

7. 测试

   声明：

   1. 前端仅实现一个按钮
   2. 后端仅实现一个post请求
   3. 功能仅仅是测试以上修改是否有效
   4. 具体思路为，页面展示了一个数据，在点击按钮之后，前端会发生post请求到后端。后端接受请求后将发送一个message给前端。前端成功接受则修改页面所展示的数据。

   1. 点击按钮前

      

      清空前后端控制台

   2. 点击按钮

      后端收到前端的post请求

      使用 @RequestBody 接受post所携带的参数

      

      

      前端接受到后端反馈后显示如下（与上方格式相对应）：

      code 200 才能让前端正确接收

      data 携带后端所给的数据

      msg 是后端给前端的一些信息提示

      

      然后页面改变

      

      至此前后端交互成功。

Echarts图表的修改和使用

各种页面的配置零散记录——layout部分

去除右边的“ 拷贝源码”

注释 “src\layouts\components\VabThemeBar\index.vue”的html代码

设置头像按钮选项列表

修改“src\layouts\components\VabAvatar\index.vue”文件的html代码

删除右边github图标链接

注释“src\layouts\components\VabAppMain\index.vue”的“”代码

修改路由标题

修改"src\config\setting.config.js"的title选项

修改加载页面名称

修改主页面前的附赠标题

注释“src\layouts\index.vue”的两处“”