项目开发流程(软件安装及环境配置、若依项目改造)

项目开发流程(5.9)

一、软件及环境配置

1.JDK的卸载、安装：

(1)卸载：

①卸载JDK：控制面板 ---> 卸载程序 ---> 选择Java(JDK)

②删除JDK安装路径：找到自己计算机上安装路径(Java)，删除文件即可。

③删除系统环境下的JDK配置：高级系统设置 ---> 环境变量 ---> 删除JAVA_HOME 和 path 中的 %JAVA_HOME%\bin

(2)安装：

①双击安装 jdk-17_windows-x64_bin.exe ---> 修改安装路径

验证: Win+ R ---> cmd ---> java -version

②配置系统环境下的JDK配置：

高级系统设置 ---> 环境变量 --->

Ⅰ.新建变量名：JAVA-HOME 、变量值：选择java的jdk路径(例如:D:\java\jdk-17.0.1)

Ⅱ.选择 path ---> 新增 %JAVA_HOME%\bin

验证：javac

2.IDEA的卸载、安装和破解:

(1)卸载：

①控制面板 ---> 卸载程序 ---> 选择IDEA ---> 勾选缓存和本地记录、设置和安装的插件 ---> 卸载

②删除计算机中的IDEA安装路径：找到自己计算机上安装路径(IDEA)，删除文件即可。

(2)安装：

①解压后，双击安装即可 ---> 选择安装目录 ---> 勾选快捷方式 ---> 自定义文件夹名称

(3)破解：

3.MySQL数据库的卸载、安装和配置：

(1)卸载：

1.方法一：

①任务管理器 ---> 服务 ---> 选择MySQL ---> 右键停止

②搜索cmd(命令提示符) ---> 以管理员身份运行 --->sc delete MySQL57 (MySQL57为计算机中安装的MySQL服务名)

2.方法二：

①控制面板 ---> 卸载程序 ---> 分别选中 MySQL Installer - Community 和 MySQL Server 5.7 进行卸载

②删除MySQL数据库在计算机中安装的文件夹

③删除系统环境下的MySQL配置

查看高级系统设置 ---> 找到 path ---> 选择 C:\Program Files\MySQL\MySQL Server 5.7\bin 将其删除

(2)安装：

双击解压，双击安装 ---> 选择仅安装服务 ---> ...重点记忆MySQL在计算机上默认的端口号 3306 ---> 设置密码 ---> ...完成

(3)配置：

在系统环境变量中，找到 path ，添加自己MySQL的路径，例如 C:\Program Files\MySQL\MySQL Server 5.7\bin

测试：DOS窗口 ---> mysql-uroot -p ---> quit 即可

4.Navicat软件的卸载、安装和破解：

(1)卸载：

①控制面板 ---> 卸载程序 ---> 选中 PremiumSoft Navicat Premium 17.0 卸载

②找到自己计算机上的Navicat软件的安装文件夹 ---> 选中删除

(2)安装：

双击解压，双击安装 ---> ...傻瓜式安装即可

(3)破解：

5.Maven的卸载、安装：

(1)卸载：

①删除计算机中的Maven文件夹

②系统环境变量 --->

选择 MAVEN_HOME 进行删除

选择 path 中的 %MAVEN_HOME%\bin 删除即可

③删除本地仓库:

删除计算机中本地仓文件夹即可。若没有配置，则默认在 C:\Users\Administrator.m2\repository 路径下，将名为 repository的文件夹删除即可。

(2)安装：

①进入官网下载

②下翻找到如下界面，点击 archives

③找到要下载的版本，点击即可

④点击 binaries/

⑤点击：apache-maven-3.8.1-bin.zip ，等待下载完成。

(3)配置Maven环境变量：

①系统环境变量 ---> 新建 ---> 变量名: MAVEN_HOME，变量值：为maven的文件夹路径。例如：D:ljava\apache-maven-3.6.3

②选择 path ---> 新建 ---> %MAVEN_HOME%\bin

测试：打开cmd，以管理员身份运行，输入 mvn -v 即可

(4)配置Maven本地仓库：

①在maven文件夹下，找到conf下的settings.xml，右键打开。

②找到

 <localRepository>C:/Users/24869/.m2</localRepository>

，中间替换为自己的本地仓路径。注意：在地址栏拷贝过来的斜线是向左的，将其改为向右的即可。

③找到

 <mirrors></mirrors>

