7.0 KiB
title, date, permalink
| title | date | permalink |
|---|---|---|
| 介绍 | 2021-02-03 09:26:32 | /pages/a3c9a2/ |
介绍
通用框架组件是由前端及后台两部分组成，通过对单表操作代码的封装，使使用者在较小的开发工作下，完成业务系统的开发。
前端用到的技术
-
Vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
-
Vuex 前端状态管理
-
Vue-router 管理页面路由跳转。
-
axios 前端请求后台获取数据的工具，类似于ajax。
-
Vue-cli Vue项目的手脚架搭建客户端。
-
Typescript 是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。TypeScript添加了可选的静态类型系统、很多尚未正式发布的ECMAScript新特性（如装饰器 [1] ）。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。
-
vue-typescript-admin-template 一套封装较为成熟的管理系统Vue模板，包含较多的实用性组件及示例。
-
elementUI ，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
-
vue-class-component 使用typescript语法及注解简化代码插件
-
vue-property-decorator 使用 typescript 语法及注解简化代码的插件
后台用到的技术
-
SpringBoot 快速开发，自动装配的Spring家族的框架
-
Mybatis 是一款优秀的持久层框架，它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO（Plain Old Java Objects，普通老式 Java 对象）为数据库中的记录。
-
Apache Shiro 是一个强大且易用的Java安全框架,执行身份验证、授权、密码和会话管理。使用Shiro的易于理解的API,您可以快速、轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序。
-
Lombok 项目是一个Java库，它会自动插入编辑器和构建工具中，Lombok提供了一组有用的注释，用来消除Java类中的大量样板代码。仅五个字符(@Data)就可以替换数百行代码从而产生干净，简洁且易于维护的Java类。
-
Druid Java语言中被广泛应用的的数据库连接池。Druid能够提供强大的监控和扩展功能。
-
knife4j 是为Java MVC框架集成Swagger生成Api文档的增强解决方案,前身是swagger-bootstrap-ui,取名kni4j是希望她能像一把匕首一样小巧,轻量,并且功能强悍!
-
tkMybaits 通用Mapper都可以极大的方便开发人员。可以随意的按照自己的需要选择通用方法，还可以很方便的开发自己的通用方法。极其方便的使用MyBatis单表的增删改查。支持单表操作，不支持通用的多表联合查询。通用 Mapper 支持 Mybatis-3.2.4 及以上版本。
它是如何工作的？
通用框架，通过前端及后台对单表操作代码的封装，省去了单表操作代码的开发工作量，仅通过配置，即可生成相应的功能。 使开发者更加专注于需求、页面展示及关联查询等复杂需求的开发。
首先，使用前需要将业务表的信息录入到配置表当中。在配置表中，我们设计了table表，field表，及select表。 将表信息录入到配置表中以后，通过单表通用接口中的getTableInfo接口进行表信息的获取，即可获取当前业务表的全部信息。
table表：
field表:
select表:
后台中如何做到单表操作通过一套接口进行封装？最初的项目中，我们通过将表别名设置成一个变量，由前端传入。 同时摒弃了MVC设计模式，通过Map集合的方式进行传值，更加自由，且不限制具体字段。但是随即暴露出的问题就是表名会暴露在前端中，产生一系列安全问题。 于是我们再配置表中加入表别名字段，并通过REST接口的方式，将表别名当做一个参数写入URL中，增加接口地址安全性。 后台再通过表别名映射成真实表名，进行单表通用接口的操作。后台基本思路就是将表名当做参数，然后通过前端传值，进行SQL拼接完成通用接口。
后台接口示例：
/**
* 通用保存接口（不带保存日前）
*
* @param typeName --- 表名映射
* @param map --- 保存参数
* @return
*/
@ApiOperation(value = "保存接口（不带保存日期）")
@PostMapping("/{typeName}")
public ResultVO save(@PathVariable String typeName, @RequestParam Map<String, Object> map) {
return tableService.save(tableNameUtil.getTableName(typeName), map);
}
/**
* 通用保存接口（带保存和更新日期）
*
* @param typeName --- 表名映射
* @param map --- 保存参数
* @return
*/
@ApiOperation(value = "保存接口（带保存日期）")
@PostMapping("/{typeName}/date")
public ResultVO saveWithDate(@PathVariable String typeName, @RequestParam Map<String, Object> map) {
return tableService.saveWithDate(tableNameUtil.getTableName(typeName), map);
}
在前端中，页面实例再创建后，首先需要通过getTableInfo接口获取当前页面需要渲染的表的表信息。 然后前端组件通过读取表信息后，自动生成表格，搜索表单，新增及编辑表单，按钮等页面内容。 最后通过读取单表通用接口数据，将数据加载入表格当中完成整个页面渲染。
前端通用页面示例：
