Vue echarts模擬后端數(shù)據(jù)流程詳解

更新時間：2022年09月23日 15:46:20 作者：benlalagang

在平常的項目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動態(tài)的進行呈現(xiàn),接下來我們就模擬從后端獲取數(shù)據(jù)然后進行呈現(xiàn)的方法

KOA2的使用

KOA2是由Express 原班人馬打造、

環(huán)境依賴 Node v7.6.0 及以上、

支持 async 和 await

洋蔥模型的中間件

寫響應函數(shù)(中間件)

響應函數(shù)是通過use的方式才能產(chǎn)生效果, 這個函數(shù)有兩個參數(shù),

ctx :上下文, 指的是請求所處于的Web容器,我們可以通過 ctx.request 拿到請求對象, 也可

以通過 ctx.response 拿到響應對象

next :內(nèi)層中間件執(zhí)行的入口

模擬服務器完整路徑：

安裝 Koa

npm init -y

這個命令可以快速的創(chuàng)建出 package.json 的文件, 這個文件可以維護項目中第三方包的信息

npm install koa

由于線上最新版本的 koa 就是koa2 , 所以我們并不需要執(zhí)行 npm install koa2

app.js入口文件

// 服務端入口文件
// 1. 創(chuàng)建KOA的實例對象
const Koa = require('koa') // 引入koa
const app = new Koa() // 創(chuàng)建koa 實例
// 2.綁定中間件
// 第一層 響應時間的中間件
const resDuration = require('./middleware/response_duration')
app.use(resDuration)
// 第二層 設置響應頭的中間件
const resHeader = require('./middleware/response_header')
app.use(resHeader)
// 第三層 處理業(yè)務邏輯的中間件
const resData = require('./middleware/response_data')
app.use(resData)
// 3.綁定端口號
app.listen(2903)
const webSocketService = require('./service/web_socket_service')
// 開啟服務器的監(jiān)聽，監(jiān)聽客戶端的鏈接
// 當某一個客戶端連接成功之后，就會對這個客戶端進行message 事件的監(jiān)聽
webSocketService.listen()

第一層記錄響應時間的中間件

完成的事件減去進入時的時間

// 計算響應總耗時的中間件
module.exports = async (context,next) =>{
// 記錄開始時間
  const start = Date.now()
// 讓內(nèi)層的中間件得到執(zhí)行
  await next()
// 記錄結(jié)束的時間
  const end = Date.now()
// 準備時間數(shù)據(jù)
  const  duration = end - start
// 設置響應頭 X-Response-Time
  context.set('X-Response-Time',duration + 'ms')
}

第二層設置響應頭的中間件

添加兩個功能解讀json utf-8格式防止亂碼以及增加請求頭允許跨域

// 設置響應頭的中間件
module.exports = async (context,next) =>{
  // 增加響應頭 解讀 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è)務邏輯的中間件

引入要用的模塊 fileUtils 在下面有

通過context.request.url 獲取到客戶端請求的地址

用 replace方法把 api 去掉

拼接上存放路徑的位置和后綴名在使用 __dirname 方法得到絕對路徑

把這個路徑作為參數(shù) 傳入 fileUtils.getFileJsonData(filePath) 執(zhí)行返回數(shù)據(jù) 作為響應體返回

如果響應失敗就 try catch 返回錯誤信息

// 處理業(yè)務邏輯的中間件 讀取某個json文件的數(shù)據(jù)
// 引入 node path內(nèi)置模塊 用于拼接路徑
const path = require('path')
// 具體處理對應文件的工具
const fileUtils = require('../utils/file_utils')
module.exports = async (context,next) => {
  // 根據(jù)url 提取關鍵字 再拼接絕對路徑
  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ù)都是從后端推送到前端來的 , 不過在項目的初期 , 我們會先使用 ajax 由前端主動獲取數(shù) 據(jù), 后續(xù)會使用 WebSocket 進行改造.

到此這篇關于Vue echarts模擬后端數(shù)據(jù)流程詳解的文章就介紹到這了,更多相關Vue echarts模擬數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: