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

最新推荐文章于 2023-02-27 09:23:02 发布

小bearBear

最新推荐文章于 2023-02-27 09:23:02 发布

阅读量1.3k

点赞数

分类专栏：网页前端文章标签： mock axios superAgent

本文链接：https://blog.csdn.net/qq_35585701/article/details/79382074

版权

本文介绍了在模拟项目中如何处理前后端交互，重点讲解了Mock.js的使用方法，如Mock.mock()函数，以及axios和SuperAgent在处理跨域请求中的应用。在遇到axios的跨域限制时，引入SuperAgent来完成JSONP请求。同时，讨论了跨域的几种解决方案，如JSONP、CORS、XDR，并提到了请求的基础和响应内容的解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前后端的交互

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

最低0.47元/天解锁文章