文章目錄
- 介紹
- 測試
- 跳轉
- vue Bus總線
介紹
Mock.js的特點：
1，前後端分離
讓前端攻城師獨立于後端進行開發。增加單元測試的真實性，通過随機資料，模拟各種場景。
2，開發無侵入
不需要修改既有代碼，就可以攔截 Ajax 請求，傳回模拟的響應資料。
3，資料類型豐富
支援生成随機的文本、數字、布爾值、日期、郵箱、連結、圖檔、顔色等。
4，友善擴充
支援支援擴充更多資料類型，支援自定義函數和正則。
簡單的來說通過Mock.js我們就可以自己模拟資料和請求，而不通過背景來完成了。
使前後端分離。
要想使用Mock.js，首先第一步是安裝Mockjs依賴，
在項目cmd中輸入：
npm install mockjs -D #隻在開發環境使用
即可下載下傳。
下載下傳完後在項目中引入：
在config檔案夾中的dev.env添加MOCK: ‘true’，prod.env 檔案中添加MOCK: ‘false’
dev.env
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
MOCK: 'true'
})
prod.env
module.exports = {
NODE_ENV: '"production"',
MOCK: 'false'
}
然後在根目錄下的main.js中添加
process.env.MOCK && require('@/mock')
這樣的配置是為了隻在開發環境使用mock，而打包到生産環境時自動不使用mock。
若不想用測試資料 寫要請求背景了，則在main.js‘把 process.env.MOCK && require(’@/mock’)删除即可。
測試
首先導入我寫的mock檔案：
index,js:
import Mock from 'mockjs' //引入mockjs，npm已安裝
import action from '@/api/action' //引入請求位址
//全局設定：設定所有ajax請求的逾時時間，模拟網絡傳輸耗時
Mock.setup({
// timeout: 400 //延時400s請求到資料
timeout: 200 - 400 //延時200-400s請求到資料
})
//引登陸的測試資料，并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
Mock.mock(s1, "get", loginInfo)
// Mock.mock(s1, /post|get/i, loginInfo)
json檔案夾：
login-mock.js:
//使用mockjs的模闆生成随機資料
const loginInfo = {
'code|0-1': 0,
'msg|3-10': 'msg'
}
export default loginInfo;
還有api檔案夾中的：
action.js：
/**
* 對背景請求的位址的封裝，URL格式如下：
* 子產品名_實體名_操作
*/
export default {
'SERVER': 'http://localhost:8080/SSH', //伺服器
'SYSTEM_USER_DOLOGIN': '/vue/userAction_login.action', //使用者登陸
'SYSTEM_USER_DOREG': '/vue/userAction_reg.action', //使用者注冊
'SYSTEM_MENU_TREE': '/vue/treeNodeAction.action', //左側樹形菜單加載
'SYSTEM_ARTICLE_LIST': '/vue/articleAction_list.action', //文章清單
'SYSTEM_ARTICLE_ADD': '/vue/articleAction_add.action', //文章新增
'SYSTEM_ARTICLE_EDIT': '/vue/articleAction_edit.action', //文章修改
'SYSTEM_ARTICLE_DEL': '/vue/articleAction_del.action', //文章删除
'SYSTEM_USER_GETASYNCDATA': '/vue/userAction_getAsyncData.action', //vuex中的異步加載資料
'getFullPath': k => { //獲得請求的完整位址，用于mockjs測試時使用
return this.SERVER + this[k];
}
}
這三個檔案，主要的是index.js
他第一步是擷取攔截位址：
通過 action李的getFullPath方法獲得攔截位址，
let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
然後建立一個Mock:
Mock.mock(s1, "get", loginInfo)
Mock.mock(url, type, data).
| 參數名 | 參數需求 | 參數描述 | 例子 |
|---|---|---|---|
| url | 可選: URL 字元串或 URL 正則 | 攔截請求的位址 | s1 |
| type | 可選 | 攔截Ajax類型 | GET、POST |
| template | 可選:可以是對象或字元串 | 生成資料的模闆 | loginInfo |
template可能有些難了解，其實就是模拟傳回資料的類型，參數。
就比如我login-mock.js這個檔案：
const loginInfo = {
'code|0-1': 0,
'msg|3-10': 'msg'
}
參數名|傳回次數：資料類型或者内容
這裡代表的是，傳回的資料中有code和msg，
code傳回的是數字0-1之間，
msg傳回的是msg3-10次。
例：
doLogin() {
let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
console.log(url)
this.axios.get(url, { //注意資料是儲存到json對象的params屬性
params: this.ruleForm
//then相當于成功回調函數
}).then((response) => {
console.log(response);
if (response.data.code == 1) {
this.$message({
showClose: true,
message: response.data.msg,
type: 'success'
});
this.$router.push({
path:'/AppMain'
})
} else {
this.$message({
showClose: true,
message: response.data.msg,
type: 'error'
});
}
}).catch((response) => {
//carch則是異常
console.log(response);
});
}
效果：
裡面的資料都是随機生成的，code可能等于1也可能等于0msg可能産生3次-10次。
跳轉
使用this.$router.push({})實作路由跳轉。
在Spa項目中跳轉參數分為：
1 字元串 this.$router.push(’/home/first’)
2 對象 this.$router.push({ path: ‘/home/first’ })
3 命名的路由 this.$router.push({ name: ‘home’, params: { userId: wise }})
跳轉方式：
this.$router.push()
跳轉到不同的url，但這個方法會向history棧添加一個記錄，點選後退會傳回到上一個頁面
this.$router.replace()
同樣是跳轉到指定的url，但是這個方法不會向history裡面添加新的記錄，點選傳回，會跳轉到上上一個頁面。上一個記錄是不存在的。
this.$router.go(n)
相對于目前頁面向前或向後跳轉多少個頁面,類似 window.history.go(n)。n可為正數可為負數。負數傳回上一個頁面。
vue Bus總線
意思就是将一個空的Vue執行個體放到根元件下，所有的子元件都能調用。這樣的好處就是所有的元件都能調用這個參數，
首先在main.js 裡的newVue data()中，添加Bus:new Vue({ })：
new Vue({
el: '#app',
data(){
return{
Bus:new Vue({
})
}
},
router,
components: { App },
template: '<App/>'
})
在A元件觸發事件
this. r o o t . B u s . root.Bus. root.Bus.emit(“事件名”, 參數1, 參數2, …);
A元件中第一個是事件名，第二個之後則都是參數，
例：
this.$root.aa.$emit('collapsed-side','aa')
在B元件監聽事件
this. r o o t . B u s . root.Bus. root.Bus.on(“事件名”, 回調函數);
B元件中，事件名要與觸發事件中的保持一緻，回調函數則是你要改變的内容，v可能代表參數，
例：
created(){
this.$root.aa.$on('collapsed-side',(v)=>{
this.collapsed = v;
});
}
需要注意的是
有時候會發生事件隻被emit觸發了一次，但是回調函數卻被執行了多次的現象。這種現象往往發生在頁面跳轉退出後重新進入的時候。
産生原因：
this. r o o t . B u s . root.Bus. root.Bus.on實際是向Bus容器中添加一個事件監聽器，當頁面跳轉時，原來的vue元件被登出，但是原來vue元件向Bus容器中添加的事件監聽器并不會被移除。
是以，當下次進入這個vue元件對應的頁面時，執行到this. r o o t . B u s . root.Bus. root.Bus.on時，又會向Bus容器中添加一個重複的事件監聽器，以此類推，
導緻Bus容器中有很多個一模一樣的事件監聽器，進而導緻事件隻被觸發一次，但是回調函數被執行多次的現象。
解決方案：
在vue元件的beforeDetory鈎子函數中将本vue元件往Bus容器中添加的事件監聽器全部手動移除。
//在vue對象的methods域中定義個函數專門移除事件監聽器
offxxxListener: function () {
this.$root.Bus.off("事件名");
this.$root.Bus.off("事件名");
this.$root.Bus.off("事件名");
},
//在vue對象的beforeDestroy鈎子中調用以上函數
beforeDestroy() {
this.offxxxListener();
},
![BDDMockito 快速指南[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)