如何将返回的结果按照对应的方式显示
比如返回一个1,渲染成五星好评,返回一个2,渲染成4星好评
-用v-if来实现
<div v-for="(item,i) in vv">
<span v-if="item==1">五星好评</span>
<span v-else-if="item==2">四星好评</span>
<span v-else-if="item==3">三星好评</span>
</div>
-用filter实现
<div id='app'>
<div v-for="(item,i) in vv">
<span >{{item|change}}</span>
</div>
</div>
review(aa){
//aa会自动获取,就是|之前的值
if(aa==1){
return "5星好评"
}else{
return "44"
}
}
-不用methods和computed,因为他们不能直接获取渲染在页面的数据
记录登录状态
-过程:用户登录,服务器给用户一个token,保存到客户端的sessionStorage中
有些页面只能在登录之后才能看到
-实现原理:用router.beforeEach来检测
-过程:设置router.beforeEach,如果要访问的是需要token,从sessionStorage中取得token,检查是否带有token,没有的话就重定向到登录页面,有的话就自动调用next方法。
对于需要token令牌的请求
-实现原理:axios的请求拦截中的请求头添加token的验证
-过程:对于需要token 的API,用interpretors.request.use。在请求头的Authorization添加token令牌,这样就可以正常发送请求了。
-token放在header请求头:因为,web的请求头的Authorization就是用来做web认证的。而且方便axios配置,直接在request.use进行配置就好了。
对于不同的用户展示不同的页面
-实现原理:路由的meta下面的roles属性来实现 -业务逻辑:全局路由守卫每次判断用户是否已经登录,没有登录跳到登录页。已经登录(已经取得后台返回的用户的权限信息),则判断当前要跳转的路由,用户是否有权限访问。判断用户是否具备路由标准的权限信息。
vuex状态的保留
- 原理:一般vuex的信息,如果一刷新就会没有
- 解决方法:用github的插件进行持久保留
用户管理
- 添加:弹出对话表单,用户输入的时候,进行双向绑定到data数据中,用户点提交的时候调用API接口(提供相应的参数),进行后台数据的修改,并且前端的数据进行重新渲染。
- 删除
- 编辑
权限管理
- 添加
- 修改:弹出对话框,同时请求所有的权限属性和当前用户的权限属性,渲染到页面上,当用户完成修改的时候,再调用API接口,进行后台数据的修改,并且重新请求当前用户修改之后的权限属性信息。
- 删除
商品管理
- 添加,信息,参数,图片和富文本(vue-quill-editor)
订单管理
- 显示订单
组件复用
一般情况下,通用的组件都是抽离的。
-
用props配合模板逻辑
-
slot插槽
-
js工具函数