本文介绍了如何在Vue Spa项目中实现动态树形菜单、数据表格和分页功能。首先，从数据库获取数据，然后修改`config.properties`文件配置数据库连接。接着，详细讲解了`LeftAside.vue`、`Home.vue`、`index.js`和`BookList.vue`的代码实现，包括在`LeftAside.vue`中动态生成菜单，`Home.vue`的首页展示，`index.js`的路由配置，以及`BookList.vue`的数据表格和分页。最后展示了功能实现后的整体和模糊查询效果，并提醒开发者可以参考ElementUI官方文档来辅助开发。
Spa项目实现动态树+数据表格+分页
前言
今天为大家分享的功能是基于之前已经实现的功能上实现的，动态树和数据表格和分页的相关知识！
1、准备工作
前一篇博客首页的左侧菜单的实现是使用Mock.js模拟数据，以及完成功能的实现，今天分享的主要是用动态的方式完成，也就是需要用数据库和后台进行交互！
1.1、数据库表格
t_book_vue
#创建t_book_vue表
CREATE TABLE `t_book_vue` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`bookname` varchar(50) NOT NULL,
`price` float NOT NULL,
`booktype` varchar(40) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=34 DEFAULT CHARSET=utf8 COMMENT='书本信息表';
#给t_book_vue表格增加数据
insert into `t_book_vue`(`id`,`bookname`,`price`,`booktype`)
values (1,'西游记',100.02,'名著'),(2,'红楼梦',110.08,'名著'),(3,'三国演义',121.12,'名著'),(4,'遮天',130.9,'玄幻'),
(5,'凡人修仙传',200,'修仙'),(6,'倚天屠龙记',150.16,'武侠'),
(7,'斗破苍穹',115.07,'玄幻'),(8,'超级兵王',145,'言情'),
(9,'武极天下',45.55,'玄幻'),(10,'聊斋志异',100.12,'玄幻'),
(11,'永生',110.11,'玄幻'),(12,'武动乾坤',90.89,'玄幻'),
(13,'完美世界',100,'玄幻'),(14,'万域之王',56.5,'玄幻'),
(15,'西游记',100.02,'名著'),(16,'红楼梦',110.08,'名著'),
(17,'三国演义',121.12,'名著'),(18,'遮天',130.9,'玄幻'),
(19,'凡人修仙传',200,'修仙'),(20,'倚天屠龙记',150.16,'武侠'),
(21,'斗破苍穹',115.07,'玄幻'),(22,'超级兵王',145,'言情'),
(23,'武极天下',45.55,'玄幻'),(24,'聊斋志异',100.12,'玄幻'),
(25,'永生',110.11,'玄幻'),(26,'武动乾坤',90.89,'玄幻'),
(27,'完美世界',100,'玄幻'),(28,'万域之王',56.5,'玄幻'),
(32,'Java',1000,'修仙'),(33,'娃哈哈',100,'玄幻');
添加数据后的效果
t_module_vue
#创建t_module_vue表
CREATE TABLE `t_module_vue` (
`id` int(11) NOT NULL COMMENT '唯一标识',
`pid` int(11) NOT NULL COMMENT '父ID',
`text` varchar(50) NOT NULL,
`icon` varchar(30) DEFAULT NULL,
`url` varchar(50) DEFAULT NULL,
`sort` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
#给t_module_vue表增加数据
insert into `t_module_vue`(`id`,`pid`,`text`,`icon`,`url`,`sort`)
values (10,-1,'书本管理','el-icon-notebook-2','',1),
(11,-1,'订单管理','el-icon-s-order','',2),
(12,-1,'系统管理','el-icon-setting','',3),
(1001,10,'新增书本',NULL,'/book/AddBook',4),
(1002,10,'书本管理',NULL,'/book/BookList',5),
(1101,11,'订单管理','','/OrderList',6),
(1102,11,'订单统计',NULL,'/OrderStatistics',7),
(1201,12,'用户管理',NULL,'/UserManager',8),
(1202,12,'权限管理',NULL,'/AuthManager',10),
(1203,12,'字典管理',NULL,'/DictList',11);
添加数据后的效果
t_user_vue
#创建t_user_vue表
CREATE TABLE `t_user_vue` (
`id` varchar(36) NOT NULL COMMENT '唯一标识',
`username` varchar(40) NOT NULL COMMENT '登录账号',
`password` varchar(40) NOT NULL COMMENT '登录密码',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
# 给t_user_vue表增加数据
insert into `t_user_vue`(`id`,`username`,`password`) values (1,'张三','123');
insert into `t_user_vue`(`id`,`username`,`password`) values (2,'李四','456');
insert into `t_user_vue`(`id`,`username`,`password`) values (3,'王五','789');
添加数据后的效果
1.2、修改config.properties文件
因为我用的是mysql数据库，所以只需要修改mysql的相关内容，如果你用的是其他数据库，更改数据库相关内容就好！
1.3、配置action.js
/**
* 对后台请求的地址的封装，URL格式如下：
* 模块名_实体名_操作
*/
export default {
'SERVER':'http://localhost:8083/j2eeVue', //服务器
'SYSTEM_USER_DOLOGIN':'/userAction.action', //登陆
'SYSTEM_USER_DOREG': '/userAction.action', //注册
'SYSTEM_MODULE_TREENODE':'/moduleAction.action',//动态树
'BOOK_BOOKLIST':'/bookAction.action',//书本
'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
return this.SERVER + this[k];
}
}
mvc.xml
2、代码实现
2.1、LeftAside.vue
左侧动态树代码
<template>
<!-- 页面加载的时候动态树就要显示出来 -->
<el-menu router :default-active="$router.path" class="el-menu-vertical-demo" background-color="#334157"
text-color="#fff" active-text-color="#ffd04b" :collapse="leftCollapsed">
<div class="logobox">
<img class="logoimg" src="../assets/img/logo.png"/>
</div>
<el-menu-item index="/Home">
<i class="el-icon-s-home"></i>
<span slot="title">首页</span>
</el-menu-item>
<!--使用v-for指令进行遍历 -->
<el-submenu v-for="node in treeNodes"
:key="'key-'+node.id"
:index="'index-'+node.id">
<template slot="title">
<i :class="node.icon"></i>
<span>{{node.text}}</span>
</template>
<!--使用v-for指令进行遍历 -->
<el-menu-item v-for="node in node.children"
:key="'key-'+node.id"
:index="node.url">
<i :class="node.icon"></i>
<span slot="title">{{node.text}}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
name:'LeftAside',
props:['leftCollapsed'],
data:function(){
return{
treeNodes:[]
}
},
created:function(){
/* 使用let进行声明 避免数据污染 */
let params={
'methodName':'queryTreeNode'
};
let url=this.axios.urls.SYSTEM_MODULE_TREENODE;
this.axios.get(url,{
params:params,
}).then(resp=>{
this.treeNodes=resp.data.data;
console.log(this.treeNodes);
}).catch(resp=>{
});
//配置首页默认打开
this.$router.push('/Home');
}
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 240px;
min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
border: none;
text-align: left;
}
.el-menu-item-group__title {
padding: 0px;
}
.el-menu-bg {
background-color: #1f2d3d !important;
}
.el-menu {
border: none;
}
.logobox {
height: 40px;
line-height: 40px;
color: #9d9d9d;
font-size: 20px;
text-align: center;
padding: 20px 0px;
}
.logoimg {
height: 40px;
}
</style>
注意：要实现路由跳转，先要在el-menu标签上添加router属性， 然后只要在每个el-menu-item标签内 的index属性设置一下url即可实现点击el-menu-item实现路由跳转。
导航当前项，在el-menu标签中绑定
:default-active="$route.path"
注意是绑定属性，
不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。
2.2、Home.vue
首页代码
<template>
<div>
<h1>首页</h1>
</div>
</template>
<script>
export default{
data:function(){
return{
};
}
}
</script>
<style>
</style>
2.3、修改index.js
更改的位置
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Register from '@/views/Register'
import Main from '@/components/Main'
import LeftAside from '@/components/LeftAside'
import TopNav from '@/components/TopNav'
import Home from '@/views/Home'
import BookList from '@/views/Book/BookList'
Vue.use(Router)
export default new Router({
routes: [
{
path:'/HelloWorld',
name:'HelloWorld',
component: HelloWorld
},
{
path:'/',
name:'Login',
component: Login
},
{
path:'/Register',
name:'Register',
component:Register
},
{
path:'/Main',
name:'Main',
component:Main,
children:[
{
path:'/Home',
name:'Home',
component:Home
},
{
path:'/Book/BookList',
name:'BookList',
component:BookList
}
]
},
{
path:'/LeftAside',
name:'LeftAside',
component:LeftAside
},
{
path:'/TopNav',
name:'TopNav',
component:TopNav
}
]
})
头部部分引入路由
下面配置路由路径
2.4、BookList.vue
为了让方便之后查看代码，特意分包分模块！
<template>
<div>
<!-- 面包屑 -->
<el-breadcrumb separator="/" style="padding-top:15px;">
<el-breadcrumb-item :to="{path: '/Home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">书本管理</a></el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索栏-->
<el-form :inline="true" class="demo-form-inline" style="margin-top: 15px;">
<el-form-item label="书本名称">
<el-input v-model="bookname"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="query(1)">查询</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table :data="result" style="width: 100%;" :border="true" max-height="550">
<el-table-column prop="id" label="书本编号" min-width="40" align="center"></el-table-column>
<el-table-column prop="bookname" label="书本名称" min-width="40"></el-table-column>
<el-table-column prop="price" label="书本价格" min-width="40"></el-table-column>
<el-table-column prop="booktype" label="书本类型" min-width="40"></el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 30, 40]"
:page-size="rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default{
name:'BookList',
data:function(){
return{
bookname:null,
result:[],
total:0,
page:1,
rows:10
}
},
methods:{
query:function(page){
if(null!=page){
this.page=page;
}
let url=this.axios.urls.BOOK_BOOKLIST;
let params={
bookname:this.bookname,
methodName:'queryBookPager',
page:this.page,
rows:this.rows
};
/* post方式进行提交 */
this.axios.post(url,params).then(resp=>{
this.result=resp.data.data.rows;
this.total=resp.data.data.total;
}).catch(resp=>{});
},
//改变每页显示条数所出发的事件
handleSizeChange:function(rows){
this.rows=rows;
this.query(null);
},
handleCurrentChange:function(page){
console.log(page);
this.page=page;
this.query(null);
}
}
}
</script>
<style>
</style>
3、补充点
数据表格中全局索引的设置
<el-table-column :index="indexMethod" type="index"></el-table-column>
使用的方法
indexMethod:function(index){
return index*2;
最终效果
整体效果
模糊查询的效果
总结
Spa项目实现动态树以及数据表格和分页的功能，部分代码可以参考ElementUI官网的代码以及示例，当然还要多注意细节部分！
扫一扫
107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
