米修后台管理系统
米修后台管理系统
一 项目介绍
二 用到的技术
三 项目主要模块划分
四 项目的基本配置
1.路由
2.路由守卫
3封装axios
4 封装api
5 解决跨域
五 项目的开发流程
六 米修后台管理系统分为哪些模块
1 注册模块
2 登录模块
七 首页
1 首页配置
八 头部组件封装与使用
1 封装头部组件
2 使用九 左侧菜单栏渲染
十 资金管理
1布局和功能
2 渲染列表
3添加功能
4 封装模态框组件
5请求添加的接口
6删除功能
7修改功能
8筛选
9 分页功能
十一 总结
十二 项目遇到的难点
一 项目介绍
米修后台管理系统主要是从事教育这方面资金管理的，主要就是针对于购买课程的后台管理系统
二 用到的技术
本次项目一共使用到了以下六种技术
vue2+node.js+element ui+axios+router+vuex
三 项目主要模块划分
-
用户注册
-
用户登录
-
路由守卫
-
token处理
-
首页
-
资金管理+资金流水
四 项目的基本配置
1.路由
我们前端规定俗称的规矩就是
view文件夹放需要路由配置的文件，而components就是存放组件的并且所有组件的名字用驼峰式命名方式进行命名
路由配置
在配置路由的时候，我们可以使用路由懒加载
使用路由懒加载的目的
因为vue是单页面应用，我们在加载首屏的时候，他会加载全部的路由，这样就会导致首屏加载过慢，为了优化项目，可以选择路由的按需加载，解决了首屏加载过慢。
2.路由守卫
路由守卫用到了一个钩子函数beforeEach
3封装axios
-
通过node.js下载axios第三方插件
-
在src目录下创建http文件夹，在HTTP文件夹内创建request.js文件
-
在request.js里引入axios，因为我们需要配置loading加载，所以说我们还需要指定引入loading
-
用函数封装配置开始loading加载和结束loading加载
-
创建axios实例，在axios实例中配置请求得基地址，用baseUrl配置和超出时间
-
配置请求拦截器和响应拦截器，在请求拦截器里面需要携带请求头
-
在响应拦截器里面配置结束loading加载和配置token过期处理
-
最后导出这个axios实例
4 封装api
封装api是为了后期更好维护和处理接口，更加容易统一管理，也可以让组件内的代码更加工整
实现思路
在http文件夹内新创建api.js文件，引入封装好的axios，分模块导出带接口的函数
5 解决跨域
因为这个项目涉及到了跨域，所以我们应该解决跨域，首先在跟目录下创建vue.config.js文件，在里面配置代理地址，代理名称，开启跨域，重写路径等一些操作。
五 项目的开发流程
-
项目选型
-
搭建登录注册页面 权限管理 封装接口 vuex 路由配置 环境配置 配置本地代理
-
主功能页面 ：按照各个页面业务需求进行开发
-
打包
-
代码整理
六 米修后台管理系统分为哪些模块
1 注册模块
刚进入页面的时候我们进入的是登录页面，点击登录按钮，需要提示用户，如果提示的是用户名不存在的话，我们要点击注册按钮跳转到注册页面
注册页面基础布局
我们用ele进行布局，还需要配置注册页面的校验规则，然后用ele给我们提供的方法校验通过的话就请求接口，否则就不请求，请求成功后跳转到登陆页面
注册的接口
2 登录模块
1）布局
登陆页面基础的布局，然后校验表单，校验成功后，请求登录接口，向后台发送邮箱和密码内容，登录成功后跳转到index页面
2）路由守卫
登录成功后，后台返还给我们一个token，我们需要用这个token判断用户是否处于登录状态和判断token是否过期，我们还要保存到vuex中，我们会用到token下面的一些信息
首先就是路由守卫，我们会把登录成功后的token存储在localSterage中，在router文件夹下面的index.js中，newRouter实例化对象之后，我们用beaforeEach跳转路由之前进行拦截。 如果用户访问的是登录和注册页面的话就直接放行，如果用户访问的不是这两个页面的话需要判断本地存储中有没有token，如果有token择就用next放行，如果没有的话就让用户返回登录页面重新登录
3) 解析token
解析token使用第三方插件jwt-decode，在登陆的时候后台返回token 存放在本地存储，然后解析token 然后在组件中通过dispatch调用actions中的方法，在actions中通过commit配用mutations中方法，然后通过vuex分发到各个组件
4）按钮鉴权
我们把解析的token存放到了vuex中，比如说只有管理员才能进行添加删除修改搜素的操作，，我们择需要自定义指令，用directive创建个自定义指令，然后进行判断vuex中的identity！==‘管理员’的时候删除这个父节点在组件中用这个自定义指令就可以了
代码
//vuex中代码
state:{
tokenInfo:{}
},
mutations:{
SET_TOKEN_INFO(state,value){
state.tokenInfo = value
}
},
actions:{
setUser(context,value){
context.commit('SET_TOKEN_INFO',value)
}
}
//methods
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
login(this.ruleForm)
.then((res) => {
console.log(res);
const { token } = res.data;
//将token存放在本地
localStorage.setItem("eleToken", token);
//用插件jiexitoken
let decode = jwt_decode(localStorage.eleToken);
//调用actions方法
this.$store.dispatch("setUser", decode);
console.log(decode);
console.log(token);
this.$message({
message: "登陆成功！",
type: "success",
});
this.$router.push("/index");
})
.catch((err) => {
console.log(err);
});
// alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
5) 退出功能
点击退出按钮，清空存储在vuex中的token，然后在清空本地的token，跳转到登录页面
七 首页
1 首页配置
我们在src文件夹下views文件下创建index.vue，配置index.vue的路由，因为后期的维护，和代码的壮健性，我们用组件拆分，把头部和左侧菜单栏拆分成两个组件然后在index.vue里注册引入这两个组件
代码
<!-- 主页 -->
<template>
<div class="indexContainer">
//使用组件
<HeadNav/>
<LeftMenu/>
<div class="rightContainer">
<router-view></router-view>
</div>
</div>
</template>
<script>
//引入组件
import HeadNav from "../components/HeadNav.vue";
import LeftMenu from "../components/LeftMenu.vue"
export default {
name: "index",
//注册组件
components: {
HeadNav,
LeftMenu
},
};
</script>
八 头部组件封装与使用
1 封装头部组件
在src文件夹下components文件下创建headerNav组件，在index.vue引用注册使用
代码
首先就是页面基础布局
代码：
<template>
<div class="head-nav">
<el-row>
<el-col :span="6" class="logo-container">
<img src="../assets/logo.png" class="logo" alt="" />
<span class="title">蓝图在线后台管理系统</span>
</el-col>
<el-col :span="6" class="user">
<div class="userinfo">
<div class="welcome">
<p class="name comename">欢迎</p>
<p class="name avatarname">{{ user.name }}</p>
</div>
<el-dropdown @command="handleCommand" trigger="click">
<span class="el-dropdown-link">
<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="info">个人信息</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-col>
</el-row>
</div>
</template>
2 使用
在index.vue里面引入左侧菜单栏的组件和头部组件，别忘记还有个二级视图容器router-view
代码
<template>
<div class="indexContainer">
<HeadNav/>
<LeftMenu/>
<div class="rightContainer">
<router-view></router-view>
</div>
</div>
</template>
<script>
import HeadNav from "../components/HeadNav.vue";
import LeftMenu from "../components/LeftMenu.vue"
export default {
name: "index",
data() {
return {};
},
components: {
HeadNav,
LeftMenu
},
};
</script>
九 左侧菜单栏渲染
由于后端没有给我们写左侧菜单栏的接口，所以需要我们前端自己定义进行循环判断，因为涉及到了路由跳转，所以在定义的时候就应该定义路由跳转的路径然后渲染页面
代码实现：
<!-- 左侧导航 -->
<template>
<el-row class="menu_page">
<el-col :span="12">
<el-menu
class="el-menu-vertical-demo"
background-color="#324057"
text-color="#fff"
active-text-color="#ffd04b"
>
<router-link to="/index/home1">
<el-menu-item index="0">
<i class="el-icon-menu"></i>
<span slot="title">首页</span>
</el-menu-item>
</router-link>
<template v-for="item in items">
<el-submenu v-if="item.children" :index="item.path" :key="item.path">
<template slot="title">
<span slot="title">{{ item.name }}</span>
</template>
<router-link :to="`/index/${citem.path}`" v-for="(citem,cindex) in item.children" :key="cindex">
<el-menu-item :index="citem.path">
<span slot="title">{{citem.name}}</span>
</el-menu-item>
</router-link>
</el-submenu>
</template>
</el-menu>
</el-col>
</el-row>
</template>
<script>
export default {
name: "LeftMenu",
data() {
return {
items: [
{
icon: "el-icon-document",
name: "资金管理",
path: "found",
children: [
{
path: "fundlist",
name: "资金流水",
},
],
},
{
icon: "el-icon-document",
name: "信息管理",
path: "info",
children: [
{
path: "infoShow",
name: "个人信息",
},
],
},
],
};
},
};
</script>
十 资金管理
1布局和功能
1）布局
我们使用ele布局，效果图如下：
2) 功能
资金管理下的资金流水跳转到资金流水页面，它的功能有添加，删除，修改，分页，搜素
2 渲染列表
我们在api封装接口，然后在组件中通过created 请求列表的接口渲染数据
3添加功能
给添加按钮添加点击事件，弹出模态框，为了以后项目的维护和可复用性，所以说我们会把模态框封装成组件，就是为以后有更多的功能，如果封装成了组件就会你涉及到组件传值，所以我们需要在父组件中在子组件的标签上通过自定义属性向子组件传值，子组件通过props来进行接收。
代码：
<!-- 主页 -->
<template>
<div class="home">
<div class="container">
<h1>蓝图在线</h1>
<p>专注在线教育，用心做课程，用心做服务！</p>
</div>
</div>
</template>
<style scoped>
.home{
width:100%;
height:100%;
background: url('../assets/showcase.png') no-repeat;
background-size: 100% 100%;
}
.container{
width:100%;
height:100%;
box-sizing: border-box;
padding-top: 100px;
background: rgba(0,0,0,0.7);
text-align: center;
color:#fff;
}
</style>
4 封装模态框组件
为了以后模态框的复用性，所以我们把模态框封装成组件，因为模态框里面有下拉菜单所以需要我们自己定义一个数组，然后循环遍历到下拉框里面
<!-- 弹窗 -->
<template>
<div>
<el-dialog
:title="dialog.title"
:visible.sync="dialog.show"
:close-on-click-modal="false"
:close-on-press-escape="false"
:modal-append-to-body="false"
width="width"
>
<div>
<el-form
ref="form"
:model="form"
label-width="120px"
style="margin: 10px; width: auto"
:rules="form_rules"
>
<el-form-item label="收支类型">
<el-select v-model="form.type" placeholder="请选择收支类型">
<el-option
v-for="(item, index) in format_type_list"
:key="index"
:value="item"
>{{ item }}</el-option
>
</el-select>
</el-form-item>
<el-form-item prop="describe" label="收支描述：">
<el-input
v-model="form.describe"
placeholder="请输入收支描述"
></el-input>
</el-form-item>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import { addList, editList } from "../http/api";
export default {
name: "Com",
data() {
return {
format_type_list: [
"提现",
"提现手续费",
"充值",
"优惠券",
"充值礼券",
"转账",
]，
};
</script>
5请求添加的接口
我们需要在api.js中封装添加的接口，，传递当前添加的addForm表单的与后台相同的变量，然后addForm表单的校验，校验成功后请求添加的接口，请求成功后，需要提示用户添加成功，调用数据列表封装的方法
6删除功能
我们需要用template作用域插槽包裹删除按钮，然后给删除按钮绑定点击事件，然后通过作用域插槽传递当前行的数据，在我们在调用后台接口的时候，在后台接口拼接当前你要删除的id，然后请求后台接口，我们需要ele给我们提供了一个确认框然后点击确定按钮请求接口，请求成功，则需要提示用户删除成功，然后重新渲染页面
代码：
<!-- 资金管理 -->
<template>
<!-- 表格 -->
<div>
<el-table :data="tableData" style="width: 100%" max-height="450" border>
<el-table-column
label="序号"
type="index"
align="center"
width="70"
></el-table-column>
<el-table-column label="创建时间" prop="date" align="center">
<template slot-scope="scope">
<el-icon name="time"></el-icon>
<span>{{ scope.row.date.slice(0, 10) }}</span>
</template>
</el-table-column>
<el-table-column
prop="type"
label="收支类型"
align="center"
width="150"
></el-table-column>
<el-table-column
prop="describe"
label="收支描述"
align="center"
width="180"
></el-table-column>
<el-table-column prop="income" label="收入" align="center" width="170">
<template slot-scope="scope">
<span style="color: #00d053">+ {{ scope.row.income }}</span>
</template>
</el-table-column>
<el-table-column prop="expend" label="支出" align="center" width="170">
<template slot-scope="scope">
<span style="color: #f56767">- {{ scope.row.expend }}</span>
</template>
</el-table-column>
<el-table-column
prop="cash"
label="账户现金"
align="center"
width="170"
>
</el-table-column>
<el-table-column
prop="remark"
label="备注"
align="center"
width="220"
></el-table-column>
<el-table-column
prop="operation"
align="center"
label="操作"
fixed="right"
width="180"
>
<template slot-scope="scope">
<el-button
type="danger"
icon="delete"
size="small"
@click="handleDelete(scope.$index, scope.row)"
v-hide
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
mounted() {},
methods: {
//删除
handleDelete(index, value) {
deleteList(value).then((res) => {
this.$message({
message: "删除成功",
type: "success",
});
this.getTableList();
});
},
};
</script>
删除的接口
7修改功能
消息回显
因为修改呢，每次点击修改按钮的时候弹出模态框，当前行的数据要显示在模态框中，所以呢我们需要做消息回显，大致思路就是首先为了复用性和后期的维护，因为这个修改和添加的模态框基本一样，所以我们可以进行判断，用户是要修改还是添加，如果用户是要修改的话，我们需要定义一个修改的form表单，然后用户点击修改按钮的时候，我们需要用template作用域插槽包裹然后传入scope.row就是当前行的数据，然后等于form表单里面的每条数据就可以做到消息回显了
消息回显的代码：
<!-- 资金管理 -->
<template>
<div class="fillcontain">
<!-- 表格 -->
<div>
<el-table :data="tableData" style="width: 100%" max-height="450" border>
<el-table-column
label="序号"
type="index"
align="center"
width="70"
></el-table-column>
<el-table-column label="创建时间" prop="date" align="center">
<template slot-scope="scope">
<el-icon name="time"></el-icon>
<span>{{ scope.row.date.slice(0, 10) }}</span>
</template>
</el-table-column>
<el-table-column
prop="type"
label="收支类型"
align="center"
width="150"
></el-table-column>
<el-table-column
prop="describe"
label="收支描述"
align="center"
width="180"
></el-table-column>
<el-table-column prop="income" label="收入" align="center" width="170">
<template slot-scope="scope">
<span style="color: #00d053">+ {{ scope.row.income }}</span>
</template>
</el-table-column>
<el-table-column prop="expend" label="支出" align="center" width="170">
<template slot-scope="scope">
<span style="color: #f56767">- {{ scope.row.expend }}</span>
</template>
</el-table-column>
<el-table-column
prop="cash"
label="账户现金"
align="center"
width="170"
>
</el-table-column>
<el-table-column
prop="remark"
label="备注"
align="center"
width="220"
></el-table-column>
<el-table-column
prop="operation"
align="center"
label="操作"
fixed="right"
width="180"
>
<template slot-scope="scope">
<el-button
type="warning"
icon="edit"
size="small"
//传递的当前行的数据
@click="handleEdit(scope.row)"
v-hide
>编辑</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<Dialog :dialog="dialog" :form="form" @updata="getTableList" />
</div>
</template>
<script>
export default {
data() {
return {
form: {
type: "",
describe: "",
income: "",
expend: "",
cash: "",
remark: "",
_id: "",
},
};
},
created() {
this.getTableList();
},
methods: {
//消息回显
handleEdit(index, value) {
this.form = {
type: value.type,
describe: value.describe,
income: value.income,
expend: value.expend,
cash: value.cash,
remark: value.remark,
_id: value._id,
};
this.dialog = {
show: true,
title: "编辑资金信息",
option: "edit",
};
},
},
};
</script>
修改提交
点击提交按钮,向后台发送数据请求，并携带当前修改的id，请求接口，请求成功后，重新渲染页面，并告诉用户修改成功了
修改接口
8筛选
首先呢在获取数据的时候，获取所有的数据，然后赋值给你要过滤的数组，需要定义开始时间，和结束时间，并绑定到筛选时间的框上，给筛选按钮绑定点击事件，然后进行if判断，如果没有选择开始事件和结束时间的话我们需要提示用户您还没有选择时间的区间然后重新渲染页面，然后return结束让下面的代码不执行，如果填写了时间区间需要定义一个起始时间，把时间对象里面的起始时间获取时间戳赋值给起始时间，然后让接收所有数据的数组等于过滤的数组过滤出来的起始时间 let date就等于过滤出来的item.date的时间对象，然后在let 一个time，等于date获取的时间 然后return 返回这个time>=开始时间&&time<=结束的时间，重新渲染页面
代码：
<template>
<div class="fillcontain">
<!--筛选-->
<div>
<el-form :inline="true" :model="search_data" ref="search_data">
<el-form-item label="时间筛选：">
<el-date-picker
v-model="search_data.startTime"
type="datetime"
placeholder="选择开始时间"
>
</el-date-picker>
--
<el-date-picker
v-model="search_data.endTime"
type="datetime"
placeholder="选择结束时间"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="onScreeoutMoney()"
>筛选</el-button
>
</el-form-item>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { getList, deleteList } from "../http/api";
import Dialog from "../components/Dialog.vue";
export default {
name: "FundList",
data() {
return {
filterTableData: [],//过滤出来的新数组
allTableData: [], //接收所有数据
};
},
methods: {
//筛选
onScreeoutMoney() {
if (!this.search_data.startTime || !this.search_data.endTime) {
this.$message({
type: "warning",
message: "请选择时间区间",
});
this.getTableList();
return;
}
//开始时间
const stime = this.search_data.startTime.getTime();
//结束时间
const etime = this.search_data.endTime.getTime();
//过滤
this.allTableData = this.filterTableData.filter((item) => {
let date = new Date(item.date);
let time = date.getTime();
//返回符合条件的数组
return time >= stime && time <= etime;
});
//重新渲染页面
this.setPaginations();
},
},
watch: {},
mixins: [],
};
</script>
9 分页功能
分页布局
配置分页
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="paginations.page_index"
:page-sizes="paginations.page_sizes"
:page-size="paginations.page_size"
:layout="paginations.layout"
:total="paginations.total"
>
</el-pagination>
paginations: {
page_index: 1, // 当前位于哪页
total: 0, // 总数
page_size: 5, // 1页显示多少条
page_sizes: [5, 10, 15, 20], //每页显示多少条
layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
},
```
第一步
因为后端没给我们处理分页功能，所以说我们在一开始的时候就要获取所有的数据，做分页功能呢主要就是分为三步，第一步先初始化分页，做分页的时候有一个总数量total，这个total就等于获取所有数据的数组的长度，初始化页码和步长让他们都为最初的开始值
代码：
//初始化分页
setPaginations() {
this.paginations.total = this.allTableData.length;
this.paginations.page_index = 1;
this.paginations.page_size = 5;
this.pageList(); //3处理分页操作
},
//data里数据
paginations: {
page_index: 1, // 当前位于哪页
total: 0, // 总数
page_size: 5, // 1页显示多少条
page_sizes: [5, 10, 15, 20], //每页显示多少条
layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
},
第二步
页面跳转调用主要函数，ele给我们提供了获取页码和步长的两种方法，传递参数val，打印这个val就可以获取到页码和步长
代码：
//4页面跳转 调取主要函数
handleSizeChange(val) {
console.log(val,'当前页面有几条数据');
this.paginations.page_size = val;
this.pageList();
},
handleCurrentChange(val) {
console.log(val,'当前是第几页');
this.paginations.page_index = val;
this.pageList();
},
第三步
第三步也是分页最主要的思想，我们需要定义一个方法，然后定义一个数组tableData然后过滤那个获取所有数据的数组用filter过滤出来符条件的数据，也就是通过索引判断，索引必须小于当前页码乘以当前页的步长，索引必须大于等于当前页的步长减一乘以当前页的页码然后赋值给你要渲染的数组进行渲染，然后在改变当前页的页码的时候调用这个函数，并且在改变当前页的步长的时候调用这个方法，并且在初始化分页的时候从新调用这个方法
完整分页的代码实现：
<!-- 资金管理 -->
<template>
<div class="fillcontain">
<!-- 分页 -->
<el-row>
<el-col :span="24">
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="paginations.page_index"
:page-sizes="paginations.page_sizes"
:page-size="paginations.page_size"
:layout="paginations.layout"
:total="paginations.total"
>
</el-pagination>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "FundList",
data() {
return {
tableData: [],
paginations: {
page_index: 1, // 当前位于哪页
total: 0, // 总数
page_size: 5, // 1页显示多少条
page_sizes: [5, 10, 15, 20], //每页显示多少条
layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
},
allTableData: [], //接收所有数据
};
},
methods: {
//初始化分页
setPaginations() {
this.paginations.total = this.allTableData.length;
this.paginations.page_index = 1;
this.paginations.page_size = 5;
this.pageList(); //3处理分页操作
},
//4页面跳转 调取主要函数
handleSizeChange(val) {
console.log(val,'当前页面有几条数据');
this.paginations.page_size = val;
this.pageList();
},
handleCurrentChange(val) {
console.log(val,'当前是第几页');
this.paginations.page_index = val;
this.pageList();
},
//3分页的主要思想
pageList() {
// console.log(
// "当前页",
// this.paginations.page_size * this.paginations.page_index
// );
// console.log(
// "前一页",
// this.paginations.page_size * (this.paginations.page_index - 1)
// );
this.tableData = this.allTableData.filter((item, index) => {
return (
index < this.paginations.page_size * this.paginations.page_index &&
index >=
(this.paginations.page_index - 1) * this.paginations.page_size
);
});
},
};
</script>
十一 总结
通过这个项目我收获非常多，比如说分页，以前做分页都是后端给我们处理的，而这项目是我们前端自己处理的，还有这个项目是我做过的最全的后台管理系统，比如说以前没有听过的ui鉴权，在这个系统里面基本上都有了，我还了解了什么是ui鉴权，一般来说ui鉴权指的都是按钮鉴,然后还学会了怎么处理ui鉴权我们可以获取token下的角色信息然后用v-if处理该ui显隐但是这种方式的缺点也很明显不宜与统一管理所以我们需要集中封装一个自定义指令在自定义指令中集中处理鉴权的逻辑，然后分发在每个鉴权的按钮上，我还了解了项目从零开始到结尾的整个开发流程，
1:项目选型 2：搭建登录注册页面 权限管理，封装接口 vuex 路由配置 环境配置 配置本地代理 3:主功能页面：按照各个也页面业务需求进行开发 4:打包项目 npm run build 5:代码整理（注释并维护） 这些都是之前没有了解过的通过这个项目我还了解了项目的上线流程 产品经理 1:产品经理接过项目 2:找需求经理对接 3:开需求会(分工) 4:ui设计图 原型图和原型稿 需求文档 5:前端人员进行开发 6:测试进入 7：灰度环境发布 8：项目打包上线 以前都不知到token里面存储的是什么，从这个项目了解到了，token存储的是什么，也是第一次才知道还能解析token 里面存储了用户的信息，还有可以通过token做很多事，比如所ui鉴权，以前都没有配过跨域，只是听过，这个项目涉及到了跨域，所以我才知道跨域是怎么配置的，通过这个项目学到了很多，以后我会更加努力，勤奋好学，细心求教。希望以后跟着老师能够学习到更多知识
十二 项目遇到的难点
我遇到过的难点比教费时间的就是鉴权，因为它涉及到了路由守卫，ui鉴权，页面内鉴权这个是比较费时间的，因为我们需要在main.js里面配置自定义令，然后在组件中用自定义指令控制按钮显隐，还有就是做分页的时候需要我们前端自己处理，不算太难，比后端给我们处理分页，相对来说前端处理起来比较费时间，因为后端没给我们处理分页功能，所以说我们在一开始的时候就要获取所有的数据，做分页功能呢主要就是分为三步，
第一步先初始化分页，做分页的时候有一个总数量total，这个total就等于获取所有数据的数组的长度，初始化页码和步长让他们都为最初的开始值，页面跳转调用主要函数，ele给我们提供了获取页码和步长的两种方法，传递参数val，打印这个val就可以获取到页码和步长 第三步也是分页最主要的思想，我们需要定义一个方法，然后定义一个数组tableData然后过滤那个获取所有数据的数组用filter过滤出来符条件的数据，也就是通过索引判断，索引必须小于当前页码乘以当前页的步长，索引必须大于等于当前页的步长减一乘以当前页的页码然后赋值给你要渲染的数组进行渲染，然后在改变当前页的页码的时候调用这个函数，并且在改变当前页的步长的时候调用这个方法，并且在初始化分页的时候从新调用这个方法
616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
