TechMindWave（BIGC前后端分离项目）从0到1-开发到部署

最新推荐文章于 2024-10-07 00:00:00 发布
最新推荐文章于 2024-10-07 00:00:00 发布
阅读量156 收藏
点赞数 3
分类专栏： 那些年有关我的代码经历人生 文章标签： AIGC 个人开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63031112/article/details/133440390
版权

|前序

由于网站没做太多防护，就不再这里粘贴网站访问链接了。

有想要看网站UI模样的可以到下面平台相关页面截图展示模块看

花有再开日，人无在少年。

感谢曾经奋斗的你。

致青春。

经历一个月每周末的时间，终于把项目完整的搞了出来。

有的周末一两点才关闭电脑。

有的时候小小的bug可以噶两三个小时还没有解决。

多少次想放弃。

也是第一次接触前后端分离的项目。

也是第一次见证到了部署方式之多。

  1. 原生化部署（纯Linux指令）

  2. docker打包部署

  3. 宝塔部署

此项目融合了用户中心、智能BI,并对其做了扩展。

管理员功能扩展

智能文本分析扩展

AI对话（dev）

由于还有点bug没有处理，等迭代，所以dev哈哈哈~

再次鸣谢各位小伙伴！

|正式篇

喜欢md形式的小伙伴可以复制网站链接🔗跳转对应笔记

相关笔记链接🔗

南城余：

https://www.yuque.com/g/nanchengcyu/dubfny/ibwmnan5bo9uf51x/collaborator/join?token=wkxCKWCK5Lt3BlsI&source=doc_collaborator# 《TechMindWave》

知识星球：

https://bcdh.yuque.com/staff-wpxfif/resource/oywzglpnxegf579a

猫十二：

https://www.yuque.com/kcsshier/zpovmy/frhxvidgief5r5df?singleDoc

上传前后端代码教程

相关链接🔗：

https://zhuanlan.zhihu.com/p/193140870

前端代码：

https://github.com/nanchengcyu/TechMindWave-frontend

后端代码：

https://github.com/nanchengcyu/TechMindWave-backend

1）在GitHub上创建仓库

图片

图片

2）建立本地仓库

图片

图片

3） 将所有文件添加到仓库中

 git add  .

4）修改文件描述

git commit -m "first commit"

5）关联github仓库

git branch -M main
git remote add origin git@github.com:nanchengcyu/TechMindWave-frontend.git

6）上传本地代码

git push -u origin main

项目背景

什么是 BI？


即商业智能：数据可视化、报表可视化系统
主流 BI 平台：帆软 BI、小马 BI、微软 Power BI
 

图片

传统 BI 平台：
https://chartcube.alipay.com/
1需要人工上传数据
2需要人工拖选分析要用到的数据行和列（数据分析师）
3需要人工选择图表类型（数据分析师）
4生成图表并保存配置

智能 BI 平台：
区别于传统的 BI，用户（数据分析者）只需要导入最最最原始的数据集，输入想要进行分析的目标（比如帮我分析一下网站的增长趋势），就能利用 AI 自动生成一个符合要求的图表以及结论。

优点：让不会数据分析的同学也能通过输入目标快速完成数据分析，大幅节约人力成本。


需求分析


1智能分析：用户输入目标和原始数据（图表类型），可以自动生成图表和分析结论
2图表管理
3图表生成的异步化（消息队列）
4对接 AI 能力


架构图


基础流程：

图片


优化流程（异步化）：

图片



 

技术栈


前端
1.React
2.Umi
3.Ant Design Pro
4.可视化开发库：Echarts √ 、HighChairts + AntV
5.umi openapi 代码生成：自动生成后端调用代码
6.EChart 图表生成

后端
1.Spring Boot：万用模板
2.MySQL数据库
3.Redis：Redissson限流控制
4.MyBatis Plus 数据库访问结构
5.消息队列：RabbitMQ
6.AI能力：Open AI接口开发
7.Excel上传和数据的解析：Easy Excel
8.Swagger + Knife4j 项目文档
9.Hutool 工具库
 

