1：运行数据库脚本
2：导项目
3：修改maven地址
4：运行现在依赖
5：改application.yml(数据库名，密码)
6：改jdbc.properties((数据库名，密码)
7:generatorConfig.xml (改成自己mysql依赖的位置 )
8.运行项目是否报错
9：生成代码
10：mapper类加注解 @Repository
加注释/**/
干掉id的
11：复制xxxmapper改成xxxmapper,吧s改为大写，保留所需要的方法，其他的删除，一定要删掉注解@Repository

12：实现接口，放到方法名上alt+回车，下面叫impl,一定要加service注解
13：创建BookController接口，加注释@RestController
@RequestMapping("/book").........

1：建数据库建表

create table t_student(
sid int not null auto_increment primary key comment '学生编号',
sname varchar(50) not null comment '学生姓名',
score float default 0 comment '书本价格',
sex varchar(20) comment '学生性别'
) comment '学生成绩表';
insert into t_student(sname,score,sex) values
('张三',90,'男'),
('李四',120,'女'),
('王五',60,'男')

2：导项目

3：修改maven地址

5：改application.yml(数据库名，密码)
6：改jdbc.properties((数据库名，密码)
7:generatorConfig.xml (改成自己mysql依赖的位置 )

8.运行项目是否报错

9：生成代码

10：mapper类加注解 @Repository
加注释/**/
干掉id的

11：复制xxxmapper改成xxxmapper,吧s改为大写，保留所需要的方法，其他的删除，一定要删掉注解@Repository

12：实现接口，放到方法名上alt+回车，下面叫impl,一定要加service注解

@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentMapper studentMapper;

    @Override
    public List<Student> query(Student student) {
        return studentMapper.query(student);
    }

    @Override
    public int insert(Student record) {
        return studentMapper.insert(record);
    }

}

13：创建BookController接口，加注释@RestController
@RequestMapping("/book").........

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

    @Autowired
    private StudentService studentService;


    /**
     * 根据学生模糊查询
     * @param student
     * @return
     */
   @RequestMapping("/query")
    public JsonResponseBody<?> query(Student student){
        List<Student> list= studentService.query(student);
        return new JsonResponseBody<>(200,"OK",list);
    }

    /**
     * 根据学生新增
     * @param student
     * @return
     */
    @RequestMapping("/add")
    public JsonResponseBody<?> add(Student student){
       studentService.insert(student);
        return new JsonResponseBody<>();
    }


    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    class JsonResponseBody<T>{
        private int code=200;
        private String msg="OK";
        private T data;
    }

}

---

运行一下看有没有错比如运行http://localhost:8080/spboot/book/query

//配置好所定义的接口

'ADD':'/student/add',
 'QUERY':'/student/query',

//写页面

//找到官网

Element - The world's most popular Vue UI framework

<template>

SpringBoot阶段机试，ts={{ts}}

<el-form :inline="true"> <el-form-item label="学生姓名"> <el-input v-model="sname" placeholder="学生姓名"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="query">查询</el-button> <el-button type="primary" @click="open">新增</el-button> </el-form-item> </el-form> <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="score" label="成绩"> </el-table-column> <el-table-column prop="sex" label="学生性别"> </el-table-column> </el-table> <el-dialog title="新增" :visible.sync="dialogFormVisible" @close="close"> <el-form :model="student" :rules="rules" ref="student"> <el-form-item prop="sname" label="学生名称" :label-width="formLabelWidth"> <el-input v-model="student.sname" autocomplete="off"></el-input> </el-form-item> <el-form-item prop="score" label="学生成绩" :label-width="formLabelWidth"> <el-input v-model="student.score" autocomplete="off"></el-input> </el-form-item> <el-form-item prop="sex" label="学生性别" :label-width="formLabelWidth"> <el-select style="width: 100%" v-model="student.sex" placeholder="请选择学生性别"> <el-option label="男" value="男"></el-option> <el-option label="女" value="女"></el-option> <el-option label="妖" value="妖"></el-option> </el-select> </el-form-item> </el-form>

<el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="add">确 定</el-button>

</el-dialog>

</template> <script> export default { data: function() { return { ts: new Date().getTime(), sname: '', tableData: [], formLabelWidth: '90px', dialogFormVisible: false, student: { sname: '', score: '', sex: '' }, rules: { sname: [{ required: true, message: '请输入学生名称', trigger: 'blur' }, ], score: [{ required: true, message: '请输入学生成绩', trigger: 'blur' }, ], sex: [{ required: true, message: '请选择学生性别', trigger: 'change' }, ], } }; }, methods: { close: function() { //清空表单数据 this.student = { sname: '', score: '', sex: '' }; //清空表单验证 this.$refs['student'].resetFields(); }, add: function() { this.$refs['student'].validate((valid) => { if (valid) { //获取请求路径 let url = this.axios.urls.ADD; this.axios.post(url, this.student).then(resp => { let data = resp.data; if (data.code == 200) { //关闭对话框 this.dialogFormVisible = false; //刷新列表 this.query(); } else { this.$message.error(新增失败); } }).catch(err => { }); } else { console.log('error submit!!'); return false; } }); }, open: function() { this.dialogFormVisible = true; }, query: function() { //查询参数 let params = { sname: this.sname }; //请求路径 let url = this.axios.urls.QUERY; //3.发起请求 this.axios.post(url, params).then(resp => { let data = resp.data; console.log(data); this.tableData = data.data; }).catch(err => { }); } } } </script>

                 <style>
                 </style>