前言：之前寫了一個菜市場訂單配送的項目，剛開始用jquery寫的，後來又用了vue重寫相同的內容，發現和jquery比起來，以數據爲驅動的vue寫同樣的東西真的要簡單方便快捷很多。關於這個項目jquery踩的坑及轉換爲vue寫較jquery比較或vue遇到的難點，我之後會把筆記補上(ง •̀_•́)ง
正文前言：雖然vue相較jQuery寫同個項目代碼量縮減了很多，但是也有個很糟心的點就是，代碼複用性不高。關於菜市場訂單的頁面很多頁都是換湯不換藥的，然而我們每個頁面卻在寫很多本來可以公用的東西
注意： 要想代碼量急劇下降，不是簡單地將一些方法提爲共有的函數那麼簡單
由上總結： 將訂單頁面抽象爲類的想法應運而生 Loading……
1.正文
1.1 抽取獲取數據的方法 [get post ]
如下，頁面有很多要包含獲取數據的函數，每個函數都要使用這段代碼。因此考慮提取爲一個方法
代碼：
axios.post('http:/xxx/verify.do', qs.stringify({ID: this.curid}))
.then(response => {
this.isVerify = 1;
this.$message({
message: '審覈成功',
type: 'success'
});
})文件目錄結構：
—src
—-components
——-pages
————origin.vue
—-config
————fetch.js
————mutil.js
—-router
—-service
————getData.js
目錄：config/fetch.js
代碼：
import axios from 'axios'
/*
* 獲取數據 或者post 數據
*/
let basicUrl = 'http:/xxx/';//根地址
export const fetchData = (url = '', data = {},method = 'GET') => {
method = method.toUpperCase();//將字符串轉換爲大寫
url = basicUrl + url;
if(method == 'GET'){
//解析data = {} 裏面的參數
let dataStr = '';
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&';
})
if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
//嘗試從遠程獲取數據
try {
//異步操作
return new Promise((resolve,reject)=>{
axios.get(url)
.then(response =>{
const responseData = response.data;
resolve(responseData);
})
})
} catch (error) {
throw new Error(error)
}
}
}
然後我們現在在getData.js裏面統一寫獲取數據的函數，比如我要獲取頁面的訂單最大號和最小號
目錄：service/getData.js
代碼截圖：[看起來好看一點]
截圖裏的代碼：[便於複製]
export const getMaxandMinpage =()=> fetchData('/logistics/originalorder/getmaxminid.do', {
});
定義了這個方法之後我們在origin.vue裏面調用這個方法
1.首先引入這個函數方法
2. 方法裏定義 這個方法[async 異步]
3. 掛載的時候使用this.initData()
代碼截圖：
代碼：
import {getMaxandMinpage} from '@/service/getData'
mounted(){
this.initData()
}
methods(){
async initData(){
//獲取最大最小id
let ids = await getMaxandMinpage();
this.maxid = ids.MAXID;
this.minid = ids.MINID;
}
}2.總結
總結：這樣的好處是什麼呢。就是方法公用，比如我銷售單需要獲取最大最小id，我同樣調用這個方法即可
省掉的代碼： 獲取數據的部分 + 具體函數的部分
不足： 獲取到的數據我還是得每次都要改一下。例如：
this.maxid = ids.MAXID;
this.minid = ids.MINID;拋磚引玉：
那麼怎麼改進呢？
接下來我希望使用類的方法，比如調用p.getMaxandMinpage()
只需要寫這一行，就可以實現maxid和minid的變化。
即使用一句話完全代替以下所有代碼
別看這個只替代了這麼一點點代碼，看樣子每個頁面我麻煩點自己寫忍忍不也就過去了嘛。
可是，盆友，如果有60+張頁面都是這樣的呢，你可能會說用vue組件嘛，但是。。如果頁面的大致構造一樣但是有一些佈局之類不一樣這種情況呢？
emm可能我舉的栗子有點失敗，反正就是有很多這種頁面，大同小異，且不能一概而論之提爲一個vue文件的那種，你該怎麼辦？
再回頭看看，我每個頁面只需要p.getMaxandMinpage() biu~一下就可以，豈不是很有誘惑？很有衝勁去研究？
嘿嘿那麼請不用出門直接左轉 看我的下個筆記！