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',
//写页面
<!--1.搜索框 -->
<!--2.数据表格 -->
<!--3.弹出框 -->
//找到官网
Element - The world's most popular Vue UI framework
<template>
<div>
<h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
<!--1.搜索框 -->
<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>
<!--2.数据表格 -->
<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>
<!--3.弹出框 -->
<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>
<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: [],
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>