- 项目搭建先跳过
登录退出功能
登录业务流程:
- 在登录页输入用户名和密码
- 调用后台接口进行验证
- 通过验证后,根据后台返回的状态,跳转到项目主页
技术点:
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 成功,调用验证用户名密码是否正确
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
)
动态渲染数据,并对路由进行控制
- 通过v-for双成循环,分别对一级菜单和二级惨菜单进行渲染
- 通过路由的相关属性,启用菜单的相关功能
- 保存当前状态(通过点击事件) 先将状态保存下来sessionstorge
- default-active:状态
- 自定义图标 :class=“iconObj[item.id]”
- 展开合住:roggleButton :collapse= 'isCollapse"
- el-aside :width:= isCollapse ? ‘64px’: ‘200px’’
用户管理
包括用户信息的展示,搜索,修改,删除
用户列表展示
- 面包屑导航:el-breadcrumb el-breadcrumb-item
- 卡片视图: card 栅格系统 row col input button,通过作用域插槽,自定义数据