原本以为很快写好，没想到内容这么多，但是真的很详细啊啊啊啊啊。jeecgboot从0到成功运行，看这一个文档就够了。

目录

一、JeecgBoot

1.1 官网

1.2 介绍

1.3  源码下载

1.4 所需环境

二、后端环境配置

2.1 JDK配置

2.2 IntelliJ IDEA 2024安装

2.3 redis下载安装

三、前端环境配置

3.1 Node.js下载安装

3.2 IDEA安装

四、数据库下载安装

4.1 MySql下载安装

4.2 Navicat下载安装

五、启动Jeecgboot项目

5.1 启动mysql

5.2 启动redis

5.3 启动后端项目

5.4 启动前端项目

六、总结

---

一、JeecgBoot

1.1 官网

https://jeecg.com/

JEECG官方网站 - 基于BPM的低代码开发平台(低代码平台_零代码平台_工作流平台优秀服务商)

1.2 介绍

        JeecgBoot是一款基于BPM的低代码平台！前后端分离架构 SpringBoot 2.x/3.x，SpringCloud，Ant Design&Vue3，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发！ JeecgBoot引领新低代码开发模式 OnlineCoding-> 代码生成器-> 手工MERGE， 帮助Java项目解决70%的重复工作，让开发更多关注业务，既能快速提高效率，节省研发成本，同时又不失灵活性！一系列低代码能力：Online表单、Online报表、Online图表、仪表盘/门户设计、表单设计、流程设计、报表设计、大屏设计 等等...

        简单来说，jeecgboot就是用来开发前后端分离的网站/应用的一个框架，前端用Vue，后端用Springboot，这个框架提供了很多封装好的东西，大部分代码组件套用现成的就可以，类似的框架还有很多，比如若依、Jeesite等，学习其中一个就够。

1.3  源码下载

进入jeecgboot官网，点击源码下载。jeecgboot分为普通版和企业版，企业版具有更多的工具组件，开发速度更快，但需要专业的sn码才能使用，收费很高。个人用户就下载普通版就可以。而且网站上只提供普通版，不用担心下载错误的版本。

根据需要，下载不同的版本，自己练习就无脑下载vue3版本就行

点击之后进入GitHub下载页面，先点击code，再点击download zip，网速有点慢，建议连vpn

没有vpn的可以使用网盘免费快速下载

vue3版本
链接: https://pan.baidu.com/s/15jZeb2eS1Mfoo8RgeLSmvQ?pwd=8888 提取码: 8888

没度盘也可以点这里下载

https://download.csdn.net/download/qq_45377297/90219238

vue2版本
链接: https://pan.baidu.com/s/1X0CNyjjqaIcN25Il7Or8Ow 提取码: 8888

下载完成后，解压到文件中，其中jeecg-boot是后端项目，jeecgboot-vue3是前端项目

1.4 所需环境

前端：

• node v20.15.0：nodejs是前端vue开发的必备工具，提供yarn、npm等包管理器，以及前后端api交互的功能
• Webstorm前端开发工具：其实建议使用IDEA，下面介绍了IDEA的安装
• pnpm 安装：说到这里，就不得不查一下gpt了，npm、yarn 和 pnpm ，cnpm是 JavaScript 世界中流行的包管理工具，分别由 Node.js 官方、Facebook 和社区开发。npm 是默认的包管理器，拥有庞大的生态系统；yarn 提供了更快的安装速度和更好的依赖管理；而 pnpm 以其高效的磁盘空间利用和快速的安装速度成为新兴的替代方案。cnpm 作为 npm 的中国镜像，主要解决了国内用户访问 npm 仓库速度慢的问题。开发者可以根据个人需求和项目环境选择合适的工具。总结npm、yarn 和 pnpm ，cnpm都能用，国内使用yarn和cnpm比较快。

后端：

