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

2022-09-27 501

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

@@DVBVTGC2D7ROIYF4YK_@O.png

前言

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

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

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

axios安装

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

npm install axios --save
复制代码

$UGBA3N)QW$4BS_7@~5QTO{W.png$

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

fastmock

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

👉 新建项目

$~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

接口名根据实际接口去填写（登录、注册、获取用户信息等）

登录接口请求类型是post

url是接口请求地址

右侧黑色区域是请求接口的返回数据（可以根据上方提示信息填写任意json数据）

👉 接口创建完成后，可以点击接口右侧预览

96Y3{$CG9DS%C}CWGCBXW9M.png

在接口预览中可以看出Request里面就有接口请求的完整路径。

发送请求

👉 打开Login页面，我们需要将handleLogin函数改造成接口请求成功后跳转到首页

[_UZ[J6ENLHS2NJUJU6CJEP.png

☝️ 登录页中引入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

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

$_W[O0H7}IY7AZKB)H{2`298.png$

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

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工具来模拟请求，使得前端的开发工作更加方便快捷。

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

前言

axios安装

fastmock

发送请求

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

总结

热门文章

最新文章

相关课程

相关电子书