米修在线后台管理系统

一.后台管理系统介绍

网站后台管理系统只要是用于对网站前台的信息管理。如文字，图片，影音，和其他日常使用文件的发布，更新，删除，查找等操作，同时也包括订单信息，资金信息的统计和管理，简单来说就是对网站数据库和文件的快速操作和管理系统，以使得前台内容能够得到及时的更新于调整。

二. 内容概述：

系统中存在两种管理员：系统管理员以及普通员工。

系统管理员拥有最高管理权限，可进入后台管理，对系统进行最全面的配置及管理，包括系统设置、账户管理、系统管理和文档管理等各个方面的管理。

而普通员工也可以进入系统后台，但他仅能进行管辖组织及子组织范围内的管理。对组织系统进行外观以及添加数据等…

本项目为模拟企业后台管理系统，拥有用户登录，用户注册，用户权限以及权限等管理功能，以后台为基础，风格简单而统一。

开发者：wang_j_j

负责模块：系统的页面开发与实现

所用技术:Vue2.x+Vuex+Node.js+Axios+element+router+props+$emit+Webapack

三.基本配置：

1.下载vue脚手架

npm i @vue/cli -g

检测是否安装成功
vue -V

存放项目的目录下，打开命令行

vue create 项目名称

第一步:选择你需要安装的版本 Vue2、Vue3、自定义安装

第二步:如果是Vue2、Vue3则没有这一步，自定义安装选择需要用的的插件

第三步：如果是Vue2、Vue3则没有这一步，选择安装Vue2.x还是Vue3.x

第四步：选择是否使用history模式，y为是n为否

第五步：配置保存到哪里选择好后回车即可

第六步：是否需要将你刚刚的配置记录保存吗？不需要的话选择n

cd 项目名称 //进入项目目录

npm run serve 启动项目

复制生成的地址在浏览器上打开

node_modules 第三方包存放目录
public 静态资源
favicon.icon 一般项目使用favicon.ico都是在index.html头部head中加入代码
index.html 唯一的一个页面
package.json 所有的依赖在该文件下有记录
vue.config.js 项目配置文件

src

assets 存放静态资源
components 公共组件
router 路由
store vuex状态管理仓库
views 视图组件
App.vue 根组件所有页面上要显示的内容都要放到根组件中
main.js 入口文件

2.配置路由

npm i vue-router

在根目录下创建文件夹router，在router文件夹下创建index.js文件

在index.js文件中写入如下代码，

实现创建一个路由器
在跟目录下创建view或者page文件夹，创建路由（vue文件）

在main.js中注册路由

添加路由组件分为3个步骤:

1,在views定义路由组件

2,在router中映射成路由

3,在调用组件中写跳转和显示

结束总结:

①.路由在index.js中配置好子路由时记得导出。
②子路由:to中可以写{name：‘子路由名’}或者{path：‘子路由路径’}，写路由名字不易出错

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效，所以我们需要使用路由懒加载。

2.路由守卫

在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权将登录成功后的 token令牌保存到 localStorage中，通过路由守卫 beforeEach这个钩⼦函数判断⽤户是否要访问登录⻚⾯，如果访问登录⻚⾯则调⽤next函数放⾏，如果访问的不是登录⻚⾯就需要判断 localStorage中是否保存了token如果保存了 token ，则调⽤next函数放⾏，反之就跳转到登录⻚⾯。

3.封装axios，以及二次封装axios

api统一管理，不管接口有多少，所有的接口都可以非常清晰，容易维护。
通常来说在项目开发中有三个阶段：
1、开发环境
2、测试环境
3、生产环境

不同环境访问接口的域名是不同的，直接修改域名，这就是封装请求的原因。

1.在src⽂件夹内创建⽂件夹

2.在这个⽂件夹内创建request.js⽂件

3.在request.js内引⼊axios

4.使⽤axios.create⽅法创建axios的实例,在axios.create⽅法⾥⾯可以配置请求的公共地址和超时时间以及其他的⼀些配置

5.在创建请求拦截器和响应拦截器

6.在请求拦截器⾥⾯可以获取vuex的token,并通过config.header.token = vuex的token,将token发送给后台

7.在请求拦截器⾥⾯我们配置loading加载

8.在响应拦截器⾥⾯我们可以结束loading加载以及token的过期处理,以及错误响应信息的处理