平台功能介绍

  1. 用户登录，注册。

  2. 智能图表分析（同步）。调用AI根据用户上传csv文件生成对应的 JSON 数据，并使用 ECharts图表 将分析结果可视化展示。

  3. 智能图表分析（异步）。使用了线程池异步生成图表，最后将线程池改造成使用 RabbitMQ消息队列 保证消息的可靠性，实现消息重试机制。

  4. 智能文本分析（异步）。使用了线程池异步生成markdown文本，最后将线程池改造成使用 RabbitMQ消息队列 保证消息的可靠性，实现消息重试机制。

  5. 智能问题分析（异步）。使用了线程池异步生成问题解决答案，最后将线程池改造成使用 RabbitMQ消息队列 保证消息的可靠性，实现消息重试机制。

  6. 个人管理图表/文本/问题，增删改查。

  7. 个人信息管理，头像，名字，账号等的修改。

  8. 管理员管理，支持图表/文本/问题增删改查，新增用户，修改用户，删除用户，查看用户，增删改查等。

  9. 用户限流。本项目使用到令牌桶限流算法，使用Redisson实现简单且高效分布式限流，限制用户每秒只能调用一次数据分析接口，防止用户恶意占用系统资源

  10. 调用AI进行数据分析，并控制AI的输出。

  11. 由于AIGC的输入 Token 限制，使用 Easy Excel 解析用户上传的 XLSX 表格数据文件并压缩为CSV，实测提高了20%的单次输入数据量、并节约了成本。

  12. 后端自定义 Prompt 预设模板并封装用户输入的数据和分析诉求，通过对接 AIGC 接口生成可视化图表 JSON 配置和分析结论，返回给前端渲染。

平台相关页面截图展示

图片

图片

图片

图片

图片

图片

图片

图片

网站名字

改名了，这是之前版本的名字

图片

我的选择

WiseGraphs：将"Wise"（意为智慧）和"Graphs"（意为图表）结合，强调图表的智能化。

副标题：智能可视化，数据一目了然

前后端相关网站链接

RabbitMQ网站地址：

http://localhost:15672/#/

ant-design 官网镜像地址:

http://ant-design.gitee.io/index-cn

ant-design-pro镜像地址：

http://ant-design-pro.gitee.io/index-cn

antd-mobile镜像地址：

https://antd-mobile.gitee.io/index-cn

前端项目初始化

Install node_modules:

npm install

OR

yarn

启动项目

npm start

构建项目

npm run dev

前端初始化问题解决

1.依赖缺失解决（主要更改包名后的报错解决方法）

图片

图片

后端项目初始化

  1. 下载/拉取本项目到本地

  2. 通过 IDEA 代码编辑器进行打开项目，等待依赖的下载

  3. 修改配置文件 application.yaml的信息，比如数据库、Redis、RabbitMQ等

  4. 修改信息完成后，通过 NanchengyuApplication 程序进行运行项目

  5. 队列生成

图片

部署项目

部署方式

1）原生态部署方法，各种环境利用Linux指令安装（下面所有环境安装方法，MySQL、redis等）

2）docker容器打包方法，将所有的环境打包在docker容器中，包括前后端项目

3）利用第三方网站部署，如宝塔。

阿里云服务器重置以及安装宝塔

链接：

https://blog.csdn.net/qq_44891617/article/details/123723766

宝塔部署参考链接：

https://www.cnblogs.com/galo/p/17539631.html

宝塔 运行jar目录参考

图片

---------------------------------------------------

下面所有方法都为1）的部署方法-原生安装方法

前端

前端打包

webstrom

npm run build

前端环境

nginx

前端环境安装

nginx下载安装

