启动jeecg-boot框架（vue3版本）

news2025/1/17 6:17:48

jeecg-boot框架（vue3版本）

- 一、简介
- 二、项目启动
- - 1.前端模组：jeecgboot-vue3-master
  - 2.后端模组：jeecg-boot-master
  - 3.环境要求：
  - 4.数据库准备：
  - 5.前端启动：
  - 6.redis启动：
  - 7.后端启动：
  - - 7.1修改配置：
    - 7.2启动springboot启动类：
  - 8.访问页面：

一、简介

JeecgBoot-Vue3采用 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。是在 Vben-Admin 基础上研发的，适合于JeecgBoot的新版前端VUE3框架。
JeecgBoot-Vue3采用 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。是在 Vben-Admin 基础上研发的，适合于JeecgBoot的新版前端VUE3框架。

JeecgBoot 是一款基于代码生成器的低代码开发平台！前后端分离架构 SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发! JeecgBoot 引领新的低代码开发模式(OnlineCoding-> 代码生成器-> 手工MERGE)，帮助解决Java项目70%的重复工作，让开发更多关注业务。既能快速提高效率，节省研发成本，同时又不失灵活性！

JeecgBoot 提供了一系列低代码模块，实现在线开发真正的零代码：Online表单开发、Online报表、报表配置能力、在线图表设计、大屏设计、移动配置能力、表单设计器、在线设计流程、流程自动化配置、插件能力（可插拔）等等！

JEECG宗旨是: 简单功能由OnlineCoding配置实现，做到零代码开发；复杂功能由代码生成器生成进行手工Merge 实现低代码开发，既保证了智能又兼顾灵活；实现了低代码开发的同时又支持灵活编码，解决了当前低代码产品普遍不灵活的弊端！

JEECG业务流程: 采用工作流来实现、扩展出任务接口，供开发编写业务逻辑，表单提供多种解决方案：表单设计器、online配置表单、编码表单。同时实现了流程与表单的分离设计（松耦合）、并支持任务节点灵活配置，既保证了公司流程的保密性，又减少了开发人员的工作量。

	后端源码	vue3前端源码
github	https://github.com/jeecgboot/jeecg-boot	https://github.com/jeecgboot/jeecgboot-vue3
码云	https://gitee.com/jeecg/jeecg-boot	https://gitee.com/jeecg/jeecgboot-vue3

二、项目启动

1.前端模组：jeecgboot-vue3-master

2.后端模组：jeecg-boot-master

项目结构
├─jeecg-boot-parent（父POM： 项目依赖、modules组织）
│  ├─jeecg-boot-base-core（共通模块： 工具类、config、权限、查询过滤器、注解等）
│  ├─jeecg-module-demo    示例代码
│  ├─jeecg-module-system  System系统管理目录
│  │  ├─jeecg-system-biz    System系统管理权限等功能
│  │  ├─jeecg-system-start  System单体启动项目(8080）
│  │  ├─jeecg-system-api    System系统管理模块对外api
│  │  │  ├─jeecg-system-cloud-api   System模块对外提供的微服务接口
│  │  │  ├─jeecg-system-local-api   System模块对外提供的单体接口
│  ├─jeecg-server-cloud           --微服务模块
     ├─jeecg-cloud-gateway       --微服务网关模块(9999)
     ├─jeecg-cloud-nacos       --Nacos服务模块(8848)
     ├─jeecg-system-cloud-start  --System微服务启动项目(7001)
     ├─jeecg-demo-cloud-start    --Demo微服务启动项目(7002)
     ├─jeecg-visual
        ├─jeecg-cloud-monitor       --微服务监控模块 (9111)
        ├─jeecg-cloud-xxljob        --微服务xxljob定时任务服务端 (9080)
        ├─jeecg-cloud-sentinel     --sentinel服务端 (9000)
        ├─jeecg-cloud-test           -- 微服务测试示例（各种例子）
           ├─jeecg-cloud-test-more         -- 微服务测试示例（feign、熔断降级、xxljob、分布式锁）
           ├─jeecg-cloud-test-rabbitmq     -- 微服务测试示例（rabbitmq）
           ├─jeecg-cloud-test-seata          -- 微服务测试示例（seata分布式事务）
           ├─jeecg-cloud-test-shardingsphere    -- 微服务测试示例（分库分表）

3.环境要求：

JDK: 1.8+ (小于11)
Maven: 3.5+
MySql: 5.7+
Redis: 3.2 +
Node Js: 10.0 +
Npm: 5.6.0+
Yarn: 1.21.1+

node,npm我的版本：启动正常

4.数据库准备：

创建数据库：jeecg-boots,如果修改名称要把配置一并修改。

字符集使用utf8,或者utf8mb4都可以，我这里习惯采用utf8mb4。

在这里插入图片描述

然后运行sql文件。位置：db/jeecgboot-mysql-5.7.sql。根据自己的数据库自行选择。

在这里插入图片描述

如下图在navicat中运行jeecgboot-mysql-5.7.sql文件生成数据库表。

在这里插入图片描述

5.前端启动：

软件：webstorm
安装pnpm:
npm install -g pnpm
# 安装依赖
pnpm install
# 运行项目
pnpm dev
访问地址:http://localhost:3100/

在这里插入图片描述

6.redis启动：

项目需要redis启动不然会报错

在这里插入图片描述

7.后端启动：

7.1修改配置：

修改jeecg-boot-master\jeecg-module-system\jeecg-system-start\src\main\resources\application-dev.yml

       datasource:
        master:
          url: jdbc:mysql://127.0.0.1:3306/******?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai
          username: root
          password: *******
          driver-class-name: com.mysql.cj.jdbc.Driver

数据库连接按自己的改。