一、前后端的交互
1.登录
使用mock.js模拟登录数据以及登录时的请求网址,使用axios模拟登录请求过程。
关于mock.js
首先在项目的main.js根文件中引入自己写的mock文件夹
import
'@/mock/index.js'
// 该项目所有请求使用mockjs模拟
再在mock的index主文件中运入mockjs
import Mock
from
'mockjs'
import loginAPI
from
'./login.js'
//登录相关
Mock.
mock(
/
\/
login
\/
loginbyemail/,
'post', loginAPI.loginByEmail);
Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl
和 rtype
的 Ajax 请求时,函数 function(options)
将被执行,并把执行结果作为响应数据返回。
/login/loginbyemail是模拟的拦截请求的网址(参数rurl)
post是请求类型(参数rtype)
loginAPI.loginByEmail是拦截到请求后回请的函数(参数function(options) )
通用的mock模拟请求的模板是:
Mock.mock( rurl?, rtype?, template|function( options ) )
rurl
可选。
表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/
、'/domian/list.json'
。
rtype
可选。
表示需要拦截的 Ajax 请求类型。例如 GET
、POST
、PUT
、DELETE
等。
template
可选。
表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }
、'@EMAIL'
。
function(options)
可选。
表示用于生成响应数据的函数。
options
指向本次请求的 Ajax 选项集,含有 url
、type
和 body
三个属性,参见 XMLHttpRequest 规范。
在项目中我自设了可登录成功的两个数据:
const userList
= [
{
email:
'admin@124.com',
password:
'123456'
},
{
email:
'12345678@qq.com',
password:
'123456'
}
]
Mock.Random
Mock.Random 是一个工具类,用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数])
。
var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )