[JavaScript知识库]登录页面-登录功能核心实现

目标

为了简化需求，我们这里直接请求线上的接口，实现最核心的登录功能

思路

• 按接口文档要求写封装接口

• 设置axios基地址（线上的）

• 在组件中调用接口

封装登录接口

? ? src/api/user.js 中添加一个方法

/**
 * @description: 登录
 * @param {*} data {modile, password}
 * @return {*}
 */
export function login(data) {
  return request({
    url: 'api/sys/login',
    method: 'post',
    data
  })
}

在request中设置baseUrl

? ? ? ?在src/utils/request.js中设置基地址??

const service = axios.create({
  baseURL: 'http://(在这里添加地址)', // 设置axios请求的基础的基础地址
  timeout: 5000 // 定义5秒超时
})

在组件中调用登录接口

在src/views/login/index.vue中:

1. 导入登录方法；

2. 在通过了表单验证后，执行登录动作

// 导入login方法
import { login } from '@/api/user'

async doLogin () {
  try{
    const res = await login(this.loginForm)
  	console.log('获取到的token是', res)
  } catch (err) {
    console.log('登录错误，原因是', err)
  }
},
hLogin() {
  // 先做校验
  this.$refs.loginForm.validate( valid => {
    if (valid) {
      this.doLogin()
    }
  })
}

小结：

? ? ? ?请求后端接口的一般流程是：

1. 按接口文档要求封装api并导出；

2. 在vue文件中导入api，并执行；