• maven3.9.8：现在IntelliJ IDEA都集成maven，不用单独下载
• Redis 3.0.504：Redis在JeecgBoot中通过提供缓存、会话管理、消息队列等功能，增强系统的高性能和高可用性。其实我没学过，也没搞懂Redis，难受，不过jeecgboot中的redis操作很简单。
• IDEA后端开发工具：IntelliJ idea我觉得是一个非常好用的IDE，Java后端和Vue前端都可以跑，功能也很强大，只要不是还在用eclipse，优势在我
• JDK17：JDK8+就行，个人用户建议直接上jdk17，企业开发一般是jdk8或jdk11

数据库：

• Mysql8.0：存储、管理数据（表、视图、索引、触发器。。。是不是都忘了，没关系，会数据表就行，其他内容以后再学），看个人需求，有在线数据库，可以不安装本地数据库
• Navicat数据库连接工具：Navicat 是一个数据库管理工具，它提供了一个图形界面来管理 MySQL，不安装navicat，那就用cmd黑窗口操作数据库，安装了，那就跟看文件夹一样操作数据库。

二、后端环境配置

2.1 JDK配置

老生常谈，干啥都得配JDK，实在不想写了，参考这个文档吧，前几天我自己刚写的，挺详细的

JAVA安装教程，java旧版本安装，java17安装，java环境配置，java登录下载_java17官网下载安装包-CSDN博客

 

2.2 IntelliJ IDEA 2024安装

IntelliJ IDEA的版本不影响项目运行，我建议是使用最新版的，还支持AI，功能很丰富，界面也好看

下载地址：IntelliJ IDEA – 领先的 Java 和 Kotlin IDE

官网下载位置很显眼，直接点击下载就行

当然，这个ultimate是专业版/终结版，咋叫都行，收费。不会破解就下载community社区免费版，同一个页面，下滑就找到了，社区版完全够用，对于我这种不很专业的来说，没体验出两个版本有啥大的区别。

下载好之后，按自己喜好安装就行，没啥必选必不选的，也没啥坑

随意选位置

快捷方式随意，更新path变量建议勾选，省去了配置path环境变量的步骤

添加“文件夹打开为项目”就是在右键菜单里添加一个作为idea项目打开的功能，我个人喜欢用，就像下面这种，但有些人觉得影响右键菜单整洁，可以不勾选。

快捷方式的名字，看个人喜好，默认就行，直接安装就行

重启电脑才行，稍后自行重启就可以。

重启之后，终极版需要登录官网购买正版激活IDEA，不要学别人破解，这好吗，这不好。

重启之后，打开软件，就是这个页面，表示安装完成

2.3 redis下载安装

下载地址：Releases · microsoftarchive/redis

还是github下载页面，选择安装包和压缩包都行，安装过程不需要配置环境，所以我下载的是zip

没vpn进不去GitHub的，可以用度盘下载，5MB大小，就不要嫌度盘慢了
链接: https://pan.baidu.com/s/1kxRyerhtorWQINoUicGKEw?pwd=8888 提取码: 8888

下载好后，找个地方解压就行，双击里面的redis-server.exe文件就可以运行

打开之后长这样，运行jeecgboot程序时后台挂着这个页面就行，咱们不需要操作redis

到这里，后端环境就配置完了

三、前端环境配置

3.1 Node.js下载安装

nodejs下载链接：Node.js — 在任何地方运行 JavaScript

打开之后，点击下载即可，我就是直接下载的这个最新版

如果想下载指定版本，点击下载，在下载页面，可以选择使用cmd下载（提供下载代码），或者下载安装包或压缩包。

我下载的是主页面的最新版，安装也很简单，没啥注意事项

接受协议

改路径

默认就行，占用不大，不需要更改

这里是让下载一些本地工具，勾选不勾选都行，大概3个G，不下载也不影响使用，要是想快点安装，就可以不勾选。

点击install安装

开始安装，中间弹出几次安装msi工具，点同意就行

然后就安装完成了

如果你勾选了自动下载本地模组，那么会出现这么一个弹窗，按键盘任意按键就会开始下载安装，鼠标关闭窗口就会退出这个下载页面，下载不下载都行，大小3GB，不知道选啥就不下载。

我这里关闭了窗口，没有下载

安装好之后，还需要配置一些环境，搜索框搜索高级系统设置

