vue+element+axios+less做的后台管理系统

超、凢脫俗 2021-08-27 01:18 350阅读 0赞

1.  项目搭建先跳过

##### 登录退出功能 #####

登录业务流程：

1.  在登录页输入用户名和密码
2.  调用后台接口进行验证
3.  通过验证后，根据后台返回的状态，跳转到项目主页

技术点：  
4. http 是无状态的  
5. 通过cookie在客户端记录状态  
6. 通过session在服务器保存状态  
7. 通过token维持状态  
实操：  
8. 登录用到的element表单组件  
el-form(表单的数据绑定，校验规则，表单的引用)，el-forrn-item(通过prop来接收数据绑定里面的值)，el-input(prefix-icon=""设置图标，v-model=“”“form，form-item”的值)  
9. data里面 初始化form数据  
10. 表单的校验规则：  
重置数据： 利用表单的引用，获取到表单的实例对象，调用resetFields  
表单预校验：validate() 参数是一个回调函数，通过，返回true，拿返回值作为判断条件，如果失败return 成功，调用验证用户名密码是否正确  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]  
11. 我简单理解一下这个post接口：参数不能为空，就是你现在定义的username，password可以是空的字符串，但是在提交数据的时候，你的这两个字段都是有数据的，其实这也和表单的预校验是一样的  
至此：请求成功，接下来就是将服务器返回的token通过sessionStroge保存在本地,然后跳转到项目主页  
windoe.sessionStroge.setItem(‘token’,res.data.token)  
this.$router.push(’/home’)  
12. 项目中所有项目除了 登录之外的api，只要登录才能访问,路由守卫  
router.beforeEach((to,form,next)=>\{  
if (to.path === ‘login’) return next()  
var tokenStr = window.sessionStroge.getItem(‘token’)  
if (!tokenStr) return next(’/login’)  
next()  
\})

##### 退出功能 #####

清除token，并且跳转到登录页  
window.sessionStroge.clear(’‘token’)  
this.$router.push(’/login’)

##### 主页布局 #####

整体布局：container,header,container,aside,main  
二级菜单栏布局：el-menu> el-submenu(需要index)> i span >

通过接口获取菜单栏数据  
通过axios的请求拦截器添加token，保证有获取数据的权限  
axios.interceptors.request.use(config=>\{  
config.headers.Authorization = window.sessionStroge.getItem(‘token’)  
return config  
)

##### 动态渲染数据，并对路由进行控制 #####

1.  通过v-for双成循环，分别对一级菜单和二级惨菜单进行渲染
2.  通过路由的相关属性，启用菜单的相关功能
3.  保存当前状态(通过点击事件) 先将状态保存下来sessionstorge
4.  default-active：状态
5.  自定义图标 :class=“iconObj\[item.id\]”
6.  展开合住：roggleButton :collapse= 'isCollapse"
7.  el-aside :width:= isCollapse ? ‘64px’: ‘200px’’

##### 用户管理 #####

包括用户信息的展示，搜索，修改，删除

用户列表展示

1.  面包屑导航：el-breadcrumb el-breadcrumb-item
2.  卡片视图： card 栅格系统 row col input button,通过作用域插槽，自定义数据

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210813/16786afd728c4996846d9d7f31e3b097.png