下载前后分离版，ruoyi: 项目扩展 | RuoYi
| https://gitee.com/Double_AutoEE/AutoEE |
这个是vite antdv
1.安装好后端基础：改端口、配接口、建数据库，前端下载后： npm install npm run dev
2.新建一个模块，包括完整的数据流程，包名尽量用 com.ruoyi.xxx，这样Controller直接使用，不用在RuoyiApplication.java中再配置@ComponentScan({"com.testname."})
3.新建模块的POM里加上：
<dependencies><dependency><groupId>com.ruoyi</groupId><artifactId>ruoyi-common</artifactId></dependency> </dependencies>
ruoyi-admin的pom里加上：
<dependency><groupId>com.ruoyi</groupId><artifactId>piaopiaoruo</artifactId><version>${ruoyi.version}</version>
</dependency>
4.将原项目中的mybatis 替换为 Mybatis-plus :参考 若依前后端分离版本原生mybatis替换mybatis-plus详细教程_mybatis_会飞的三胖子-RuoYi 若依
主pom中加入 依赖：
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.1</version> </dependency>
在common 及framework中加入 子依赖：
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId> </dependency>framework的config 中，去掉 mybatisconfig.java, 加入 mybatisplusconfig.java:
@Configurationpublic class MybatisPlusConfig {@Bean //解决 Page total 一直为0的情况public MybatisPlusInterceptor mybatisPlusInterceptor(){MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.H2));return interceptor;}
}
最后 admin 主类加上：
@MapperScan("com.ruoyi.piao.dao")
5.Docker 部署：
FROM openjdk:8 EXPOSE 1024 VOLUME /tmp ADD ./target/ruopiao.jar /ruopiao.jar RUN bash -c 'touch /ruopiao.jar' ENTRYPOINT ["java","-jar","/ruopiao.jar"]
把Dockerfile 及jar 上传到 服务器，运行：
docker build -t ruopiao .
docker run -d -p 1024:1024 --name piaoruo --restart always ruopiao
镜像必须是最后一个，执行过最自动启动了，不用再docker start piao
（上面加restart就不用这一行了）docker update piaoruo --restart=always
6.在package.json中添加：
"build:prod": "vite build --mode prod",
即可按 npm run build:prod 打包 ，部署前端。
7.使用 echarts:
npm install echarts vue-echarts
main.js 中：import "echarts";
import ECharts from 'vue-echarts'
app.component('v-chart', ECharts)
页面中：
<template>
<v-chart :option="chartOptions" style="width: 100%; height: 400px;"></v-chart> </template>
<script setup>
import {reactive, ref} from 'vue';const chartOptions = ref({title: {text: 'Sales Data'},tooltip: {},xAxis: {type: 'category',data: Array.from({ length: 24 }, (_, i) => `${i}:00`)},yAxis: {type: 'value'},series: [{name: 'Sales',type: 'bar',data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 1000))}]
});
</script>