Jeesite快速上手教程：30分钟搭建企业级应用
项目地址: https://gitcode.com/gh_mirrors/jee/jeesite 引言：告别复杂配置，极速构建企业级应用
你是否还在为搭建企业级应用框架而烦恼？从环境配置到权限管理，从数据建模到前端交互，繁琐的步骤往往耗费数天时间。本文将带你30分钟内完成Jeesite企业级应用的搭建，涵盖环境准备、项目初始化、核心模块配置和业务功能开发全流程，让你专注业务逻辑而非基础架构。
读完本文你将获得：
- 从零开始搭建Jeesite开发环境的完整步骤
- 掌握在线代码生成工具快速创建业务模块
- 理解Jeesite前后端分离架构的核心设计
- 学会权限管理、数据建模等企业级功能实现
- 部署生产环境的最佳实践指南
1. 环境准备：5分钟配置开发环境
1.1 必备工具清单
| 工具名称 | 版本要求 | 作用 | 国内下载地址 |
|---|---|---|---|
| JDK | 17+ | Java开发环境 | 华为云镜像 |
| Node.js | 18+ | 前端开发环境 | Node.js中文网 |
| Maven | 3.6+ | Java构建工具 | 阿里云镜像 |
| MySQL | 8.0+ | 数据库服务 | 腾讯云镜像 |
| Git | 2.30+ | 版本控制工具 | Git国内下载 |
| VS Code | 最新版 | 代码编辑器 | VS Code中文网 |
1.2 环境配置速览
# 验证Java环境
java -version && javac -version
# 配置Node.js国内源
npm config set registry https://registry.npmmirror.com
npm install -g pnpm
pnpm config set registry https://registry.npmmirror.com
# 配置Maven国内镜像（修改settings.xml）
<mirror>
<id>aliyunmaven</id>
<mirrorOf>*</mirrorOf>
<name>阿里云公共仓库</name>
<url>https://maven.aliyun.com/repository/public</url>
</mirror>
2. 项目初始化：10分钟获取与启动项目
2.1 源码获取
# 克隆完整项目仓库
git clone https://gitcode.com/gh_mirrors/jee/jeesite.git
cd jeesite
# 后端项目路径
cd jeesite5/jeesite-module-core
# 前端项目路径（新终端）
cd jeesite/jeesite-vue
2.2 数据库配置
- 创建数据库：
CREATE DATABASE jeesite DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
- 修改配置文件
jeesite.yml：
spring:
datasource:
type: com.alibaba.druid.pool.DruidDataSource
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/jeesite?useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: root
2.3 一键启动
# 后端启动（首次启动会自动初始化数据库）
mvn clean package -DskipTests
java -jar target/jeesite-module-core.jar
# 前端启动（新终端）
pnpm install
pnpm dev
启动成功后访问：
- 后端接口：http://localhost:8980/js
- 前端页面：http://localhost:8080
- 默认账号：admin/jeesite
3. 架构解析：5分钟理解Jeesite核心设计
3.1 技术栈概览
3.2 项目目录结构
jeesite/
├── jeesite5/ # 后端项目
│ ├── jeesite-common/ # 公共组件
│ ├── jeesite-module-core/ # 核心模块
│ └── jeesite-module-gen/ # 代码生成模块
└── jeesite-vue/ # 前端项目
├── packages/ # 模块化组件
│ ├── core/ # 核心组件
│ ├── cms/ # 内容管理
│ └── dfm/ # 文件管理
└── web/ # 应用入口
4. 快速开发：10分钟创建业务模块
4.1 在线代码生成流程
- 登录系统后访问：系统管理 > 代码生成 > 数据源管理
- 配置数据源并创建数据表：
CREATE TABLE `biz_customer` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL COMMENT '客户名称',
`contact` varchar(20) NOT NULL COMMENT '联系人',
`phone` varchar(20) DEFAULT NULL COMMENT '电话',
`email` varchar(100) DEFAULT NULL COMMENT '邮箱',
`create_by` varchar(64) DEFAULT NULL COMMENT '创建者',
`create_date` datetime DEFAULT NULL COMMENT '创建时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='客户信息';
- 代码生成步骤：
- 进入"代码生成"菜单，选择数据表
- 填写模块信息：
- 模块名称：customer
- 功能名称：客户管理
- 包路径：com.jeesite.modules.biz
- 生成代码并下载
4.2 导入业务模块
# 后端导入
unzip customer.zip -d jeesite5/jeesite-module-biz/
# 前端导入
unzip customer-ui.zip -d jeesite-vue/packages/biz/
# 重新启动前后端
4.3 权限配置
- 菜单配置：系统管理 > 菜单管理 > 导入菜单
- 权限分配：系统管理 > 角色管理 > 管理员角色 > 权限配置
- 数据权限：系统管理 > 数据权限 > 配置数据范围
5. 功能开发：10分钟实现业务功能
5.1 表单开发示例
<template>
<BasicDrawer
v-bind="$attrs"
:showFooter="true"
:okAuth="'biz:customer:edit'"
@register="registerDrawer"
@ok="handleSubmit"
width="60%"
>
<template #title>
<Icon :icon="getTitle.icon" class="pr-1 m-1" />
<span> {{ getTitle.value }} </span>
</template>
<BasicForm @register="registerForm">
<template #phone>
<Input v-model:value="formModel.phone" placeholder="请输入电话" />
</template>
</BasicForm>
</BasicDrawer>
</template>
<script lang="ts" setup name="ViewsBizCustomerForm">
import { ref } from 'vue';
import { useForm } from '/@/components/Form';
const formModel = ref({
name: '',
contact: '',
phone: '',
email: ''
});
const [registerForm, { validate }] = useForm({
model: formModel.value,
rules: {
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }]
}
});
async function handleSubmit() {
const values = await validate();
// 提交表单数据
console.log('提交数据:', values);
}
</script>
5.2 列表开发示例
<template>
<div>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleAdd" v-auth="'biz:customer:add'">
<Icon icon="i-fluent:add-12-filled" /> 新增客户
</a-button>
</template>
</BasicTable>
<CustomerForm @register="registerDrawer" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup name="ViewsBizCustomerList">
import { useTable } from '/@/components/Table';
import { customerListApi } from '/@/api/biz/customer';
const columns = [
{
title: '客户名称',
dataIndex: 'name',
width: 180,
},
{
title: '联系人',
dataIndex: 'contact',
width: 120,
},
{
title: '电话',
dataIndex: 'phone',
width: 150,
},
{
title: '邮箱',
dataIndex: 'email',
width: 200,
}
];
const [registerTable, { reload }] = useTable({
api: customerListApi,
columns,
rowKey: 'id',
useSearchForm: true,
formConfig: {
labelWidth: 100,
schemas: [
{
field: 'name',
label: '客户名称',
component: 'Input',
colProps: { span: 8 }
}
]
}
});
function handleAdd() {
openDrawer(true, { isNewRecord: true });
}
function handleSuccess() {
reload();
}
</script>
6. 部署上线：5分钟准备生产环境
6.1 后端打包
# 打包后端
cd jeesite5/jeesite-module-core
mvn clean package -DskipTests -Pprod
# 生成的包位于 target/jeesite-module-core.jar
6.2 前端打包
# 打包前端
cd jeesite-vue
pnpm build
# 生成的静态文件位于 dist/ 目录
6.3 部署方案
| 部署方式 | 适用场景 | 部署步骤 |
|---|---|---|
| 单机部署 | 开发/测试环境 | 1. 安装JDK 2. 安装MySQL 3. 启动jar包 4. Nginx部署前端 |
| Docker部署 | 生产环境 | 1. 构建镜像 2. 编写docker-compose.yml 3. 启动容器 |
| 集群部署 | 高可用环境 | 1. 配置负载均衡 2. 集群数据库 3. 分布式缓存 |
总结与展望
通过本文教程，你已掌握Jeesite快速开发平台的核心使用方法，从环境搭建到业务开发再到部署上线，整个过程可在30分钟内完成。Jeesite采用松耦合设计，提供了丰富的企业级功能模块，同时保持了极佳的扩展性，既可以快速搭建简单应用，也能支撑复杂的业务系统。
后续学习建议：
- 深入学习工作流引擎的使用
- 掌握报表设计器自定义报表
- 探索微服务架构改造方案
- 研究多租户SAAS架构实现
立即动手实践，体验Jeesite带来的开发效率提升！如果本教程对你有帮助，请点赞收藏并分享给更多开发者。下一篇我们将深入探讨Jeesite高级功能开发，敬请期待。
附录：常见问题解决
- 启动失败：检查数据库连接配置和端口占用情况
- 代码生成报错：确保数据库表有主键且命名规范
- 权限不生效：清除缓存并重新登录系统
- 前端样式错乱：执行pnpm install更新依赖
- 接口404：检查后端服务是否启动及接口路径是否正确
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
