介绍

通用框架组件是由前端及后台两部分组成，通过对单表操作代码的封装，使使用者在较小的开发工作下，完成业务系统的开发。

前端用到的技术

1. Vue (opens new window) Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. Vuex (opens new window) 前端状态管理

3. Vue-router (opens new window) 管理页面路由跳转。

4. axios (opens new window) 前端请求后台获取数据的工具，类似于ajax。

5. Vue-cli (opens new window) Vue项目的手脚架搭建客户端。

6. Typescript (opens new window) 是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。TypeScript添加了可选的静态类型系统、很多尚未正式发布的ECMAScript新特性（如装饰器 [1] ）。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。

7. vue-typescript-admin-template (opens new window) 一套封装较为成熟的管理系统Vue模板，包含较多的实用性组件及示例。

8. elementUI (opens new window) ，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

9. vue-class-component (opens new window) 使用typescript语法及注解简化代码插件

10. vue-property-decorator (opens new window) 使用 typescript 语法及注解简化代码的插件

后台用到的技术

1. SpringBoot (opens new window) 快速开发，自动装配的Spring家族的框架

2. Mybatis (opens new window) 是一款优秀的持久层框架，它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO（Plain Old Java Objects，普通老式 Java 对象）为数据库中的记录。

3. Apache Shiro (opens new window) 是一个强大且易用的Java安全框架,执行身份验证、授权、密码和会话管理。使用Shiro的易于理解的API,您可以快速、轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序。

4. Lombok (opens new window) 项目是一个Java库，它会自动插入编辑器和构建工具中，Lombok提供了一组有用的注释，用来消除Java类中的大量样板代码。仅五个字符(@Data)就可以替换数百行代码从而产生干净，简洁且易于维护的Java类。

5. Druid (opens new window) Java语言中被广泛应用的的数据库连接池。Druid能够提供强大的监控和扩展功能。

6. knife4j (opens new window) 是为Java MVC框架集成Swagger生成Api文档的增强解决方案,前身是swagger-bootstrap-ui,取名kni4j是希望她能像一把匕首一样小巧,轻量,并且功能强悍!

7. tkMybaits (opens new window) 通用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接口获取当前页面需要渲染的表的表信息。 然后前端组件通过读取表信息后，自动生成表格，搜索表单，新增及编辑表单，按钮等页面内容。 最后通过读取单表通用接口数据，将数据加载入表格当中完成整个页面渲染。

前端通用页面示例：