那里可以免费做网站,注册深圳公司流程和费用,快三彩票网站开发,网站建设淮安vue3前端开发-小兔鲜项目-登录功能的业务接口调用!这次#xff0c;正式调用远程服务器的登录接口了。大家要必须使用测试账号密码#xff0c;才能验证我们的代码。
测试账号密码是#xff1a;账号#xff08;xiaotuxian001#xff09;#xff1b;密码是#xff08;1234…
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测试一下我们的代码是否正常吧。 随便输入的内容是不行的会反馈用户不存在。说明我们已经和服务器远程接口进行了正常的互动。 当输入正确的账户密码时会跳转到首页去。 如图提示登录成功了。而且进行了首页的正常跳转。
