Vue echarts模擬后端數(shù)據(jù)流程詳解
KOA2的使用
KOA2是由Express 原班人馬打造、
環(huán)境依賴 Node v7.6.0 及以上、
支持 async 和 await
洋蔥模型的中間件
寫響應(yīng)函數(shù)(中間件)
響應(yīng)函數(shù)是通過(guò)use的方式才能產(chǎn)生效果, 這個(gè)函數(shù)有兩個(gè)參數(shù),
ctx :上下文, 指的是請(qǐng)求所處于的Web容器,我們可以通過(guò) ctx.request 拿到請(qǐng)求對(duì)象, 也可
以通過(guò) ctx.response 拿到響應(yīng)對(duì)象
next :內(nèi)層中間件執(zhí)行的入口
模擬服務(wù)器完整路徑:
安裝 Koa
npm init -y
這個(gè)命令可以快速的創(chuàng)建出 package.json 的文件, 這個(gè)文件可以維護(hù)項(xiàng)目中第三方包的信息
npm install koa
由于線上最新版本的 koa 就是koa2 , 所以我們并不需要執(zhí)行 npm install koa2
app.js入口文件
// 服務(wù)端入口文件 // 1. 創(chuàng)建KOA的實(shí)例對(duì)象 const Koa = require('koa') // 引入koa const app = new Koa() // 創(chuàng)建koa 實(shí)例 // 2.綁定中間件 // 第一層 響應(yīng)時(shí)間的中間件 const resDuration = require('./middleware/response_duration') app.use(resDuration) // 第二層 設(shè)置響應(yīng)頭的中間件 const resHeader = require('./middleware/response_header') app.use(resHeader) // 第三層 處理業(yè)務(wù)邏輯的中間件 const resData = require('./middleware/response_data') app.use(resData) // 3.綁定端口號(hào) app.listen(2903) const webSocketService = require('./service/web_socket_service') // 開啟服務(wù)器的監(jiān)聽(tīng),監(jiān)聽(tīng)客戶端的鏈接 // 當(dāng)某一個(gè)客戶端連接成功之后,就會(huì)對(duì)這個(gè)客戶端進(jìn)行message 事件的監(jiān)聽(tīng) webSocketService.listen()
第一層記錄響應(yīng)時(shí)間的中間件
完成的事件減去進(jìn)入時(shí)的時(shí)間
// 計(jì)算響應(yīng)總耗時(shí)的中間件 module.exports = async (context,next) =>{ // 記錄開始時(shí)間 const start = Date.now() // 讓內(nèi)層的中間件得到執(zhí)行 await next() // 記錄結(jié)束的時(shí)間 const end = Date.now() // 準(zhǔn)備時(shí)間數(shù)據(jù) const duration = end - start // 設(shè)置響應(yīng)頭 X-Response-Time context.set('X-Response-Time',duration + 'ms') }
第二層設(shè)置響應(yīng)頭的中間件
添加兩個(gè)功能 解讀json utf-8格式防止亂碼 以及增加請(qǐng)求頭允許跨域
// 設(shè)置響應(yīng)頭的中間件 module.exports = async (context,next) =>{ // 增加響應(yīng)頭 解讀 json文件 utf-8格式防止亂碼 const contentType = 'application/json; charset=utf-8' context.set('Content-Type',contentType) // 下面兩行增加跨域配置 context.set('Access-Control-Allow-Origin','*') context.set('Access-Control-Allow-Methods','OPTIONS,GET,PUT,POST,DELETE') //context.response.body = '{"success":true}' await next() }
第三層處理業(yè)務(wù)邏輯的中間件
引入要用的模塊 fileUtils 在下面有
通過(guò)context.request.url 獲取到客戶端請(qǐng)求的地址
用 replace方法 把 api 去掉
拼接上 存放路徑的位置和后綴名 在使用 __dirname 方法得到絕對(duì)路徑
把這個(gè)路徑作為參數(shù) 傳入 fileUtils.getFileJsonData(filePath) 執(zhí)行返回?cái)?shù)據(jù) 作為響應(yīng)體返回
如果響應(yīng)失敗 就 try catch 返回錯(cuò)誤信息
// 處理業(yè)務(wù)邏輯的中間件 讀取某個(gè)json文件的數(shù)據(jù) // 引入 node path內(nèi)置模塊 用于拼接路徑 const path = require('path') // 具體處理對(duì)應(yīng)文件的工具 const fileUtils = require('../utils/file_utils') module.exports = async (context,next) => { // 根據(jù)url 提取關(guān)鍵字 再拼接絕對(duì)路徑 const url = context.request.url // /api/seller let filePath = url.replace('/api','') filePath = path.join('../data',filePath,'.json') // ../data/seller.json filePath = path.join(__dirname,filePath) try { const ret = await fileUtils.getFileJsonData(filePath) context.response.body = ret }catch (e) { const errMsg = { message:'讀取文件內(nèi)容失敗,文件資源不存在', status:404 } context.response.body = JSON.stringify(errMsg) } //console.log(filePath) await next() }
file-utils.js: 抽離出來(lái)的工具:用來(lái)讀取文件內(nèi)容 return 出去
// 讀取文件的工具方法 const fs = require('fs') // 引入fs文件模塊 fs.readFile 用來(lái)讀取文件 module.exports.getFileJsonData = (filePath) =>{ return new Promise((resolve, reject) => { // fs.readFile 三個(gè)參數(shù) 1.文件的路徑 2.文件所要讀取的編碼 3.promise 函數(shù) fs.readFile(filePath,'utf-8',(error,data)=>{ if (error){ // 讀取文件失敗 reject(error) }else { // 讀取文件成功 resolve(data) } }) }) }
每個(gè)圖表的數(shù)據(jù)都是從后端推送到前端來(lái)的 , 不過(guò)在項(xiàng)目的初期 , 我們會(huì)先使用 ajax 由前端主動(dòng)獲取數(shù) 據(jù), 后續(xù)會(huì)使用 WebSocket 進(jìn)行改造.
到此這篇關(guān)于Vue echarts模擬后端數(shù)據(jù)流程詳解的文章就介紹到這了,更多相關(guān)Vue echarts模擬數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue中echarts自動(dòng)輪播tooltip問(wèn)題
- Vue?Echarts實(shí)現(xiàn)實(shí)時(shí)大屏動(dòng)態(tài)數(shù)據(jù)顯示
- Vue中使用 Echarts5.0 遇到的一些問(wèn)題(vue-cli 下開發(fā))
- Vue echarts 實(shí)現(xiàn)離線中國(guó)地圖的示例代碼(細(xì)化到省份)
- Vue?echarts實(shí)例項(xiàng)目地區(qū)銷量趨勢(shì)堆疊折線圖實(shí)現(xiàn)詳解
- Vue?echarts實(shí)例項(xiàng)目商家銷量統(tǒng)計(jì)圖實(shí)現(xiàn)詳解
- Vue echarts封裝組件需求分析與實(shí)現(xiàn)
相關(guān)文章
Element-UI清空表單及驗(yàn)證不生效的問(wèn)題解決
本文主要介紹了Element-UI清空表單及驗(yàn)證不生效的問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08vue中watch的實(shí)際開發(fā)學(xué)習(xí)筆記
watch是Vue實(shí)例的一個(gè)屬性是用來(lái)響應(yīng)數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí),這個(gè)方式是最有用的,下面這篇文章主要給大家介紹了關(guān)于vue中watch的實(shí)際開發(fā)筆記,需要的朋友可以參考下2022-11-11詳解vue-router2.0動(dòng)態(tài)路由獲取參數(shù)
本篇文章主要介紹了詳解vue-router2.0動(dòng)態(tài)路由獲取參數(shù),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06vue項(xiàng)目設(shè)置活性字體過(guò)程(自適應(yīng)字體大小)
這篇文章主要介紹了vue項(xiàng)目設(shè)置活性字體過(guò)程(自適應(yīng)字體大小),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue全局掛載實(shí)現(xiàn)APP全局彈窗的示例代碼
本文主要介紹了vue全局掛載實(shí)現(xiàn)APP全局彈窗的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05vue前端獲取不同客戶端mac地址最詳細(xì)步驟(避免踩坑)
在開發(fā)過(guò)程中,綁定賬號(hào)和電腦的功能可以通過(guò)獲取電腦的MAC地址實(shí)現(xiàn),下面這篇文章主要介紹了vue前端獲取不同客戶端mac地址的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10