mockjs（接口服务代理）
生活随笔
收集整理的這篇文章主要介紹了
mockjs（接口服务代理）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
mock官網(wǎng)：http://mockjs.com/
一、搭建一個(gè)練習(xí)項(xiàng)目
1.利用vue的項(xiàng)目腳手架進(jìn)行搭建
命令：
vue create mock-demo
截圖：
2.安裝相關(guān)的依賴
命令：
#使用 axios 發(fā)送 ajax npm install axios --save #使用 mock.js 產(chǎn)生隨機(jī)數(shù)據(jù) npm install mockjs --save-dev #使用 json5 解決json 文件，無法添加注釋問題 npm install json5 --save-dev二、學(xué)習(xí)mockjs
新建mock文件夾，新建testMock.js
mock語(yǔ)法定義
以上代碼的隨機(jī)生成位置，還需要自己去官方文檔查看，謝謝！
三、在mockjs中使用json5的操作
通過上面 json5 模塊的安裝后，還需要相應(yīng)的 vscode 插件
1.設(shè)置一個(gè)json5文件
2.設(shè)置一個(gè)js文件，通過 fs \ path 查詢 之前設(shè)置的 json5 文件夾
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Kb0J1jjx-1599721543422)(C:\Users\wangyu123\AppData\Roaming\Typora\typora-user-images\image-20200910121003639.png)]
3.在mock文件夾下通過終端獲取得到 “字符串形式的結(jié)構(gòu)”
4.在testJSON5.js文件中引入 模塊 json5，然后利用json的parse() 方法進(jìn)行字符串轉(zhuǎn)對(duì)象的形式輸出
修改前后的對(duì)比：
_在vue項(xiàng)目中使用mock.js_通過devServer配置監(jiān)聽mock請(qǐng)求
1.在新建的vue.config.js文件中進(jìn)行devServer的配置
module.exports = {devServer: {...,before: require('./mock/index.js')//引入mock/index.js}, }2.在mock文件夾下，創(chuàng)建 index.js 并引入代碼
const fs = require('fs') //文件名稱 const path = require('path')//文件路徑 const Mock = require('mockjs')//導(dǎo)入mock 依賴 const JSON5 = require('json5');//導(dǎo)入json5// 讀取json文件 function getJsonFile(filePath){// 讀取指定json文件const json = fs.readFileSync(path.join(__dirname,'./userinfo.json5'),'utf-8')// console.log(json);// 解析并返回return JSON5.parse(json)// console.log(obj); }// 返回一個(gè)函數(shù) module.exports = function(app){// 監(jiān)聽http請(qǐng)求app.get('/user/userinfo', function(rep,res){// 每次響應(yīng)請(qǐng)求時(shí)讀取 mock data 的json 文件// getJsonFile 方法定義了如何讀取json 文件并解析成數(shù)據(jù)對(duì)象var json = getJsonFile('./userinfo.json5');// 將 json 傳入 Mock.mock方法中，生成的數(shù)據(jù)返回給瀏覽器res.json(Mock.mock(json));}); }3.在vue項(xiàng)目中使用mock.js_axios發(fā)送請(qǐng)求獲取mock提供的數(shù)據(jù)
3.1 在項(xiàng)目文件夾的HelloWorld.vue文件夾中發(fā)送請(qǐng)求
代碼設(shè)置為：
export default {name: 'HelloWorld',props: {msg: String},mounted:{axios.get('/user/userinfo').then(res => {console.log(res) }).catch(err => {console.log(err) })} }獲取到數(shù)據(jù)為：
4.在vue項(xiàng)目中使用mock.js_mock移除（當(dāng)后臺(tái)接口已寫好的時(shí)候移除）
4.1 通過設(shè)置 vue cli 的環(huán)境變量進(jìn)行設(shè)置
先進(jìn)行環(huán)境變量的判斷：
在根目錄設(shè)置 .env.development 文件 設(shè)置環(huán)境變量的去向值
5.在vue項(xiàng)目中使用mock.js_mock-json5-devServer-axios職責(zé)
6.在jQuery項(xiàng)目中使用mock.js_mock攔截請(qǐng)求的原理
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="http://mockjs.com/dist/mock.js"></script> </head> <body></body> </html>7.在jQuery項(xiàng)目中使用mock.js_使用mock
Mock.mock('/user/userinfo','get',{id:"@id()", //得到隨機(jī)的idusername:"@cname()",//隨機(jī)生成中文名字date:"@date()",//隨機(jī)生成日期avata:"@image('200x200','red','#fff','avatar')",//生成圖片，參數(shù)：size,background,foreground,textdescrtption:"@paragraph()",//描述ip:"@ip()",//ip地址email:"@email()"//email })6.2 發(fā)送 jQuery 的ajax 請(qǐng)求
<script src="./index.js"></script> <script>$.ajax({url:'/user/userinfo',dataType:'json',success:(data) => {console.log(data);}}) </script>8.在jQuery項(xiàng)目中使用mock.js_移除mock
8.1 : 直接注釋或刪除引入的mock.js文件
8.2：在編譯的mockjs文件中設(shè)置判斷
```8.在jQuery項(xiàng)目中使用mock.js_移除mock
8.1 : 直接注釋或刪除引入的mock.js文件
8.2：在編譯的mockjs文件中設(shè)置判斷
總結(jié)
以上是生活随笔為你收集整理的mockjs（接口服务代理）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js - （初中级）常见笔试面试题
- 下一篇： 制作手写签名