,中间添加中央仓库的地址，将其添加为

 <mirror>
      <id>aliyunmaven</id>
      <mirrorOf>*,!spring-milestones,!spring-snapshots,!central-portal-snapshots</mirrorOf>
      <name>阿里云公共仓库</name>
      <url>https://maven.aliyun.com/repository/public</url>
 </mirror>

(5)在IDEA中配置Maven：
设置 ---> 构建工具 ---> Maven ---> 完成 settings.xml 和本地仓配置即可。

6.Tomcat服务器安装：

直接安装即可。

7.Redis的安装:

Redis-x64-3.2.100.msi 解压后安装即可。

测试：cmd ---> redis-cli

8.RDM的安装：

redis-desktop-manager-0.8.8.384.exe 双击安装即可。

9.Node.js的安装：

(1)安装：傻瓜式安装。

node-v16.20.2-x64.msi 打开，选择 Windows 安装程序安装即可。

验证：cmd ---> node --version

(2)npm切换阿里云镜像：

cmd ---> 输入npm config set registry https://registry.npmmirror.comnpm，切换国内阿里云镜像。

验证：npm config get registry

10.Vue安装使用：（此步可忽略）

注意：若依的 `ruoyi-ui` 本质上就是一个已经配置好、装好依赖的 Vue CLI 项目。

与 Java 中，Vue 作为一个第三方框架，使用它的第⼀个步骤就是引入依赖，而前端依赖库都是以 js 文件的形式存在的，因此我们只需要在所需要的页面中引入对应的 js 文件即可。

(1)CDN 引入

可以简单将 CDN 理解为⼀个加速服务器，它会在离用户最近的服务器站点上建立用户所需要资源的缓存，帮助用户以更快的速度加载资源。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺⼨和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

(2)下载后引入

利用上方的 CDN 地址，访问后将内容拷贝下来，保存到本地资源文件中，然后再引入页面即可。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="/static/js/vue-2.7.10/vue.js"></script>
<!-- 生产环境版本，优化了尺⼨和速度 -->
<script src="/static/js/vue-2.7.10/vue.min.js"></script>

(3)命令行工具 (CLI)

后续通过 Vue-CLI（脚⼿架）⽅式引入，刚开始学习使用前面两种即可，后续使用这种方式。

Vue CLI 是 Vue.js 开发的标准工具或者说脚手架，是 Vue 官方提供的标准化开发工具（开发平台），它提供命令行和 UI 界面，方便创建 Vue 工程、配置第三方依赖、编译 vue 工程。

简单来说，Vue CLI 就是一个帮助我们快捷搭建 Vue 项目的工具。但这个工具需要大家事先安装好 Node.js 和 NPM。可以通过以下命令查看自己电脑上安装版本：

node -v
npm -v

1、安装 Vue CLI

在想要存放文件的位置，输入cmd，回车

先换源，再执行命令

# 换源
npm config set registry https://registry.npmmirror.com
# 安装 Vue ClI
npm install -g @vue/cli

出现 run npm find for details 即可

2、创建运行项目

命令行输入 vue create my-project 等待创建完成

# 创建项目 my-project
vue create my-project

创建完成后，出现如下界面。创建过程需要进行一些子自定义配置

基于vue2模版创建
基于vue3模版创建
自定义 ---> 我们选择这个

Babel：必选，用于将 ES6+ 新语法转译为兼容旧浏览器的代码。--->勾选
TypeScript：可选，为 JS 添加静态类型检查，适合大型项目。
PWA Support：渐进式 Web 应用支持，提供离线访问等原生 App 体验。
Router：Vue 路由管理器，实现单页应用（SPA）的页面跳转。--->勾选
Vuex：全局状态管理库，解决多组件间的数据共享与通信问题。
CSS Pre-processors：CSS 预处理器（如 Sass/Less），支持变量、嵌套等高级写法。
Linter / Formatter：代码规范检查与格式化工具，统一团队代码风格。
Unit Testing / E2E Testing：单元测试与端到端测试工具，用于保障代码质量。

选择如下，按空格勾选、取消。按回车下一步

选择创建vue几，这里我们选择2.x

是否启用路由的 History 模式（Y/n），Y或N都可以。这里输入Y

你想把 Babel、ESLint 等工具的配置文件放在哪里？初学者一般选择第二个。这里选择第二个

是否将当前的配置保存为预设，供以后创建新项目时直接使用？这里输入Y

起一个名字 Xxx

出现如下界面就好了

按要求输入命令，先 cd my-project 进入到my-project 根目录

再输入启动命令 npm run serve

# 到上面项目 my-project 根目录
cd my-project
# 运行以下命令
npm run serve

出现如下界面，可以访问该网址

