「ECharts」电商平台数据可视化实时监控系统之后台开发
此项目后台采用 Koa2 进行开发配置,相关配置整理如下。
1. Koa2 概述
Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。
关于 Express、Koa、Koa2 的区别见下表:
框架 | 作用 | 异步处理 |
---|---|---|
Express | web 框架 | 回调函数 |
Koa | web 框架 | Generator + yield |
Koa2 | web 框架 | async / await |
async / await 在 node 7.6 版本后才支持使用,因此 Koa2 环境要求 Node v7.6.0 及以上。
2. Koa2 快速上手
> 基本步骤
- 检查 Node 环境( > 7.6 )
node -v
- 安装 Koa
npm init -ynpm install koa
- 创建并编写 app.js 文件
a. 创建 Koa 对象b. 编写响应函数(中间件)c. 监听端口
- 启动服务器
node app.js
具体而言,实现代码如下:
const Koa = require('koa')// 1. 创建 koa 对象
const app = new Koa()// 2. 编写响应函数(中间件)
app.use((ctx, next) => {console.log(ctx.request.url);ctx.response.body = 'hello world'
})// 3. 绑定端口号 3000
app.listen(3000)
> 中间件的特点
Koa 对象通过 use 的方式加入中间件,一个中间件就是一个函数,中间件的执行顺序符合洋葱模型。
app.use(async(ctx, next) => {// 刚进入中间件要做的事情await next();// 内层所有中间件结束之后想做的事情
})
如上代码即为一个中间件,其中 ctx 表示上下文,主要指 web 容器,可以通过 ctx.request
和 ctx.response
分别获取请求对象和响应对象。而该代码中的 next 指代下一个中间件。内层中间件能否执行取决于外层中间件的 next 函数是否调用。
此外,需注意调用 next 函数得到的是 Promise 对象。
3. 后台项目
> 后台项目的目标
- 计算服务器处理请求的总耗时
- 在响应头中增加响应内容的 mime 类型
- 根据 URL 读取指定目录下的文件内容
> 后台项目的实现步骤
- 项目准备
- 总耗时中间件
- 响应头中间件
- 业务逻辑中间件
- 允许跨域
> 项目的准备
- 安装包
npm init -ynpm install koa
- 创建文件和目录结构
相关文件目录说明:
文件(夹) | 说明 |
---|---|
app.js | 服务器入口文件 |
data | 存放前端图表所需的 json 文件数据 |
middleware | 存放中间件(业务逻辑、总耗时、设置响应头) |
utils | 工具方法(读取文件的工具方法) |
4. 总耗时中间件
此中间件位于第一层,计算中间时间为开始和结束时相减,通过响应头方式设置给前端浏览器。
> koa_resonse_dutation.js
// 计算服务器消耗时长的中间件
module.exports = async (ctx, next) => {// 记录开始事件const start = Date.now()// 让内层中间件得到执行await next()// 记录结束的时间const end = Date.now()// 设置响应头 X-Response-Timeconst duration = end - start// ctx.set 设置响应头ctx.set('X-Response-Time', duration + 'ms')
}
5. 响应头中间件
> koa_response_header.js
// 设置响应头的中间件
module.exports = async (ctx, next) => {const contentType = 'application/json; charset=utf-8'ctx.set('Content-Type', contentType)await next()
}
6. 业务逻辑中间件
此中间件专门用于读取文件的内容。因为我们所要获取的是 json 文件,因此需要获取请求路径,拼接文件路径,才可正确读取文件内容。最后,将读取的文件内容设置到响应体中即可。
> koa_response_data.js
// 处理业务逻辑的中间件:读取某个 json 文件数据,响应给前端浏览器
const path = require('path')
const fileUtils = require('../utils/file_utils.js')module.exports = async (ctx, next) => {// 根据 url 读取文件const url = ctx.request.url// /api.seller ../data/seller.jsonlet filePath = url.replace('/api', '')filePath = '../data' + filePath + '.json'filePath = path.join(__dirname, filePath)// 利用工具方法获取指定路径的数据const ret = fileUtils.getFileJsonData(filePath)ctx.response.body = retconsole.log(filePath);await next()
}
> file_utils.js
// 读取文件的工具方法(用于读取某个路径下的文件内容)
const fs = require('fs')module.exports.getFileJsonData = (filePath) => {// 根据文件路径,读取文件内容return new Promise((resolve, reject) => {fs.readFile(filePath, 'utf-8', (error, data) => {if (error) {// 读取文件失败reject(error)} else {// 读取文件成功resolve(data)}})})
}
> 接口总览
目标 | 接口 |
---|---|
商家销量 |
/api/seller
|
预算开销 |
/api/budget
|
库存信息 |
/api/stock
|
销量趋势 |
/api/trend
|
销量排行 |
/api/rank
|
商家分布 |
/api/map
|
热销商品 |
/api/hotproduct
|
7. 允许跨域
通过 Ajax 访问服务器时,应遵循同源策略(同协议、同域名、同端口)。为了使跨域请求可以实现,需要对响应头进行设置。
> koa_response_header.js
// 设置响应头的中间件
module.exports = async (ctx, next) => {const contentType = 'application/json; charset=utf-8'ctx.set('Content-Type', contentType)// 允许跨域ctx.set('Access-Control-Allow-Origin', '*')ctx.set('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, POST, DELETE')await next()
}
「ECharts」电商平台数据可视化实时监控系统之后台开发相关推荐
- 电商平台数据可视化实时监控系统(开发目录)
目录 项目地址github 1.koa2快速上手 2.后台项目初步 3.前端项目的创建和准备 4.单独图表组件的开发---商家销售统计(横向柱状图) 5.单独图表组件的开发---销量趋势图表(折线图) ...
- 电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录
放假在家没事,跟着b站黑马前端课程手把手做了个电商平台数据可视化实时监控系统.老师课讲得非常好,几乎是保姆级别,对我这种小白非常友好.在这里记录一些自己遇到的问题,欢迎批评指正. 问题记录 1.ECh ...
- 基于JavaScript+Koa2实现 Echarts 电商平台数据可视化大屏全栈【100010415】
全新 Echarts 电商平台数据可视化大屏全栈 1. 前言 五一假期重学了新版 Echarts,一个基于 JavaScript 的开源可视化图表库,收集参考了很多网上资料,最终选择电商平台作为练手项 ...
- 电商平台数据可视化如何实现
一.什么是API? API,即Application Programming Interface,翻译过来就是"应用程序编程接口".它是用于不同软件和应用之间进行交互的一种技术规范 ...
- 电商平台数据解锁网红零食销量密码
" 你知道"巨型猪饲料""单身狗粮"是什么吗?这不是给动物吃的,也许你或多或少听说过,这些在网上引起巨大反响的零食,完全激起了大家的购买欲望. &qu ...
- 电商平台数据仓库搭建01-项目介绍
1,项目说明 本项目来源于github 电商平台数据仓库搭建 .该项目仅供个学习使用 项目为个人学习记录,项目代码及文件可访问 电商平台数据仓库搭建 获得.访问不了的同学也可以私信我. 2,项目流程设 ...
- 电商平台数据仓库搭建02-Hadoop集群搭建
1,项目说明 本项目来源于github 电商平台数据仓库搭建 . 项目为个人学习记录,项目代码及文件可访问 电商平台数据仓库搭建 获得. 2,项目准备 虚拟机准备 虚拟机开发工具为 VMware15. ...
- 电商数据监测:如何获取想要的电商平台数据?
随着电商行业的发展,越来越多的企业开始通过电商平台销售商品.为了更好地掌握市场信息和消费者需求,企业需要获取电商平台上的数据.这些数据可以帮助企业制定营销策略.优化产品设计和提高竞争力.本文将介绍如何 ...
- 爬取电商平台数据,python爬取某维商品数据
本次内容: 爬取电商平台数据,python爬取某维商品数据 课程亮点 动态数据抓包演示 json数据解析 requests模块的使用 保存csv 环境介绍 python 3.8 [最好用和老师一样的版 ...
最新文章
- c语言怎么创建一个h文件,求助C语言大佬 , 只会写到一个.c文件里 ,不会用.h头文件...
- 使用工具类创建一个线程池
- 对SqlCommandBuilder类理解
- 如何成为一个合格的算法工程师?这对你来说也许并不是很困难
- 常用功能测试点汇总(转)
- 牛顿法python实现_牛顿法求极值及其Python实现
- 马踏飞燕——奔跑在Docker上的Spark
- HTML教程(看完这篇就够了)
- Linux驱动的地址空间和硬件地址空间说明——摘自华清远见嵌入式园地 .
- vs2008 html5 的安装,vs2008安装教程,详细教您vs2008安装教程
- 707. 设计链表(中等 链表)
- mysql5.1不支持中文,MySQL_MySQL5.1的中文支持的一个改进, MySQL 5.1的中文支持的一个改 - phpStudy...
- 复习vue+前后端分离开发
- Raspberry Pi Pico实践系列1-Windows环境下树莓派Pico迷你开发板MicroPython快速上手实践
- mac卸载软件怎么卸载干净?详细方法教程分享
- java判断工作日_java 查询指定月份的工作日(不包括法定节假日)
- java linest_不要再纠结in和exists——JAVA伪代码直白分析二者时间复杂度
- 2012年中国各省市区GDP排行榜 附各主要城市GDP排行榜
- C语言条件表达式(三目运算符)结合性问题
- 无法删除文件或文件夹的原因和解决方法(转)
热门文章
- python查看库函数和方法_查看python库函数和三方库函数文档
- IDEA Docker 插件安装
- 基于PyQt的扫雷游戏实现_上篇
- 网络规划设计师考试经验分享
- Vmware esxi忘记密码重置方法
- linux 磁盘控制器,linux – 戴尔R710上的PERC 6 / i RAID:单个控制器上的慢速磁盘…… RAID10?...
- dmp导入数据 oracle_DMP文件导入ORACLE指南
- python多维数组初始化后赋值的问题
- [swustoj 771] 奶牛农场
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除)...