持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

前言

实战已经开始了！在前面几篇文章中，我们把首页、登录页、注册页都已经串联在一起了，也判断了登录状态。但是在登录页中点击登录按钮的时候，只是前端本地修改了localStorage中的isLogin的值而已。在实际开发项目中，是需要前后端联调的，也就是前端需要调用后端接口去实现登录状态的修改。

⭐️ 由于我们的实战开发并不涉及到后端内容，所以我们需要去模拟后端接口的请求来实现登录态的修改。

⭐️ 在模拟后端接口请求的时候，需要在项目中安装插件 axios 用来请求接口。

axios安装

可以在vscode中新建一个终端来安装axios（vscode中可以直接获取到当前项目的路径）

npm install axios --save

👉 点击右侧箭头指向的位置可以新建一个终端用来安装所需的插件。axios安装完成之后，会在package.json文件中会出现axios的安装信息和版本号。

fastmock

在使用mock请求之前，我们需要去fastmock官网中新建登录请求的接口用来模拟在实际项目中的接口请求。

👉 新建项目

项目名称可以自定义，可以和目前开发的项目名称一致。
接口基础路径是在模拟接口的时候，一个固定的前缀
- 比如：www.juejin.com/pro/login、www.juejin.com/pro/register
- 域名和pro是固定的，后面的login和register是动态的
项目描述可以根据自己的情况来填写。

👉 进入项目创建接口

接口名根据实际接口去填写（登录、注册、获取用户信息等）
登录接口请求类型是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('登录成功')
      })
}

Kapture 2022-06-19 at 21.35.57.gif

🔆 在浏览器中已经可以成功的调用接口，并返回了在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('登录成功')
      })
}

Kapture 2022-06-19 at 21.50.09.gif

🔆 通过双向数据绑定也可以登陆成功了，那么下面就可以控制登录成功之后跳转到首页。

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 }
  }

Kapture 2022-06-19 at 21.56.21.gif

总结

本篇文章主要是和大家一起熟悉了axios请求接口的方式，还有创建一个mock请求接口的方法，也是推荐一个mock工具给大家使用了。

在以后的项目开发中，可能后端开发的接口没有那么及时，前端就可以通过这个mock工具来模拟请求，使得前端的开发工作更加方便快捷。

【Vue3从零开始-实战】S8：使用axios模拟登录请求

前言

axios安装

fastmock

发送请求

双向数据绑定参数请求接口

总结