3、项目结构

my-project
├─dist                              # 打包后的输出目录，基于 webpack 将 vue 项目打包为普通 html 项目
├─node_modules                      # 当前项目本地包下载存储的文件夹
├─public                            # 静态资源存放目录
├─src                               # 源码目录
│  ├─App.vue                        # **Vue 文件，项目入口文件**
│  ├─main.js                        # **配置入口文件**
│  ├─registerServiceWorker.js       # PWA 应用，web workers 文件，判断应用是否离线
│  ├─assets                         # 存放项目需要编译的静态资源，会被 webpack 处理
│  ├─components                     # 页面间共享组件包
│  ├─router                         # 路由文件
│  ├─store                          # vuex 文件，负责 vue 的组件间通信
│  └─views                          # 视图文件，存放视图页面的 vue 文件
├─.gitignore                        # git 版本控制工具，忽略提交的配置文件
├─babel.config.js                   # babel 配置文件，用来将 ES6 转换为 ES5
├─jsconfig.json                     # JS 配置文件
├─package.json                      # npm 包管理配置文件
├─README.md                         # 项目描述文件
├─vue.config.js                     # vue + webpack 配置文件
└─yarn.lock                         # yarn 包锁定文件，锁定已安装的每个包版本，避免多环境下安装版本不一致问题

以后重点关注的是 src 和 vue.config.js。

4、vue 文件

这种文件可以当场模板，可以作为页面，一般由三个部分构成，包含：

template：用来编写结构，注意只能包含一个根标签。
style：用来编写样式，可以写普通 CSS，也可以写 LESS，SCCS 等（但需要 Webpack 支持），其还有两个属性：
- scope，有这个属性，局部样式，反之就是全局样式。
- lang，只能编写 CSS 语言。
script：用来编写数据和逻辑，这里默认使用 ES6 模块化，导入构建 Vue 对象的配置，只是其中数据需要定义名为 data 函数，在函数中返回要展示的数据。

二、若依项目改造

1.使用若依框架修改器改造项目：

选择未解压的若依项目进行改造即可。如下：

2.创建数据库：

①在Navicat中选择连接，在新建数据库。

②用IDEA打开项目，在sql文件夹下选择ry_20220625.sql文件拖拽至表运行即可。

3.修改项目中数据库的配置：

①修改application-druid.yml 连接四要素信息

            # 主库数据源
            master:
                url: jdbc:mysql://localhost:3306/ry-vue-java03?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
                username: root
                password: 1234

②更改application.yml中redis的配置信息

    # 密码
    password: 123456

4.安装前端依赖：

①VsCode打开ruoyi-ui，终端在其目录下执行npm install 安装依赖

②执行 npm run dev 或 npm run serve启动前端项目。

具体看项目根目录下，package.json文件中的配置。

"scripts": {
    "dev": "vue-cli-service serve", //看这一行的配置
    //可自定义修改启动命令,例如
    //"serve": "vue-cli-service serve", // 这里把 dev 改成 serve
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  }

5.项目细节改造：

经过若依框架修改器改造后，仍有部分地方没有修改，以及项目个性化配置需要手动修改，如下。

(1)主启动类和Servlet 容器初始化类改造:

修改xxx-admin下的 RuoYiApplication 和 RuoYiServletInitializer 名称为自己的项目名。

例如，HeartaApplication 和 HeartaServletInitializer。

(2)application.yml配置文件改造：

①Ctrl + F ,查找所有 ruoyi ，将其修改为自己的项目名。ruoyi ---> Xxx,保留大小写。

例如，ruoyi ---> hearta。

②可选择更改版本年份。

  # 版权年份
  copyrightYear: 2026

(3)替换所有的@author ruoyi:

左上角 ---> 编辑 ---> 查找 ---> 在文件中替换。快捷键 Ctrl + Shift + R。

将所有的@author ruoyi 替换成自己的项目名。

例如，@author ruoyi ---> @author hearta。

(4)尝试替换ruoyi，即替换掉RuoYiConfig文件名:

重复上述操作，将 ruoyi 替换为自己的项目名。

例如，ruoyi ---> hearta。

(5)RuoYiConfig改造:

在 Hearta-common 下找到 config ，把 RuoYiConfig.java 替换成自己项目名。

由于第4步已经把所有 ruoyi 替换了，所以项目会报错，如下。

只需将代码中的 public class HeartaConfig 更改为 RuoYiConfig 即可，再将 RuoYiConfig 重命名为 HeartaConfig 。

(6)修改启动图标:

