第十三节 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的定义、安装及使用_第1张图片

MockJs方法

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

总结

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


 每天记录一点,助力成长!

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

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

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

第十三节 MockJs的定义、安装及使用_第2张图片

你可能感兴趣的:(vue3,elementPlus,mock后台管理系统,vue.js,前端,javascript,elementui)