1.对Poem表进行删除,插入,修改操作
首先编写PoetMapper接口,定义相关数据库操作,PoetMapper接口具体代码如下:
@Mapper
public interface PoetMapper {
@Select("select * from poet")
public List<Poet> selectall();
@Insert("insert into poet values(#{id},#{name},#{gender},#{dynasty},#{title},#{style})")
public boolean insert(Poet poet);
@Select("select * from poet where id=#{id}")
public List<Poet> selectpart(short id);
@Update("update poet set name=#{name},gender=#{gender},dynasty=#{dynasty},title=#{title},style=#{style} where id=#{id}")
public boolean update(Poet poet);
@Delete("delete from poet where id=#{id}")
public boolean delete(short id);
}
编写service事务接口:
public interface PoetService {
public List<Poet> Sselectall();
public boolean Sinsert(Poet poet);
public List<Poet> Sselectpart(short id);
public boolean Supdate(Poet poet);
public boolean Sdelete(short id);
}
service具体实现类:
@Service
public class PoetServiceA implements PoetService {
@Autowired
PoetMapper poetMapper;
@Override
public List<Poet> Sselectall() {
return poetMapper.selectall();
}
@Override
public boolean Sinsert(Poet poet) {
boolean result = poetMapper.insert(poet);
return result;
}
@Override
public boolean Supdate(Poet poet) {
return poetMapper.update(poet);
}
@Override
public boolean Sdelete(short id) {
return poetMapper.delete(id);
}
@Override
public List<Poet> Sselectpart(short id) {
return poetMapper.selectpart(id);
}
}
controller类 具体代码如下,其中对于插入操作和更新操作的接口采用json格式进行传参,利用Poet类进行传参;对于查询部分的操作采用路径参数传递参数的方法。
@RestController
public class PoetController {
@Autowired
PoetService poetService;
@RequestMapping("/PoetSelect")
public Result selectall(){
return Result.success(poetService.Sselectall());
}
@RequestMapping("/PoetInsert")
public Result insert(@RequestBody Poet poet){
boolean result =poetService.Sinsert(poet);
if(result) {
return Result.success();
} else {
return Result.erro();
}
}
@RequestMapping("/PoetUpdate")
public Result update(@RequestBody Poet poet){
boolean r=poetService.Supdate(poet);
if(r){
return Result.success();
}
else {
return Result.erro();
}
}
@RequestMapping("/PoetDelete")
public Result delete( short id){
boolean r=poetService.Sdelete(id);
if(r){
return Result.success();
}
else{
return Result.erro();
}
}
@RequestMapping("/PoetSelectpart/{id}")
public Result selectpart(@PathVariable short id){
return Result.success(poetService.Sselectpart(id));
}
}
在postman中测试路径能否传递参数,测试成功:
1.删除操作的具体前端代码
编写poem.html页面,首先实现数据的删除操作,先在数据库中添加几条数据,以便实现删除操作。
poet.html的具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./element-ui/index.js"></script>
</head>
<body>
<h1 style="text-align: center">诗人信息列表</h1>
<div id="app" align="center">
<a href="poet-insert.html" style="text-align: center">新增信息</a>
<template>
<el-table
:data="poetList"
stripe
style="width: 100%">
<el-table-column
prop="id"
label="序号"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="gender"
label="性别">
</el-table-column>
<el-table-column
prop="dynasty"
label="朝代">
</el-table-column>
<el-table-column
prop="title"
label="称号">
</el-table-column>
<el-table-column
prop="style"
label="风格">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope" >
<a :href="'poet-update.html?id='+scope.row.id">修改</a>
<button type="button" v-on:click="deletee(scope.row.id)">删除</button>
</template>
</el-table-column>
</el-table>
</template>
</div>
</body>
<script>
new Vue({
el: "#app",
data() {
return {
poetList: []
}
},
methods:{
selectall:function(){
var this_=this;
axios.post('/PoetSelect',{}).then(function(response){
this_.poetList=response.data.data;
})
.catch(function(error){
console.log(error);
})
},
deletee:function (id){
var this_=this;
if(window.confirm("您确定要删除这条数据吗?")){
axios.post('/PoetDelete?id='+id).then(function(response){
alert("删除成功!")
this_.selectall();
})
.catch(function(error){
console.error("删除失败",error);
})
}
}
},
mounted() {
axios.get('/PoetSelect').then(res => {
if (res.data.statusCode) {
this.poetList = res.data.data;
}
}
)
}
})
</script>
</html>
2.插入操作的具体前端代码
编写一个新的页面poet-insert.html,实现点击新增操作能够将数据插入表格中。poet-insert.html页面中主要为表单元素,通过v-model实现双向数据绑定,表单元素的改变能够实现poet对象中数据的修改。在点击了“新增”按钮后能将数据提交给数据表,需要在按钮上绑定点击事件,实现点击后将数据都传递到data中的poet中,通过axios异步post传递操作将poet对象传递给接口“/PoetInsert”实现插入接口,同时判断操作成功后location.href将页面回跳到poet.html页面,如果操作失败则将错误的描述输出到控制台。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./element-ui/index.js"></script>
</head>
<body>
<div id="app" style=" display: flex;
justify-content: center;
align-items: center">
<table>
<tr>
<td>ID</td>
<td>
<input type="text" v-model="poet.id">
</td>
</tr>
<tr>
<td>
姓名:
</td>
<td>
<input type="text" v-model="poet.name">
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input type="radio" name="gender" v-model="poet.gender" value="1">男
<input type="radio" name="gender" v-model="poet.gender" value="2">女
</td>
</tr>
<tr>
<td>
朝代:
</td>
<td>
<input type="text" v-model="poet.dynasty">
</td>
</tr>
<tr>
<td>
头衔:
</td>
<td>
<input type="text" v-model="poet.title">
</td>
</tr>
<tr>
<td>
风格:
</td>
<td>
<input type="text" v-model="poet.style">
</td>
</tr>
<tr>
<td>
<input type="button" @click="addpoet" value="增加">
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
poet:{
"id":"",
"name":"",
"gender":"",
"dynasty":"",
"title":"",
"style":""
}
},
methods:{
addpoet:function (){
axios.post('/PoetInsert',this.poet).then(r=>{
if(r.data.statusCode==1){
location.href='poet.html';
}
else{
alert(r.data.message);
}
}).catch(error=>{
console.error(error);
})
}
}
})
</script>
</html>
3.修改操作的具体前端代码
修改操作的主要操作过程是首先将表单数据与poet对象双向绑定,便于将修改后的数据存储在poet对象中。created钩子将修改的数据的id号存储在本页面的数据id中,同时调用selectpart方法,传入id的具体值调用”PoetSelectpart“接口将修改前的数据传递给poet对象。需要注意的是this.poet=r.data.data语句将poet对象变成了一个json数组,如果直接传递给poetupdate方法会出现failed to load resource: the server responded with a status of 400 ()的错误,前后端参数不一致。对于后端需要的参数是poet对象,而前端传递的是数组。需要将r.data.data数组中的第一个json数据赋值给this.poet,才能成功传递参数实现修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./element-ui/index.js"></script>
</head>
<body>
<div id="app" style=" display: flex;
justify-content: center;
align-items: center">
<table>
<tr>
<td>ID</td>
<td>
<input type="text" v-model="this.id">
</td>
</tr>
<tr>
<td>
姓名:
</td>
<td>
<input type="text" v-model="poet.name">
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input type="radio" name="gender" v-model="poet.gender" value="1">男
<input type="radio" name="gender" v-model="poet.gender" value="2">女
</td>
</tr>
<tr>
<td>
朝代:
</td>
<td>
<input type="text" v-model="poet.dynasty">
</td>
</tr>
<tr>
<td>
头衔:
</td>
<td>
<input type="text" v-model="poet.title">
</td>
</tr>
<tr>
<td>
风格:
</td>
<td>
<input type="text" v-model="poet.style">
</td>
</tr>
<tr>
<td>
<input type="button" @click="updatepoet" value="修改">
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
poet:{},
id:''
},
methods:{
selectpart:function (){
axios.get(`/PoetSelectpart/${this.id}`).then(r=>{
if(r.data.statusCode==1){
if (Array.isArray(r.data.data) && r.data.data.length > 0) {
this.poet = r.data.data[0];
} else {
this.poet = {};
}
}
else{
console.log(r.data.message);
}
}).catch(er=>{
console.error(er);
})
},
updatepoet:function (){
axios({ method: 'put',
url: '/PoetUpdate',
data: JSON.stringify(this.poet),
headers: {
'Content-Type': 'application/json'
} }).then(r=>{
if(r.data.statusCode==1){
location.href='poet.html';
}
else{
alert(r.data.message);
}
}).catch(e=>{
console.error(e);
})
}
},
created(){
this.id=location.href.split("?id=")[1]
this.selectpart();
}
})
</script>
</html>
修改前的数据:
修改页面:
修改后的页面:
2.新建表格进行增删查改
1.在数据库中新建表格student
2.编写对应的实体类Student、利用Mybatis编写Mapper接口对数据库中的数据进行操作
Student.class内容如下:
package com.liuxiaocan.springbootmybatis.data;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Student {
private String Sno;
private String Sname;
private Integer Ssex;
private String Stelephone;
private String Saddress;
}
StudentMapper接口的代码如下:
@Mapper
public interface StudentMapper {
@Select("select * from student")
public List<Student> SelectAllStudent();
@Update("update student set Sname=#{Sname},Ssex=#{Ssex},Stelephone=#{Stelephone},Saddress=#{Saddress} where Sno=#{Sno}")
public boolean UpdateStudent( Student student);
@Select("select * from student where Sno=#{Sno}")
public List<Student> SelectPartStudent(String Sno);
@Delete("delete from student where Sno=#{Sno}")
public boolean DeleteStudent(String Sno);
@Insert("insert into student values(#{Sno},#{Sname},#{Ssex},#{Stelephone},#{Saddress})")
public boolean InsertStudent( Student student);
}
3.编写service业务层接口和实现类
StudentService接口代码如下:
public interface StudentService {
public List<Student> SelectAllService();
public List<Student> SelectPartService(String Sno);
public boolean InsertService(Student student);
public boolean UpdateService(Student student);
public boolean DeleteService(String Sno);
}
StudentServiceA.class具体实现类代码如下:
@Service
public class StudentServiceA implements StudentService {
@Autowired
StudentMapper studentMapper;
@Override
public List<Student> SelectAllService() {
return studentMapper.SelectAllStudent();
}
@Override
public List<Student> SelectPartService(String Sno){
return studentMapper.SelectPartStudent(Sno);
}
@Override
public boolean InsertService(Student student) {
return studentMapper.InsertStudent(student);
}
@Override
public boolean UpdateService(Student student) {
return studentMapper.UpdateStudent(student);
}
@Override
public boolean DeleteService(String Sno) {
return studentMapper.DeleteStudent(Sno);
}
}
4.编写Controller层
StudentController类如下:
@RestController
public class StudentController {
@Autowired
StudentService studentService;
@RequestMapping("/SelectAllStudent")
public Result SelectAll(){
return Result.success(studentService.SelectAllService());
}
@RequestMapping("/SelectPartStudent/{Sno}")
public Result SelectPart(@PathVariable String Sno){
return Result.success(studentService.SelectPartService(Sno));
}
@RequestMapping("/InsertStudent")
public Result Insert(@RequestBody Student student){
boolean r=studentService.InsertService(student);
if(r){
return Result.success();
}
else{
return Result.erro();
}
}
@RequestMapping("/UpdateStudent")
public Result Update(@RequestBody Student student){
boolean r=studentService.UpdateService(student);
if(r){
return Result.success();
}
else{
return Result.erro();
}
}
@RequestMapping("/DeleteStudent/{Sno}")
public Result Delete(@PathVariable String Sno){
boolean r=studentService.DeleteService(Sno);
if(r){
return Result.success();
}
else{
return Result.erro();
}
}
}
5.学生信息显示页面Student.html
3.分页功能实现代码
不依赖于后端代码的分页实现功能,只需要将获取数据的数组进行截取即可。关键代码:slice((currentPage-1)*pageSize,currentPage*pageSize)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./element-ui/index.js"></script>
</head>
<body>
<h1 style="text-align: center">诗人信息表</h1>
<div id="fenye">
<el-table
:data="PoetList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%">
<el-table-column
label="ID"
prop="id">
</el-table-column>
<el-table-column
label="姓名"
prop="name">
</el-table-column>
<el-table-column
label="性别"
prop="gender">
</el-table-column>
<el-table-column
label="朝代"
prop="dynasty">
</el-table-column>
<el-table-column
label="头衔"
prop="title">
</el-table-column>
<el-table-column
label="风格"
prop="style">
</el-table-column>
<el-table-column
align="操作">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="sizes, prev, pager, next"
:total=PoetList.length>
</el-pagination>
</div>
<script>
new Vue({
el:"#fenye",
data(){
return {
search: '',
PoetList: [],
currentPage: 1,// 当前页码
pageSize:5
}
},
methods: {
handleEdit(index, row) {
},
handleDelete(index, row) {
console.log(index, row);
},
handleSizeChange(val) {
this.pageSize=val;
},
handleCurrentChange(val) {
this.currentPage =val;
}
},
mounted(){
axios.get('/PoetSelect').then(r=>{
if(r.data.statusCode==1){
this.PoetList=r.data.data;
}
})
}
})
</script>
</body>
</html>