启动jeecg-boot框架(vue3版本)

6 篇文章 2 订阅

一、简介

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配置表单、编码表单。同时实现了流程与表单的分离设计(松耦合)、并支持任务节点灵活配置,既保证了公司流程的保密性,又减少了开发人员的工作量。

相关地址:

入门必备:

本项目需要一定前端基础知识,请确保掌握 Vue 的基础知识,以便能处理一些常见的问题。 建议在开发前先学一下以下内容,提前了解和学习这些知识,会对项目理解非常有帮助:

项目地址:

后端源码vue3前端源码
githubhttps://github.com/jeecgboot/jeecg-boothttps://github.com/jeecgboot/jeecgboot-vue3
码云https://gitee.com/jeecg/jeecg-boothttps://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

数据库连接按自己的改。

7.2启动springboot启动类:

启动这个jeecg-boot-master\jeecg-module-system\jeecg-system-start\src\main\java\org\jeecg\JeecgSystemApplication.java

在这里插入图片描述

出现文档地址即启动成功。注意:mongodb数据库报错不影响项目运行

在这里插入图片描述

在这里插入图片描述

8.访问页面:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 2
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cai-4

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值