1、前端页面

1.1 代码生成 页面

创建 src / views / tool / gen / index.vue 页面，内容如下

<template><div class="app-container">111</div>
</template><script>
export default {name: "Gen",data() {return {};},
};
</script>

启动前后端，登录后查看效果如下：

1.2 添加条件搜索 

注意：

• 本章教程的所有操作都是在 src / views / tool / gen / index.vue 页面上进行，为了不每次都粘贴整个页面内容会导致文章过程，因此用到哪些内容，就写哪些
• 这一步只是单纯的写页面，搜索和重置后面步骤在写

条件搜索的表单：

    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"><el-form-item label="表名称" prop="tableName"><el-inputv-model="queryParams.tableName"placeholder="请输入表名称"clearablesize="small"/></el-form-item><el-form-item label="表描述" prop="tableComment"><el-inputv-model="queryParams.tableComment"placeholder="请输入表描述"clearablesize="small"/></el-form-item><el-form-item label="创建时间"><el-date-pickerv-model="dateRange"size="small"style="width: 240px"value-format="yyyy-MM-dd"type="daterange"range-separator="-"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button><el-button icon="el-icon-refresh" size="mini">重置</el-button></el-form-item></el-form>

条件搜索表单涉及到的数据绑定：

      // 日期范围dateRange: "",// 查询参数queryParams: {pageNum: 1,pageSize: 10,tableName: undefined,tableComment: undefined}

实现的效果：

1.3 功能按钮区

功能按钮组件：

    <el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-buttontype="primary"icon="el-icon-download"size="mini">生成</el-button></el-col><el-col :span="1.5"><el-buttontype="info"icon="el-icon-upload"size="mini">导入</el-button></el-col><el-col :span="1.5"><el-buttontype="success"icon="el-icon-edit"size="mini":disabled="single">修改</el-button></el-col><el-col :span="1.5"><el-buttontype="danger"icon="el-icon-delete"size="mini":disabled="multiple">删除</el-button></el-col></el-row>

功能按钮用到的数据绑定：

      // 非单个禁用single: true,// 非多个禁用multiple: true,

实现效果：

 

1.3 表格

表格组件：

    <el-table v-loading="loading" :data="tableList"><el-table-column type="selection" width="55"></el-table-column><el-table-column label="序号" type="index" width="50" align="center"><template slot-scope="scope"><span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span></template></el-table-column><el-table-columnlabel="表名称"align="center"prop="tableName":show-overflow-tooltip="true"width="130"/><el-table-columnlabel="表描述"align="center"prop="tableComment":show-overflow-tooltip="true"width="130"/><el-table-columnlabel="实体"align="center"prop="className":show-overflow-tooltip="true"width="130"/><el-table-column label="创建时间" align="center" prop="createTime" width="160" /><el-table-column label="更新时间" align="center" prop="updateTime" width="160" /><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttontype="text"size="small"icon="el-icon-view">预览</el-button><el-buttontype="text"size="small"icon="el-icon-edit">编辑</el-button><el-buttontype="text"size="small"icon="el-icon-delete">删除</el-button><el-buttontype="text"size="small"icon="el-icon-download">生成代码</el-button></template></el-table-column></el-table><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"/>

表格组件用到的数据绑定：

      // 遮罩层loading: false,// 表数据tableList: [],// 总条数total: 0,

实现效果：

2、表格数据

2.1 页面加载时获取表格数据

  created() {this.getList();},

2.2 查询数据方法

/** 查询表集合 */getList() {this.loading = true;listTable(this.addDateRange(this.queryParams, this.dateRange)).then(response => {this.tableList = response.rows;this.total = response.total;this.loading = false;});}

注意：这里用到的 listTable 方法，需要在 src / api / tool / gen.js 文件中定义

2.3 引入 listTable 方法

在 src / views / tool / gen / index.vue 中 引入 listTable 方法

import { listTable } from "@/api/tool/gen";

2.4 定义 listTable 方法

创建 src / api / tool / gen.js 文件，定义 listTable 方法

import request from '@/utils/request'// 查询生成表数据
export function listTable(query) {return request({url: '/tool/gen/list',method: 'get',params: query})
}

2.5 后台实现

详情见：https://blog.csdn.net/u010559460/article/details/109077672

2.6 实现效果

3、条件搜索和重置功能

3.1 条件搜索

为搜索按钮添加点击事件处理

<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

搜索方法：

    /** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();}

3.2 重置功能

为重置按钮添加点击事件处理

<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

重置方法：

    /** 重置按钮操作 */resetQuery() {this.dateRange = [];this.resetForm("queryForm");this.handleQuery();}