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

我的环境是：

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)


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"


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)


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


Node.js

>> node --version
v12.18.3


Npm

>> npm --version
6.14.6


Yarn

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


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



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

cnpm install --global babel

集成方式：



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



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

3、开发环境搭建
团队开发，下载团队代码步骤：

打开WebStorm -> VCS -> Get from Version Contro l-> 下载Git



官网示例环境搭建：

下载官网示例源代码，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里面引用即可）


初始化数据库

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


修改项目配置文件（数据库配置、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


启动redis服务
启动项目&访问

以上配置完成后，即可启动后台项目

本地启动：src/main/java/org/jeecg/JeecgApplication.java，右键执行启动。

通过 http://localhost:8080/jeecg-boot 访问后台，默认进入swagger接口首页。


前端项目启动
配置后台接口地址：vue.config.js（仅开发环境配置）

API数据接口地址的配置，此处映射地址配置到端口即可，如果后台项目名字修改了的话，直接改“/jeecg-boot”即可。



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



双击"serve"，或者Terminal输入"npm run serve"。



打开http://localhost:3000，前端界面如下：




5、平台技术点




序号
知识点
资料




1
Node.js
http://www.runoob.com/nodejs/nodejs-tutorial.html


2
Npm
http://www.runoob.com/nodejs/nodejs-npm.html


3
Yarn
建议，比npm更快


4
Vue
https://cn.vuejs.org/


5
ES6
https://blog.csdn.net/itzhongzi/article/details/73330681


6
Vue全家桶
Webpack 、axios、Vue router、Vuex、Vue Loader、Vue cli


7
Springboot



8
Mybatis-plus
https://mp.baomidou.com


9
Shiro

前后端项目的糅合模式mashup


        现在的前后端项目里，经常会有前端和后端的多对多交互。
        糅合模式（mashup）通过解耦合、分布式处理的可以将大型项目的复杂逻辑，模块化。简单化，
        以提高整个项目的高效率、高扩展、稳定性。


        糅合模式图：
        


     糅合模式中的交互分为：本域不跨端交互、本域跨端交互（分布式、解耦合）、前后后端跨域交互、后端与后端跨域交互（分布式，解耦合）


     这里主要讲本域跨端的分布式交互：
     

    需要实现的功能：
    从A后台管理平台登录验证成功后，跳转到B后台管理平台的主页
   

    实现代码:
    项目school 的里singIn.html：

//js里登录成功后执行,并传参数到项目shopManager的主页面index.html
<script>
window.location="/SchoolRoll/html/Mutually/shopManager/web/index.html?userType=0&yongHuMing=test";
</script>




    项目shopManager的里index.html：

<script>
//获取传递的get参数
alert(getParams("userType"));//0
alert(getParams("yongHuMing"));//test



/**获取根据参数名url的参数*/function getParams(key) { var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]); } return null;};


</script>

一.前后端放在一起部署、
1.前端打包成静态文件夹后，将dist文件夹下的内容拷贝到后端项目中resources/static目录下

2.前端页面放行，在springsucurity的拦截器里面加上以下代码，放行这些静态文件
@Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/login","/css/**","/js/**","/index.html","/img/**","/fonts/**","/favicon.ico");
    }

3.使用maven的package打包项目



生成jar文件



4.把文件传到服务器主机（我用的centos）上

运行以下命令
nohup java -jar plms-0.0.1-SNAPSHOT.jar &



5.在浏览器访问 http://服务器主机的ip:8081/index.html
二.前后端分离部署
前端使用后nginx部署，后端直接运行.jar

1.安装nginx

参考 https://www.runoob.com/linux/nginx-install-setup.html

2.将dist文件拷贝到服务器端root/plms下

3.修改/usr/local/webserver/nginx/conf/nginx.conf下的配置

user  root;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    upstream yuping.liu{
       server 127.0.0.1:8081;
     }

    server {
        listen       80;#nginx的接口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://yuping.liu;
            proxy_redirect default;
         }
         location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html){
                root /root/plms/dist;
                expires 30d;
         }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

主要修改的地方：
user  root;#主要指定权限。如果权限不足的话，后面访问的时候会报403错误

  upstream yuping.liu{ 
       server 127.0.0.1:8081;#后端jar包的里面配置的服务端接口地址
     }

  location / {
            proxy_pass http://yuping.liu;#如果访问的是/就转发到这个地址，实际上浏览器不知道8081这个东西，它访问的就是80这个接口
            proxy_redirect default;
         }
        # 如果是访问这些页面，则不做转发，直接去这个下面找就行
         location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html){
                root /root/plms/dist;
                expires 30d;
         }

4运行下面这行代码
usr/local/webserver/nginx/sbin/nginx


5.在浏览器输入http://centos的ip/index.html就可以访问了

 补充：

第4步如果端口号被占用如这样的提示：

可以通过netstat -ntlp查看端口号

kill 端口号

然后重新运行usr/local/webserver/nginx/sbin/nginx
查看防火墙状态：

systemctl status firewalld.service

关闭防火墙：

systemctl stop firewalld.service

工具：Pycharm 2018.1.1 professional Edition

采用语言、框架及数据库：python、vue、Django、Bootstrap、postgreSQL10

项目搭建构成：backend是后端编写接口部分、frontend是vue前台部分、learndjango是Django框架一体编写前后台代码

该项目目前在：github网站

s

目前该前后端项目搭建完毕，Django项目实现部分功能。后续将继续进行完善