用户管理后台管理项目总结

用户管理后台管理介绍：

他是分为前端和后端的，主要用于公司内部人员管理商品用的，主要的有登录页面，用户管理，权限管理里面包含用户角色列表和用户权限列表，不同的人有不同的角色不同的权限访问，商品管理其中包含商品分类，分类参数，商品列表，订单管理，数据统计需要用于第三方插件echarts,这个模块主要是为了领导看商品销售的数据用的
 

0.axios封装请求拦截器和响应拦截器

在utils文件内创建request.js文件 然后在request.js内引入axios,使用axios.create方法创建axios实列
在axios,create方法里配置请求的公共地址和超时时间
在创建请求拦截器和响应拦截器
在请求拦截器里面可以获取vuex的token并通过config.header.token将token发送给后台
每次发送请求之前判断是否存在token 如果存在的话在http请求头的header上加token
这样后台根据token判断你的登录情况,token一般登录后都会存储到localstorage里
还可以配置loading加载在响应拦截器里面我们可以结束这个loading加载
响应拦截器就是根据是否接口失败或者成功返回的是200就代表请求成功拿到数据
还有就是token过期处理 无效token token过期的话就是跳转页面 跳转到登录页面
还有对错误状态码进行精细的控制比如code===400 code===401

//配置前置拦截器
Server.interceptors.request.use((config)=>{
    console.log('前置拦截器触发');
     //token值增加接口的header中区
     config.headers['Authorization'] = localStorage.getItem("token");
    return config;
},(error)=>{
    return Promise.reject(error);
})

//响应拦截
Server.interceptors.response.use(res=>{
    //如何处理token过期问题？1.需要后台响应值告诉你，一般后台会自定义一个状态码40001
    // ,或者返回无效token,token过期等 2.提醒用户登录过期,返回登录页面
    console.log('响应成功数据',res);
    let code=res.data.meta.status //响应状态码
    if(res.data.meta.msg=="无效token"){
        MessageBox.confirm('token过期, 是否跳转到登录页面?', '提示', {
           confirmButtonText: '重新登录',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           //原生js方法跳转
           location.href='/admin/login'
         }).catch(() => {
         })
      }

//对错误状态码进行精细的控制
if(code===400 || code===401 || code===403 || code===404 || code===405){
    Message.error({
        duration:1000,
        message:res.data.meta.msg
    })
}
   return res.data
},error=>{
    // 接口请求,响应错误一般都是网络问题，进行处理
    let {message}=error;
    if(message=="Network Error"){
        message="后端接口连接异常";
    }
    else if(message.includes("timeout")){
      message="系统接口请求超时"
    }
    Message({
        message:message,
        type:"error",
        duration:1000
    })
    Promise.reject(error)
})

                                        用户模块users

1..登录页面login

 1.登录鉴权如何做的?
 1.前台传入用户名和密码，后台返回token。把token存到本地或vuex 2.通过router的全局守卫
beforeEach进行鉴权处理,判断是否有token 3.进入到后台，请求其它数据要带着token,在axios请求拦
截器,可统一设置请求头协议header加token值

 2.登录后你们的token有没有过期时间?过期了怎么处理？
 有过期时间，一般是一天,后台返回错误码（一般是4001，5001）提示我过期了或者无效token，
进行判断提醒用户跳转重新登录

3.登录验证码怎么实现的?登录密码有没有加密传给后台？
 后端提供了一个接口，返回了图片路径，前端渲染就行了
 有加密，通过引入md5插件加密下传给后台，后台解析下就可以了
 
 登录页面布局，我们可以运用element ui中的表单组件进行表单验证，验证完毕之后我们要点击登录按钮进行登录，首先我们需要创建一个存放api接口的文件，在这个文件中进行接口的封装，登录的时候请求接口，根据接口提供对应的参数，后台响应我们数据，显示提示信息提醒用 

  add() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.$axios.post("login", this.user).then(async res => {
            console.log(res);
            if (res.meta.status == 200) {
              localStorage.setItem("token", res.data.token);
              this.$message.success(res.meta.msg);
              await this.loadRoute();
              this.$router.push("/home");
            } else {
              this.$message.error(res.meta.msg);
            }
          });
        }
      });
    },

2.退出功能实现原理

退出功能首先我们绑定一个方法然后在elment-ui里复制一个MessageBox弹框 先清空token值 就可以用 localStorage.removeItem("token") 然后在跳转到登录页面this.$router.push('/login')
就可以实现是否退出

 open() {
        this.$confirm('是否退出?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          localStorage.removeItem("token")
          this.$router.push("/login")
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          });
        });
      }

3.左侧单布局+实现原理

左侧单布局我们用elment-ui导航侧栏组件进行布局 然后请求接口封装api把接口防止api里面 后台还会给我返回一个path 然后我们通过双层for循坏来渲染这个左侧菜单通过两层for左侧菜单的结果进行渲染出来 就是渲染这children

当我们渲染完成以后当点击的时候就可以跳入另一个页面中 router这个属性（是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转）

 <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse="isCollapse" router active-text-color="#ffd04b">
            <el-submenu :index="index+'1'" v-for="(item,index) in menus" :key="index">
              <template slot="title">
                        <i :class="icons[index]"></i>
                        <span>{
  {item.authName}}</span>
              </template>
                    <el-menu-item :index="ite.path" v-for="(ite,ind) in item.children" :key="ind">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{
  {ite.authName}}</span>
                  </el-menu-item>
                  </el-submenu>
                </el-menu>

 4.用户管理模块功：

用户管理模块功能分为以下：

1.渲染列表在elment-ui复制一个表格请求接口渲染数据

通过API接口，查询数据信息，把数据渲染到HTML中

2.添加模态框当我们点击模态框的时候弹出模态框 里面添加名字邮箱电话呢些  再把这些进行表单验证功能:rules="rules"

通过$ref来获取校验

 //表单验证
          rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],