JeecgBoot环境搭建及前后端项目启动

╰+哭是因爲堅強的太久メ 2022-12-04 07:32 642阅读 0赞

## 1、JeecgBoot简介 ##

JeecgBoot是一款基于SpringBoot+代码生成器的快速开发平台！采用前后端分离架构：SpringBoot，Mybatis，Shiro，JWT，Vue&Ant Design。强大的代码生成器让前端和后台代码一键生成，不需要写任何代码，保持jeecg一贯的强大，绝对是全栈开发福音！  
JeecgBoot在提高UI能力的同时，降低了前后分离的开发成本，JeecgBoot还独创在线开发模式（No代码概念），一系列在线智能开发：在线配置表单、在线配置报表、在线图表设计、在线设计流程等等。  
JEECG宗旨是:简单功能由Online Coding配置实现（在线配置表单、在线配置报表、在线图表设计、在线设计流程、在线设计表单），复杂功能由代码生成器生成进行手工Merge，既保证了智能又兼顾了灵活;  
业务流程采用工作流来实现、扩展出任务接口，供开发编写业务逻辑，表单提供多种解决方案： 表单设计器、online配置表单、编码表单。同时实现了流程与表单的分离设计（松耦合）、并支持任务节点灵活配置，既保证了公司流程的保密性，又减少了开发人员的工作量。

#### 技术架构： ####

> 后端技术： SpringBoot\_2.1.3.RELEASE + Mybatis-plus\_3.1.2 + Shiro\_1.4.0 + Jwt\_3.7.0 + Swagger-ui + Redis  
> 前端技术： Ant-design-vue + Vue + Webpack  
> 其他技术： Druid（数据库连接池）、Logback（日志工具） 、poi（Excel工具）、Quartz（定时任务）、lombok（简化代码）  
> 项目构建： Maven、Jdk8

## 2、环境搭建准备 ##

基础开发环境：

> JDK：1.8  
> Maven：3.5+  
> MySql：5.7+  
> Redis：3.2 +  
> Node Js：10.0 +  
> Npm：5.6.0+  
> Yarn：1.21.1+  
> IDE插件：Lombok Plugin

我的环境是：

1.  JDK

>> java --version
    java 11.0.2 2019-01-15 LTS
    Java(TM) SE Runtime Environment 18.9 (build 11.0.2+9-LTS)
    Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.2+9-LTS, mixed mode)

1.  Maven

>> mvn --version
    Apache Maven 3.6.0 (97c98ec64a1fdfee7767ce5ffb20918da4f719f3; 2018-10-25T02:41:47+08:00)
    Maven home: E:\Program Files\apache-maven-3.6.0\bin\..
    Java version: 11.0.2, vendor: Oracle Corporation, runtime: E:\Program Files\Java\jdk-11.0.2
    Default locale: zh_CN, platform encoding: GBK
    OS name: "windows 10", version: "10.0", arch: "amd64", family: "windows"

1.  MySQL

C:\Users\DELL>e:
    E:\>cd E:\Program Files\mysql-8.0.21-winx64\bin
    E:\Program Files\mysql-8.0.21-winx64\bin>mysql --version
    mysql  Ver 8.0.21 for Win64 on x86_64 (MySQL Community Server - GPL)

1.  Redis

C:\Users\DELL>e:
    E:\>cd E:\Program Files\Redis
    E:\Program Files\Redis>redis-server --version
    Redis server v=3.2.100 sha=00000000:0 malloc=jemalloc-3.6.0 bits=64 build=dd26f1f93c5130ee

1.  Node.js

>> node --version
    v12.18.3

1.  Npm

>> npm --version
    6.14.6

1.  Yarn

>> cnpm install --global yarn
    >> yarn --version
    1.22.5

1.  IDEA插件：Lombok Plugin

配置Node.js镜像：

npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global
    
    yarn config set registry https://registry.npm.taobao.org --global
    yarn config set disturl https://npm.taobao.org/dist --global

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]

1.  IDEA插件：热部署工具JRebel
2.  Babel集成

cnpm install --global babel

集成方式：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

1.  WebStorm插件：Vue.js
2.  WebStorm的vue新建文件模板配置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2][]

1.  自动生成类注释和方法注释

## 3、开发环境搭建 ##

团队开发，下载团队代码步骤：  
打开WebStorm -> VCS -> Get from Version Contro l-> 下载Git  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3][]  
官网示例环境搭建：  
下载官网示例源代码，GitHub地址：https://github.com/zhangdaiscott/jeecg-boot  
前端项目：ant-design-vue-jeecg  
后端项目：jeecg-boot  
前端项目在WebStorm中打开，并在WebStorm的Terminal中执行yarn install，下载项目依赖，项目依赖的模块下载完成，则项目构建完成。  
后端项目在IDEA中打开，IDEA自动开始解决依赖。

