前言
实战已经开始了！在前面几篇文章中，我们把首页、登录页、注册页都已经串联在一起了，也判断了登录状态。但是在登录页中点击登录按钮的时候，只是前端本地修改了localStorage中的isLogin的值而已。在实际开发项目中，是需要前后端联调的，也就是前端需要调用后端接口去实现登录状态的修改。
⭐️ 由于我们的实战开发并不涉及到后端内容，所以我们需要去模拟后端接口的请求来实现登录态的修改。
⭐️ 在模拟后端接口请求的时候，需要在项目中安装插件 axios 用来请求接口。
axios安装
- 可以在vscode中新建一个终端来安装axios（vscode中可以直接获取到当前项目的路径）
npm install axios --save 复制代码
👉 点击右侧箭头指向的位置可以新建一个终端用来安装所需的插件。axios安装完成之后，会在package.json文件中会出现axios的安装信息和版本号。
fastmock
在使用mock请求之前，我们需要去fastmock官网中新建登录请求的接口用来模拟在实际项目中的接口请求。
👉 新建项目
![~1MTR{PWA_H9M2XN%9]I1Y0.png](https://ucc.alicdn.com/pic/developer-ecology/97fc9ce13cea48b19fdc8b09426a05dd.png?x-oss-process=image/resize,w_1400/format,webp "~1MTR{PWA_H9M2XN%9]I1Y0.png")
- 项目名称可以自定义，可以和目前开发的项目名称一致。
- 接口基础路径是在模拟接口的时候，一个固定的前缀
- 比如：
www.juejin.com/pro/login、www.juejin.com/pro/register
- 域名和pro是固定的，后面的login和register是动态的
- 项目描述可以根据自己的情况来填写。
👉 进入项目创建接口
![`UXJN$MMN1GO~%]ZS2%RF[K.png](https://ucc.alicdn.com/pic/developer-ecology/1ac178a7b2c24b3198571a38eaf1e005.png?x-oss-process=image/resize,w_1400/format,webp "`UXJN$MMN1GO~%]ZS2%RF[K.png")
- 接口名根据实际接口去填写（登录、注册、获取用户信息等）
- 登录接口请求类型是post
- url是接口请求地址
- 右侧黑色区域是请求接口的返回数据（可以根据上方提示信息填写任意json数据）
👉 接口创建完成后，可以点击接口右侧预览
- 在接口预览中可以看出Request里面就有接口请求的完整路径。
发送请求
👉 打开Login页面，我们需要将handleLogin函数改造成接口请求成功后跳转到首页
☝️ 登录页中引入axios
import axios from 'axios' 复制代码
✌️ 在handleLogin函数中使用axios中的post请求
const handleLogin = () => { axios.post('https://www.fastmock.site/mock/eb925863ecc46f2108cd43d75f96c1cd/pro/api/user/login', { mobile: '18600001111', password: '123456' }).then(() => { console.log('登录成功') }) } 复制代码
![_S5RN]T8JBM4E]@]GS_TVW0.png](https://ucc.alicdn.com/pic/developer-ecology/e7104289bd1945bbb3e21e95b372af19.png?x-oss-process=image/resize,w_1400/format,webp "_S5RN]T8JBM4E]@]GS_TVW0.png")
🔆 在浏览器中已经可以成功的调用接口，并返回了在mock中定义的数据。
双向数据绑定参数请求接口
此时我们的接口请求传递的数据还是固定的，而登录页中是有对应的输入框，我们只需要用v-model指令进行双向数据绑定，然后将参数传给接口请求即可。
☝️ 引入compositionAPI中讲过的reactive
import { reactive } from 'vue' 复制代码
✌️ 在setup函数中定义双向绑定的数据值
const data = reactive({ mobile: '', password: '' }) 复制代码
👌 将定义的data返回给外部之后，input输入框标签中就可以使用了
<div class="wrapper__input"> <input class="wrapper__input__content" placeholder="请输入手机号" v-model="data.mobile" /> </div> <div class="wrapper__input"> <input class="wrapper__input__content" placeholder="请输入密码" v-model="data.password" /> </div> 复制代码
👉 最后改造handleLogin函数，将data中的数据传递给接口
const handleLogin = () => { axios.post('https://www.fastmock.site/mock/eb925863ecc46f2108cd43d75f96c1cd/pro/api/user/login', { mobile: data.mobile, password: data.password }).then(() => { console.log('登录成功') }) } 复制代码
🔆 通过双向数据绑定也可以登陆成功了，那么下面就可以控制登录成功之后跳转到首页。
setup () { const data = reactive({ mobile: '', password: '' }) const router = useRouter() const handleLogin = () => { axios.post('https://www.fastmock.site/mock/eb925863ecc46f2108cd43d75f96c1cd/pro/api/user/login', { mobile: data.mobile, password: data.password }).then(() => { localStorage.isLogin = true router.push({ name: 'Home' }) }) } const handleRegisterClick = () => { router.push({ name: 'Register' }) } return { handleLogin, handleRegisterClick, data } } 复制代码
总结
本篇文章主要是和大家一起熟悉了axios请求接口的方式，还有创建一个mock请求接口的方法，也是推荐一个mock工具给大家使用了。
在以后的项目开发中，可能后端开发的接口没有那么及时，前端就可以通过这个mock工具来模拟请求，使得前端的开发工作更加方便快捷。
