第十三节 MockJs的定义、安装及使用

系列文章目录

---

目录

系列文章目录

前言

MockJs定义

MockJs安装

MockJs使用模拟登陆接口

MockJs常用语法

MockJs方法

总结

---

前言

这节主要介绍项目配置mockJs并模拟实现接口。

并介绍了Mock相关的方法和常用语法。

接下来会介绍如何使用配置axios，用axios请求登录接口并接收到接口返回的数据。

---

MockJs介绍

Mock.js 是一个模拟数据生成器，常用于前端开发中。它的主要作用是生成用于测试的假数据，以帮助开发者在开发过程中进行单元测试、功能测试等。

使用 Mock.js，你可以根据给定的模板或规则生成各种类型的假数据，如随机字符串、数字、日期、图片链接等。这使得在开发过程中，你可以快速生成所需的数据，而无需手动创建或从后端获取真实数据。

Mock.js 的使用通常与 Axios 或 Fetch API 等 HTTP 客户端一起使用，以便模拟 API 请求和响应。你可以在请求被发送到后端之前或之后设置模拟数据，这样就可以在开发过程中避免实际的 API 调用，从而加速开发过程并减少与后端的交互。

使用 Mock.js 可以方便地控制和调整模拟数据的生成，以便与你的应用程序需求相匹配。你可以根据特定的规则或条件生成不同的数据，以满足各种测试场景的需求。

 

MockJs定义

• 拦截ajax请求，生成伪数据
• 应用场景:
  在没有后端支持的情况下，自己生成数据
  当然主要是在工作中,后端已经出接口文档,还没有实现数据
• 由前端依照接口文档模拟伪数据,实现前端开发功能

MockJs安装

npm i mockjs -D

MockJs使用模拟登陆接口

1. src下新建mock->index.js 导入mock，并使用mock模仿登录接口。
   假设登录用户用户名：admin  密码：111111。
   登录成功后返回token及用户详细信息（邮箱、手机号、ID和用户名）
   登录不成功则提示密码错误。
    

   //  导入mock.js
   import Mock from 'mockjs'
   
   // 登录接口 请求方式：post 参数：params 假设用户为admin  111111
   Mock.mock('/login', 'post', (params) => {
     const loginData = JSON.parse(params.body)
     let data = {}
     //  用户名和密码正确才会返回token
     if (loginData.username === 'admin' && loginData.password === '111111') {
       data = Mock.mock({
         token: '@id', // 随机生成一个18位身份证，模拟生成token值
         username: loginData.username,
         email: /[a-z]{5,8}@\.(126|qq|163)\.(com|cn|org)/,
         mobile: /13\d{9}/,
         rid: 0
       })
       return {
         data,
         meta: {
           status: 200,
           msg: '请求登录成功! '
         }
       }
     } else {
       return {
         data: { msg: '密码错误data！' },
         meta: {
           status: 1205,
           msg: '密码错误！ '
         }
       }
     }
   })

2. 在主函数main.js中导入
    

   import '@/mock'

MockJs常用语法

"id":"@id" // 生成唯一的id号
"star|1-2":"★"  // 字符串重复一道2次
"price|100-200.2-3" // 小数点2-3位
"data|10":[{name:"名称"}] // 数组的内容重复10遍
"live|1":true,// 随机返回true,false
"tel":/13 \d{9}/,// 手机号
"des":function(){ return this.start+this.price} // 结合指定信息生成
"name":"@cname" // 表示中文名称
"address":"@country(true)" // 地址
"ip":"@ip",// IP
"description":"@cparagraph(1, 3)" // 随机段落2-3行
"pic":@dataImage('200x100','色块图片') // 图片
"url": /http:\/\/www\.[a-z]{2,8}\.(com|cn|org)/  // URL地址
"description": "@cparagraph(1,3)", // 生成描述信息

使用实例

MockJs方法

• mock(data)
• mock(url,data)
• mock(url,type,data)
• mock(url,type,function)
• data：数据
• url：拦截地址(可以是正则)
• type：拦截请求类型(post,get,put,delete)
• function：通过函数返回数据,参数用config 请求的配置

---

总结

Mock的配置完成，很简单吧。没有废话，满满的干货。

---

 每天记录一点，助力成长！

欢迎大家来浏览我的博客，如发现我有写错的地方，一起交流指正。

如果你觉得本文对你有帮助，欢迎点赞、收藏、关注，转载烦请注明出处，谢谢！ 

系列文章会不段更新  来个打赏(微信) 马力全开 撸起袖子加油干~