Vue_shop总结

登录界面

表单:登录表单的数据绑定对象(:model, v-model)---表单验证规则对象(:rules,prop)

登录和重置:(ref)---重置(调用resetFields函数)--登录(验证和路由跳转,见下图)

Vue_shop总结

 

 

 

Home首页

1.退出键(路由跳转和window.sessionStorage.clear())

2.导航守卫-axios请求拦截预处理(配置完成后Network-Headers-Request查看Authorization)

3.菜单:

页面一加载就创建created

获取数据-储存数据-判断状态码-数据赋值

v-for循环创建菜单

Vue_shop总结

 

 

二级图标直接修改,一级图标通过设置图标对象,根据id动态

 

 

 Vue_shop总结

 

 Vue_shop总结

 

菜单效果

 Vue_shop总结

 

 

 点击高亮

:default="activePath"-----@click="saveNavState(‘/‘ +SubItem.path)----activePath:‘‘(数据存储)---

Vue_shop总结

 

 注意:页面一加载就创建(this.activePath = window.sessionStorage.getItem(‘activePath‘))

 

 

 

 

 

 

 

 

用户状态同步更新到数据库

Vue_shop总结

 

 

验证规则

Vue_shop总结

 

 

 

Vue_shop总结

 

 

每次点击添加用户都需重置表单,设置一个监听对话框关闭的事件

点击按钮,添加新用户,发起请求,关闭对话框,重新获取列表

 

Vue_shop总结

上一篇:一元运算符


下一篇:六 OOP使用类和映射简化设计