vue搭建本地JSON靜態(tài)數(shù)據(jù)服務器全過程
在日常開發(fā)中，可能由于后端任務較重，接口不能及時提供給前端，領導要求先展示頁面的要求下，這個時候就需要假數(shù)據(jù)，如果自己data里面定義假數(shù)據(jù)或html中直接寫死，如果頁面多了，后面接口提供的時候，修改會很麻煩。
此文提供一種本地本地json serve方案，除上述問題，此方案更加可以方便和后端協(xié)商所需數(shù)據(jù)字段格式.
一.僅供本地測試用，無法部署在服務器上取數(shù)據(jù)
1.安裝全局的json-server工具包 npm install -g json-server
2.在項目更目錄(src同級)下創(chuàng)建mock文件夾，名字隨便，約定俗成為mock，新建json文件，
代碼如下：
{
"naturalDisastersData": [
{
"id": 1,
"typeName": "自然災害左側(cè)監(jiān)測預警列表數(shù)據(jù)",
"topIconList": [
{
"name": "江山",
"event": "30",
"value": "0",
"type": "雨量預警"
},
{
"name": "長臺村",
"event": "30",
"value": "0",
"type": "雨量預警"
},
{
"name": "常山關(guān)莊橋村",
"event": "10",
"value": "0.1",
"type": "水位預警"
},
{
"name": "衢江橫路鄉(xiāng)",
"event": "30",
"value": "0.1",
"type": "水位預警"
},
{
"name": "峽東村",
"event": "30",
"value": "3.4",
"type": "風力預警"
},
{
"name": "江山",
"event": "30",
"value": "2.2",
"type": "風力預警"
},
{
"name": "疾病預防控制中心",
"event": "-",
"value": "-",
"type": "森林防火"
},
{
"name": "虎山消防救援站",
"event": "-",
"value": "-",
"type": "森林防火"
},
{
"name": "鳳林鎮(zhèn)",
"event": "147",
"value": "-",
"type": "地質(zhì)災害"
},
{
"name": "壇石鎮(zhèn)",
"event": "119",
"value": "-",
"type": "地質(zhì)災害"
}
]
}
],
"success": true
}3.將json文件右鍵在終端中打開 啟動命令：
(1):json-server --watch index.json --port 8080 默認是3000 可以自行改端口 watch 后接json文件名
(2):上面的啟動命令，只有輸入localshot:端口號才可以訪問，當前我想輸入本地的ip+端口號就無法訪問，所以更改啟動命令如下：
json-server --watch --host 0.0.0.0 db.json --port 3000 host后接本地ip (cmd 輸入ipconfig)
(3):以上2種命令啟動每次都要輸入很長代碼,vue中可以在package.json中配置快捷命令,如圖
代碼如下：
"mock": " cd mock&json-server --watch --host 0.0.0.0(本機ip) --port 3000 index.json",
如果mock文件夾寫在根目錄,則直接cd一級就行,自行根據(jù)自己mock文件夾目錄層級更改,多個json文件重新取名,將mock改為mock1,mock2...即可,后面命令改所需文件名就行
npm run mock 成功運行效果如下：
(4):點開鏈接進去如圖：
點擊資源鏈接進去如圖：
至此:服務端口創(chuàng)建成功
4.調(diào)用
即把你axios請求url 改成上圖打開資源鏈接的瀏覽器url就行，至此，第一種方法結(jié)束，此方法僅限本地模擬使用，因為需要本地開啟啟動命令，暫時不明確如何配置在部署服務器后自動啟動.
接口情況入圖：
二:不模擬外部數(shù)據(jù)端口形式
不做額外配置，無需額外啟動命令，可以在部署服務器后自動獲取數(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)資源路徑為了方便部署服務器),
直接回調(diào)里面return axios請求即可,自行封裝的axios也無影響!
aa() {
return http.get(`../../simulationJsondata/jsonData/naturalDisastersData.json`)
}接口情況入圖：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue2.0在IE11版本瀏覽器中的兼容性問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
在業(yè)務中列表拖拽排序是比較常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue中實現(xiàn)拖拽排序功能的詳細教程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
vue3?+?async-validator實現(xiàn)表單驗證的示例代碼
表單驗證可以有效的過濾不合格的數(shù)據(jù)，減少服務器的開銷，并提升用戶的使用體驗，今天我們使用?vue3?來做一個表單驗證的例子，需要的朋友跟隨小編一起學習下吧2022-06-06
這篇文章主要為大家介紹了Vue3?Hooks?模塊化抽離示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vite+vue3+tsx項目打包后動態(tài)路由無法加載頁面的問題及解決
這篇文章主要介紹了vite+vue3+tsx項目打包后動態(tài)路由無法加載頁面的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue 封裝防刷新考試倒計時組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
AntV F2和vue-cli構(gòu)建移動端可視化視圖過程詳解
這篇文章主要介紹了AntV F2和vue-cli構(gòu)建移動端可視化視圖過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
el-table表頭根據(jù)內(nèi)容自適應完美解決表頭錯位和固定列錯位
這篇文章主要介紹了el-table表頭根據(jù)內(nèi)容自適應完美解決表頭錯位和固定列錯位,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
Vue3異步數(shù)據(jù)加載組件suspense的使用方法
前端開發(fā)中異步請求是非常常見的事情,比如遠程讀取圖片,調(diào)用后端接口等等,這篇文章主要給大家介紹了關(guān)于Vue3異步數(shù)據(jù)加載組件suspense的使用方法,suspense中文含義是懸念的意思,需要的朋友可以參考下2021-08-08
這里分享一個常用的價格格式化的一個方法，在電商的價格處理中非常的實用，具體實現(xiàn)代碼大家參考下本文2017-05-05