JeeSite 4.x and 5.x快速开发平台前端技术探索与实践

news2024/11/19 22:44:54

一、引言

随着企业信息化建设的不断推进,对于快速、高效、安全的企业级应用需求日益增长。JeeSite作为一款企业级快速开发平台,以其强大的后端功能和灵活的前端架构,为开发者提供了强大的支持。本文旨在探讨JeeSite快速开发平台在前端技术方面的特点、实践及其在企业级应用开发中的优势。

二、JeeSite前端技术概览

JeeSite平台前端采用了多种技术栈,包括传统的Beetl、Bootstrap、AdminLTE组合,以及更为先进的Vue3、Vite、Ant Design Vue、TypeScript、Vben Admin等。这种灵活多样的选择,使得开发者能够根据不同的项目需求和技术背景,选择最适合的前端技术栈。

图片

平台介绍

  • JeeSite 快速开发平台,不仅仅是一个后台开发框架,它是一个企业级快速开发解决方案,后端基于经典组合 Spring Boot、Shiro、MyBatis,前端采用 Beetl、Bootstrap、AdminLTE 经典开发模式,或者分离版 Vue3、Vite、Ant Design Vue、TypeScript、Vben Admin 最先进技术栈。

  • 提供在线数据源管理、数据表建模、代码生成等功能,可自动创建业务模块代码工程和微服务模块代码工程,自动生成前端代码和后端代码;包括核心功能模块如:组织机构、用户、角色、岗位、管理员、权限审计、菜单及按钮权限、数据权限、模块管理、系统参数、字典管理、系统监控、数据监控等;扩展功能如:工作流引擎、内容管理、消息推送、单点登录、第三方登录、在线作业调度、对象存储、可视化数据大屏、报表设计器、在线文件预览、国际化、全文检索、统一认证服务等。

  • 本平台采用松耦合设计,微内核和插件架构,模块增减便捷,支持集群,支持 SaaS 架构,支持读写分离、分库分表、Spring Cloud 微服务架构;并内置了众多账号安全设置、密码策略、系统访问限制等安全解决方案,支持等保评测。

  • 本平台专注于为初级研发人员提供强大的支持,使他们能够高效、快速地开发出复杂的业务功能,同时为中高级人员腾出宝贵的时间,专注于更具战略性和创新性的任务。我们致力于让开发者能够全心投入业务逻辑中,而将繁琐的技术细节交由平台来封装处理。这不仅降低了技术实现的难度,还确保了系统架构的稳定性和安全性,进而帮助企业节省人力成本、缩短项目周期,并提高整体软件的安全性和质量。

  • 2013 年发布以来已被广大爱好者用到了企业、政府、医疗、金融、互联网等各个领域中,拥有:精良架构、易于扩展、大众思维的设计模式,工匠精神,用心打磨每一个细节,深入开发者的内心,并荣获开源中国《最受欢迎中国开源软件》多次奖项,期间也帮助了不少刚毕业的大学生,教师作为入门教材,快速的去实践。

  • 2019 年换代升级,我们结合了多年总结和经验,以及各方面的应用案例,对架构完成了一次全部重构,也纳入很多新的思想。不管是从开发者模式、底层架构、逻辑处理还是到用户界面,用户交互体验上都有很大的进步,在不忘学习成本、提高开发效率的情况下,安全方面也做和很多工作,包括:身份认证、密码策略、安全审计、日志收集等众多安全选项供您选择。努力为大中小微企业打造全方位企业级快速开发解决方案。

  • 2021 年终发布 Vue3 的前后分离版本,使得 JeeSite 拥有同一个后台服务 Web 来支撑分离版和全栈版两套前端技术栈。

核心优势

  • JeeSite 非常易于二次开发,可控性高,整体架构清晰、技术稳定而先进、源代码书写规范、经典技术会的人多、易于维护、易于扩展、安全稳定。

  • JeeSite 功能全,知识点非常多,也非常少。因为她使用的都是一些通用的技术,通俗的设计风格,大多数基础知识点,多数人都能掌握,所以每一个 JeeSite 的功能点都非常容易掌握。只要您学会使用这些功能和组件的应用,就可以顺利的完成系统开发了。

  • JeeSite 是一个低代码开发平台,具有较高的封装度、扩展性,封装不是限制您去做一些事情,而是在便捷的同时,也具有较好的扩展性,在不具备一些功能的情况下,JeeSite 提供了扩展接口,提供了原生调用方法。

  • 大家都在用 Spring,也在学习 Spring 的优点,Spring 提供了较好的扩展性,可又有多少人去修改它的源代码呢,退一步说,大家去修改了 Spring 的源码,反而会对未来升级造成很大困扰,您说不是呢?这样的例子很多,所以不要纠结,我们非常注重这一点,JeeSite 也一样具备强大的扩展性。为你解决升级的困扰。

  • 为什么说 JeeSite 比较易于学习?JeeSite 很好的把握了设计的 “度”,避免过度设计的情况。过度设计是在产品设计过程中忽略了产品和用户的实际需求,反而带来了不必要的复杂性,而忽略了系统的学习、开发和维护成本。


  • 至今 JeeSite 平台架构已经非常稳定,我们持续升级,并不失架构的先进性。

  • JeeSite 精益求精,用心打磨每一个细节,界面 UI 操作便捷,体验性好。

  • JeeSite 是一个专业的平台,是一个可以让您使用放心的平台。

  • 社区版基于 Apache License 2.0 开源协议,永久免费使用。

架构特点及安全方面的优势:https://jeesite.com/docs/feature/

技术选型

  • 主框架:Spring Boot 2.7、Spring Framework 5.3、Apache Shiro 1.12、J2Cache

  • 持久层:Apache MyBatis 3.5、Hibernate Validator 6.2、Alibaba Druid 1.2

  • 视图层:Spring MVC 5.3、Beetl 3.10(替换JSP)、Bootstrap 3.3、AdminLTE 2.4

  • 前端组件:jQuery 3.7、jqGrid 4.7、layer 3.5、zTree 3.5、jQuery Validation

  • 分离前端版:Node.js、TypeScript、Vue3、Vite、Ant Design Vue、Vue Vben Admin

  • 工作流引擎:Flowable 6.6、符合 BPMN 规范、在线流程设计器、中国式流程、退回、撤回、自由流

  • Bootstrap 版 支持 IE9 及以上版本及其他所有现代浏览器,如:谷歌、火狐、国产浏览器 等

  • Vue3 版 支持现代浏览器,如:谷歌 Chrome 86+、火狐、国产浏览器 等

  • 技术选型(详细):http://jeesite.com/docs/technology/

  • JeeSite Vue 版本:https://gitee.com/thinkgem/jeesite-vue

  • Spring Boot 3.x 版本:https://gitee.com/thinkgem/jeesite5/tree/v5.springboot3

更多介绍

  • 内置功能:https://jeesite.com/docs/function/

  • 目录结构:https://jeesite.com/docs/catalog/

  • 架构特点:https://jeesite.com/docs/feature/

  • 开发规范:https://jeesite.com/docs/standard/

  • 代码生成:https://jeesite.com/docs/code-gen/

生态系统

  • 分布式微服务(Spring Cloud):https://gitee.com/thinkgem/jeesite-cloud

  • Flowable业务流程引擎(BPM):http://jeesite.com/docs/bpm/

  • 多站点内容管理模块(CMS):https://jeesite.com/docs/cms/

  • 手机端移动端:https://gitee.com/thinkgem/jeesite-uniapp

  • PC客户端程序:https://gitee.com/thinkgem/jeesite-client

  • Vue3分离版本:https://gitee.com/thinkgem/jeesite-vue

  • JeeSite统一认证:https://jeesite.com/docs/oauth2-server

  • JFlow工作流引擎:https://gitee.com/thinkgem/jeesite-jflow

  • Mybatis-Plus: https://gitee.com/thinkgem/jeesite-mybatisplus

  • Magic接口快速开发:https://gitee.com/thinkgem/jeesite-magic-api

  • 内外网中间件:https://my.oschina.net/thinkgem/blog/4624519

快速体验

在线演示

  1. 全栈版地址:http://demo.jeesite.com

  2. Vue3分离版地址:http://vue.jeesite.com

本地运行

  1. 环境准备:JDK 1.8 or 11、17Maven 3.6+、使用 MySQL 5.7 or 8.0 数据库、其它数据库

  2. 下载源码:https://gitee.com/thinkgem/jeesite5/repository/archive/v5.7.zip 并解压

  3. 打开文件:/web/src/main/resources/config/application.yml 配置JDBC连接

  4. 执行脚本:/web/bin/init-data.bat 初始化数据库

  5. 执行脚本:/web/bin/run-tomcat.bat 启动服务即可

  6. 浏览器访问:http://127.0.0.1:8980/js 账号 system 密码 admin

  7. 部署常见问题:https://jeesite.com/docs/faq/

  8. 分离端安装:https://jeesite.com/docs/vue-install-deploy/

快速运行

  1. 环境准备:JDK 1.8 or 11、17Maven 3.6+、无需准备数据库(使用内嵌 H2 DB、Vue资源包)

  2. 下载源码:https://gitee.com/thinkgem/jeesite5/repository/archive/v5.7.zip 并解压

  3. 执行脚本:/web-fast/bin/run-tomcat.bat 启动服务即可(自动初始化库)

  4. 全栈版本地址:http://127.0.0.1:8980/a/login

  5. Vue分离版本地址:http://127.0.0.1:8980/vue/login

  6. 默认超级管理员账号:system 密码 admin

  7. 部署常见问题:https://jeesite.com/docs/faq/

容器运行

  • 拉取 Docker 镜像(演示使用,JeeSite版本较久):

 

docker pull thinkgem/jeesite-web

  • 启动脚本:

 

docker run --name jeesite-web -p 8980:8980 -d --restart unless-stopped \
-v ~/:/data thinkgem/jeesite-web && docker logs -f jeesite-web

  • 浏览器访问:http://127.0.0.1:8980/js/ 账号 system 密码 admin

  • 分离端安装:https://jeesite.com/docs/vue-install-deploy/

开发环境

  1. 部署运行文档:https://jeesite.com/docs/install-deploy/

  2. 部署常见问题:https://jeesite.com/docs/faq/

  3. 分离端安装:https://jeesite.com/docs/vue-install-deploy/

技术文章

  • 菜单和按钮权限:https://jeesite.com/docs/permi-shiro/

  • 强大的数据权限:https://jeesite.com/docs/service-datascope/#数据权限

  • 表结构数据字典:https://jeesite.com/docs/code-gen/#表结构数据字典

  • 持久层设计:https://jeesite.com/docs/dao-mybatis/

  • 后端工具:https://jeesite.com/docs/sys-utils/

  • 表单组件:https://jeesite.com/docs/views-beetl/

  • 表格组件:https://jeesite.com/docs/datagrid/

  • js工具:https://jeesite.com/docs/jeesite-js/

专题文章

  • 自定义主题:https://jeesite.com/docs/custom-views/

  • 国际化多语言:https://jeesite.com/docs/i18n-locale/

  • 接口文档:https://jeesite.com/docs/mobile-rest-api/

  • BPM工作流引擎:https://jeesite.com/docs/bpm/

  • 用户类型:https://jeesite.com/docs/user-type/

  • 消息推送:https://jeesite.com/docs/msg-push-use/

  • 单点登录:https://jeesite.com/docs/sso-cas/

  • 在线任务调度:https://jeesite.com/docs/job/

  • 对象存储:https://jeesite.com/docs/oss-client/

  • 大屏设计器:https://jeesite.com/docs/visual/

  • 报表设计器:https://jeesite.com/docs/ureport/

  • 文件在线预览:https://jeesite.com/docs/filepreview/

  • 三员管理员:https://jeesite.com/docs/manager3/

  • 手机端框架:https://jeesite.com/docs/uniapp/

  • 统一认证服务:https://jeesite.com/docs/oauth2-server/

  • 树表结构设计:https://jeesite.com/docs/tree-table-use/

云服务架构

  • 多租户、SaaS服务:https://jeesite.com/docs/saas-corp-use/

  • 集群、负载均衡、高可用:https://jeesite.com/docs/cluster/

  • Spring Cloud 微服务:https://jeesite.com/docs/springcloud/

  • 分布式事务 Seata:https://jeesite.com/docs/springcloud-seata/

  • 读写分离、分库分表:https://jeesite.com/docs/sharding/

前后分离版

  • Vue 版介绍:https://jeesite.com/docs/jeesite-vue/

  • Vue 安装部署:https://jeesite.com/docs/vue-install-deploy/

  • Vue 参数配置:https://jeesite.com/docs/vue-settings/

  • Vue 前端权限:https://jeesite.com/docs/vue-auth/

  • Vue 源码解析:https://jeesite.com/docs/vue-crud-view/

  • Vue 表单组件:https://jeesite.com/docs/vue-basic-form/

  • Vue 表格组件:https://jeesite.com/docs/vue-basic-table/

  • Vue 常用组件:https://jeesite.com/docs/vue-comp/

  • Vue 图标组件:https://jeesite.com/docs/vue-icon/

  • Vue 国际化多语言:https://jeesite.com/docs/vue-i18n/

  • Vue 样式库:https://jeesite.com/docs/vue-style/

软件截图 

图片

 

图片

 

图片

 

图片

 

图片

 

图片

三、JeeSite前端技术实践

  1. 代码生成与自动化
    JeeSite平台提供了强大的在线代码生成功能,能够根据数据库表结构自动生成前端代码和后端代码。这不仅大大提高了开发效率,还确保了代码的一致性和规范性。

  2. 模块化与插件化
    平台采用松耦合设计和微内核架构,使得前端模块增减便捷。开发者可以根据项目需求,快速添加或删除功能模块,实现快速迭代和扩展。

  3. 安全性与稳定性
    平台内置了众多账号安全设置、密码策略、系统访问限制等安全解决方案,确保系统数据的安全性和用户账号的安全性。同时,通过微服务和读写分离等技术,保证了系统的高可用性和稳定性。

四、JeeSite在企业级应用开发中的优势

  1. 快速开发:平台提供了丰富的功能和灵活的架构,使得开发者能够快速开发出满足业务需求的应用。

  2. 易扩展性:通过模块化和插件化设计,开发者可以轻松实现系统的扩展和定制。

  3. 高安全性:平台内置了众多安全解决方案,确保系统数据的安全性和用户账号的安全性。

  4. 高可用性:平台支持集群、多租户、多数据源等技术,保证了系统的高可用性和稳定性。

五、结论

JeeSite快速开发平台以其强大的后端功能和灵活的前端架构,为企业级应用开发提供了强大的支持。通过代码生成、模块化、插件化等技术手段,开发者能够高效、快速地开发出满足业务需求的应用。同时,平台的高安全性、高可用性和易扩展性等特点,使得它成为企业级应用开发的理想选择。

项目地址:

https://gitee.com/thinkgem/jeesite5

官方技术交流群:

图片

了解更多

  • JeeSite 官网地址:http://jeesite.com

  • JeeSite 在线文档:http://docs.jeesite.com

  • JeeSite 演示地址:http://demo.jeesite.com

  • JeeSite Vue 演示地址:http://vue.jeesite.com

  • JeeSite 源码仓库:https://gitee.com/thinkgem/jeesite4

  • JeeSite Vue 前端源码:https://gitee.com/thinkgem/jeesite-vue

  • JeeSite 跨平台手机端:https://gitee.com/thinkgem/jeesite-uniapp

  • JeeSite Cloud 微服务:https://gitee.com/thinkgem/jeesite-cloud

  • JeeSite 客户端安装程序:https://gitee.com/thinkgem/jeesite-client