1）利用centosyum下载
yum 
or 利用官网链接下载 
curl -o  [filename] [curl] 
2)解压安装
tar -zxvf nginx-1.24.0.tar.gz  
3)相关依赖安装
yum install pcre pcre-devel -y
yum install openssl openssl-devel -y
./configure --with-http_ssl_module--with-http_v2_module--with-stream
4）编译安装
make
make install
5）编译配置环境
ls /usr/local/nginx/sbin/nginx
vim /etc/profile
（shift+g）快速跳到编译文件最后一行
在最后一行添加：
export PATH=$PATH:/usr/local/nginx/sbin	
6）启动nginx
source /etc/profile 刷新配置文件
nginx
6）查看端口启动情况
netstat -ntlp

后端

后端打包

后端多环境运行配置

在企业项目运行时，一般会经历开发-测试等多个环节，因此需要一套代码多个环境，项目上线打包的时候只需要修改application.yml配置即可，详情可看下图

相关链接：

https://zhuanlan.zhihu.com/p/148823337

图片

参考链接：

https://www.cnblogs.com/galo/p/17539631.html

图片

后端环境

Java maven MySQL  Redis RabbitMQ  Java版本

推到重来，建议全部安装利用podman/docker安装

后端环境安装

Java maven安装

yum install -y java-1.8.0-openjdk*
curl -o apache-maven-3.8.5-bin.tar.gz https://dlcdn.apache.org/maven/maven-3/3.8.5/binaries/apache-maven-3.8.5-bin.tar.gz
tar -zxvf apache-maven-3.8.5-bin.tar.gz 
git clone xxx 下载代码
打包构建，跳过测试
mvn package -DskipTests
java -jar ./user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

MySQL安装

参考网站链接：

https://blog.csdn.net/wangpaiblog/article/details/120259448

MySQL镜像网：

https://mirrors.aliyun.com/mysql/MySQL-8.0/?spm=a2c6h.25603864.0.0.6a2f712bwfBnNT

RabbitMQ安装

参考网站

https://blog.csdn.net/qq_45173404/article/details/116429302

下载网站

https://www.rabbitmq.com/download.html

问题解决方案

rabbitmq用户管理(Not management user问题解决)

参考链接：

https://blog.csdn.net/qq_24095055/article/details/97001679

建议最后执行

rabbitmqctl set_user_tags 用户名 administrator

图片

redis安装

参考网站链接：

https://blog.csdn.net/m0_37959155/article/details/108897863

https://blog.csdn.net/u012723183/article/details/105970244（阿里云推荐）

推到重来，建议全部安装利用podman/docker安装

图片

问题复盘

在项目中，遇到的相关问题解决方案记录。

报错解决方案

1.推荐先去问ChatGPT,可以解决百分之80的问题（建立在你的表述无误的情况下）

2.浏览器搜索方法（推荐顺序谷歌>百度）

3.开源项目可以去GitHub解决

1）动态SQL获取   视频时间1.43.30

2）前端我的图表显示不出来 回放 第四期

图片

后端原因没有解决好

3）异步页面处理

视频在第五期 2.2.30

4）mq队列

视频第七期 2.31.08

对应包 bizmq

5）修改接口

图片

图片

图片

图片

6)更改前端代码openapi接口

图片

图片

7）Redis高版本下载

https://blog.csdn.net/dwh19992018/article/details/129750566

8)更改前端图标

图片

app.tsx文件

图片

defaultSetting文件

图片

9）引入mybaits-plus √

用户中心第一期 项目视频 1.58.42

10）引入junit -单元测试库 √

用户中心第一期 视频 2.15.29

11)注册 id

用户中心终 视频 0.53.00

图片

12）mq队列

BI第七期 1.52.0

13）运行npm install 时，卡在sill install loadAllDepsIntoIdealTree不动

相关链接https://blog.csdn.net/zjq_1234/article/details/88946863

图片

  1. npm install一直停留在fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch可以使用如下命令设置为淘宝的镜像源：

npm config set registry https://registry.npm.taobao.org
2. 使用如下命令检验是否成功：

npm config get registry
输出淘宝镜像路径

  1. 继续运行 npm install ,安装过程畅通无阻

14）erro报错

图片

这个报错是由于在RabbitMQ中的队列参数不匹配导致的。错误信息中提到了问题所在：

