演示视频：B站传送门

一：简介

整体项目并不复杂，相对而言比较容易上手，采用的技术栈有：

Vue 的基本使用以及 Vue-Route
Element-UI 样式框架
Axios
Echarts （绘制数据图表）
MySQL

项目整体样式为：
在这里插入图片描述文件结构：
项目运行依赖：

"dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "echarts": "^4.1.0",
    "element-ui": "^2.4.5",
    "less": "^3.9.0",
    "nprogress": "^0.2.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vue-table-with-tree-grid": "^0.2.4"
  },

二：基本功能介绍

2.1、表单的双向绑定和数据验证

在表单头部加入model和rules属性后，在script中绑定数据项，再在元素中使用v-model即可双向绑定数据，rules同理，添加规则，再在元素追加prop属性与之绑定。这部分在注册，修改功能这块用的频繁，后续可复用该类代码。
在这里插入图片描述

2.2、路由导航守卫控制访问权限

用户成功登陆服务器会发放token,对于一些只有登陆成功后才能看的页面，不能通过地址栏访问到相关页面

// 挂载路由导航守卫
// ()里有三个参数，第一个为要访问的路径，第二个为从哪来，第三个为一个函数表示放行（'/home'）
router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

除了登陆界面不需要token，后续的所有接口都要借用token进行使用，在 main.js 入口文件调用

axios.interceptors.request.use(config => {
  // Authorization->授权
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

这里的NProgress插件的进度条显示功能忽略，这里的请求拦截思路是：

axios调用其中的intercepts属性，里面有个request成员（请求拦截器），当调用时会调用use函数为拦截器挂载一个回调函数，你向服务器发送了一个axios数据请求，那么在发送期间会优先调用这个回调函数，return返回的是预处理结果，表示已对请求头做了预处理，这样的请求才能发到服务器

此外，这里说下路由重定向，一般用在显示默认页面这块，思路大体就是：比如登陆到home页面，需要默认显示welcome页面，这时就需要新建W页面，在路由表里导入W文件，在H规则下下设置children路由，重定向到W页面，最后在H文件设置路由占位符<router-view>就行。

2.3、添加用户

整体过程大致为：首先需要通过点击事件触发添加函数，接着validate的预校验，通过规则后发起post请求，传递之前设置好的用户对象，接着关闭弹窗，重新加载数据
在这里插入图片描述此外，再添加用户时如果点击了取消，需要调用 ref (引用)的 addFormRef.resetFields() 方法重置用到重置消除用户填写信息。

2.4、修改用户

更新操作大致和添加相同，为修改按钮添加弹窗和验证，方法大致和上述相同
在这里插入图片描述

2.5、删除用户

整体过程大致为：

利用element的MessageBox 弹框，在elment-ui中全局挂载confirm方法；
在点击删除时传递用户id过去；
复制elementUI中的确认弹框代码，根据用户选择决定是否删除

在这里插入图片描述

2.5、查找用户

在获取数据时发送 get 请求，通过返回的数据成员 data.users 赋值给数据对象，在页面中重新加载数据即可。

const { data: res } = await this.$http.get('users', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取用户列表失败！')
      }
      this.userlist = res.data.users
      this.total = res.data.total
      console.log(res)
    }