vue的注册和登录的思路
1.注册功能的实现:
主要是通过账号的输入框,失去焦点事件判断是否是正确的的手机号,
再通过获取验证码按钮向后端发送一个请求,把号码作为参数传递过去,
通过返回的值和用户收到的短信进行对比从而实现注册功能
2.登录功能的实现
主要是通过input账号值和密码的值用户点击登录按钮把用户的账号密码
传递到后端从而实现在后返回数据判断用户是否输入正确
token
1.Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,Token便应运而生。
2.Token的定义:Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即可,无需再次带上用户名和密码。
3.使用Token的目的:Token的目的是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮
api封装
作用:因为用的vue里面的每个组件,可能都需要用到get和post方法,
但是每个组件都要写一遍的话就很麻烦,所以我们就可以把它封装为一个组件,用到时候引入就行 ``
思路:在 src 中新建一个文件夹 util,util中新建两个js文件,一个叫request.js, 一个叫api.js
在request中引入axios,然后穿件一个axios的实例,在这里面可以设置baseURL 公共的请求头,
还有一个timeout, 请求超时时间。在这个里面还可以设置请求拦 截和响应拦截器。然后我们把
这个axios实例导出就可以了。
下面说下api.js的东西。首先我们要先要引入request.js这个文件,然后具体代码如下
这段代码封装了axios的get和post请求。我们直接在组件中引入使用 gets和posts就可以请求数据了
import axios from "./request.js"
import http from "axios"
export function gets(url, data) {
return axios.get(url, {
params: data
})
}
export function post(url, data) {
return axios.post(url, data)
}