>[success] # MOCK 數據模擬
~~~
1.在開發過程中,可能會前端的進度大于后臺,此時雖然可以根據定義的接口數據格式進行開發,但是
想嘗試數據真實效果最笨的方式就是通過數據寫死,當然也可以利用'Mock' 來模擬數據
~~~
>[info] ## 關于mock
~~~
1.mockjs官方自己的描述'生成隨機數據,攔截 Ajax 請求',官方的形容
1.1.前后端分離讓前端攻城師獨立于后端進行開發。
1.2.增加單元測試的真實性通過隨機數據,模擬各種場景。
1.3.開發無侵入不需要修改既有代碼,就可以攔截 Ajax 請求,返回模擬的響應數據。
1.4.用法簡單符合直覺的接口。
1.5.數據類型豐富支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
1.6.方便擴展支持支持擴展更多數據類型,支持自定義函數和正則。
~~~
>[info] ## 安裝
~~~
1.npm install mockjs
~~~
>[info] ## 使用
~~~
var Mock = require('mockjs') // import Mock from "mockjs"
// 使用形式是
Mock.mock( requestUrl?, requestType?, template|function(options) )
// 使用的形式能組合的結果
Mock.mock( template| function(options) )
Mock.mock( requestUrl, template )
Mock.mock( requestUrl, requestType, template )
Mock.mock( requestUrl, requestType, function(options) )
參數介紹:
'requestUrl': 要攔截的URL,字符串或正則表達式
'equestType': 要攔截的請求類型,get/post/put/delete/options...
'template': 數據模板
'function(options)':生成響應數據的函數,options --> { url, type, body }
~~~
>[info] ##### 關于模板
~~~
1.Mock是可以真實性通過隨機數據,模擬各種場景,達到這種場景mock 提供了'數據模板定義規范'
可以理解按照某種規則快速生成想要數據數據格式
2.這種格式的構成由3部分組成: '屬性名|生成規則:屬性值'
~~~
>[danger] ##### 舉個例子
~~~
var Mock = require('mockjs') // import Mock from "mockjs"
const a = Mock.mock({
"str|2": "hello world",
});
// 打印結果
{
"str": "hello worldhello world"
}
~~~
>[danger] ##### 使用
* Mock 根據提供的模板生成格式數據
~~~
const a = Mock.mock({
"str|2": "hello world",
});
~~~
* 使用攔截
~~~
// 正則/\/getUserInfo/
Mock.mock("http://localhost:3000/getUserInfo", (opt) => {
return {
str: "hello world",
};
});
Mock.mock("http://localhost:3000/getUserInfo", (opt) => {
return Mock.mock({
"str|2": "hello world",
});
});
Mock.mock("http://localhost:3000/getUserInfo",'get' {
"str|2-4": "hello world",
});
~~~
>[info] ## 我在vue 中實踐
~~~
1.創建可一個'mock' 文件夾,'mock' 文件的結構目錄我是放在和src 同級,還需要在'main.js' 導入一下mock
~~~

