仿豆瓣APP项目之一：前后端交互

一、前后端的交互

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 规范。

来源： https://github.com/nuysoft/Mock/wiki/Mock.mock()

在项目中我自设了可登录成功的两个数据:

const userList = [

{

email: 'admin@124.com',

password: '123456'

},

{

email: '12345678@qq.com',

password: '123456'

}

]

在很多情况下可以利用mock随机模拟数据：

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' } )