点击环境变量

双击path

一般来说，node的路径安装时自动添加好了，如果你下载的zip，就新建一个路径，把node所在的位置添加进path就行

打开cmd窗口，输入npm -v和node -v，出现版本号，说明安装成功

其实到这一步已经可以使用了，但是如果你担心node的包管理器下载的依赖包太占空间，而且不知道下载到哪儿了你不放心，可以通过以下方法设置下载路径

首先在nodejs的安装路径下新建两个文件夹：node_global、node_cache

node_global用来存储下载的全局模块，node_cache用来存储下载的缓存文件

两个文件夹需要设置才能生效，首先查看当前默认位置

使用npm root -g查看当前默认全局依赖下载位置

使用npm config get cache查看当前默认缓存位置

更改默认缓存目录：npm config set cache "D:\software\study\Nodejs22.12\node_cache" --global

更改全局依赖存储目录：npm config set prefix "D:\software\study\Nodejs22.12\node_global" --global

没反应就对了，可以用前面的查看方法进行查看更改结果

这样nodejs就安装好了

不对，更改了路径之后，以后下载的工具的位置就变了，所以需要把这两个路径给添加到path变量中。

差点当了小丑

这次是真的好了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~吧，反正我能用

3.2 IDEA安装

IDEA也可以作为前端开发工具，前面已经介绍了下载安装过程

四、数据库下载安装

4.1 MySql下载安装

下载地址：MySQL :: Download MySQL Installer

进入下载页面后，看图说话

点击下载后一个大大的login登录，别慌，没账号点击下面小字

下载好后双击安装，中间弹窗几次，点是或接受

选择自定义安装，next

选择要安装的内容，我们只安装mysql8.0，然后点击绿色箭头，添加到右边

添加到右边后，点击一下，然后，出现了一个advanced options，即高级选项

弹出一个修改安装地址的窗口，不需要更改的话就默认就行，有需要就改成D盘下，我这里改成了D盘

选好地址后点击OK返回这个页面，点击next

然后点击execute开始安装

安装好，继续点击next

继续next

这里全部默认即可，port端口默认都是3306，如果修改的话，要自己记住，继续next

这里是选择数据库的认证方式，上面是新的认证方式，下面是旧的认证方式，选第一种就行，然后next

输入数据库的管理密码，个人使用就123456就行，然后next

默认就行，点击next

你想要mysql安装程序为你更新服务器文件权限吗，选no就行，然后next

点击execute执行，这里是进行一些初始化配置

点击finish返回安装页面

继续点击next

然后点击finish完成

成功安装，然后配置环境变量，配置环境变量，是为了在任意目录下使用该路径下的exe可执行文件。找到MySQL安装目录，复制bin文件目录

D:\Program Files\MySQL\MySQL Server 8.0\bin

搜索高级系统设置

高级、环境变量、双击path

然后把bin路径添加到path路径中

打开cmd窗口，输入mysql -u root -p进行登录，输入密码123456，提示登录成功

如果不想MySQL服务自动开启占用内存，可以此电脑右键---》管理---》，出现下面界面来设置手动或禁用，需要时再打开。

恭喜完成mysql安装

4.2 Navicat下载安装

下载链接：https://www.navicat.com.cn/download/navicat-premium

官网很简洁，只提供最新版安装包，随便点一个下载就行，而且也推荐下载新版

navicat只有付费版，能试用14天，虽然网上有破解版，但是14天差不多也够用了，熟练了很少使用navicat。不会破解的，可以下载navicat的免费版Navicat Premium Lite

下载链接：Navicat | 免费下载 Navicat Premium Lite

还是异常简洁的下载界面，需要注意，每家机构最多5个用户，学生可以用，企业就别用了

下载好后，很简单的安装流程

同意协议

选择路径

创建桌面快捷方式

开始安装

安装完成

没了，不需要配置环境

五、启动Jeecgboot项目

5.1 启动mysql

右键点击此电脑--->管理-->服务

记不住路径直接搜索框搜索“服务”，简单粗暴

然后选择MySQL，检查数据库服务是否启动，双击可以开启