inequivalent arg 'x-dead-letter-exchange' for queue 'ai_question_queue' in vhost '/': received none but current is the value 'ai-dlx-exchange' of type 'longstr'

这个错误表示在队列 ai_question_queue 的参数 x-dead-letter-exchange 不匹配，当前值是 'ai-dlx-exchange'，但接收到的值是 none。这可能是因为队列在声明的时候参数设置不一致导致的。

要解决这个问题，你需要确保你的队列声明参数与之前定义的参数一致。具体来说，检查队列 ai_question_queue 的声明，并确保在声明时设置了正确的 x-dead-letter-exchange 参数。

如果你使用代码声明队列，可以类似以下方式来设置参数：

Map<String, Object> args = new HashMap<>();
args.put("x-dead-letter-exchange", "ai-dlx-exchange"); // 设置正确的死信交换机
Queue queue = new Queue("ai_question_queue", true, false, false, args);

如果你在 RabbitMQ 的管理界面中手动创建队列，确保在队列的参数设置中包含了正确的 x-dead-letter-exchange 值。

总之，解决这个问题的关键是确保队列参数的一致性，特别是 x-dead-letter-exchange 参数的设置。

15）查询电脑端口占用情况命令

netsh interface ipv4 show excludedportrange protocol=tcp

16）页面颜色

<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
  <div style={{ background: '#007BFF', padding: '5px 10px', borderRadius: '4px', display: 'inline-block' }}>
    <Divider style={{ fontSize: '20px', fontWeight: 'bold', color: 'white', margin: 0 }}>分析结论</Divider>
  </div>
</div>

我的选择#007BFF

图片

/* 背景色为淡蓝色 */
body {
  background-color: #E6F7FF;
}

/* 正文文本颜色为深灰色 */
body {
  color: #333;
}

/* 链接颜色为浅蓝色，悬停时变为深蓝色 */
a {
  color: #007BFF;
}
a:hover {
  color: #0056b3;
}

/* 按钮背景色为浅绿色，文本颜色为白色 */
.button {
  background-color: #A7E1B1;
  color: white;
}

/* 提示框背景色为淡黄色，文本颜色为深灰色 */
.tooltip {
  background-color: #FFF3D9;
  color: #333;
}

17)宝塔部署vue项目刷新404解决方案

解决方案链接：

https://blog.csdn.net/Mrzhao5788/article/details/120279306

18）linux解压时报错：gzip: stdin: not in gzip format tar: Child returned status 1 tar: Error exit delayed

参考链接：
https://blog.csdn.net/hjing123/article/details/88862650

去掉 z
#tar -vxf [解压文件名】

idea快捷操作小技巧

在idea中如何进行单词的全局替换

先按ctrl+f再按ctrl+r

全局替换 crtl+shift+r

在idea中创建测试类快捷键 ctrl+shift+t  --> create new test

windows区域截图快捷键 win 键+ shift + s键 

结语

项目笔记持续更新中！

链接：https://www.yuque.com/nanchengcyu/dubfny/ibwmnan5bo9uf51x?singleDoc# 《TechMindWave》

有关南城余的学习笔记，也可以关注南城余的语雀账号！

关注后，你将学习到下面内容！

链接：南城余 · 语雀 (yuque.com)

有关页面实现（http——》https）可以观看我的这篇文章！

链接：域名，拜访你的网站的门户（https协议）

实现原理：互联网上的隐私构成，这些知识点是你应该知道

