RuoyiAdmin项目搭建及Docker 部署备忘

下载前后分离版，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:

@Configuration

public 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 部署：

先新建application-prod.yaml 把 application-druid.yaml 中的内容合并过来。

注意删除

#  profiles:
#    active: druid

FROM openjdk:8
EXPOSE 1024
VOLUME /tmp
ADD ./target/ruopiao.jar  /ruopiao.jar
RUN bash -c 'touch /ruopiao.jar'
ENTRYPOINT ["java","-jar","/ruopiao.jar","--spring.profiles.active=prod"]

把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>

8.使用固定主题切换：

引入 skins.less到assets里。

Setting.vue里：

<li v-for="(skin, index) in skinOptions" :key="index" style="float:left; width: 33.3%; padding: 5px;">
  <a   @click="selectSkin(skin)"

const skins = [
  { name: '蓝', colors: ['#367fa9', '#3c8dbc', '#2f4050', '#f4f5f7'], class: 'skin-blue|theme-dark' },]

const selectSkin = (skin) => {
  const [newSkin, newTheme] = skin.class.split('|');

  // 清除所有可能的类
  skins.forEach(s => {
    document.body.classList.remove(s.class.split('|')[0]);
    document.body.classList.remove(s.class.split('|')[1]);
  });
  // 添加新的类
  document.body.classList.add(newSkin);
  document.body.classList.add(newTheme);
};

const skinOptions = skins;

在  HomePage.vue里

 <a-layout-header class="navbar"  并去掉background的color.

<a-layout-header class="logo" 并去掉background的color.