## 4、项目启动 ##

#### 后端项目启动 ####

> jeecg-boot 从v2.0版本，重构成maven多模块项目，启动项目：jeecg-boot-module-system  
> 项目结构说明：  
> ├─jeecg-boot-parent（父POM： 项目依赖、modules组织）  
> │ ├─jeecg-boot-base-common（共通Common模块： 底层工具类、注解、接口）  
> │ ├─jeecg-boot-module-system （系统管理模块： 系统管理、权限等功能） – 默认作为启动项目  
> │ ├─jeecg-boot-module-\{?\} （自己扩展新模块项目，启动的时候，在system里面引用即可）

1.  初始化数据库

>> mysql -u root -p123456
    mysql> create database `jeecg-boot` default character set utf8mb4 collate utf8mb4_general_ci;
    mysql> source F:\jeecgboot-mysql-5.7.sql

1.  修改项目配置文件（数据库配置、redis配置）  
    配置文件： /src/main/resources/application-dev.yml  
    项目名称、端口号配置（可以不改）：  
    默认配置—— 端口号是8080，项目名称是jeecg-boot

server:
        port: 8080
        servlet:
           context-path: /jeecg-boot

数据库配置 ：

spring:
      datasource:
        dynamic: 
          datasource: 
              #主数据源
              master: 
                url: jdbc:mysql://127.0.0.1:3306/jeecg-boot?characterEncoding=UTF-8&useUnicode=true&useSSL=false
                username: root
                password: 123456
                driver-class-name: com.mysql.jdbc.Driver

Redis配置（配置redis的host和port）：

#redis 配置
      redis:
         database: 0
         host: 127.0.0.1
         lettuce:
           pool:
             max-active: 8 #最大连接数据库连接数,设 0 为没有限制
             max-idle: 8 #最大等待连接中的数量,设 0 为没有限制
             max-wait: -1ms  #最大建立连接等待时间。如果超过此时间将接到异常。设为-1表示无限制。
             min-idle: 0 #最小等待连接中的数量,设 0 为没有限制
           shutdown-timeout: 100ms
         password: ''
         port: 6379

1.  启动redis服务
2.  启动项目&访问

以上配置完成后，即可启动后台项目  
本地启动：src/main/java/org/jeecg/JeecgApplication.java，右键执行启动。  
通过 http://localhost:8080/jeecg-boot 访问后台，默认进入swagger接口首页。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4][]

#### 前端项目启动 ####

配置后台接口地址：vue.config.js（仅开发环境配置）  
API数据接口地址的配置，此处映射地址配置到端口即可，如果后台项目名字修改了的话，直接改“/jeecg-boot”即可。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5][]  
public/index.html （开发环境、正式发布）

//说明：系统部分菜单功能是后台的页面，此处的配置就是配置后台页面访问根路径。
    
    window._CONFIG['domianURL'] = 'http://127.0.0.1:8080/jeecg-boot';

启动项目：注意：（如果启动报错的话，请升级node版本，把依赖node\_modules删了，重新yarn install）  
调出`Show npm Scripts` 功能  
找到项目目录下文件package.json文件，鼠标右键选择`Show npm Scripts`  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6][]  
双击"serve"，或者Terminal输入"npm run serve"。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7][]  
打开http://localhost:3000，前端界面如下：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 8][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 9][]

## 5、平台技术点 ##

<table> 
 <thead> 
  <tr> 
   <th>序号</th> 
   <th>知识点</th> 
   <th>资料</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>Node.js</td> 
   <td>http://www.runoob.com/nodejs/nodejs-tutorial.html</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>Npm</td> 
   <td>http://www.runoob.com/nodejs/nodejs-npm.html</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>Yarn</td> 
   <td>建议，比npm更快</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>Vue</td> 
   <td>https://cn.vuejs.org/</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>ES6</td> 
   <td>https://blog.csdn.net/itzhongzi/article/details/73330681</td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td>Vue全家桶</td> 
   <td>Webpack 、axios、Vue router、Vuex、Vue Loader、Vue cli</td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td>Springboot</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td>Mybatis-plus</td> 
   <td>https://mp.baomidou.com</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td>Shiro</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a5489e7dbb85410692f82fda66da4904.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/62c9c121a4ab49e5a7e0a3faff19d3f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/24a9e552d65340bab7fded5387183fad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/ba1cd655b5f948ac9a39cff6aff249fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/dd0d2799e76d4ec29cfe149a7d22fa11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/8080be5aec0a464893b130339a6b429f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/d5a1c0a27d7d45c3b2e9f41c2aa70ebd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/0bcc7dbcd3f541dab4e834b1c6e560d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/0da7d7aaacd841c19362400c1c3122cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/3fa04e8c298c4624a23252281f76d929.png