vue相关

vue的注册和登录的思路
1.注册功能的实现：
主要是通过账号的输入框，失去焦点事件判断是否是正确的的手机号，
再通过获取验证码按钮向后端发送一个请求，把号码作为参数传递过去，
通过返回的值和用户收到的短信进行对比从而实现注册功能

2.登录功能的实现
主要是通过input账号值和密码的值用户点击登录按钮把用户的账号密码
传递到后端从而实现在后返回数据判断用户是否输入正确

token
1.Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。

2.Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

3.使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮

axios封装

 // get 请求
axios.get('api/index.json',{
  params: {}
}).then(res => {}).catch(err => {})
// post 请求
axios.post('/api/getUserInfo', {
  data: {}
}).then(res => {}).catch(err => {})
// 并发请求
axios.all([
  axios.get('/api/index.json'),
  axios.get('/api/getUser.json')
]).then(axios.spread((indexJson, userJson) => {
    // indexJson 第一个接口返回的数据
   //  userJson 第二个接口返回的数据
  })
)

axios的全局配置
axios.defaults.timeout = 1000

axios 实例配置
let instance = axios.creat({
  timeout: 1000, // 请求的超时时长
  baseURL: 'http://localhost:8080', // 请求的基本域名地址
  url: '/api/getUser'， // 请求地址
  data: {}, // post请求入参
  params: {}, //get 请求入参
  headers: {} // 设置请求头
})

axios 拦截器
// 请求拦截器
let instance = axios.interceptors.request.use(config => {
  //   请求前做些什么
  return config
}, err => {
  return Promise.reject(err)
})

// 响应拦截器
let instance = axios.interceptors.response.use(res => {
  // 响应成功对数据做些什么
  return res
}, err => {
  return Promise.reject(err)
})
// 取消拦截器 （一般不用）
 axios.interceptors.request.eject(instance)   

取消请求
let source = axios.CancelToken.source()
    axios.get('/index.json', {
     cancelToken: source.token
   }).then(res => {
     console.log(res)
   }).catch(err => {
     console.log(err)
   })
   // source.cancel(message) 参数message 可选填
   source.cancel('http get cancel')

axios 的封装
 import axios from 'axios'
import { baseURL } from '@/config/index.js'
class HttpRequest {
  constructor (baseUrl = baseURL) {
    this.baseUrl = baseUrl
     // 队列
    this.query = {}
   }
  // 全局参数
  getinSidConfig () {
    const config = {
      baseUrl: this.baseUrl,
      headers: {}
    }
    return config
  }
 // 请求方法
 request (options) {
    const instance = axios.create()
    options = Object.assign(this.getinSidConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }
    // 拦截器
  interceptors (instance, url) {
    instance.interceptors.request.use(config => {
      // 使用队列的方式处理如果是第一个到最后一个请求了则增加loding
      // 以防出现多个loding层样式错误
      if (!Object.keys(this.query).length) {
        // Spin.show()
      }
      this.query[url] = true
      return config
    }, err => {
      return Promise.reject(err)
    })
    instance.interceptors.response.use(res => {
      delete this.query[url]
      const {data, status} = res
      return {data, status}
    }, err => {
      return Promise.reject(err)
    })
  }
}
export default HttpRequest
// 用法
import axios from './index'
export const getUserInfo = () => {
  return axios.request({
    url: '/getUserInfo',
    methods: 'get'
  })
}
// home.vue
created () {
    getUserInfo().then(res => {
        console.log(res)
          })
}

借鉴: https://blog.csdn.net/qq_39557024/article/details/104400116