vue数据大屏带后端的项目说明及部署流程

学习笔记

数据大屏带后端的项目一般分为下面三部分

api    // api端 用于生成api接口以供admin后台和bigScreen调用接口
admin  //后台端 调用api接口来通过可视化界面管理数据
bigScreen // 数据大屏端 请求api接口的数据渲染到大屏中

api端

简介

api端基于lin-cms-koa框架开发,可以通过lin-cms-koa框架说明文档来了解次框架.

项目运行环境

nodejs 23

安装依赖

pnpm install

启动项目

node index.js 或者使用pm2进行启动

数据库

mysql Version: 5.7

数据库配置

可在 app/config/secure.js 中配置数据库信息

导入库数据库

在项目根目录有data.sql可以将数据库导入

配置端口

可以 api/app/config/setting.js 在当前文件配置项目运行的端口

后台编译

admin项目文件编译后存放文件到app/views/admin

大屏编译

bigScreen项目文件编译后存放文件到app/views/bigScreen

admin后台端

vue3项目用于管理数据

默认账号密码

账号:root
密码:wanjunshijie

安装依赖

pnpm i 

运行

npm run dev

打包

npm run build

接口地址配置文件

admin/src/api/ipConfig.js

bigScreen数据大屏端

数据可视化大屏端

框架

Vue 3 + Vite

开发环境

nodejs 23

开发工具

WebStorm

安装依赖

pnpm i 

运行

npm run dev

打包

npm run build

接口地址配置文件

bigScreen/src/api/ipConfig.js

项目部署视频流程

链接: 数据可视化大屏后台环境本地部署工具及视频 提取码: cbss

喜欢