vue搭建本地JSON靜態(tài)數(shù)據(jù)服務(wù)器全過程
在日常開發(fā)中，可能由于后端任務(wù)較重，接口不能及時(shí)提供給前端，領(lǐng)導(dǎo)要求先展示頁(yè)面的要求下，這個(gè)時(shí)候就需要假數(shù)據(jù)，如果自己data里面定義假數(shù)據(jù)或html中直接寫死，如果頁(yè)面多了，后面接口提供的時(shí)候，修改會(huì)很麻煩。
此文提供一種本地本地json serve方案，除上述問題，此方案更加可以方便和后端協(xié)商所需數(shù)據(jù)字段格式.
一.僅供本地測(cè)試用，無法部署在服務(wù)器上取數(shù)據(jù)
1.安裝全局的json-server工具包 npm install -g json-server
2.在項(xiàng)目更目錄(src同級(jí))下創(chuàng)建mock文件夾，名字隨便，約定俗成為mock，新建json文件，
代碼如下：
{
"naturalDisastersData": [
{
"id": 1,
"typeName": "自然災(zāi)害左側(cè)監(jiān)測(cè)預(yù)警列表數(shù)據(jù)",
"topIconList": [
{
"name": "江山",
"event": "30",
"value": "0",
"type": "雨量預(yù)警"
},
{
"name": "長(zhǎng)臺(tái)村",
"event": "30",
"value": "0",
"type": "雨量預(yù)警"
},
{
"name": "常山關(guān)莊橋村",
"event": "10",
"value": "0.1",
"type": "水位預(yù)警"
},
{
"name": "衢江橫路鄉(xiāng)",
"event": "30",
"value": "0.1",
"type": "水位預(yù)警"
},
{
"name": "峽東村",
"event": "30",
"value": "3.4",
"type": "風(fēng)力預(yù)警"
},
{
"name": "江山",
"event": "30",
"value": "2.2",
"type": "風(fēng)力預(yù)警"
},
{
"name": "疾病預(yù)防控制中心",
"event": "-",
"value": "-",
"type": "森林防火"
},
{
"name": "虎山消防救援站",
"event": "-",
"value": "-",
"type": "森林防火"
},
{
"name": "鳳林鎮(zhèn)",
"event": "147",
"value": "-",
"type": "地質(zhì)災(zāi)害"
},
{
"name": "壇石鎮(zhèn)",
"event": "119",
"value": "-",
"type": "地質(zhì)災(zāi)害"
}
]
}
],
"success": true
}3.將json文件右鍵在終端中打開 啟動(dòng)命令：
(1):json-server --watch index.json --port 8080 默認(rèn)是3000 可以自行改端口 watch 后接json文件名
(2):上面的啟動(dòng)命令，只有輸入localshot:端口號(hào)才可以訪問，當(dāng)前我想輸入本地的ip+端口號(hào)就無法訪問，所以更改啟動(dòng)命令如下：
json-server --watch --host 0.0.0.0 db.json --port 3000 host后接本地ip (cmd 輸入ipconfig)
(3):以上2種命令啟動(dòng)每次都要輸入很長(zhǎng)代碼,vue中可以在package.json中配置快捷命令,如圖
代碼如下：
"mock": " cd mock&json-server --watch --host 0.0.0.0(本機(jī)ip) --port 3000 index.json",
如果mock文件夾寫在根目錄,則直接cd一級(jí)就行,自行根據(jù)自己mock文件夾目錄層級(jí)更改,多個(gè)json文件重新取名,將mock改為mock1,mock2...即可,后面命令改所需文件名就行
npm run mock 成功運(yùn)行效果如下：
(4):點(diǎn)開鏈接進(jìn)去如圖：
點(diǎn)擊資源鏈接進(jìn)去如圖：
至此:服務(wù)端口創(chuàng)建成功
4.調(diào)用
即把你axios請(qǐng)求url 改成上圖打開資源鏈接的瀏覽器url就行，至此，第一種方法結(jié)束，此方法僅限本地模擬使用，因?yàn)樾枰镜亻_啟啟動(dòng)命令，暫時(shí)不明確如何配置在部署服務(wù)器后自動(dòng)啟動(dòng).
接口情況入圖：
二:不模擬外部數(shù)據(jù)端口形式
不做額外配置，無需額外啟動(dòng)命令，可以在部署服務(wù)器后自動(dòng)獲取數(shù)據(jù)。(推薦)
1.同理創(chuàng)建json文件夾下的json文件,不過注意要放到public文件夾下! ! !
2.配置vue.config.js publicpath,代碼如下
module.exports = {
lintOnSave: false,
publicPath: '/simulationJsondata/',
outputDir: 'jsmartScreen',
};3.aixos url為json文件路徑,(配置靜態(tài)資源路徑為了方便部署服務(wù)器),
直接回調(diào)里面return axios請(qǐng)求即可,自行封裝的axios也無影響!
aa() {
return http.get(`../../simulationJsondata/jsonData/naturalDisastersData.json`)
}接口情況入圖：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中手動(dòng)封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動(dòng)封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue中的 mixins 和 provide/inject詳解
這篇文章主要介紹了Vue中的 mixins 和 provide/inject詳解,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
本文主要介紹了在VueRouter中,meta對(duì)象的使用和配置方式,meta對(duì)象可以包含任何你希望附加到路由的自定義信息,這些配置信息可以靈活的滿足你的應(yīng)用需求,使得路由配置更具靈活性和可擴(kuò)展性2024-10-10
詳解Vue如何實(shí)現(xiàn)響應(yīng)式布局
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)響應(yīng)式布局的兩種方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解一下2023-12-12
解決ant-design-vue安裝報(bào)錯(cuò)的問題
這篇文章主要介紹了解決ant-design-vue安裝報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
詳解在WebStorm中添加Vue.js單文件組件的高亮及語法支持
本篇文章主要介紹了詳解在WebStorm中添加Vue.js單文件組件的高亮及語法支持，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
Vue解決element-ui消息提示$message重疊問題
這篇文章主要為大家介紹了Vue解決element-ui消息提示$message重疊問題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
本文主要介紹在vue項(xiàng)目中,遇到數(shù)據(jù)更新但視圖不更新的情況時(shí),無法使用watch監(jiān)聽、無法使用this.$set方法,同時(shí)使用this.$forceUpdate()無效時(shí),所使用的解決方案,需要的朋友可以參考下2024-02-02
Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格加載樹形數(shù)據(jù)教程
這篇文章主要為大家詳細(xì)介紹了Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格加載樹形數(shù)據(jù)教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
整理項(xiàng)目中vue.config.js打包優(yōu)化配置方法
這篇文章主要介紹了整理項(xiàng)目中vue.config.js打包優(yōu)化,包括配置?webpack-bundle-analyzer?插件查看文件大小及配置compression-webpack-plugin?用gzip壓縮打包的文件大小，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02