• Mock笔记

    一 使用场景

    当前端工程师需要独立于后端并行开发时,后端接口还没有完成，前端可以考虑前端搭建web server自己模拟假数据,这里我们选第三方库mockjs用来生成随机数据,拦截Ajax请求。

    二  在Vue中搭建测试项目

    步骤一 创建项目

    vue create mock-demo

     步骤二  安装依赖

    cd mock-demo

    #使用axios发送ajax
    npm install axios --save
    #使用mockjs产生随机数据
    npm install mockjs --save-dev
    #使用json5解决json文件，无法添加注释问题
    npm install json5 --save-dev

    步骤三

    新建mock文件夹，新建testMock.js

    1. const Mock = require('mockjs'); //mockjs导入依赖模块
    2. var id = Mock.mock('@id')//得到随机的id,字符串
    3. console.log(Mock.mock('@id'),typeof id)
    4. var obj = Mock.mock({
    5. id:"@id()",//得到随机的id,对象
    6. username: "@cname()",//随机生成中文名字
    7. date: "@date()",//随机生成日期
    8. avatar: "@image('200x200','red', '#fff','avatar')" ,//生成图片，参数:size，background,foreground, text
    9. description: "@paragraph()" ,//描述
    10. ip: "@ip()",//IP地址
    11. email: "@email()"//emai1
    12. })
    13. console.log(obj)

     步骤四 ----引入json5来解析json5格式

    json文件存在注释，文件和编辑器都会报错,所以应该采用json5格式来让json格式可以存在注释

    步骤4.1 编辑器安装json5扩展

    步骤4.2 引入JSON5库来解析JSON5格式

    userInfo.json5文件：

    1. {
    2. id:"@id()",//得到随机的id,对象
    3. username: "@cname()",//随机生成中文名字
    4. date: "@date()",//随机生成日期
    5. avatar: "@image('200x200','red', '#fff','avatar')" ,//生成图片，参数:size，background,foreground, text
    6. description: "@paragraph()" ,//描述
    7. ip: "@ip()",//IP地址
    8. email: "@email()"//emai1
    9. }

    在mock文件夹下，创建testJSON.js

    1. const fs=require('fs')
    2. const path=require('path')
    3. const JSON5=require('json5')
    4. //读取文件
    5. function getJsonFile(filePath){
    6. //读取指定json文件
    7. /**readFileSync(文件路径（不可省略）,读出文件的编码方式（可省略，省略后读出的数据是buffer数据格式）)
    8. 它是同步任务，而readFile是异步任务
    9. */
    10. // path.resolve总是返回一个以相对于当前的工作目录的绝对路径。
    11. var json=fs.readFileSync(path.resolve(__dirname,filePath),'utf-8');
    12. //解析并返回
    13. return JSON5.parse(json)
    14. }
    15. var json=getJsonFile('./userInfo.json5');
    16. console.log('json',json)

     步骤五 mock与vue-cli结合

    步骤5.1 新建index.js

    1. const fs=require('fs')
    2. const path=require('path')
    3. const Mock=require('mockjs')
    4. const JSON5=require('json5')
    5. function getJsonFile(filePath){
    6.     //读取指定json文件
    7.     var json=fs.readFileSync(path.resolve(__dirname,filePath),'utf-8');
    8.     //解析并返回
    9.     return JSON5.parse(json)
    10.     }
    11. //返回一个函数
    12. module.exporst=function(app){
    13.     //监听http请求
    14.     app.get('/user/userinfo',function(req,res){
    15.         //每次响应请求时读取mock data的json文 件
    16.         //getJsonFile方法定义了如何读取jison文件并解析成数据对象
    17.          var json=getJsonFile('./userInfo.json5');
    18.          //将json传入Mock. mock方法中，生成的数据返回给浏览器
    19.          res.json(Mock.mock(json))
    20.     })
    21.  
    22. }

    步骤5.2

    在项目根目录下，新建vue.config.js

    1. module.exports={
    2.  devserver: {
    3.   before: require('./mock/index.js')//引入mock/index.js
    4.   }
    5. }

    步骤5.3 发送ajax请求

    在src\components\Helloworld. vue中发送aja请求

    1. export default {
    2.   name: 'HelloWorld',
    3.   props: {
    4.     msg: String
    5.   },
    6.   mounted:function(){
    7.     axios.get('user/userinfo').then(res=>{
    8.       console.log(res)
    9.     })
    10.     .catch(err=>{
    11.       console.error(err)
    12.     })
    13.   }
    14. }

    三  在jQuery项目中使用

     步骤一 创建项目

    1.1 新建文件夹jquery-mock-demo

    1.2 新建index . html,引入jquery. js文件和mock.js

    1. < !DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content= "width=device -width, initial-scale=1.0">
    6. <meta http- equiv= "X -UA -Compatible" content= " ie=edge " >
    7. <title>Document</title>
    8. <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    9. <script src=" https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>
    10. </head>
    11. <body>
    12. /body]
    13. </html>

    步骤二 mock与jQuery结合

    2.1 书写mock/index.js

    1.  
    2. Mock.mock('user/userinfo','get',{
    3.     id:"@id()",//得到随机的id,对象
    4.     username: "@cname()",//随机生成中文名字
    5.     date: "@date()",//随机生成日期
    6.     avatar: "@image('200x200','red', '#fff','avatar')" ,//生成图片，参数:size，background,foreground, text
    7.     description: "@paragraph()" ,//描述
    8.     ip: "@ip()",//IP地址
    9.     email: "@email()"//emai1
    10.     })

    2.2 使用jQuery发送ajax请求

    在index.html中写

    1.  <script src="./mock/index.js"></script>
    2.     <script>
    3.       $.ajax({
    4.         url:'/user/userinfo',
    5.         dataType:'json',
    6.         success:(data)=>{
    7.             console.log(data)
    8.         }
    9.       })
    10.     </script>

    步骤三 移除mock

    方法一：

    方法二：

    在index.html中添加

    <script>Mock='true'</script>

    将mock/index.js中的内容改为

    1. if(Mock=='true'){
    2. Mock.mock('user/userinfo','get',{
    3.     id:"@id()",//得到随机的id,对象
    4.     username: "@cname()",//随机生成中文名字
    5.     date: "@date()",//随机生成日期
    6.     avatar: "@image('200x200','red', '#fff','avatar')" ,//生成图片，参数:size，background,foreground, text
    7.     description: "@paragraph()" ,//描述
    8.     ip: "@ip()",//IP地址
    9.     email: "@email()"//emai1
    10.     })
    11. }

  • 相关阅读:
    一文梳理SpringCloud常见知识点
    离线地图二次开发(一套代码支持所有地图源)
    干货 ：医疗企业渠道管理实战手册：策略、平台建设、CRM解决方案
    前端ES6结构赋值详解大全
    Word另存为PDF后无导航栏解决办法
    Java中的抽象类和接口的区别
    计算机视觉与深度学习 | 视频/图像转换及保存播放（Matlab源码）
    riscv引导程序及仿真记录
    GBase 8c产品简介
    ChatGPT提示词工程＆LLM应用全解
  • 原文地址：https://blog.csdn.net/qq_62401904/article/details/126681985