SpringBoot VUE+ElementUI

后端：

@RestController
@RequestMapping("/student")
public class StudentController {

    @Autowired
    private IStudentService studentService;

    @RequestMapping("/add")
    public ResponseData<?> add(Student student){
        try {
            studentService.insert(student);
            return new ResponseData<>(200,"添加成功",null);
        } catch (Exception e) {
            e.printStackTrace();
            return new ResponseData<>(500,"添加失败",null);
        }
    }

    @RequestMapping("/all")
    public ResponseData<List<Student>> all(Student student){
        try {
            List<Student> students = studentService.all(student);
            return new ResponseData<>(200,"查询成功",students);
        } catch (Exception e) {
            e.printStackTrace();
            return new ResponseData<>(500,"查询失败",null);
        }
    }

    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    class ResponseData<T>{
        private int code;
        private String msg;
        private T data;
    }
}
 

SQL:

<select id="all" resultType="com.zking.spboot.model.Student">
  select <include refid="Base_Column_List"/> from t_student where 1=1
  <if test="sname!=null and sname!=''">
    and sname like concat(#{sname},'%')
  </if>
</select>

前端：

<template>
    <div>
        <h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
        <!-- 1、搜索 -->
        <el-form :inline="true">
            <el-form-item>
                <el-input v-model="sname" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="open">添加</el-button>
            </el-form-item>
        </el-form>
        <!-- 2、表格 -->
        <template>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="sid" label="编号" width="180">
                </el-table-column>
                <el-table-column prop="sname" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="sage" label="年龄" width="180">
                </el-table-column>
                <el-table-column prop="ssex" label="性别">
                </el-table-column>
            </el-table>
        </template>
        <!-- 3、对话框-->
        <el-dialog title="添加"  @close="close" :visible.sync="dialogFormVisible">
          <el-form :model="student" :rules="rules" ref="student">
            <el-form-item label="姓名" prop="sname"  :label-width="formLabelWidth">
              <el-input v-model="student.sname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="sage" :label-width="formLabelWidth">
              <el-input v-model="student.sage" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="ssex" :label-width="formLabelWidth">
                <el-radio-group v-model="student.ssex">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                ts: new Date().getTime(),
                sname: '',
                tableData:[],
                dialogFormVisible: false ,
                formLabelWidth:'120px',
                student:{
                    sname:'',
                    sage:'',
                    ssex:''
                },
                 rules: {
                  sname: [
                    { required: true, message: '请输入学生姓名', trigger: 'blur' }
                  ],
                  sage: [
                    { required: true, message: '请输入学生年龄', trigger: 'blur' }
                  ],
                  ssex: [
                    { required: true, message: '请输入学生性别', trigger: 'blur' }
                  ]
                }            
            };
        },
        methods:{
            query: function(){
                //获取参数
                let params={
                    sname:this.sname
                }
                //获取请求
                let url=this.axios.urls.ALL;
                //发起ajax
                this.axios.post(url,params).then(resp=>{            
                    let data=resp.data;
                    if(data.code==200)
                        this.tableData=data.data;
                }).catch(err=>{
                    console.log(err);
                });
            },
            add:function(){
                //表单验证
                    this.$refs['student'].validate((valid) => {
                      if (valid) {
                           //获取请求URL
                           let url=this.axios.urls.ADD;
                           //发起ajax请求
                           this.axios.post(url,this.student).then(resp=>{
                            let data=resp.data;
                            if(data.code==200){
                                 this.$message({
                                  message: data.msg,
                                  type: 'success'
                                });
                                this.dialogFormVisible=false;
                                this.query();
                            }else{
                                this.$message({
                                    message:data.msg,
                                    typr: 'error'
                                });
                            }
                            
                           }).catch(err=>{
                            console.log(err); 
                           });
                      } else {
                        console.log('error submit!!');
                        return false;
                      }
                    });     
            },
            open:function(){
                this.student={
                    sname:'',
                    sage:'',
                    ssex:''
                }
                this.dialogFormVisible=true;
            },
            close:function(){
                this.$refs['student'].resetFields();
            }
        }
    }
</script>

<style>
</style>