vue3前端开发-小兔鲜项目-登录功能的业务接口调用

vue3前端开发-小兔鲜项目-登录功能的业务接口调用!这次，正式调用远程服务器的登录接口了。大家要必须使用测试账号密码，才能验证我们的代码。

测试账号密码是：账号（xiaotuxian001）；密码是（123456）。

---

1：我们因为要用到了一个插件的模块（提示语的）；所以需要提前导入它。

为了避免和其他的组件样式进行覆盖，我们进行了单独的样式导入。

import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

如图，这个就是导入了提示语的组件，我们已经导入了它的样式文件了。

待会到了路由请求拦截器内，还会再次用到这个组件，还需要再次导入一下。

---

2：写一下我们的业务调用接口文件user.js

import request from '@/utils/http'
export const loginAPI = ({account,password})=>{return request({url:'/login',method:'POST',data:{account,password}})
}

内容比较简单啊，不再一一介绍了。

里面就是一个简单的解构赋值。

---

3：在路由拦截器内，错误回调函数内，再次使用刚刚那个提示语。

比如，无效（错误）的密码提示标语内容。

//axios基础的封装
import axios from "axios";
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
const httpInstance = axios.create({baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',timeout:5000
})
//axios请求拦截器
httpInstance.interceptors.request.use(config =>{return config},e => Promise.reject(e)
)
//axios响应拦截器
httpInstance.interceptors.response.use(res => res.data,e =>{ElMessage({type:'warning',message:e.response.data.message})return Promise.reject(e)}
)
export default httpInstance

---

4：测试一下我们的代码是否正常吧。

 随便输入的内容，是不行的，会反馈：用户不存在。说明我们已经和服务器远程接口进行了正常的互动。

---

当输入正确的账户密码时，会跳转到首页去。

 如图提示，登录成功了。而且进行了首页的正常跳转。