或者右键菜单也能启动

启动好之后，打开cmd窗口检查是否成功打开，输入mysql -u root -p，然后输入密码，出现下面内容，就表示数mysql已经启动。（这个窗口不用一直开着，验证数据库启动了之后就可以关了）

MySQL启动之后，还需要为jeecgboot项目，创建一个具体的数据库名称。用于存储jeecgboot项目的数据表。这里可以有两种方法，一：使用cmd窗口命令行创建一个数据库。二：使用Navicat创建。两种方法都会说，建议用第二种

使用命令行创建数据库：

在cmd窗口，输入

mysql -u root -p

回车，然后输入密码，登录MySQL，然后输入CREATE database if NOT EXISTS `jeecg-boot` default character set utf8mb4 collate utf8mb4_unicode_ci;创建数据库，数据库名称是jeecg-boot。create database这些指令大小写都可以。

CREATE database if NOT EXISTS `jeecg-boot` default character set utf8mb4 collate utf8mb4_unicode_ci;

提一下删除数据库代码，这里用不到，但我为了写这个文章用了十几次，痛苦

drop database if exists `jeecg-boot`;

创建好之后先不要急，因为我们创建的是一个空白的数据库，为了让我们的数据库里面包含jeecgboot项目中的基础数据表，需要从jeecgboot后端代码中找到一个sql文件，JeecgBoot-master\jeecg-boot\db\jeecgboot-mysql-5.7.sql

然后输入quit退出MySQL，输入mysql --default-character-set=utf8 -u root -p jeecg-boot < "D:\jeecgboot\JeecgBoot-master\jeecg-boot\db\jeecgboot-mysql-5.7.sql"

mysql --default-character-set=utf8 -u root -p jeecg-boot < "D:\jeecgboot\JeecgBoot-master\jeecg-boot\db\jeecgboot-mysql-5.7.sql"

记得替换为你的路径，上面双引号中用的是我的路径

再重新进入mysql，使用show tables from `jeecg-boot`;查询数据库中的表来验证是否创建成功。出现虚线框，然后没报错，就是成功了。

咳咳，虽然成功了，但还是建议使用Navicat来创建数据库吧，命令行是真的麻烦

使用Navicat创建数据库

打开navicat后，点击新建连接，点击MySQL，点击下一步

跟着图片操作就行，图片有个错误的地方，连接名称其实不是数据库名称，连接名称就是给localhost:3306取一个别名，没有实际意义，这个连接中，可以创建多个数据库

创建好之后，右键菜单打开连接，或者双击就能打开。

打开之后，可以看到我们用命令行创建的数据库也能在这里查到

为了方便学习，我再使用Navicat创建一个数据库，右键点击myDatabase，选择新建数据库

输入数据库名称，字符集和排序规则，按照图片选择就可以

简单说一下：

• utf8mb4 是一种字符集，它是 UTF-8 编码的变种，支持最多四个字节来表示一个字符。与标准的 utf8（在MySQL中实际上是utf8mb3，即最多三个字节）相比，utf8mb4 能够正确地存储和处理更广泛的Unicode字符，包括表情符号（emojis）、某些中文字符以及其他复杂的语言符号。

• utf8mb4-unicode-ci 是 MySQL 中的一种排序规则（Collation），它是基于 Unicode 标准的排序规则，用于对字符数据进行排序和比较。这种排序规则不区分大小写（ci 表示 case insensitive），并且能够按照 Unicode 标准在各种语言之间进行精确排序。它考虑了特殊字符的情况，实现了较为复杂的排序算法，以确保在不同语言环境下字符的正确排序。

创建好之后，双击打开，可以看到数据库为空，没有表

在jeecg-boot2右键菜单选择运行sql文件

然后选择前面提到的JeecgBoot-master\jeecg-boot\db\jeecgboot-mysql-5.7.sql文件

开始之后，sucess表示成功，点击关闭

