springboot整合vue04-前后端数据交互
1.分页列表
打开elementui官网，地址：https://element.eleme.cn/#/zh-CN
找一个看顺眼的列表拷贝代码到vue工程；
然后找一个看顺眼的分页组件，拷贝代码到vue工程；
后台提供一个分页接口
@RestController @RequestMapping("/book") public class BookController { @Autowired private BookRepository books; @GetMapping("/query/{page}/{size}") public Page<Book> query(@PathVariable("page")Integer page, @PathVariable("size")Integer size ){ //封装一个分页对象 PageRequest pageRequest = PageRequest.of(page, size); //findAll的重载方法，传入一个PageRequest对象，返回一个Page对象 return books.findAll(pageRequest); } }
前端用axios做get请求分页接口
需要在created事件中请求；
<template>
<div>
<!--列表-->
<el-table
:data="books"
border
style="width: 100%">
<el-table-column
fixed
prop="id"
label="编号"
width="120">
</el-table-column>
<el-table-column
prop="name"
label="书名"
width="150">
</el-table-column>
<el-table-column
prop="author"
label="作者"
width="120">
</el-table-column>
<el-table-column
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
background
:page-size="pageSize"
layout="prev, pager, next"
@current-change="page"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
name:'PageOne',
methods: {
handleClick(row) {
console.log(row);
},
page(currentPage){
const _this = this;
axios.get("http://localhost:8090/book/query/"+(currentPage - 1)+"/5").then(function (resp) {
_this.books=resp.data.content;
_this.total=resp.data.totalElements;
_this.pageSize=resp.data.size;
})
}
},
data() {
return {
books: [{
id: '1',
name: '他改变了季汉',
author: '诸葛村夫',
}, {
id: '2',
name: '历史选择了曹老板',
author: '王司徒',
}, {
id: '3',
name: '刘黄书最后的革命',
author: '小懿子',
}],
pageSize:'1',
total:'10',
}
},
created(){
const _this = this;
axios.get("http://localhost:8090/book/query/0/5").then(function (resp) {
_this.books=resp.data.content;
_this.total=resp.data.totalElements;
_this.pageSize=resp.data.size;
})
}
}
</script>
页面效果：
2.新增数据
在elementui官网找一个合适的表单，拷贝代码到vue工程，根据需要修改
后台增加一个插入数据的web接口：
@Autowired private BookRepository books; @RequestMapping("/add") public String add(@RequestBody Book book){ Book res = books.save(book); if(res != null){ return "success"; }else{ return "error"; } }
然后在vue工程中调用后台接口：
<template>
<div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="书名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="ruleForm.author"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name:'PageTwo',
data() {
return {
ruleForm: {
name: '',
author: ''
},
rules: {
name: [
{ required: true, message: '请输入书名', trigger: 'blur' },
{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
],
author: [
{ required: true, message: '请输入作者', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
const _this = this; //取vue对象
this.$refs[formName].validate((valid) => {
if (valid) {
//ajax请求
axios.post("http://localhost:8090/book/add", this.ruleForm).then(function (resp) {
if(resp.data == 'success'){
_this.$router.push("/p1"); //添加成功跳到列表页
}else{
alert("error");
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
3.编辑数据
需要先跳到详情页面，然后编辑，因此需要前端提供一个详情页面；
需要后端提供两个接口分别用来通过该id查询、保存编辑；
1）后端接口：
//通过id查询 @GetMapping("/get/{id}") public Book get(@PathVariable("id")Integer id){ return books.findById(id).get(); } //编辑 @RequestMapping("/edit") public String edit(@RequestBody Book book){ Book res = books.save(book); if(res != null){ return "success"; }else{ return "error"; } }
2）跳转到编辑页面
点击编辑按钮，要跳到编辑页面，并且将当前行的id传过去，用来通过id请求后台获取详情数据；
编辑按钮：
<template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button> <el-button @click="toEdit(scope.row)" type="text" size="small">编辑</el-button> </template>
分析拷贝过来的列表代码，可以看出来：<template slot-scope="scope">标签下可以用scope.row取到当前行的信息；
用click事件绑定toEdit方法，传入的参数为列表的row；
得到了row，就能通过row.id取到当前行的id；
在method中添加一个toEdit方法用来跳转到编辑页面：
toEdit(row){ //跳转到编辑页，并且将选中行的id传过去
this.$router.push({
path:'/p3',
query:{
id:row.id
}
})
}
这里是用$router.push跳到编辑页的路由，需要在router目录下给编辑页面配置路由；
3）编辑页面
这个页面和新增数据页面类似，可以直接拷贝代码过去，适当修改即可；
需要在created事件中接收传过来的id，并且请求后台得到数据然后填到表单中；
可以用$route.query来得到传过来的参数；（一般$route用来取参数，而$router用来做跳转）
created(){
const _this = this;
var id = this.$route.query.id;
if(id > 0){
axios.get("http://localhost:8090/book/get/" + id).then(function (resp) {
_this.ruleForm = resp.data;
})
}
}
做完表单填充后，还需要做保存编辑；
包括几个步骤：
一个ajax提交表单，请求后台的编辑接口；
保存成功后调回分页列表；
methods: {
submitForm(formName) {
const _this = this; //取vue对象
this.$refs[formName].validate((valid) => {
if (valid) {
//ajax请求
axios.post("http://localhost:8090/book/edit", this.ruleForm).then(function (resp) {
if(resp.data == 'success'){
_this.$router.push("/p1"); //添加成功跳到列表页
}else{
alert("error");
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
4.删除
1）后台提供一个删除接口：
@GetMapping("/del/{id}")
public void delete(@PathVariable("id")Integer id){
books.deleteById(id);
}
2）前端
给列表的删除操作绑定一个delete方法；
通过scope.row可以去到目标行的id；
然后用id做参数用axios请求后台；
删除完成后刷新列表；
为了防止误删，可以加一个提示弹框；
在elementui中找一个好看的弹框，将代码拷过来；
主要代码：
del(row){
const _this = this;
_this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.get("http://localhost:8090/book/del/"+row.id).then(function (resp) {
_this.$message({
type: 'success',
message: '删除成功!'
});
window.location.reload(); //刷新页面
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
浙公网安备 33010602011771号