Vue-业务模块

138 阅读2分钟

如何将返回的结果按照对应的方式显示

比如返回一个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工具函数