vu中使用mockjs伺服器測試專案
阿新 • • 發佈：2020-07-12
1、在vue專案中安裝依賴
npm install mockjs --save-dev
安裝成功後package.json檔案會有下圖紅色框內資訊
2、建立專案檔案結構
根目錄下建立mockServe資料夾，然後分別構建util.js 、index.js 、json檔案（以index.json為例）
3、util.js檔案，主要是用來進行json資料讀取方法的封裝。內容如下
1 const fs = require('fs') 2 3 const path = require('path') 4 5 module.exports = { 6 7 // 用於被index.js進行呼叫View Code8 9 getJsonFile(filePath) { 10 11 // 讀取指定的json檔案 12 13 const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8') 14 15 // 解析並返回 16 17 // console.log(json) 18 19 return JSON.parse(json) 20 21 } 22 23 }
4、index.js檔案，主要是用來定義各個介面方法。內容如下
1 const Mock = require('mockjs') 2 3 const util = require('./util') 4 5 module.exports = function (app) { 6 7 // 監聽請求 8 9 app.post('/Mock/index', (rep, res) => { 10 11 // 響應時，返回 mock data的json資料 12 13 const articleList = util.getJsonFile('./data/index.json')View Code14 15 // 將json傳入 Mock.mock 方法中，生成的資料返回給瀏覽器 16 17 res.json(Mock.mock(articleList)) 18 19 }) 20 app.post('/Mock/GetMonthReportingState', (rep, res) => { 21 22 // 響應時，返回 mock data的json資料 23 24 const articleList = util.getJsonFile('./data/GetMonthReportingState.json') 25 26 // 將json傳入 Mock.mock 方法中，生成的資料返回給瀏覽器 27 28 res.json(Mock.mock(articleList)) 29 30 }) 31 app.post('/Mock/GetYearReportingState', (rep, res) => { 32 33 // 響應時，返回 mock data的json資料 34 35 const articleList = util.getJsonFile('./data/GetYearReportingState.json') 36 37 // 將json傳入 Mock.mock 方法中，生成的資料返回給瀏覽器 38 39 res.json(Mock.mock(articleList)) 40 41 }) 42 app.post('/Mock/GetReportingData', (rep, res) => { 43 44 // 響應時，返回 mock data的json資料 45 46 const articleList = util.getJsonFile('./data/GetReportingData.json') 47 48 // 將json傳入 Mock.mock 方法中，生成的資料返回給瀏覽器 49 50 res.json(Mock.mock(articleList)) 51 52 }) 53 app.post('/Mock/UpdateEditTime', (rep, res) => { 54 55 // 響應時，返回 mock data的json資料 56 57 const articleList = util.getJsonFile('./data/UpdateEditTime.json') 58 59 // 將json傳入 Mock.mock 方法中，生成的資料返回給瀏覽器 60 61 res.json(Mock.mock(articleList)) 62 63 }) 64 app.post('/Mock/GetReportingLockState', (rep, res) => { 65 66 // 響應時，返回 mock data的json資料 67 68 const articleList = util.getJsonFile('./data/GetReportingLockState.json') 69 70 // 將json傳入 Mock.mock 方法中，生成的資料返回給瀏覽器 71 72 res.json(Mock.mock(articleList)) 73 74 }) 75 app.post('/Mock/SaveReportingData', (rep, res) => { 76 77 // 響應時，返回 mock data的json資料 78 79 const articleList = util.getJsonFile('./data/SaveReportingData.json') 80 81 // 將json傳入 Mock.mock 方法中，生成的資料返回給瀏覽器 82 83 res.json(Mock.mock(articleList)) 84 85 }) 86 app.post('/Mock/UnLockReporting', (rep, res) => { 87 88 // 響應時，返回 mock data的json資料 89 90 const articleList = util.getJsonFile('./data/UnLockReporting.json') 91 92 // 將json傳入 Mock.mock 方法中，生成的資料返回給瀏覽器 93 94 res.json(Mock.mock(articleList)) 95 96 }) 97 app.post('/Mock/GetEditItemTip', (rep, res) => { 98 99 // 響應時，返回 mock data的json資料 100 101 const articleList = util.getJsonFile('./data/GetEditItemTip.json') 102 103 // 將json傳入 Mock.mock 方法中，生成的資料返回給瀏覽器 104 105 res.json(Mock.mock(articleList)) 106 107 }) 108 app.post('/Mock/GetLeakageKeyChangingTrendData', (rep, res) => { 109 110 // 響應時，返回 mock data的json資料 111 112 const articleList = util.getJsonFile('./data/GetLeakageKeyChangingTrendData.json') 113 114 // 將json傳入 Mock.mock 方法中，生成的資料返回給瀏覽器 115 116 res.json(Mock.mock(articleList)) 117 118 }) 119 120 }
5、index.json檔案，主要是用來構建自己的模擬資料。如：
1 { 2 "Ok": true, 3 "Message": null, 4 "Result": { 5 "VolumeFromOwnSource": 0, 6 "VolumeFromOwnSourceGrading": 0, 7 "MasterMeterErrorAdjustment": 0, 8 "IsIncreaseOrDecrease": "偏多", 9 "MasterMeterErrorAdjustmentGrading": 0, 10 "WaterImported": 0, 11 "WaterImportedGrading": 0, 12 "WaterExported": 0, 13 "WaterExportedGrading": 0, 14 "WaterSupplied": 0, 15 "BilledMetered": 0, 16 "BilledMeteredGrading": 0, 17 "BilledUnmetered": { 18 "Value": 0, 19 "SubItems": [{ 20 "Label": "環衛用水", 21 "Value": 0 22 }, 23 { 24 "Label": "綠化用水", 25 "Value": 0 26 }, 27 { 28 "Label": "新建管道沖洗", 29 "Value": 0 30 }, 31 { 32 "Label": "定量使用者用水", 33 "Value": 0 34 } 35 ] 36 }, 37 "BilledUnmeteredGrading": 0, 38 "UnbilledMetered": { 39 "Value": 0, 40 "SubItems": [{ 41 "Label": "自來水企業生產/辦公用水", 42 "Value": 0 43 }, 44 { 45 "Label": "消防用水", 46 "Value": 0 47 }, 48 { 49 "Label": "政策性減免", 50 "Value": 0 51 } 52 ] 53 }, 54 "UnbilledMeteredGrading": 0, 55 "UnbilledUnmetered": { 56 "Value": 0, 57 "SubItems": [{ 58 "Label": "消防用水量", 59 "Value": 0 60 }, 61 { 62 "Label": "管網維護和沖洗用水", 63 "Value": 0 64 }, 65 { 66 "Label": "自來水企業生活/辦公用水", 67 "Value": 0 68 }, 69 { 70 "Label": "二次供水泵房沖洗", 71 "Value": 0 72 } 73 ] 74 }, 75 "UnbilledUnmeteredGrading": 0, 76 "UnbilledUnmeteredMode": 0, 77 "UnbilledUnmeteredPercent": 0, 78 "UnbilledUnmeteredEstimated": 0, 79 "AuthorizedConsumption": 0, 80 "WaterLossed": 0, 81 "ReportedLeakage": { 82 "Value": 0, 83 "SubItems": [{ 84 "Label": "明漏點漏失水量", 85 "Value": 0 86 }, 87 { 88 "Label": "爆管漏失水量", 89 "Value": 0 90 }, 91 { 92 "Label": "明漏點漏失水量", 93 "Value": 0 94 }, 95 { 96 "Label": "爆管漏失水量", 97 "Value": 0 98 },{ 99 "Label": "明漏點漏失水量", 100 "Value": 0 101 }, 102 { 103 "Label": "爆管漏失水量", 104 "Value": 0 105 } 106 ] 107 }, 108 "ReportedLeakageGrading": 0, 109 "UnreportedLeakage": { 110 "Value": 0, 111 "SubItems": [{ 112 "Label": "已檢出明漏點水量", 113 "Value": 0 114 }, 115 { 116 "Label": "未檢出暗漏點水量", 117 "Value": 0 118 }, 119 { 120 "Label": "已檢出明漏點水量", 121 "Value": 0 122 }, 123 { 124 "Label": "未檢出暗漏點水量", 125 "Value": 0 126 },{ 127 "Label": "已檢出明漏點水量", 128 "Value": 0 129 }, 130 { 131 "Label": "未檢出暗漏點水量", 132 "Value": 0 133 },{ 134 "Label": "已檢出明漏點水量", 135 "Value": 0 136 }, 137 { 138 "Label": "未檢出暗漏點水量", 139 "Value": 0 140 } 141 ] 142 }, 143 "UnreportedLeakageGrading": 0, 144 "UnreportedLeakageMode": 0, 145 "UnreportedLeakagePercent": 0, 146 "UnreportedLeakageEstimated": 0, 147 "BackgroundLeakage": 0, 148 "BackgroundLeakageGrading": 0, 149 "BackgroundLeakageMode": 0, 150 "BackgroundLeakagePercent": 0, 151 "BackgroundLeakageEstimated": 0, 152 "TankLeakageAndOverflow": 0, 153 "TankLeakageAndOverflowGrading": 0, 154 "TankLeakageAndOverflowMode": 0, 155 "TankLeakageAndOverflowPercent": 0, 156 "TankLeakageAndOverflowEstimated": 0, 157 "UnauthorizedConsumption": { 158 "Value": 0, 159 "SubItems": [{ 160 "Label": "明漏點漏失水量", 161 "Value": 0 162 }, 163 { 164 "Label": "爆管漏失水量", 165 "Value": 0 166 } 167 ] 168 }, 169 "NonResidentMeteringInaccuracies": 0, 170 "NonResidentMeteringInaccuraciesGrading": 0, 171 "WaterLossBetweenMainSubMeters": 0, 172 "WaterLossBetweenMainSubMetersGrading": 0, 173 "UnauthorizedConsumptionGrading":0, 174 "UnauthorizedConsumptionMode": 0, 175 "UnauthorizedConsumptionPercent": 0, 176 "UnauthorizedConsumptionEstimated": 0, 177 "RevenueWater": 0, 178 "NonRevenueWater": 0, 179 "TotalPipeLength": 0, 180 "TotalPipeLengthGrading": 0, 181 "AveragePressure": 0, 182 "AveragePressureGrading": 0, 183 "ReadingMeterInHouseConsumption": 0, 184 "ReadingMeterInHouseConsumptionGrading": 0, 185 "MaximumFrozenSoilDepth": 0, 186 "MaximumFrozenSoilDepthGrading": 0, 187 "NonRevenueWaterRatio": 0, 188 "ProduceSaleDifferentia": 0, 189 "ProduceSaleDifferentiaRate": 0, 190 "WaterLossRate": 0, 191 "CorrectedReadingMeterInHouseConsumption": 0, 192 "CorrectedPipeLengthPerUnitWaterSupply": 0, 193 "CorrectedAveragePressure": 0, 194 "CorrectedMaximumFrozenSoilDepth": 0, 195 "CorrectedWaterLossRate": 0, 196 "DataQualityScore": 0, 197 "AreasForAttention1": 0, 198 "AreasForAttention2": 0, 199 "AreasForAttention3": 0, 200 "Year": 0, 201 "Month": 0, 202 "StartDate": "2020-03-30 19:37:51", 203 "StopDate": "2020-03-30 19:37:51", 204 "LastModificationDate": "2020-03-30 19:37:51", 205 "CompanyID": "", 206 "DataTableID": "" 207 } 208 }View Code
6、修改 webpack 配置。
在vue.config.js檔案中或者路徑build/webpack.dev.conf.js檔案中的devServer屬性中新新增一個before鉤子函式,用來監聽來自web的http請求。
vue.config.js檔案：
1 const path = require("path"); 2 const resolve = function (dir) { 3 return path.join(__dirname, dir); 4 }; 5 const IP = require("ip").address(); 6 module.exports = { 7 publicPath: "/", //process.env.NODE_ENV === "production" ? "./" : "./", 8 outputDir: "dist", 9 assetsDir: "static/WhaleReport", 10 //assetsDir: "static", 11 lintOnSave: true, // 是否開啟eslint儲存檢測 12 productionSourceMap: false, // 是否在構建生產包時生成sourcdeMap 13 chainWebpack: (config) => { 14 config.resolve.alias 15 .set("@", resolve("src")) 16 .set("@v", resolve("src/views")) 17 .set("@c", resolve("src/components")) 18 .set("@u", resolve("src/utils")) 19 .set("@s", resolve("src/service")); /* 別名配置 */ 20 config.optimization.runtimeChunk("single"); 21 }, 22 configureWebpack: (config) => { 23 if (process.env.NODE_ENV === "production") { 24 config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; 25 } 26 }, 27 devServer: { 28 // host: "localhost", 29 host: IP, 30 /* 本地ip地址 */ 31 // host: "192.168.1.107", 32 port: "8080", 33 hot: true, 34 /* 自動開啟瀏覽器 */ 35 open: false, 36 overlay: { 37 warning: false, 38 error: true, 39 }, 40 before: require("./mockServe"), 41 /* 跨域代理 */ 42 //proxyTable:{ 43 // proxy: { 44 // "/api": { 45 // target: 'http://121.40.242.176:9527/api/ReportingTool/',//"http://waterrtmstest.dlmeasure.com:1800/api/ReportingTool/", //API伺服器的地址 46 // ws: true, //代理websockets 47 // changeOrigin: true, // 虛擬的站點需要更管origin 48 // pathRewrite: { 49 // //重寫路徑 比如'/api/aaa/ccc'重寫為'/aaa/ccc' 50 // "^/api": "", 51 // }, 52 // }, 53 // }, 54 }, 55 };View Code
7、完成以上步驟以後，啟動應用npm run serve，在vue專案中使用即可。
1 <template> 2 <div class="hello"> 3 <h1>{{ msg }}</h1> 4 5 </div> 6 </template> 7 8 <script> 9 import UrlClass from "../http/Urlclass" 10 export default { 11 name: 'HelloWorld', 12 props: { 13 msg: String 14 }, 15 mounted(){ 16 this.GetMonthReportingState() 17 }, 18 methods:{ 19 GetMonthReportingState(){ 20 this.$axios.post(UrlClass.axiosUrlRC+"GetMonthReportingState") 21 .then(res=>{ 22 console.log("GetMonthReportingState----res",res) 23 }) 24 .catch(erroe=>{ 25 console.log('error', error) 26 }) 27 } 28 } 29 } 30 </script> 31 32 <!-- Add "scoped" attribute to limit CSS to this component only --> 33 <style scoped lang="scss"> 34 h3 { 35 margin: 40px 0 0; 36 } 37 ul { 38 list-style-type: none; 39 padding: 0; 40 } 41 li { 42 display: inline-block; 43 margin: 0 10px; 44 } 45 a { 46 color: #42b983; 47 } 48 </style>View Code
8.請求完成後的資料為：