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事件中请求；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<
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工程中调用后台接口：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<
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请求后台获取详情数据；
编辑按钮：
|
1
2
3
4
|
<
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方法用来跳转到编辑页面：
|
1
2
3
4
5
6
7
8
|
toEdit(row){
//跳转到编辑页，并且将选中行的id传过去
this
.$router.push({
path:
'/p3'
,
query:{
id:row.id
}
})
}
|
这里是用$router.push跳到编辑页的路由，需要在router目录下给编辑页面配置路由；
3）编辑页面
这个页面和新增数据页面类似，可以直接拷贝代码过去，适当修改即可；
需要在created事件中接收传过来的id，并且请求后台得到数据然后填到表单中；
可以用$route.query来得到传过来的参数；（一般$route用来取参数，而$router用来做跳转）
|
1
2
3
4
5
6
7
8
9
|
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提交表单，请求后台的编辑接口；
保存成功后调回分页列表；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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中找一个好看的弹框，将代码拷过来；
主要代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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:
'已取消删除'
});
});
}
|