到这里你会发现已经出现了很多表，这些都是jeecgboot框架附带的表。我们 运行jeecg项目也需要用到这些表才能启动

 如果真的想知道为什么选择utf8mb4和utf8mb4_unicode_ci，就需要知道jeecgboot框架需要什么样的数据库，用记事本打开JeecgBoot-master\jeecg-boot\db\jeecgboot-mysql-5.7.sql文件，第一行，就是创建一个怎样的数据库。包含编码和排序规则。

那这么说来，我是不是可以直接在myDatabase右键运行sql文件，不需要自己创建jeecg-boot，可以是可以，但不能用来创建jeecg-boot2，所以还是用我这个流程吧。

 

5.2 启动redis

找到Redis安装或解压的位置，双击打开redis-server.exe

打开后出现下面界面，有ready to accept就表示打开成功了。（这个窗口需要一直开着，后台挂着就行，不要关掉）

5.3 启动后端项目

解压下载好的jeecgboot项目，打开后，带vue的是前端代码，不带vue的是后端代码

右键点击jeecg-boot，选择作为IDEA项目打开。右键菜单没有这个选项的就需要进入IDEA软件打开。

打开之后先看一下后端目录结构：看着复杂，其实只需要看jeecg-module-system就行，项目启动在这个文件夹里面。

从JeecgSystemApplication启动项目，启动前需要进行配置，在application[][][].yml文件中进行配置，本地运行项目，都是在dev，开发环境下进行的，所以，在application-dev.yml文件中进行设置

至于要在这个文件中设置什么，那当然是数据库了。

配置数据库的原因是，jeecgboot是一个系统管理框架，里面用到了很多的数据表，为了方便管理和开发，数据表都是放在数据库上面的。所以在运行之前，需要把数据库的地址改成自己本地数据库的地址（在线数据库地址也行）

改的方法也很简单，在application-dev.yml文件中的spring: datasource: dynamic: datasource: ，修改mysql的url，用户名和密码。改成自己前面创建的。

其实也没啥改的，改成下面这样就行，127.0.0.1表示本机地址，也可以用localhost替换，3306是端口，jeecg-boot是我们前面创建的数据库的名称，然后改一下用户名和密码

数据库配置好后，从JeecgSystemApplication启动项目，你会发现，没办法运行

因为jeecgboot后端用的Java，所以需要选择Java编译器。

设置好之后

点击运行之后，出现jeecg-boot的大字，表示开始运行

出现下面的url才算成功

启动好之后，后端也不要关闭了，我们接下来打开前端

5.4 启动前端项目

我是学后端的，前端好难，不想写了，给个赞呗，关注一下呗

点击File--->Open，打开JeecgBoot-master\jeecgboot-vue3前端项目，注意是整个文件夹作为项目，不是单个文件。

或者右键点击JeecgBoot-master\jeecgboot-vue3文件夹，选择IDEA打开

打开的时候可能会提示下面的信息，都勾选然后点击trust就行

然后选择新窗口打开，因为我们要同时打开前端和后端

打开后目录如下：箭头指向的是必须知道的内容

其他文件的含义如下：

1. build：通常用于存放构建后的输出文件，如打包后的JavaScript和CSS文件。

2. mock：用于存放模拟数据文件，这些文件在开发过程中用于模拟API响应，帮助开发者快速测试前端功能。

3. public：存放静态资源文件，如HTML模板、图标、字体等。这些文件不会被Webpack处理，直接复制到构建后的目录中。

4. src：源代码的主要存放目录，包括组件、页面、路由、样式等

5. tests：用于存放单元测试和集成测试文件。

6. types：用于存放类型定义文件，如TypeScript类型声明。

7. .editorconfig：编辑器配置文件，用于统一代码格式。

8. .env：环境变量配置文件，用于存储应用的环境变量。

9. .env.development 和 .env.production：分别用于开发环境和生产环境的环境变量配置。

10. .eslintignore：ESLint忽略文件列表，指定哪些文件不进行ESLint检查。

11. .eslintrc.js：ESLint配置文件，定义代码风格规则。

12. .gitignore：Git忽略文件列表，指定哪些文件不提交到版本控制系统。

13. .gitpod.yml：GitPod配置文件，用于配置GitPod工作区。

