后台管理系统

704 阅读1分钟

统一封装axios思路

1.首先在js里面引入axios,然后可以设置一些我们的baseURL,也就是我们的公共地址,以及我们请求的延迟时间

const service = axios.create({
    //默认访问基地址
    baseURL:`https://www.liulongbin.top:8888/api/private/v1`,
    timeout:3000, //请求延迟时间
});

2.然后可以使用请求拦截和响应拦截来处理我们的数据

//请求拦截
service.interceptors.request.use(function (config) {
    // 请求前处理,例如:处理请求头header
    return config;
  }, function (error) {
    // 报错返回
    return Promise.reject(error);
  });
  
  
  //响应拦截
service.interceptors.response.use(function (response) {
    //成功返回 对状态码进行统一处理  例如:200,400,500 单独判断处理各种情况
    
    if (response.data.data && response.data.meta) {
        var { data: res, meta: { msg, status } } = response.data;
        if (status === 200) {
            console.log('msg::',msg)
        } else {
          console.log('msg::',msg)
           Promise.reject(msg)
        }
    } else {
        
        Message({
            message:'参数有误,请检查',
            type: "error"
        });
     }
  }, function (error) {
    //返回报错处理
    Message({
        message:'接口请求有误,请检查',
        type: "error"
    });
        
});

然后在另外一个js文件中我们封装各种请求并抛出

登陆功能的实现思路

打开项目首先展示的一个登录窗口,这个功能就是用一个form表单,输入我们的账号和密码 点击登录的时候,首先给表单添加验证事件,判断账号密码格式是否正确,然后向后台进行请求,登录成功,页面显示一个提示,登录成功,失败即显示登录失败。

搜索的思路