在主启动类 HeartaApplication 中修改输出内容。

(7)自定义佛祖:

Hearta-admin ---> resources ---> banner.txt。替换为七彩佛祖 (≧∇≦)ﾉ

(8)更改前端网页标签的logo:

public ---> favicon.ico。删掉favicon.ico文件，将自己的图片重命名为favicon.ico。粘贴到public下即可。

拓展：若之前换过logo，更改后显示原图标，可自行搜索解决。原因是浏览器对网站图标 favicon.ico 存在强缓存机制。

(9)更改侧边栏左上角的 logo:

src ---> layout ---> components ---> Sidebar ---> Logo.vue

在 Logo.vue 中，引用了/assets/logo/logo.png的内容。

import logoImg from '@/assets/logo/logo.png'

所以，只需将src/assets/logo/ 文件夹里的logo.png替换成自己的logo即可，名字保持不变。

(10)修改前端 index.vue 界面:

src ---> views ---> index.vue。将其template内容删掉，替换自己定义的内容。

(11)解决前端改造出现的Bug：

由于之前在IDEA中把所有的ruoyi都替换了，也包括 Hearta-ui 的内容，所以会报错。

①修改ruoyi.js文件名：因为文件的内容改了，但文件名没改。

src ---> utils --->index.js。引用的文件名不对应，解决：将 ruoyi.js 改为 hearta.js 即可。

②修改src下的 components 文件夹中的RuoYi 文件夹名称：

在 src ---> layout ---> components ---> Navbar.vue 中，发现其引用了 components 的内容。

但在 src ---> components 下没有叫 Hearta 的文件夹，所以我们只需将 src ---> components ---> RuoYi 更改为 Hearta 即可。

(12)修改ruoyi.scss：

src ---> assets ---> styles ---> ruoyi.scss。将其修改为hearta.scss即可。

三、若依项目开发

1.模块构建

分析原模块间的依赖引用关系：

ruoyi-domain-pom：

ruoyi-framework
ruoyi-quartz
ruoyi-generator

ruoyi-framework-pom:

ruoyi-system

ruoyi-generator-pom:

ruoyi-common

ruoyi-sysrem-pom:

ruoyi-common

新建自己的业务模块 Xxx-business

(1)新建业务模块:

目录下右键 ---> 新建 ---> 模块 ---> 名称Xxx-business。例如，Hearta-business。

(2)管理Xxx-business依赖：

由上述依赖关系可知，只需要做三步。

①首先，需要在父 pom.xml 中管理 Xxx-business 的依赖。

<!-- 业务模块 Hearta-business -->
<dependency>
    <groupId>cn.hearta</groupId>
    <artifactId>Hearta-business</artifactId>
    <version>${Hearta.version}</version>
</dependency>

②其次，需要在 Xxx-business 中引入 Xxx-common 的依赖。

<!-- 通用模块 -->
<dependency>
    <groupId>cn.hearta</groupId>
    <artifactId>Hearta-common</artifactId>
</dependency>

③最后，需要让主启动类能够扫描到 Xxx-business 并交给Spring 容器管理。所以需要在 Xxx-admin 引入 Xxx-business。

<!-- 业务模块 -->
<dependency>
    <groupId>cn.hearta</groupId>
    <artifactId>Hearta-business</artifactId>
</dependency>

2.菜单管理

⭐⭐⭐⭐⭐

3.代码生成

⭐⭐⭐⭐⭐

posted on 2026-05-10 00:24 冬冬咚阅读(44) 评论(0) 收藏举报

项目开发流程(5.9)

一、软件及环境配置

1.JDK的卸载、安装：

2.IDEA的卸载、安装和破解:

3.MySQL数据库的卸载、安装和配置：

4.Navicat软件的卸载、安装和破解：

5.Maven的卸载、安装：

6.Tomcat服务器安装：

7.Redis的安装:

8.RDM的安装：

9.Node.js的安装：

10.Vue安装使用：（此步可忽略）

注意：若依的 ruoyi-ui 本质上就是一个已经配置好、装好依赖的 Vue CLI 项目。

1、安装 Vue CLI

2、创建运行项目

3、项目结构

4、vue 文件

二、若依项目改造

1.使用若依框架修改器改造项目：

2.创建数据库：

3.修改项目中数据库的配置：

4.安装前端依赖：

5.项目细节改造：

三、若依项目开发

1.模块构建

2.菜单管理

3.代码生成

注意：若依的 `ruoyi-ui` 本质上就是一个已经配置好、装好依赖的 Vue CLI 项目。