14. .prettierignore：Prettier忽略文件列表，指定哪些文件不进行Prettier格式化。

15. .stylelintignore：Stylelint忽略文件列表，指定哪些文件不进行Stylelint检查。

16. .yarnclean：Yarn清理配置文件，用于指定清理时保留的文件。

17. commitlint.config.js：Commitlint配置文件，用于规范提交消息格式。

18. Dockerfile：Docker配置文件，用于构建Docker镜像。

19. index.html：应用的主HTML文件。

20. jest.config.mjs：Jest配置文件，用于设置测试框架的行为。

21. LICENSE：项目的许可证文件。

22. npm：Node.js包管理器相关文件。

23. package.json：项目依赖和脚本配置文件。

24. pnpm-lock.yaml：pnpm锁文件，记录项目依赖的具体版本。

25. postcss.config.js：PostCSS配置文件，用于处理CSS。

26. prettier.config.js：Prettier配置文件，定义代码格式化规则。

27. README.md：项目的说明文档。

28. stylelint.config.js：Stylelint配置文件，定义CSS风格规则。

29. tsconfig.json：TypeScript配置文件，定义TypeScript编译选项。

30. vite.config.ts：Vite配置文件，用于设置Vite构建工具的行为。

好吧，都是没用的东西，水字数的

注意到右下角有个Install dependencies，就是让你安装依赖，运行代码就是pnpm install，直接点击就行，没有弹出这个窗口，那就自己在命令行输入

自己输入：先点击图片显示位置，或者快捷键ALT+F12，打开命令行

运行pnpm install之后，你会发现一串红，恭喜你，还没安装pnpm，使用npm -v可以看到有npm，但没pnpm，所以，有多种解决办法：

①可以使用npm安装pnpm，②直接执行npm install，③直接运行yarn install

前面讲到了pnpm比npm下载速度快很多，为了后续我们的实验更加顺利，建议先安装pnpm

npm install -g pnpm

然后运行之后，可能会发现继续爆红，这是因为权限不足导致的，解决方法也很多

①退出IDEA，使用管理员权限打开

②找到需要管理员权限的文件，把他的权限赋给普通用户

第一种都会，说下第二种，从图中绿色字体，可以看出是下面这个路径下的权限，可以判断是nodejs的问题，所以直接从nodejs22.12或者node_cache开始赋权限，不用真的给36e7136d这个具体的东西赋权限。

找到nodejs的安装位置，右键菜单点击属性，

然后点击安全，查看system，你会发现系统用户，拥有所有的权限。系统用户不用修改。

点击普通用户，你会发现，好多权限都没有

所以，需要给普通用户把这些权限都加上去，流程如下

然后，我们再返回IDEA中，这次就真的可以用了

拖得太久，刚才到哪儿来着，好像是pnpm install，安装好pnpm后，那就执行pnpm install，然后继续报错，提示pnpm-lock.yaml与当前pnpm不匹配。解决办法也很多：

①删除pnpm-lock.yaml简单粗暴；②删除pnpm下载指定版本，麻烦

提示，要是这种情况卡着了，不能退出，按快捷键CTRL+C就可以退出，或者直接关闭命令行，重新打开

就是这一个文件，delete删除就行，删除文件前可以先备份，养成好习惯

继续运行，还是报很多警告信息，但是。。。。已经下载了大部分依赖了，可以正常运行了，这些警告信息其实是一些过旧的版本，自动找新版本代替，不用担心这些警告。

当你下载好再输入一遍pnpm install时，并没有报错

然后我们只差最后一步了，运行pnpm  run dev结果如下所示，出现了网页链接

至于为什么要使用pnpm run dev，这里讲一下

之前我们提到了，前端还有一个重要文件package.json，就是下面这个文件，这里面封装了一些命令行指令，运行这些封装好的指令比自己输入方便那么一点。

封装的好处体现在右键点击package.json

会弹出一个npm窗口，双击指令就能运行，非常方便

网页展示

登录成功展示：

六、总结

没啥总结的，配置环境，程序员的入门课程。