* mock/index.js
~~~
import Mock from "mockjs";
import { getUserInfo } from "./response/userInfo";
// 正則/\/getUserInfo/
Mock.mock("http://localhost:3000/getUserInfo", getUserInfo);
export default Mock;
~~~
* mock/response/userInfo.js
~~~
export const getUserInfo = (opts) => {
console.log(opts);
return {
name: "user",
};
};
~~~
* src/main.js
~~~
if (process.env.NODE_ENV !== 'production') require('../mock')
~~~
>[info] ## 更詳細的用法參考
[鏈接](https://github.com/lison16/vue-cource/blob/mock/src/mock/mock.doc.md)
- 工程化 -- Node
- vscode -- 插件
- vscode -- 代碼片段
- 前端學會調試
- 谷歌瀏覽器調試技巧
- 權限驗證
- 包管理工具 -- npm
- 常見的 npm ci 指令
- npm -- npm install安裝包
- npm -- package.json
- npm -- 查看包版本信息
- npm - package-lock.json
- npm -- node_modules 層級
- npm -- 依賴包規則
- npm -- install 安裝流程
- npx
- npm -- 發布自己的包
- 包管理工具 -- pnpm
- 模擬數據 -- Mock
- 頁面渲染
- 渲染分析
- core.js && babel
- core.js -- 到底是什么
- 編譯器那些術語
- 詞法解析 -- tokenize
- 語法解析 -- ast
- 遍歷節點 -- traverser
- 轉換階段、生成階段略
- babel
- babel -- 初步上手之了解
- babel -- 初步上手之各種配置(preset-env)
- babel -- 初步上手之各種配置@babel/helpers
- babel -- 初步上手之各種配置@babel/runtime
- babel -- 初步上手之各種配置@babel/plugin-transform-runtime
- babel -- 初步上手之各種配置(babel-polyfills )(未來)
- babel -- 初步上手之各種配置 polyfill-service
- babel -- 初步上手之各種配置(@babel/polyfill )(過去式)
- babel -- 總結
- 各種工具
- 前端 -- 工程化
- 了解 -- Yeoman
- 使用 -- Yeoman
- 了解 -- Plop
- node cli -- 開發自己的腳手架工具
- 自動化構建工具
- Gulp
- 模塊化打包工具為什么出現
- 模塊化打包工具(新) -- webpack
- 簡單使用 -- webpack
- 了解配置 -- webpack.config.js
- webpack -- loader 淺解
- loader -- 配置css模塊解析
- loader -- 圖片和字體(4.x)
- loader -- 圖片和字體(5.x)
- loader -- 圖片優化loader
- loader -- 配置解析js/ts
- webpack -- plugins 淺解
- eslit
- plugins -- CleanWebpackPlugin(4.x)
- plugins -- CleanWebpackPlugin(5.x)
- plugin -- HtmlWebpackPlugin
- plugin -- DefinePlugin 注入全局成員
- webapck -- 模塊解析配置
- webpack -- 文件指紋了解
- webpack -- 開發環境運行構建
- webpack -- 項目環境劃分
- 模塊化打包工具 -- webpack
- webpack -- 打包文件是個啥
- webpack -- 基礎配置項用法
- webpack4.x系列學習
- webpack -- 常見loader加載器
- webpack -- 移動端px轉rem處理
- 開發一個自己loader
- webpack -- plugin插件
- webpack -- 文件指紋
- webpack -- 壓縮css和html構建
- webpack -- 清里構建包
- webpack -- 復制靜態文件
- webpack -- 自定義插件
- wepack -- 關于靜態資源內聯
- webpack -- source map 對照包
- webpack -- 環境劃分構建
- webpack -- 項目構建控制臺輸出
- webpack -- 項目分析
- webpack -- 編譯提速優護體積
- 提速 -- 編譯階段
- webpack -- 項目優化
- webpack -- DefinePlugin 注入全局成員
- webpack -- 代碼分割
- webpack -- 頁面資源提取
- webpack -- import按需引入
- webpack -- 搖樹
- webpack -- 多頁面打包
- webpack -- eslint
- webpack -- srr打包后續看
- webpack -- 構建一個自己的配置后續看
- webpack -- 打包組件和基礎庫
- webpack -- 源碼
- webpack -- 啟動都做了什么
- webpack -- cli做了什么
- webpack - 5
- 模塊化打包工具 -- Rollup
- 工程化搭建代碼規范
- 規范化標準--Eslint
- eslint -- 擴展配置
- eslint -- 指令
- eslint -- vscode
- eslint -- 原理
- Prettier -- 格式化代碼工具
- EditorConfig -- 編輯器編碼風格
- 檢查提交代碼是否符合檢查配置
- 整體流程總結
- 微前端
- single-spa
- 簡單上手 -- single-spa
- 快速理解systemjs
- single-sap 不使用systemjs
- monorepo -- 工程
- Vue -- 響應式了解
- Vue2.x -- 源碼分析
- 發布訂閱和觀察者模式
- 簡單 -- 了解響應式模型(一)
- 簡單 -- 了解響應式模型(二)
- 簡單 --了解虛擬DOM(一)
- 簡單 --了解虛擬DOM(二)
- 簡單 --了解diff算法
- 簡單 --了解nextick
- Snabbdom -- 理解虛擬dom和diff算法
- Snabbdom -- h函數
- Snabbdom - Vnode 函數
- Snabbdom -- init 函數
- Snabbdom -- patch 函數
- 手寫 -- 虛擬dom渲染
- Vue -- minVue
- vue3.x -- 源碼分析
- 分析 -- reactivity
- 好文
- grpc -- 瀏覽器使用gRPC
- grcp-web -- 案例
- 待續