Vue + Element UI
先在上一期的文章基础上引入 element-ui 依赖
添加 Element-UI依赖
yarn add element-ui
在 main.js 中注册组件，并使用
选择引入布局
选择一个你喜欢的布局，然后粘贴代码到你的 App.vue 文件中（放入你想要的目标文件中即可）
启动前端项目，浏览器查看效果
现在呐，我们的菜单是写死的，并不符合我们的实际需求，因此我们需要修改为动态加载菜单
使用 Vue-router来动态构建左侧菜单
先来创建几个示例页面
这时我们来访问页面，会发现有个问题
当我们的访问路径是：http://localhost:8080/pageTwo 或者 http://localhost:8080/pageOne 时是没有问题的，但是当是 http://localhost:8080/ 时会出现嵌套页面App.vue
这是我们需要解决的地方
那么怎么解决这个问题呢？首先我们需要来分析一下 App.vue 文件
router-view 分析
我们当前的 应用程序是 spa 应用，原理就是在于这个 router-view。而这个和我们的 /src/router/index.js 相对应；当我们的访问路径是 / 时，路由视图会渲染如下页面：
而在 App.vue 文件中本身就是有内容的，这样就会出现嵌套了。
因此我们需要改变默认路由视图
编辑 /src/router/index.js 文件
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
|
const routes = [
{
path: '/',
name: '导航一',
component: App,
children: [
{
path: '/pageOne',
name: '页面一',
component: PageOne
},
{
path: '/pageTwo',
name: '页面二',
component: PageTwo
}
]
},
{
path: '/navigation',
name: '导航二',
component: App,
children: [
{
path: '/pageThree',
name: '页面三',
component: PageThree
},
{
path: '/pageFour',
name: '页面四',
component: PageFour
}
]
}
]
|
接着我们修改 App.vue 文件，因为我们不能将 侧边菜单栏写死啊，需要根据上面的路由动态生成菜单栏
因为我们需要遍历循环 /src/router/index.js 中的 routes 数组，所以通过上面的写法就可以实现了，同时菜单的名字也只能是动态获取 routes 数组里面的name属性了
但是现在又有一个问题了，就是上图显示的这两个导航同时会打开关闭，也就是没有给导航设置 index 属性值，所以我们就给他们设置一下index：
- 标签添加 router 属性
- 在页面中添加 标签，它是一个容器，可以动态渲染你选择的 router 。
- 标签的 index 就是要跳转的 router。
还有一个小问题就是：当地址栏是 /pageOne 时，菜单栏的 页面一 并没有出现选中的样式，这不符合我们的要求，如下修改：
有如上思路后，我们再修改代码：
页面一替换为我们要展示的数据
添加分页
https://element.eleme.cn/#/zh-CN/component/pagination，复制代码到页面一中
[注意：Vue 只允许有一个div 的根节点，因此如果有两个容器的话，必须包在一个div下]
1
2
3
4
5
6
7
8
9
10
|
<!-- 添加分页 -->
<el-pagination
background
layout="prev, pager, next"
page-size="5"
:total="50"
@current-change="page"
>
</el-pagination>
|
设置每页的大小，同时添加 触发方法 @current-change
后端实现分页查询
由于我们使用的是 JPA，而其提供了一个 findAll 的重载方法就是关于分页的
1
2
3
4
5
6
7
8
9
10
|
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
@GetMapping("/findAll/{page}/{size}")
public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){
Pageable pageable = PageRequest.of(page-1, size);
return bookRepository.findAll(pageable);
}
|
由于 Pageable 是一个接口，这里我们用其实现类的静态方法构造实例
添加数据
后端修改
JPA 已经封装了 save 方法，所以直接使用即可
1
2
3
4
5
|
@PostMapping("/save")
public Book save(@RequestBody Book book){ // 因为是post请求，所以需要使用 @RequestBody 注解将 json 数据转成 java对象
return bookRepository.save(book);
}
|
注意 @RequestBody 的作用
前端修改
从 element ui 官网上，查看 form 表单的使用
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
93
|
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="书名" prop="title">
<el-input v-model="ruleForm.title"></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 label="内容简介" prop="abs">
<el-input v-model="ruleForm.abs"></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>
</template>
<script>
export default {
name: "Add",
data() {
return {
ruleForm: {
title: '',
author: '',
abs: ''
},
rules: {
title: [
{ required: true, message: '请输入书名', trigger: 'blur' }
],
author: [
{ required: true, message: '请输入作者', trigger: 'blur' }
],
abs: [
{ required: true, message: '请输入内容简介', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
const _this = this;
this.$refs[formName].validate((valid) => {
if (valid) {
//
axios.post('http://localhost:8181/book/save', _this.ruleForm).then( (resp) => {
if (resp != null){
// _this.$message({
// message: '恭喜你，添加成功',
// type: 'success'
// });
_this.$alert('《' + _this.ruleForm.title + '》添加成功', '消息', {
confirmButtonText: '确定',
callback: action => {
// 添加成功后，我们让页面自动跳转到 查询列表页面
// 同时让 页面跳转到 查询列表界面
// 先获取当前 路由，然后 push 进你的跳转目标页面
_this.$router.push('/list')
}
});
_this.resetForm(formName);
// 添加成功后，我们让页面自动跳转到 查询列表页面
// 先获取 当前路由 对象，然后 push 进你跳转的目标页面 路由即可
// _this.$router.push('/list');
}else
this.$message.error('添加失败');
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
</style>
|
修改数据
新建修改组件
Update.vue
代码部分请参阅 https://github.com/latin-xiao-mao/springboot-vue-demo/tree/bookManage-crud-demo