qb-logic-flow/代码生成场景.md

[TOC]

###目标 通过伪码或中文语义输入，生成粗略的SQL、Java、Vue代码，再由程序员精修，实现一个从前到后的业务功能。

###技术栈 Vue、Element、SpringMvc、SpringBoot、Mybatis、MyBatisPlus、Mysql。

###生成代码类型 解决三个方面的代码。数据模型：SQL；服务逻辑：Java；前端页面：Vue。

###生成模型代码 ####生成模型 输入：创建一个用户表，字段有：ID、姓名、年龄、邮箱。其中ID为主键，姓名为长度不超过30的变长字符串，年龄为不超过11位的整形，邮箱为长度不超过50的变长字符串。 输出：

CREATE TABLE user
(
    id BIGINT(20) NOT NULL COMMENT '主键ID',
    name VARCHAR(30) NULL DEFAULT NULL COMMENT '姓名',
    age INT(11) NULL DEFAULT NULL COMMENT '年龄',
    email VARCHAR(50) NULL DEFAULT NULL COMMENT '邮箱',
    PRIMARY KEY (id)
);

####生成SQL

• 输入：统计用户的数量 输出： sql select count(*) from user;
• 输入：统计年龄小于20的用户的数量 输出： sql select count(*) from user t where t.age<20;
• 输入：查看姓名为Tom的用户信息 输出： sql select name, age, email from user t where t.name='Tom';
• 其他 按某字段排序：order by ${cloumn1} ...${cloumnN} desc。 按某些字段分组：group by ${cloumn1} ...${cloumnN} 。 表1字段和表2字段关联：from table1 t1,table2 t2 where t1.cloumn1=t2。

###生成前端代码 输入：基于用户模型制作一个录入表单，页面元素有姓名、年龄、邮箱，其中年龄元素需要校验数字格式，邮箱元素需要校验邮箱格式。 输出：

<!-- 基于用户模型的录入表单 --!>

<script>
数字格式校验代码片段
邮箱格式校验代码片段
</script>

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="max-width: 500px;">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="form.age"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: '',
        email: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须是数字', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，提交表单
          console.log(this.form);
        } else {
          // 表单验证失败
          console.log('表单验证失败');
        }
      });
    }
  }
}
</script>

输入：基于用户模型制作用户信息查询功能，查询条件为姓名，查询结果为ID、姓名、年龄、邮箱。 输出：

<!-- 查询条件代码片段 --!>

<!-- 查询结果代码片段 --!>

<template>
  <div>
    <el-form :model="searchForm" label-width="80px" class="search-form">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="filteredData" style="width: 100%" :pagination="paginationConfig">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20, email: 'zhangsan@example.com' },
        { id: 2, name: '李四', age: 25, email: 'lisi@example.com' },
        { id: 3, name: '王五', age: 30, email: 'wangwu@example.com' },
        // ... 更多数据
      ],
      searchForm: {
        name: '',
      },
      paginationConfig: {
        pageSize: 10,
        currentPage: 1,
        total: this.tableData.length,
      },
      form: {
        name: '',
        age: null,
        email: '',
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '请输入正确的数字格式', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }],
      },
    };
  },
  computed: {
    filteredData() {
      let data = this.tableData;
      if (this.searchForm.name) {
        data = data.filter((item) => item.name.indexOf(this.searchForm.name) !== -1);
      }
      return data;
    },
  },
  methods: {
    handleSearch() {
      this.paginationConfig.currentPage = 1;
    },
    handleSizeChange(val) {
      this.paginationConfig.pageSize = val;
    },
    handleCurrentChange(val) {
      this.paginationConfig.currentPage = val;
    },
    handleAdd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 验证通过，提交表单数据
          const data = { ...this.form };
          data.id = this.tableData.length + 1;
          this.tableData.push(data);
          this.form = {
            name: '',
            age: null,
            email: '',
          };
          this.$message.success('提交成功');
        } else {
          // 验证不通过，提示错误信息
          this.$message.error('表单验证失败');
          return false;
        }
      });
    },
  },
};
</script>

###生成后端代码 输入：基于用户模型，创建用户实体类，使用Lombok代替get和set方法。 输出：

@Data
public class User {
    private Long id;
    private String name;
    private Integer age;
    private String email;
}

输入：