当前位置: 首页 > article >正文

智能BI项目第一期

该项目是全程跟着鱼皮,还未进行功能扩展。为了方便日后复习,打算将一些重要的步骤记录下来。

项目概述

BI:即商业智能:Business Intelligence

过去

        需要手动导入数据、选择要分析的字段和图表,并由专业的数据分析师完成分析,最后得出结论。

现在

        用户只需输入想要分析的目标,并上传原始数据,系统将利用 AI 自动生成可视化图表。这样,会比较方便

项目初期架构(后期会逐步完善)

基础流程

客户端输入分析诉求和原始数据,向业务后端发送请求。业务后端利用 AI 服务处理客户端数据,保持到数据库。前端根据AI生产的代码生成可视化图表,最终将结果返回给客户端展示。

问题:

假设一个 AI 服务生成图表和分析结果要等 50 秒,如果有大量用户需要生成图表,每个人都需要等待 50 秒,那么 AI 服务可能无法承受这种压力。为了解决这个问题,可以采用消息队列技术。这些请求会进入队列,AI 服务会依次处理队列中的请求,从而避免了同时处理大量请求造成的压力

优化流程(异步化)

消息队列根据 AI 服务负载情况,定期检查进度,如果 AI 服务还能处理更多的图表生成请求,就向任务处理模块发送消息。