JeeSite 生态系统

  • 分布式微服务(Spring Cloud):https://gitee.com/thinkgem/jeesite-cloud

  • Flowable 业务流程引擎(BPM):http://jeesite.com/docs/bpm/

  • JFlow 工作流引擎:https://gitee.com/thinkgem/jeesite-jflow

  • 多站点内容管理模块(CMS):https://jeesite.com/docs/cms/

  • 手机端移动端:https://gitee.com/thinkgem/jeesite-uniapp

  • PC 客户端程序:https://gitee.com/thinkgem/jeesite-client

  • Vue3 分离版本:https://gitee.com/thinkgem/jeesite-vue

  • JeeSite 统一认证:https://jeesite.com/docs/oauth2-server

  • TopIAM 统一认证:https://gitee.com/thinkgem/jeesite-topiam

  • MaxKey 统一认证:https://gitee.com/thinkgem/jeesite-maxkey

  • MybatisPlus: https://gitee.com/thinkgem/jeesite-mybatisplus

  • Magic 接口快速开发:https://gitee.com/thinkgem/jeesite-magic-api

  • 内外网中间件:https://my.oschina.net/thinkgem/blog/4624519

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1707521.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

File类.Java

一、File类 1,概述🏀🏀🏀 (1) java.io.File类:文件和文件目录路径的抽象表示形式,与平台无关 (2) File类中涉及到关于文件或文件目录的创建、删除、重命…

vue 表格 随手笔记

对表格中单元格回显 做循环 <template slot-scope"scope"> <el-table-column label"责任网格类型" align"center"><template slot-scope"scope"><div v-for"(item, index ) in gridDutyTypeList">&…

C# 工商银行缺少infosecapiLib.infosec

搜索Tlbimp.exe 这里使用4.8.1下的处理&#xff0c;以管理员身份打开powershell cd "C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.8.1 Tools".\TlbImp.exe "G:\CSharp\icbc-api-sdk-cop-c#\sdk-cop\sdk-cop\dll\infosecapi.dll" …

破解微信校验难题,Xinstall助你轻松实现Universal Link功能!

在移动互联网时代&#xff0c;App的推广和运营离不开各种技术手段的支持。其中&#xff0c;Universal Link作为连接App和网页的重要桥梁&#xff0c;被广大开发者所青睐。然而&#xff0c;很多开发者在使用Universal Link时遇到了微信校验不通过的问题&#xff0c;这不仅影响了…

【Linux】-Kafka集群安装部署[18]

简介 Apache Kafka是一款分布式的、去中心化的、高吞吐低延迟、订阅模式的消息队列系统。 同RabbitMQ一样&#xff0c;Kafka也是消息队列。不过RabbitMQ多用于后端系统&#xff0c;因其更加专注于消息的延迟和容错。 Kafka多用于大数据体系&#xff0c;因其更加专注于数据的…

CLIP 源码分析:model.py 文件

from collections import OrderedDict from typing import Tuple, Unionimport numpy as np import torch import torch.nn.functional as F from torch import nn# 上面都是头文件Bottleneck类的作用 残差网络 ResNet 等我再去补一补相关知识。 # 这段代码定义了一个名为 Bot…

在MySQL中,Linux表同步到Windows,有大小写的就没同步的详细解决方案

在 Linux 系统上&#xff0c;文件名是区分大小写的&#xff0c;而在 Windows 系统上&#xff0c;文件名通常不区分大小写。导致在从 Linux 同步文件到 Windows 时&#xff0c;有些文件因为名称冲突而无法同步。为了有效解决这个问题&#xff0c;可以采取以下方法&#xff1a; …

.NET 轻量级、高效任务调度器:ScheduleTask

前言 至于任务调度这个基础功能&#xff0c;重要性不言而喻&#xff0c;大多数业务系统都会用到,世面上有很多成熟的三方库比如Quartz&#xff0c;Hangfire&#xff0c;Coravel 这里我们不讨论三方的库如何使用 而是从0开始自己制作一个简易的任务调度,如果只是到分钟级别的粒…

vue2 案例入门

vue2 案例入门 1 vue环境2 案例2.1 1.v-text v-html2.2 v-bind2.3 v-model2.4 v-on2.5 v-for2.6 v-if和v-show2.7 v-else和v-else-if2.8 计算属性和侦听器2.9 过滤器2.10 组件化2.11 生命周期2.12 使用vue脚手架2.13 引入ElementUI2.13.1 npm方式安装2.13.2 main.js导入element…

本地源码方式部署启动MaxKB知识库问答系统,一篇文章搞定!

