vite+vue3+axios+ts入门mockjs以及深入学习,直接一步精通
目錄
1、入門
1.1、下載
1.2、配置與定義數據
1.3、使用方式
1.4、效果圖
2、語法規范
2.1、數據模板定義規范?
2.2、數據占位符定義規
3、深入學習mockjs
3.1、Mock.mock
3.2、Mock.setup
3.3、Mock.Random
Mock.Random?方法?
Random.extend 擴展(自定義隨機數據)
3.4、Mock.valid() 、Mock.toJSONSchema()
Mock.valid()?
?Mock.toJSONSchema()
版本:
?"axios": "^1.2.0",
"mockjs": "^1.1.0",
"vite-plugin-mock": "^2.9.6",
1、入門
1.1、下載
npm?下載axios?
npm install axios
npm下載 mockjs +?在 vite 的mockjs的配置插件
npm i mockjs vite-plugin-mock -D
1.2、配置與定義數據
vite.config.ts?
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//vite-plugin-mock
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({plugins: [vue(),viteMockServe({ //vite-plugin-mockmockPath: "./src/request/",// 指向mock下的文件,這個很重要,一定要指向 mock ,localEnabled: true, // 是否開啟開發環境(生產環境不要打開.為 false將禁用 mock 功能)})],
})
創建一個request文件夾,創建以下三個文件,分別是: (要分開也行,注意路徑就行,)
request :?用來封閉 axios
mock? ?? : 用來攔截?axios?然后自定義數據 ****?這個才是配置mockjs的數據并返回的
api? ? ? ???:??請求 axios?
這樣做可以最大化的把請求接口與mock的界線區分開,
到時候有真的接口,不要mock的某個接口時,刪除mock文件下對應的數據就行
?request/request 文件配置
import axios from 'axios'
// 創建一個 axios 實例
const request = axios.create({baseURL: 'http://127.0.0.1:5173', // 所有的請求地址前綴部分timeout: 60000, // 請求超時時間毫秒withCredentials: true, // 異步請求攜帶cookie
})
// 添加請求攔截器
request.interceptors.request.use(function (config) {// 在發送請求之前做些什么return config},function (error) {// 對請求錯誤做些什么console.error('請求錯誤', error)return Promise.reject(error)}
)
// 添加響應攔截器
request.interceptors.response.use(function (response) {// 對響應數據做點什么return response.data},function (error) {return Promise.reject(error)}
)export default request request/mock?定義數據 ,
這個文件在哪里,?vite.config.ts?的 mockPath 屬性值就要寫到mock.ts的上級目錄
import Mock from "mockjs";
let mock = Mock.mock({url: "/mock", //請求路徑method: "post",//請求方法response: () => {return {"data|6": [ //生成6條數據 數組{"shopId|+1": 1,//生成商品id，自增1"shopMsg": "@ctitle(10)", //生成商品信息，長度為10個漢字"shopAddress": "@county(true)", //隨機生成地址"shopStar|1-5": "★", //隨機生成1-5個星星}]}}
})
let index = Mock.mock({url: "/index",method: "get",response: () => {return {"data|6": [ //生成6條數據 數組{"shopId|+1": 1,//生成商品id，自增1"shopName": "@cname",//生成商品名 ， 都是中國人的名字"shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成隨機電話號}]}}
})
//導出給mockjs處理,導出的變量名隨便定義
export default [mock,index,
]上面 ( mock文件?) 的導出的變量名隨便定義,因為是給mockjs自動處理并返回數據的
但是Mock.mock中的url一定要和下面 ( api文件 )?的路徑要一樣,因為 url 是瀏覽器請求的數據的路徑
request/api?接口文件 ,這個文檔主要寫接口的路徑與參數
// 導入axios實例
import request from './request'
// PAI
export const login = () => request.post('/mock')
export const index = () => request.get('/index')
1.3、使用方式
<script setup lang='ts'>
import { login,index } from "../request/api";//第一種方式:使用 promise.then
login().then(res => {console.log("login", res.data);
})//第二種方式:使用 await, 但第二種會有一個警告,
let res = await index()
console.log("index", res.data);</script>第二種方式:警報
警報的意思中:具有異步setup（）的組件必須嵌套在<Suspense>中才能呈現。
解決:在父組件套一個
? ? <Suspense>
? ? ? ? <異步請求的組件></異步請求的組件>
? ? </Suspense>
這就行了,但這個<Suspense>是一個實驗性功能，其API可能會發生變化。
1.4、效果圖
mockjs的示例文檔
vite-plugin-mock的中文配置文檔
2、語法規范
Mock.js 的語法規范包括兩部分：1.數據模板定義規范? 2.數據占位符定義規
2.1、數據模板定義規范?
數據模板中的每個屬性由3部分構成:屬性名、生成規則、屬性值:
屬性名 name?、生成規則rule、屬性值 value
格式：? ?name | rule: value
注意:
1.屬性名和生成規則之間用豎線 | 分隔。
2.生成規則是可選的。
3.生成規則有7種格式:
let constellationsObj = { Aries: '白羊座', Taurus: '金牛座', Gemini: '雙子座', Cancer: '巨蟹座', Leo: '獅子座',virgo: '處女座',libra: '天秤座', scorpio: '天蝎座', sagittarius: '射手座', Capricornus: '摩羯座', aquarius: '水瓶座', Pisces: '雙魚座',}let constellationsArr = ['白羊座', '金牛座', '雙子座', '巨蟹座', '獅子座', '處女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '雙魚座']? ?1、"name|min-max":value
? ? ? ? 1.1：如果value是srting，重復value的值,重復次數等于隨機min-max之間的次數。
? ? ? ? 1.2：如果value是number，就會隨機min-max之間選一個值
? ? ? ? 1.3：如果value是boolean，最終值是與相反值的概率
????????1.4：如果value是object，最終值是在value值中隨機min-max個值
? ? ? ? 1.5：如果value是array，最終值是重復valur值，會重復min-max之間次數
如： 1.1："id|1-10":'1', //第一次：'1' ，第二次 ：'11111111'1.2："id|1-10":1, //第一次：1 ，第二次 ：81.3: "bool|1-10":true //true的的率為11為之1,false的的率為11為之101.4："obj|1-3": constellationsObj , // 第一 obj：{aquarius:'水瓶座'}//第二 obj：{Cancer:'巨蟹座', Capricornus:'摩羯座'} 1.5: "arr|1-3": constellationsArr,//變量是 constellations ，不過是數組的//arr:['白羊座',...'雙魚座','白羊座',...'雙魚座','白羊座',...'雙魚座',]? ?2、"name|count":value
? ? ? ? 2.1：如果value是srting，重復value的值,重復次數等于count。
????????2.2：如果value是boolean，最終值是相反值概的率倍數
? ? ? ? 2.3：如果value是object，從屬性值 object 中隨機選取 count 個屬性。
? ? ? ? 2.4：如果value是array，分兩種情況，count值為1，和1以上
???????????????????????????????count?為1的值：隨機選中array中的一個值
???????????????????????????????count?為1以上的值：最終值是重復valur值，會重復count次數
????????
如： 2.1： "id|5":'1', //=>'11111' 五個12.2: "bool|1":true, //=> true與false都是2分之1"bool|5":true, //=> true為5分之4, false都是5分之1,2.3："obj|1": constellationsObj,//變量和上面的一樣//一次 obj：{Aries: '白羊座'} ，二次 obj：{libra: '天秤座'}2.4："arr|1": constellationsArr,//count?為1的值//一次 arr: '雙子座' ，二次 arr: '水瓶座'"arr|2": constellationsArr,//count?為1以上的值// arr:['白羊座',...'雙魚座','白羊座',...'雙魚座']? ?3、"name|min-max.dmix-dmax":value
? ? ? ? 3.1：生成一個浮點數,整數部分大于等于min、小于等于max，
????????????????小數部分保留dmin到dmax位，value只能是number值就行多少無所謂
如：3.1 "num|1-100.1-10": 1, //第一次 num: 13.502312311, 第二 num: 12.51 第三num: 53.6747? ?4、"name|min-dcount":value
? ? ? ? 4.1：生成一個浮點數,整數部分小于等于max、大于等于dcount整數，
?????????????????小數部分保留dcount . 后的位數，value只能是number值就行多少無所謂
如：4.1 'num|1-10.2': 200, //第一次num: 10.53 第二 num: 3.56 第三 num: 6.31? ?5、"name|count.dmin-dmax":value
? ? ? ? 5.1：把count作為一個值并小數部分保留dmin到dmax位，
????????????????value只能是number值就行多少無所謂
如：5.1'num|1.1-10': 1, //第一次num: 1.18737543 第二 num: 1.3170182 第三 num: 1.5665? ?6、"name|count.dcount":value
? ? ? ? 6.1：把count作為一個值并小數部分保留dcount位，但它最終值的前幾位
????????????????由value的小數點前幾位占置，value只能是number值，且整數無用,小數有用
如：6.1 'num|1.8': 232.123 //第一次 num: 1.12377547 第二 num: 1.12379682 第三 num: 1.12356685? ?7、"name|+step":value
? ? ? ? 7.1：如果value是number，屬性值自動加 step，初始值為?value。
????????7.2：如果value是array，最終值為上次再加 step 順序選取，會重復
如：5.1:"num|+1": 12, //第一 num: 12 第二 num: 13 第三 num: 145.2:"arr|+1": constellationsArr,//第一arr:'白羊座' 第二arr:'金牛座' 第三 arr:'雙子座'4.value是函數Function：執行函數?
function，取其返回值作為最終的屬性值5.value是正則表達式?RegExp：根據正則表達式?
regexp?反向生成可以匹配它的字符串
2.2、數據占位符定義規
占位符只是在屬性值字符串中占個位置,
并不出現在最終的屬性值中。
占位符的格式為:? @占位符? ? @占位符(參數[,參數])
注意:
1.用@來標識其后的字符串是占位符。
2.占位符引用的是Mock. Random中的方法。
3. 通過Mock. Random extend()來擴展自定義占位符。
4.占位符也可以引用數據模板中的屬性。
5.占位符會優先引用數據模板中的屬性。
6.占位符支持 相對路徑和絕對路徑。
這個 3.3、Mock.Random 會有說，知道123點，并過下就行
其實這個入門就夠,?后面都是要看文檔來配置數據的了
3、深入學習mockjs
3.1、Mock.mock
Mock.mock( rurl?, rtype?, template|function( options ) )這個已經在入門展示過了其他使用的具體方法:mock.js學習之Mock.mock()&Mock.setup()使用_篇3
但上面這個是要在同一個組件上使用,如果你想要定義數據與接口分開,還是使用我上面這種方法,
分開定義的好處就是數據來源清晰,容易修改數據、接口、請求方法等,
缺點就是要開多個文件,以及使用分開定義的mock bug有點多,這是因為mock從未更新過,但這是bug大都是可以用其它方法來避免的
后面?我用 分開定義??表示是我這種方法(一個文件定義mock數據,一個請求,還有一個要使用的組件)
組件定義??表示的是在同一個組件上定義的方法(在一個組件上定義數據并請求使用數據)
3.2、Mock.setup
配置攔截 Ajax 請求時的行為。支持的配置項只有一個：timeout 。
如果你是使用上面的鏈接的方法的話,也是在同一個組件上使用
但在我這定義數據與接口分開是不行的,如何做才行?
let index = Mock.mock({url: "/index",method: "post",timeout: 1000, //其實也很簡單,就是在定義數據這加多一個這個屬性就行response: () => { return *** }
})?timeout :?它的參數是 ?numbe正整數?如400 ?或
????????????????string 'xx -?xx' 風格的字符串，如 "200 -600" ;?單位是毫秒?
表示 200 - 600 毫秒后才會返回響應內容，
3.3、Mock.Random
Mock.Random 是一個工具類，用于生成各種隨機數據。
Mock.Random 的方法在數據模板中稱為『占位符』，書寫格式為?
@占位符(參數 [, 參數])?。
官方示例:這個可以在任何地方使用
使用方法:Mock.Random
import Mock from "mockjs";
var Random = Mock.Random//在某一組件單獨使用
Random.email()
// => "n.clark@miller.io"//在定義數據上使用 mock.ts 文件上
let index = Mock.mock({url: "/index",method: "post",response: () => {return {"email": Random.email(),// => { email: "v.lewis@hall.gov" }}}
})使用方法二:'@方法'
Mock.mock('@email')
// => "y.lee@lewis.org"Mock.Random?方法?
| 類型 | 方法 |
|
基本 |
boolean, natural, integer, float, character, string , range,? date? , time,? ?datetime,? ?now 布爾值,? ? 自然數，整數,? 浮動，字符，? ?字符串, 范圍，日期，時間，日期時間，現在 |
| 圖像 |
image, dataImage 圖像，生成一段隨機的 Base64 圖片編碼(這個用定義數據與接口是會報錯的,用不了) |
| 顏色 | color |
| 文本 |
paragraph, sentence, word,? ?title,? ? ?cparagraph, csentence, cword, ctitle ? ?段落，? ? ?句子，? ? 單詞,? ?標題，? ?后面和前面的一樣,后面加個 c?表示是中文 |
| 名字 |
first, last,? name, cfirst, clast, cname ?姓 ,? ?名?,?全名? ? ,加 c?為中文 |
| 網絡 |
url, domain,? email,? ? ? ?ip,? ? tld Url，域名，電子郵件，ip，頂級域名 |
| 地址 |
area, region 區域 , 地區 |
| 輔助 |
capitalize? ? : 把字符串的第一個字母轉換為大寫? ? upper? ? ?? ? ?: 把字符串轉換為大寫， lower?? ? ? ? ? :?為大寫， pick? ? ? ? ? ? ?:?從數組中隨機選取一個元素，并返回 shuffle? ? ? ? ?: 打亂數組中元素的順序，并返回 |
| 雜項 |
? ? ? guid? ? ,? ? ? ? ? id 全局唯一標示符,? id |
?Random.方法的參數比較多,就不在這說了,而且官網說的也很明的Random.方法的參數
Random.extend 擴展(自定義隨機數據)
這是官網的方法,但vue3的組合式API是沒有this的,不過它this是Random,
var Random = Mock.Random
Random.extend({constellation: (conut) => {let constellations = ['白羊座', '金牛座', '雙子座', '巨蟹座', '獅子座', '處女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '雙魚座']//如果傳參，并且是number值，就隨機返回 conut 個值 if (conut !== undefined && Object.prototype.toString.call(conut) === '[object Number]') {let arr = []for (let i = 0; i < conut; i++) {let pickOn = Random.pick(constellations)constellations.splice(constellations.indexOf(pickOn),1)arr.push(pickOn)}return arr} else {return Random.pick(constellations)}}
})使用
let index = Mock.mock({url: "/index",method: "post",response: () => {return {"data": [{"arr": Random.constellation(2),//arr: ['雙子座', '水瓶座']"arr1": Random.constellation(4),//arr1:['摩羯座', '射手座', '獅子座']"arr2": Random.constellation(),//arr2: "射手座"}]}}
})返回的 pick 方法是在輔助類型上的,可以從中選一個,也可以自己寫
不過我這分開定義的，它這?extend 在不同的文件用不了自定義和方法，真心覺得不用 extend 都行
自定義隨機數據最好是使用方法一 :?Random.constellation()? 記得加(),這是方法,不是屬性
因為方法二多多少少都有點問題,雖然還是在一些情況能用,但沒必要太麻煩一個個試驗
3.4、Mock.valid() 、Mock.toJSONSchema()
Mock.valid()?
校驗真實數據 data 是否與數據模板 template 匹配。
template :表示數據模板，可以是對象或字符串。
data? ? :表示真實數據
...這個.怎么說呢,應該沒人會用，有真實數據估計也沒幾個人用這個了
?Mock.toJSONSchema()
?Mock.toJSONSchema() ，
把 Mock.js 風格的數據模板 template 轉換成?JSON Schema。
那可以忽略了,無聊可以去官網看下
?完成! ✨?
總結
以上是生活随笔為你收集整理的vite+vue3+axios+ts入门mockjs以及深入学习,直接一步精通的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Educational Codeforc
- 下一篇： 支持两个USB Type-C接口都能投屏