任务处理模块调用 AI 服务处理客户端数据,AI 服务异步生成结果返回给后端并保存到数据库,当后端的 AI 服务生成完毕后,可以通过向前端发送通知的方式,或者通过业务后端监控数据库中图表生成服务的状态,来确定生成结果是否可用。若生成结果可用,前端即可获取并处理相应的数据,最终将结果返回给客户端展示。(在此期间,用户可以去做自己的事情

技术栈

前端:

  1. React

  2. 开发框架 Umi + Ant Design Pro

  3. 可视化开发库(Echarts + HighCharts + AntV) <可视化会涉及到图表的生成>

  4. umi openapi 代码生成(自动生成后端调用代码) <前后联调开发>

后端:

  1. Spring Boot 
  2. MySQL
  3. MyBatis Plus
  4. 消息队列(RabbitMQ)
  5. AI 能力(Open AI接口开发 / 星球提供现成的 AI 接口)
  6. Excel 的上传和数据的解析(Easy Excel)
  7. Swagger + Knife4j 项目接口文档
  8. Hutool 工具库

前端初始化

项目启动

这里的dev命令start:dev命令一样都是启动命令。

start:dev命令中的MOCK=none,是把自动模拟的数据关闭;

dev命令是调用自己定义的后端;

start命令是以模拟数据的方式运行项目。

关于git

  1. 工作区: 在你电脑里看到的目录
  2. 暂存区: 在 .git 文件夹内的 index 中 (二进制记录)
  3. 版本库: 指的整个 .git 文件夹 (也认为是本地仓库)

项目瘦身

如果报错:

1.执行
yarn add eslint-config-prettier --dev yarn add eslint-plugin-unicorn --dev 
2.然后修改node_modules/@umijs/lint/dist/config/eslint/index.js文件注释
// es2022: true可以解决问题
如果启动后找不到菜单栏,把图中文件夹的路由都加上name属性

后端初始化

源码下载百度网盘链接: 百度网盘 请输入提取码 提取码: h4pi

如果pom.xml有报错,找到报错的位置,没有版本号就添加版本号,有版本号就换一个。 maven repository

根据需求,按照readme文件的要求,更改你的配置,比如redis、mysql等等

20240915:今天有些累了,晚上睡不着做点笔记,下次继续,最近两天先学一下项目部署上线,后面再来写笔记


20240916:早上和下午学了服务器部署,构建要好长时间,那就继续做笔记吧

更名

数据库:

连接数据库这个基本操作就不做笔记了,直接在左侧database那里连接即可,自己准备好库 

create table if not exists chart
(
    id          bigint auto_increment comment 'id' primary key,
    `name`      varchar(128)                       null comment '图表名称',
    goal        text                               null comment '分析目标',
    chartData   text                               null comment '图表数据',
    chartType   varchar(128)                       null comment '图表类型',
    genChart    text                               null comment '生成的图表数据',
    genResult   text                               null comment '生成的分析结论',
    status      varchar(128)                       not null default 'wait' comment 'wait running success failed',
    execMessage text                               null comment '执行信息',
    userId      bigint                             null comment '创建用户 id',
    createTime  datetime default CURRENT_TIMESTAMP not null comment '创建时间',
    updateTime  datetime default CURRENT_TIMESTAMP not null on update CURRENT_TIMESTAMP comment '更新时间',
    isDelete    tinyint  default 0                 not null comment '是否删除'
) comment '图表信息表' collate = utf8mb4_unicode_ci;
create table if not exists user
(
    id           bigint auto_increment comment 'id' primary key,
    userAccount  varchar(256)                           not null comment '账号',
    userPassword varchar(512)                           not null comment '密码',
    userName     varchar(256)                           null comment '用户昵称',
    userAvatar   varchar(1024)                          null comment '用户头像',
    userRole     varchar(256) default 'user'            not null comment '用户角色:user/admin',
    createTime   datetime     default CURRENT_TIMESTAMP not null comment '创建时间',
    updateTime   datetime     default CURRENT_TIMESTAMP not null on update CURRENT_TIMESTAMP comment '更新时间',
    isDelete     tinyint      default 0                 not null comment '是否删除',
    index idx_userAccount (userAccount)
) comment '用户' collate = utf8mb4_unicode_ci;

 goal:就是你打算让AI为你分析啥

charData:前端传进来的excel的内容

charType:图表类型,比如折线图什么的

genChart:Ai生成的代码,通过echarts可以转化成对应的图片

genResult:AI生成的结论

status:因为是异步的,生成的过程中会有不同的状态,比如生成失败,正在生成之类的

userId:发起这个请求的用户

为了规范,把表放在sql目录下,新建一个sql文件来存放,然后在这个文件里执行你的sql代码

模拟数据

sql之父

可以用这个网站来自定义生成一些模拟数据,里面的createTime字段会多一个双引号,记得要去掉

代码框架生成

 这个时候在src/main/java/generator 目录下会有一些写好的代码框架,进行迁移即可 

防止爬虫

这两个实体类的主键id加上@TableId(type = IdType.ASSIGN_ID)

假删

这里配置了假删标志

假删的字段上加上@TableLogic,然后代码里的一些跟项目无关的内容可以删掉,比如引入微信模块

基础增删改查

这个项目里集成了一些基础的增删改查,我们直接复制过来改一些名称即可

我们找个简单一些的controller,复制PostController,粘贴到controller包下,改名为ChartController

全局替换post->chart、Post->Chart(记得要区分大小写)

这时候会改错一部分,把ChartMapping->PostMapping


此时大致框架搭好了,一些请求参数还没有创建,我们可以在com/ptu/api/model/dto 下面创建一个chart包,专门放关于图表的请求参数,此时可以用上com/ptu/api/model/dto/post包的内容,把他们的增删改查复制过来

更改对应的类名和内容

这里的字段可以根据需求来,不一定要按照鱼皮的代码

前后端联调

代码自动生成

使用 Ant Design Pro 自带的openAPI工具,根据后端的swagger接口文档数据自动生成对应的请求 service 代码。

打开前端项目,找到config.ts中的openAPI

 然后运行package.json里的openapi按钮运行,就会自动生成后端controller代码的调用,会生成在src/service目录下

修改配置

此时前后端代码就算是调通了 


http://www.kler.cn/news/316700.html

相关文章:

  • 【网络】高级IO——poll版本TCP服务器
  • 11年408考研真题解析-计算机网络
  • js使用:
  • 银行项目测试,基础业务知识,一文全掌握!
  • 【C语言】__attribute__((constructor)) 和 __attribute__((destructor))详细解析
  • 基于微信小程序的商品展示+ssm(lw+演示+源码+运行)
  • 【论文速看】DL最新进展20240923-长尾综述、人脸防伪、图像分割
  • 非root安装Augustus报错解决
  • 速盾:凡科建站开cdn了吗?
  • C++: 使用红黑树模拟实现STL中的map和set
  • MySQL篇(窗口函数/公用表达式(CTE))(持续更新迭代)
  • “明月寄情,文化共融”iEnglish助力青少年用英语讲述中国故事
  • 【PostgreSQL】PostgreSQL数据库允许其他IP连接到数据库(Windows Linux)
  • 【小六壬占卜代码】
  • STM32的GPIO的八种工作模式
  • 计算机毕业设计 奖学金评定管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解
  • 牛客周赛 Round 60(思维、逆元、组合数、概率DP)
  • 箭头与数字识别系统源码分享
  • STM32F407单片机编程入门(十六) DMA详解及ADC-DMA方式采集含源码
  • 『功能项目』主角属性值显示【75】
  • html+css+js网页设计 旅游 穷游10个页面
  • 【Qt笔记】QTabWidget控件详解
  • 828华为云征文 | 云服务器Flexus X实例,搭建MC我的世界服务器
  • 力扣773:滑动谜题
  • K8s Calico替换为Cilium,以及安装Cilium过程
  • 进阶SpringBoot之集合 Redis
  • html/css怎么禁用浏览器自动填写
  • 使用 Nginx 搭建 Webdav 服务
  • 安全通信网络等保
  • Android OpenGLES2.0开发(二):环境搭建