南城余coding
关注
专栏目录
BigC Tools-crx插件
04-04
特定产品如何使用：1.去www.bigc.co.th2.在搜索栏中键入任何搜索项，或选择所需的产品类别，例如品牌名称，单词搜索，产品...等3.使用过滤器选项自定义搜索结果，然后单击“输入”。4.显示搜索结果后，打开Chrome...
Makro Tools-crx插件
04-04
v.2编辑，提取产品价格和SKU简单数据提取工具，价格，价格，销售，评论此Chrome Extension允许您以可编辑的Excel格式提取BIGC网页详细信息。现在，您可以使用此扩展将产品列表分开竞争对手。产品规格中的产品。特定...
如何自学前端找到一份工作
weixin_48191864的博客
05-06 822
如何从小白自学前端找到工作，这份自学前端保姆级教程收藏好，无论你是看视频还是读文档都可以，自学前端 从基础 HTML，CSS，JavaScript 三件套，到现代前端开发模式。框架 （React，Vue）学习。到 包管理工具，构建工具（vite，webpack）CSS处理器，到进阶学习，Typescript，NodeJs ，小程序开发，设计模式，前端工程化，到最后项目，给开源社区贡献，最后分享了我在自学过程中的一些问题和后端如何快速入门前端
JAVA面向对象 从0.5到1
c0re的博客
10-07 364
java 学习笔记
为什么要前后端分离？有什么优缺点？
QQ群166477105Python技术群
01-12 382
640 作者：偏头痛杨 来源：https://blog.csdn.net/piantoutongyang 一、前戏 前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个...
MySQL + Atlas --- 部署读写分离
QQ群166477105Python技术群
01-01 372
阅读目录 1. 数据库用户配置 2. 主从数据库连接 3. Atlas配置 4. 读写分离测试 &nbsp; 序章 Atlas是360团队弄出来的一套基于MySQL-Proxy基础之上的代理，修改了MySQL-Proxy的一些BUG，并且优化了很多东西。而且安装方便。配置的注释写的蛮详细的，都是中文。英文不好的同学有福了。 Atlas官方链接： https://github.com/Qihoo3...
32个Python爬虫项目让你一次吃到撑
QQ群166477105Python技术群
10-13 488
今天为大家整理了32个Python爬虫项目。 整理的原因是，爬虫入门简单快速，也非常适合新入门的小伙伴培养信心。所有链接指向GitHub，祝大家玩的愉快~O(∩_∩)O WechatSogou [1]- 微信公众号爬虫。基于搜狗微信搜索的微信公众号爬虫接口，可以扩展成基于搜狗搜索的爬虫，返回结果是列表，每一项均是公众号具体信息字典。 DouBanSpider [2]- 豆瓣读书爬虫。可以爬下豆瓣读...
前端开发工具与Vue-CLI,vue安装并启动vue项目
QQ群166477105Python技术群
02-17 723
前端开发工具与Vue-CLI 像后端开发一样去开发前端应用，将大的功能拆分成模块化的组件分别开发，最后再组合起来完成整体功能。 Node.js Node.js介绍 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 JavaScript本来只能跑在浏览器上，然后Node.js就是一种能让js直接运行在操作系统的工具。并且它就能够让JS代码在操作系统上实现一些类...
python中hub_GitHub - BIGC-HUB/python-note: Python 笔记
weixin_39861918的博客
12-19 603
Python 3 小甲鱼 笔记Tags：笔记Python[TOC]模块安装指南秒懂释义Ctrl + F，输入 get-pip.py查找$ python get-pip.py安装$ pip --version检查备注：Win + X 运行命令提示符(管理员)命令$ pip list所有包$ pip list -o有更新$ pip install '模块'安装$ pip uninstall '模块'卸...
GitBook 从懵逼到入门
QQ群166477105Python技术群
03-16 268
GitBook 从懵逼到入门 本文从 “是什么”、“为什么”、“怎么办”、“好不好” 四个维度来介绍 GitBook，带你从黑暗之中走出来，get 这种美妙的写作方式。 是什么？ 在我认识 GitBook 之前，我已经在使用 Git 了，毋容置疑，Git 是目前世界上最先进的分布式版本控制系统。 我认为 Git 不仅是程序员管理代码的工具，它的分布式协作方式同样适用于很多场合，其中一个就是写作（这...
Ubuntu 18.04开发环境部署流程
weixin_30905133的博客
09-06 83
部署流程 安装系统 安装Eclipse和jre 配置系统 安装辅助工具 安装系统 用安装盘安装即可。一般boot 1G，swap按内存大小，home 20G，根剩余。 安装Eclipse和jre 解压到文件夹eclipse-cpp-oxygen-3-linux-gtk-x86_64.tar.gz和jre-8u161-linux-x64.tar.gz得到eclip...
【AIGC】Hugging Face 推出一站式搜索开源成果的平台：Paper Central
wxl01235的博客
10-06 367
Hugging Face 推出一个全面、便捷的学术平台：Paper Central ，该平台可以帮助研究人员和开发者快速获取并使用开源资源。它将arXiv、Hugging Face 论文页、模型、数据集、Space、GitHub 和会议论文集等多个来源的开源学术资源整合在了一起。通过将这些来源聚合到一个地方，Paper Central 大大简化了查找研究成果的流程，用户无需逐个访问不同平台。用户可以通过该平台轻松搜索即可获取开源成果，大大简化了查找研究成果的流程，用户无需逐个访问不同平台。
开发者在AIGC浪潮中的定位与策略
月空的博客
10-01 515
近年来，市场上涌现了许多AIGC工具，例如阿里的通义灵码、腾讯云的AI代码助手、CodeGeeX以及亚马逊的Amazon CodeWhisperer等。然而，从个人体验来看，虽然这些工具确实在一定程度上提高了开发效率，但也存在不少问题，如不能理解复杂的业务逻辑。但是现在的AIGC还不能单纯的看成是新型的“计算器”，它的应用更加广泛，存在的风险也更大，比如通过AIGC生成语音进行诈骗等。人工智能领域发展迅速，新的技术和方法层出不穷。程序员需要持续学习和自我提升，保持对新技术的关注，及时掌握和应用新的知识。
[云服务器18] 搭建AIGC APP？AI绘图不神秘！
2301_76197567的博客
10-04 439
好的这是我的第18篇blog了！开心max！那么，这次我们来做些什么呢……（思考中）此时的我拿起了手机，打开了某APP，然后赫然出现的广告：现在是AI的时代，为什么不来学习AIGC呢？诶，有了！那就讲讲AIGC吧！了解过AIGC的人都知道，这是一个非常NB的AI工具，可以根据一段话生成一幅超好看的画，可以是任何元素，可以是任何风格！于是乎，我决定了，今天，我们就来搭建一个属于自己的AIGC网站！
【AIGC】2022-CVPR-利用潜在扩散模型进行高分辨率图像合成
weixin_42475026的博客
10-03 1123
通过将图像形成过程分解为去噪自动编码器的顺序应用，扩散模型 (DM) 在图像数据及其他方面实现了最先进的合成结果。此外，它们的公式允许使用引导机制来控制图像生成过程而无需重新训练。但是，由于这些模型通常直接在像素空间中运行，因此强大的 DM 的优化通常需要数百个 GPU 天，并且由于顺序评估，推理成本高昂。为了在有限的计算资源上进行 DM 训练，同时保持其质量和灵活性，我们将它们应用于强大的预训练自动编码器的潜在空间。
【AIGC】ChatGPT账号的常见封号原因与解封方法
起心动念皆是因，当下所受皆是果。
10-03 552
2024.10.3-✍102min
【AIGC】ChatGPT是如何思考的：探索CoT思维链技术的奥秘
最新发布
起心动念皆是因，当下所受皆是果。
10-07 650
本文通过探讨思维链提示（CoT）在人工智能模型中的应用，揭示了如何通过逐步推理提升AI处理复杂问题的能力。CoT不仅是AI推理的一大进步，更为未来的研究提供了理论依据。通过引入多步骤推理，模型在推理过程中具备了更高的精确性、可解释性和全面性。尽管CoT带来了挑战，特别是计算资源的需求与训练优化的难度，但它的优势显而易见，尤其在复杂任务的解决中表现尤为突出。未来的研究和实践，将继续围绕这些挑战展开，为更广泛的AI应用奠定基础。 2024.10.5-10.6-✍88min
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南城余coding

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值