---
title: 介绍
date: 2021-02-03 09:26:32
permalink: /pages/a3c9a2/
---
# 介绍

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

## 前端用到的技术

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

2. [**Vuex**](https://vuex.vuejs.org/zh-cn/) 前端状态管理

3. [**Vue-router**](https://router.vuejs.org/zh-cn/) 管理页面路由跳转。 

4. [**axios**](https://github.com/axios/axios) 前端请求后台获取数据的工具，类似于ajax。

5. [**Vue-cli**](https://github.com/vuejs/vue-cli) Vue项目的手脚架搭建客户端。

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

7. [**vue-typescript-admin-template**](https://github.com/Armour/vue-typescript-admin-template) 一套封装较为成熟的管理系统Vue模板，包含较多的实用性组件及示例。

8. [**elementUI**](https://element.eleme.cn/#/zh-CN) ，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

9. [**vue-class-component**](https://github.com/vuejs/vue-class-component) 使用typescript语法及注解简化代码插件

10. [**vue-property-decorator**](https://github.com/kaorun343/vue-property-decorator) 使用 typescript 语法及注解简化代码的插件

## 后台用到的技术

1. [**SpringBoot**](https://spring.io/projects/spring-boot/) 快速开发，自动装配的Spring家族的框架

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

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

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

5. [**Druid**](https://github.com/alibaba/druid/) Java语言中被广泛应用的的数据库连接池。Druid能够提供强大的监控和扩展功能。

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

7. [**tkMybaits**](https://github.com/abel533/Mapper) 通用Mapper都可以极大的方便开发人员。可以随意的按照自己的需要选择通用方法，还可以很方便的开发自己的通用方法。极其方便的使用MyBatis单表的增删改查。支持单表操作，不支持通用的多表联合查询。通用 Mapper 支持 Mybatis-3.2.4 及以上版本。

## 它是如何工作的？

通用框架，通过前端及后台对单表操作代码的封装，省去了单表操作代码的开发工作量，仅通过配置，即可生成相应的功能。
使开发者更加专注于需求、页面展示及关联查询等复杂需求的开发。


首先，使用前需要将业务表的信息录入到配置表当中。在配置表中，我们设计了table表，field表，及select表。
将表信息录入到配置表中以后，通过单表通用接口中的getTableInfo接口进行表信息的获取，即可获取当前业务表的全部信息。

**table表：**

![An image](https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203144029.png)

**field表:**
![field](https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203144046.png)

**select表:**
![select](https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203144058.png)


后台中如何做到单表操作通过一套接口进行封装？最初的项目中，我们通过将表别名设置成一个变量，由前端传入。
同时摒弃了MVC设计模式，通过Map集合的方式进行传值，更加自由，且不限制具体字段。但是随即暴露出的问题就是表名会暴露在前端中，产生一系列安全问题。
于是我们再配置表中加入表别名字段，并通过REST接口的方式，将表别名当做一个参数写入URL中，增加接口地址安全性。
后台再通过表别名映射成真实表名，进行单表通用接口的操作。后台基本思路就是将表名当做参数，然后通过前端传值，进行SQL拼接完成通用接口。

**后台接口示例：**
``` java
    /**
     * 通用保存接口（不带保存日前）
     *
     * @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接口获取当前页面需要渲染的表的表信息。
然后前端组件通过读取表信息后，自动生成表格，搜索表单，新增及编辑表单，按钮等页面内容。
最后通过读取单表通用接口数据，将数据加载入表格当中完成整个页面渲染。

**前端通用页面示例：**
![web](https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203144128.png)




