现在各种管理系统在企业信息化过程中十分常见，其中又以表格类的数据维护(也叫数据管理）为这类系统主要的交互形式。绝大多数表格形式的数据管理通俗了讲就是针对关系型数据库表的增删改查(CRUD)，辅以导入导出，在此基础上追加符合公司业务逻辑的按钮、接口和逻辑。
那么是否可以将CRUD和导入导出等较为通用的功能作为标准功能，开发一套集后端+前端的组件库，借助这套组件库，能快速生成针对某个数据库表的表格形式的数据维护呢？

Fast-Crud就是这样一个助你快速实现针对mysql数据库表实现CRUD的组件库。源码仓库：这里

注意：本系列文档均针对最新版本。

Fast-Crud特点

🚀 快速：后端提供代码生成(一键生成controller、service、mapper、entity)
🛠 扩展性高：后端所有接口涉及的方法均可重写，前端组件库就像用原生ElementUI一样简单
🤪 高效：前后端加一块，手撸的代码可能不足50行，就能实现一个完整表格类CRUD。
💪 强大：Fast-Crud实现的单表数据维护功能强大，具备强大灵活的数据筛选能力、表格内(多行)编辑能力、批量新增能力，且可自由选择弹窗编辑还是行内编辑等灵活的配置。

技术栈构成

Spring Boot@2.6.8：2.x应该都兼容, 具体要参考官方了。但是2.6.8是SpringBoot2广为使用的一个版本。
MybatisPlus@3.5.7：截止文章当前，3.5.7是比较新的版本。最新的3.5.9好像存在问题，具体什么问题忘了，当时是明确的，想起来再记录。或者评论区告诉我。
Vue@2.7.16：vue2.x应该都是兼容的，不支持vue3。
ElementUI@2.15.14：ElementUI2.12+应该都是兼容的。

样例展示

类似如下寥寥数行代码：

<template>
  <div id="app">
    <fast-table :option="tableOption">
      <fast-table-column prop="id" label="ID"></fast-table-column>
      <fast-table-column-img prop="avatarUrl" label="头像"></fast-table-column-img>
      <fast-table-column-input prop="name" label="姓名" first-filter></fast-table-column-input>
      <fast-table-column-number prop="age" label="年龄"></fast-table-column-number>
      <fast-table-column-select prop="sex" label="性别" :options="[{label: '男', value: '1'}, {label: '女', value: '0'}]"></fast-table-column-select>
      <fast-table-column-date-picker prop="createTime" label="创建时间" type="datetime" :editable="false" :quick-filter="true"></fast-table-column-date-picker>
    </fast-table>
  </div>
</template>
<script>
import {FastTableOption} from 'fast-crud-ui'
export default {
  name: 'App',
  data() {
    return {
      tableOption: new FastTableOption({
        context: this,
        module: 'student'
      })
    }
  }
}
</script>

便可以实现以下效果：