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