【信贷后台管理系统之axios的二次封装（四）】

---

一、axios的二次封装

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
src下新建utils,新建request.js用来封装axios
控制台安装axios依赖

在request.js文件里引入axios，router
requeset.js文件代码如下：

1. import axios from 'axios'
3. import router from '@/router'
5. import { Notification,Message} from "element-ui";
7. const requset = axios.create(
8.     {
9.         // 添加api前缀
10.         baseURL:'/api',
11.         // 请求过期时间
12.         timeout:5000
13.     }
14. )
16. // 请求拦截器
17. requset.interceptors.request.use(config=>{
18.     // 给header添加token
19.     let token = localStorage.getItem('token')
20.     if(token){
21.         config.headers.token = token
22.     }
23.     return config
24. })
26. // 响应拦截器
27. requset.interceptors.response.use(
28.     response=>{
29.         // 后端状态码20000表示成功
30.         if(response?.data?.code === 20000){
31.             // 后端返回的结构没有统一，兼容处理一下
32.             if (typeof response?.data?.data === 'string')
33.                 Message.success(response?.data?.data)
34.             if (typeof response?.data?.data?.info === 'string')
35.                 Message.success(response?.data?.data?.info)
36.             return response
37.         }else if(response?.data?.code === 603){
38.             // 603表示token失效
39.             Notification.error({
40.                 title:'错误',
41.                 message:'token失效，请重新登录'
42.             })
43.             // 替换到登录页面
44.             let url = window.location.href.split('/')
45.             if (url[url.length - 1] !== 'login'){
46.                 router.replace('/login')
47.             }
48.         }else{
49.             if(response?.status !== 200){
50.                 Notification.error({
51.                     title:'错误',
52.                     message:'响应错误'
53.                 })
54.             }
55.         }
56.         return response
57.     }
58. )
59. export default requset

复制代码

二、设置后端接口地址

在vue.config.js里,设置代理服务器
三、登录接口api联调

src下新建api文件，user.js，引入封装的reques（axios的二次封装），登录后可以打印20000数据，打印出token,然后将token加上

user.js代码如下：

1. import request from "@/utils/request";
3. export const  doLogin=(user)=>{
4.     return request.post('/user/login',{
5.         account:user.username,
6.         password:user.pass
7.     })
8. }

复制代码

接口api文件写好后，到LoginView.vue文件引入import {doLogin} from "@/api/user";引入后进行调用

LoginView.vue代码如下

1. <template>
2.   <div class="login-box">
3.     <div class="login-input-box">
4.       <h1>信贷后台管理系统</h1>
5.       <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
6.         <el-form-item label="用户名" prop="username">
7.           <el-input  v-model="ruleForm.username" autocomplete="off"></el-input>
8.         </el-form-item>
9.         <el-form-item label="密码" prop="pass">
10.           <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
11.         </el-form-item>
12.         <el-form-item>
13.           <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
14.         </el-form-item>
15.       </el-form>
16.     </div>
17.   </div>
19. </template>
21. <script >
22. import {doLogin} from "@/api/user";
24. export default {
25.   data(){
26.     // 密码校验，长度不小于8位且不大于20位字符，必须包含大写字母，小写字母，数字和特殊符号
27.     // var ISPWD =/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,20}$/;
28.     // // 密码校验
29.     // const validatePass = (rule, value, callback) =>{
30.     //   if (!ISPWD.test(this.registerForm.password)) {
31.     //     callback(new Error("用户密码必须包含大写字母、小写字母、数字和特殊符号"));
32.     //   } else {
33.     //     callback();
34.     //   }
35.     // }
37.     // const validatePass = (rule,value,callback){
38.     //   if(this.ruleForm.pass === '') {
39.     //     callback(new Error('请输入密码'))
40.     //   }else if(this.ruleForm.pass.length < 6){
41.     //     callback(new Error('密码长度不能小于6'))
42.     //   }else{
43.     //     callback();
44.     //   }
45.     // },
46.     return{
47.       ruleForm: {
48.         username:'',
49.         pass:'',
50.       },
51.       rules:{
52.         username: [
53.           {required:true,trigger:'blur',message:'请输入用户名'}
54.         ],
55.         pass:[
56.           {required:true,trigger:'blur',validator:this.validatePass},
57.         ],
58.       },
59.     };
60.   },
62.   methods:{
63.     // 校验规则
64.     validatePass(rule,value,callback){
65.       if (value === ""){
66.         callback(new Error("请输入密码"));
67.       }else if (value.length < 6){
68.         callback(new Error("密码不能小于6位数"));
69.       }else{
70.         callback();
71.       }
73.     },
74.     submitForm(){
75.       // 验证规则
76.       this.$refs.ruleForm.validate((valid) => {
77.         if (valid) {
78.           this.login(this.ruleForm);
79.         }else{
80.           return false;
81.         }
82.       });
83.     },
84.     async login(form){
85.       console.log(form);
86.       let res = await doLogin(form);
87.       if(res.data.code === 20000){
88.         if(res?.data?.data?.token){
89.           localStorage.setItem("token",res.data?.data?.token);
90.         }
91.         this.$router.replace("/home");
92. }
93.     },
94.   },
95. };
97. </script>
99. <style lagn="scss" scoped>
100. .login-box{
101.   display: flex;   /* div可成为flex容器*/
102.   justify-content: center;  /*上面贴着父元素，居于中间*/
103.   align-items: center;  /* 左侧贴着父元素，把项目位置调整到中间 */
104.   height: 100vh; /* 元素撑开和屏幕一致*/
105.   background-image: url("../assets/login-background.jpg");
106.   background-size: cover;
107. }
108. .login-input-box{
109.   width: 650px;
110.   height: 320px;
111.   background-color: #fff;
112.   text-align: center;
113.   padding: 40px 40px 12px 12px;
114. }
115. .el-button{
116.   width: 600px;
117. }
118. .el-input{
119.   width: 600px;
120.   margin-bottom: 16px;
121. }
122. ::v-deep .el-input_inner{
123.   background: #e5e5e5;
124. }
125. </style>

复制代码

在request.js里的请求拦截器添加个token

四、贷款申请接口api编写联调

在src下新建api文件，该文件下新建loan.js,引入request
loan.js代码如下

1. import requset from "@/utils/request";
2. export const createLoan =(data)=>{
3.     return requset({
4.         url:'/loan/create',
5.         method:'POST',
6.         data
7.     })
8. }

复制代码

在src文件的views的loan文件下的IndexView.vue文件里引入并使用
引入import {createLoan} from "@/api/loan";

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。