vue cli中模擬資料的兩種方法

2021-09-20 09:25:21 字數 1672 閱讀 4302

首先進行所需外掛程式的安裝,vue-resource,json-server,proxytable.

在main.js中引入vue-resource模組,vue.use(vueresource).

接下來找到build目錄下的webpack.dev.conf.js檔案,在const portfinder = require('portfinder')後面引入json-server.

/*引入json-server*/

const jsonserver = require('json-server')

/*搭建乙個server*/

const apiserver = jsonserver.create()

/*將db.json關聯到server*/

const apirouter = apiserver.router('db.json')

const middlewares = jsonserver.defaults()\

apiserver.use(apirouter)

apiserver.use(middlewares)

/*監聽埠*/

apiserver.listen(3000,(req,res)=>)

複製**

現在重啟伺服器後瀏覽器位址列輸入localhost:3000能進入如下頁面則說明json server啟動成功了

現在找到config資料夾下的index.js檔案,在dev配置中找到proxytable:{} 並在其中配置

'/api':

}複製**

現在可以使用localhost:8080/api/apiname 請求json資料了

在專案中通過resource外掛程式進行ajax請求

在data

(){}前使用鉤子函式created:function

(),function(err))

}複製**

在專案中新建routes檔案並在其中新建api.js,內容如下:

const express = require('express')

const router = express.router()

const apidata = require('../db.json')

router.post('/:name',(req,res)=>)

}else

})複製**

接下來找到build目錄下的webpack.dev.conf.js檔案,在const portfinder = require('portfinder')後面引入express,如下:

const express = require('express')

const api = require('../routes/api.js')

複製**

現在找到config資料夾下的index.js檔案,在dev配置中找到proxytable:{} 並在其中配置

'/api':

}複製**

重啟之後,便可以post請求訪問資料了.

原文發布時間為:2023年06月29日 掘金

vue vue中引入echarts的兩種方式

1.安裝echarts依賴 npm install echarts s 2.建立圖表 a 全域性引入 main.js頁面 import echarts from echarts vue.prototype.echarts echartshello.vue頁面 b 按需引入 上面全域性引入會將所有的e...

Window CMD 指令碼中模擬陣列的實現方法

cmd指令碼中只有變數的概念,沒有陣列的概念,為了實現類似陣列的功能,需要進行變數巢狀使用,並使用for命令將輸出轉換為內部變數值。set services0 openldap slapd set services1 mongodb set services2 solr5 set services3...

兩種獲取Oracle Sequence的方法

前提 create table booking id integer not null,date made date,reserved until timestamp,price decimal 15,2 not null,purchase id integer,primary key id cre...