MaxKB 是一款基于 LLM 大语言模型的知识库问答系统。MaxKB Max Knowledge Base&#xff0c;旨在成为企业的最强大脑。 开箱即用&#xff1a;支持直接上传文档、自动爬取在线文档&#xff0c;支持文本自动拆分、向量化、RAG&#xff08;检索增强生成&#xff09;&#xff0c;智…

YOLOv5改进 | 注意力机制 | 添加全局注意力机制 GcNet【附代码+小白必备】

&#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 非局部网络通过将特定于查询的全局上下文聚合到每个查询位置&#xff0c;为捕获长距离依赖关系提供了一种开创性的方法。然而&#xff0c;通…

Android 13 高通设备热点低功耗模式

需求: Android设备开启热点,使Iphone设备连接,自动开启低数据模式 低数据模式: 低数据模式是一种在移动网络或Wi-Fi环境下,通过限制应用程序的数据使用、降低数据传输速率或禁用某些后台操作来减少数据流量消耗的优化模式。 这种模式主要用于节省数据流量费用,特别是…

Github Page 部署失败

添加 .gitmodules 文件 [submodule "themes/ayer"]path themes/ayerurl https://github.com/Shen-Yu/hexo-theme-ayer.git 添加 .nojekyll 文件

使用 Orange Pi AIpro开发板基于 YOLOv8 进行USB 摄像头实时目标检测

文章大纲 简介算力指标与概念香橙派 AIpro NPU 纸面算力直观了解 手把手教你开机与基本配置开机存储挂载设置风扇设置 使用 Orange Pi AIpro进行YOLOv8 目标检测Pytorch pt 格式直接推理NCNN 格式推理 是否可以使用Orange Pi AIpro 的 NPU 进行推理 呢&#xff1f;模型开发流程…

vue 微信公众号定时发送模版消息

目录 第一步&#xff1a;公众号设置 网页授权第二步&#xff1a;引导用户去授权页面并获取code第三步&#xff1a;通过code换取网页授权access_token&openid第四步&#xff1a;后端处理绑定用户和发送消息 相关文档链接&#xff1a; 1、微信开发文档 2、订阅号/服务号/企业…

AI生成视频解决方案,降低成本,提高效率

传统的视频制作方式往往受限于高昂的成本、复杂的拍摄流程以及硬件设备的限制&#xff0c;为了解决这些问题&#xff0c;美摄科技凭借领先的AI技术&#xff0c;推出了全新的AI生成视频解决方案&#xff0c;为企业带来前所未有的视觉创新体验。 一、超越想象的AI视频生成 美摄…

【计算机视觉(4)】

基于Python的OpenCV基础入门——色彩空间转换 色彩空间简介HSV色彩空间GRAY色彩空间色彩空间转换 色彩空间转换代码实现: 色彩空间简介 色彩空间是人们为了表示不同频率的光线的色彩而建立的多种色彩模型。常见的色彩空间有RGB、HSV、HIS、YCrCb、YUV、GRAY&#xff0c;其中最…

Sora,数据驱动的物理引擎

文生视频技术 Text-to-Video 近日&#xff0c;Open AI发布文生视频模型Sora&#xff0c;能够生成一分钟高保真视频。人们惊呼&#xff1a;“真实世界将不再存在。” Open AI自称Sora是“世界模拟器”&#xff0c;让“一句话生成视频”的AI技术向上突破了一大截&#xff0c;引…

数据恢复与取证软件: WinHex 与 X-Ways Forensics 不同许可证功能区别

天津鸿萌科贸发展有限公司从事数据安全业务20余年&#xff0c;在数据恢复、数据取证、数据备份等领域有丰富的案例经验、专业技术及良好的行业口碑。同时&#xff0c;公司面向取证机构及数据恢复公司&#xff0c;提供数据恢复实验室建设方案&#xff0c;包含数据恢复硬件设备及…

外贸仓库管理软件:海外仓效率大幅度提升、避免劳动力积压

随着外贸业务的不断发展&#xff0c;如何高效管理外贸仓库&#xff0c;确保货物顺利流转&#xff0c;订单顺利处理&#xff0c;就变得非常重要。 现在通常的解决方案都是通过引入外贸仓库管理软件&#xff0c;也就是我们常说的海外仓WMS系统来解决。 今天我们就系统的探讨一下…