9.最后通过export default导出axios的实例对象

当输入用户名及密码，登录成功后，后台会返回一个token，在之后发送的请求都要带上这个token，因为后台设置了拦截，如果token一致，则允许访问，否则请求不成功。

封装api.js接口

4.本地跨域

本地跨域是通过在vue.config.js⽂件⾥⾯的devServer属性⾥⾯的proxy属性⾥⾯配置,⼀共配置三个属性,分别是代理名称代理地址开启跨域重写路径

线上跨域是在nginx.conf⽂件⾥⾯配置, 代理名称是通过location 代理名称。proxy_pass 代理地址

四.功能实现：

1.登录页面

调用api中封装好的方法

post请求一般是去提交数据安全性相对比get请求高高，

布局登录的样式及表单校验规则

调用登录接口，传递用户名和密码，登陆成功后，后端返回token值

并将token解析（jwt_code）后存储到本地，防止页面刷新丢失

然后将token再存储到vuex里，方便其他页面调用

提示登陆成功，跳转页面到首页

下载element-ui

npm i element-ui -S

在main.js中引入

调用element-ui中的validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

rules 表单验证规则,

required是否必填，如不设置，则会根据校验规则自动生成

disabled是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效

validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

validate任一表单项被校验后触发

prop表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的,传入 Form 组件的 model 中的字段

登录成功后进行鉴权处理

一般来说鉴权我们主要针对rbac鉴权模式来进行控制主要分为：组件(页面)鉴权路由鉴权

第一种页面鉴权(组件鉴权)
用户有没有权限访问该页面，或者判断用户有没有通往该页面路由的权限

组件鉴权
用户有没有权限访问页面的时候：通过路由守卫结合后端返回的token进行页面跳转之前的拦截并查看token是否过期以及是否拥有查看该页面的权限

路由鉴权
判断用户有没有通往该页面路由（菜单，导航）的权限:
纯前端处理：在写路由表的时候我们会在每个路由下加上meta，然后在meta写入可以访问该路由或页面的角色信息，然后我们可以通过该met下的信息使用addrouter控制该路由的显隐
前后端配合：每次登录的时候都要从后端获取该token下的路由表，保存在vuex里面，在通过addrouter动态渲染该token下的路由或导航

第二种ui鉴权一般来说ui鉴权指的就是按钮鉴权
ui鉴权他的颗粒度很细，所以相对来说难度较大，我们可以通过统一的自定义指令来进行配置

处理ui鉴权简单的方法是：
我们可以获取token下的角色信息，用v-if处理该ui的显隐，但是这种方式的缺点也很明显，不宜与统一管理，
所有我们需要集中封装一个自定义指令，在自定义指令中集中处理鉴权的逻辑然后分发在每个需要鉴权的按钮上。

2.注册页面

调用api中封装好的方法

布局注册的样式及表单校验规则

判断密码和确认密码是否一致，调用注册接口，传递用户名，邮箱，密码等字段

提示注册成功，跳转页面到登录

 submitForma(formNamea) {this.$refs[formNamea].validate((valid) => {if (valid) {register(this.ruleForma).then((res) => {// 注册成功提示信息this.$message("注册成功");// 跳转页面this.$router.push("/login");}).catch((err) => {console.log(err, "注册失败");});} else {console.log("error submit!!", "注册按钮");return false;console.log("error submit!!", "注册按钮");return false;}});},

3.首页

调用element-ui中的Container 布局容器找到满足条件的样式布局进行引入

头部写入一个盒子里面分为两个盒子，使用弹性盒左右实现布局，左边盒子写入login图片及标题，右边定义一个下拉按钮，绑定点击事件，点击显示退出登录，并从本地存储获取token下的用户信息，显示该用户的用户名，当点击退出按钮的时候，触发绑定的点击事件实现退出功能，首先删除本地存储中的token，然后跳转到登录页面，在这里如果没有写跳转到登录页面也可以，因为在路由鉴权的时候已经鉴权过，本地没有token就会跳转到登录页面。

4.侧边栏

在components文件下新建独立封装一个组件

在相应位置引入

5.资金管理页面

该页面下只要分为添加，删除，修改，筛选(查找)，分页等功能…

第一步:获取页面数据并渲染

使用axios请求数据api接口数据，并将其渲染到此页面

get请求一般是去取获取数据（其实也可以提交，但常见的是获取数据）

get请求的数据会放在url后面，相对来说不怎么安全

在渲染的页面使用import { Getlist } from “…/http/api”;引入即可，然后通过在methods中写入请求的方法在created调用请求的这个方法，created在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

页面中使用element-ui下的表格进行接受，注意:表单的字段一定要跟接口中的字段保持一致，否则渲染不出来

日期格式需要使用slice去截取一下，会更加美观，收入跟支出建议设置两个不同的文字颜色以便区分

第二步:顶部筛选与添加

在表格的上面写一个盒子里面分为两个小盒子，分别写入筛选的两个picker时间框及开始时间和结束时间，再加一个搜索按钮，另外一个盒子写入添加按钮。最后给两个盒子使用display: flex；space-between；display: flex：使用弹性盒模型，是一种一维的布局模型（也就是说一次只能处理一个维度上的元素布局，一行或者一列）。它给flexbox的子元素之间提供了强大的空间分布和对齐能力。space-between: 弹性元素均匀分布。相邻元素间距离相等，每行第一个元素到行首的距离和每行最后一个元素到行尾的距离等于0（也就是第一个元素和行首对齐，最后一个元素和行尾对齐），在进行微调，就可以呈现如下效果：

筛选：通过v-model双向绑定，在下面return里定义，这样就可以拿到这两个picker中的数据，给筛选按钮绑定点击事件，在methods中进行定义该方法，首先判断是否为空，如果为空弹出消息提示并写入return让后面代码不在执行，时间是设置默认从当天00：00：00开始，到所查询结束的23：59：59结束，代码是用element中DateTimePicker 日期时间选择器用el-form进行的包裹，通过点击搜索按钮进行时间筛选，

添加：首先封装一个模态框通过父子通讯实现相互传递数据

父传子通过自定义属性传递数据

在父组件的子组件标签上通过v-bind绑定自定义的属性，挂载要传输的变量

在子组件中可以通过props来接收数据，props可以是数组的形式也可以是对象的形式

子传父通过在子组件中触发父组件的自定义事件来传递数据

在父组件的子组件标签上绑定自定义的事件，挂载要执行的方法

在子组件中通过$emit来触发父组件上的事件来执行父组件的方法，数据是以参数的形式进行传递的

在封装的模态框中通过element-ui中el-dialog来编写代码在里面写入表单，通过props接受父组件传递过来的数据，并对其表单进行校验，是否为空，格式是否正确等…再次点击模态框中的确认按钮调用api中添加的接口进行数据添加，添加完成通过$emit触发父组件绑定在子组件标签上自定义的方法，这里我们定义的是请求数据的方法，可以实现每次添加完成后重新请求接口，重新渲染页面

第三步：删除功能

在element-ui中找到符合的按钮，并给其绑定点击事件，在aip中封装删除的接口，引入到当前页面及可，在给删除按钮绑定点击事件，调用传递过来的删除接口实现删除功能，点击删除的时候弹出框是否确定删除框，再次点击确定按钮，实现删除功能，删除成功后再次调用请求数据接口，重新渲染页面。

第三步：编辑功能

点击编辑按钮获取当前点击的整条数据，在return定义编辑要传递的字段和可配置项，通过父传子传给封装的模态框，因为编辑和添加的弹出框都是封装在一个模态框中，所以需要在传递的字段进行定义一个变量区分添加于编辑，点击编辑按钮进行数据进行回显但模态框的表单中，然后在进行if判断查看是添加还是编辑，判断完成以后数据就会回显了，然后对想要编辑修改的表单数据进行修改，点击提交按钮，调用api中的接口，在要用的页面进行imput引入即可使用编辑功能，编辑完成以后关闭模态框，重新渲染页面即可。

第四步：分页功能

一般来说分页都是由后端进行处理，我们只需要传入相关的页码和步长去后端请求数据即可，这样的好处可以节省请求数据的时间，减少系统的压力
在个别情况其实前端也可以做分页功能，具体的做法是第一次请求数据的时候加载所有数据，利用获取的页码和步长去过滤请求过来的数据，加载到响应的页面上，这样做的缺点：由于第一次请求数据过大可能会给服务器或页面造成压力所以一般情况都是后端来处理分页功

6.个人信息页面

该页面主要从本地或vuex中获取解析过的token进行渲染该用户信息，账号，邮箱，身份信息等…

7.打包（运行后会生成dist文件夹）

npm run build

出现空白页怎么解决？

webpack() 打包是个静态文件
webpack 默认路径是‘/’ 我们需要在打包之前更改变量publicPath()为‘./’即可访问静态资源

五.总结：

以上就是项目中所有模块的功能需求。本项目，是一个后台管理系统。采用前后端分离开发，主要有资金管理，个人信息等模块，本次从零一行一行代码，其实绝大部分都是对Element UI的使用。

其中较为难点的就是页面的鉴权问题以及token问题，需要通过路由守卫结合后端返回的token进行页面跳转之前的拦截并查看token是否过期以及是否拥有查看该页面的权限。用户登录的时候获取到token 为了防止刷新页面token丢失，所以把它放到本地储存中，为了集中管理token数据将他放到vuex中，在每次请求的时候将这个token值夹杂在请求头，验证token是否有权限访问该页面，在路由守卫的前置钩子函数中判断这个token是否过期如果过期的话就让它回到登录页。一般来说呢鉴权我们主要针对rbac鉴权模式来进行控制主要分为:第一种页面鉴权(组件鉴权)用户有没有权限访问该页面，或者判断用户有没有通往该页面路由的权限又分为1.组件鉴权，用户有没有权限访问页面的时候：通过路由守卫结合后端返回的token进行页面跳转之前的拦截并查看token是否过期以及是否拥有查看该页面的权限2.路由鉴权判断用户有没有通往该页面路由（菜单，导航）的权限: ①纯前端处理：在写路由表的时候我们会在每个路由下加上meta，然后在meta写入可以访问该路由或页面的角色信息，然后我们可以通过该meta下的信息使用addrouter控制该路由的显隐②前后端配合：每次登录的时候都要从后端获取该token下的路由表，保存在vuex里面，在通过addrouter动态渲染该token下的路由或导航，第二种ui鉴权一般来说ui鉴权指的就是按钮鉴权，ui鉴权他的颗粒度很细，所以相对来说难度较大，我们可以通过统一的自定义指令来进行配置处理ui鉴权简单的方法是：我们可以获取token下的角色信息，用v-if处理该ui的显隐，但是这种方式的缺点也很明显，不宜与统一管理，所有我们需要集中封装一个自定义指令，在自定义指令中集中处理鉴权的逻辑然后分发在每个需要鉴权的按钮上。

六.项目感悟

在写项目时首先对要做项目有一个具体的思路，也就是熟悉一下，要做的项目分为哪些板块，哪些模块的内容是需要用到相似的文件、模态框等，比如公共的头部和尾部，那么就可以建立一个公共的css文件，什么时候用的时候就直接引入进去。这样就可以有效的减少代码的重复，并提高代码的利用率。并且整体上给人一种条目清晰的感觉。要有良好的代码习惯，比如每写一个模态框都要进行注释，方便后期维护不必要的麻烦。虽说这个问题不会影响程序的执行，但一个良好的习惯往往会带来无尽的收益，同时也能体现写项目的严谨与认真。

常用插件：

前端处理文件流（下载，上传）：https://blog.csdn.net/s1012544671/article/details/123641320

前端实现文件的断点续传：https://www.cnblogs.com/imwtr/p/5957391.html

Vue图片预览插件viewerjs：http://www.bjpowernode.com/hot/1904.html

vue视频播放插件vue-video-player的具体使用方法：https://www.jb51.net/article/173816.htm

Vue - 音频播放器插件（vue-aplayer）：https://blog.csdn.net/Jie_1997/article/details/110484614

使用xlsx插件把table转成excel文件并下载：https://wenku.baidu.com/view/3fbfe44e26c52cc58bd63186bceb19e8b8f6ecbb.html

yarn的安装和使用:https://blog.csdn.net/qq_39696115/article/details/121687777

vue通过jwt-decode解析token获取需要的数据(学习篇):https://blog.csdn.net/skyblue_afan/article/details/121850493?ops_request_misc=&request_id=&biz_id=102&utm_term=vuejwt%E6%8F%92%E4%BB%B6%E7%9A%84%E4%B8%8B%E8%BD%BD%E5%8F%8A%E4%BD%BF%E7%94%A8&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-1-121850493.142