接上一篇首页导航与左侧菜单的搭建，今天使用数据库数据实现
- 动态树
- 数据表格
- 分页
一、动态树
1.后台接口准备
数据库：
t_module_vue:
后台代码：
Dao类方法：
/**
* 根据父类id查询子类pid的数据（递归）
* @param pid
* @param mod
*/
public void queryModuleByPid(Integer pid,Module mod){
String sql="select id,pid,text,icon,url,sort from t_module_vue where"
+ " pid="+pid;
List<Module> lst=super.executeQuery(sql, null, new CallBack<Module>() {
@Override
public List<Module> forEach(ResultSet rs) throws SQLException {
List<Module> lst=new ArrayList<Module>();
Module node=null;
while(rs.next()) {
node=new Module();
int id=rs.getInt("id");
node.setId(id);
node.setPid(rs.getInt("pid"));
node.setText(rs.getString("text"));
node.setIcon(rs.getString("icon"));
node.setUrl(rs.getString("url"));
lst.add(node);
//此注释代表实现无限极分类,在此只实现了两级
//queryModuleByPid(id, root);
}
return lst;
}
});
mod.setChildren(lst);
}Action层：
public class ModuleAction extends DispatcherAction implements ModelDriver<Module> {
private Module mod=new Module();
private ModuleDao moduleDao=new ModuleDao();
private ObjectMapper mapper=new ObjectMapper();
@Override
public Module getModel() {
return mod;
}
public String queryTreeNode(HttpServletRequest req,HttpServletResponse resp)
throws ServletException,IOException{
List<Module> nodes = moduleDao.queryRootNode();
Map<String,Object> map=new HashMap<String,Object>();
map.put("data", nodes);
map.put("success", true);
map.put("msg", "OK");
mapper.writeValue(resp.getOutputStream(),map);
return null;
}
}2.前端
在api/action.js中定义后端接口路径
'INIT_MENU': '/moduleAction.action', //初始化左侧菜单
动态生成NavMenu导航菜单(只支持2级菜单)：
<template>
<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#334157"
text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
<div class="logobox">
<img class="logoimg" src="../assets/img/logo.png" alt="">
</div>
<!--
第一级节点el-submenu中的属性 含义
index:用于菜单折叠,唯一
key:唯一
第二级节点el-submenu中的属性含义
index:用于页面跳转,唯一
key:唯一
-->
<el-submenu v-for="root in intMue" :index="'id-'+root.id" :key="'key-'+root.id">
<template slot="title">
<i :class="root.icon"></i>
<span>{{root.text}}</span>
</template>
<!-- :index 的url 会以栈的形式存储 this.$router.push-->
<el-menu-item v-for="node in root.children" :index="node.url" :key="'key-'+node.id">
<i :class="node.icon"></i>
<span slot="title">{{node.text}}</span>
</el-menu-item>
</el-submenu>
</template>
<script>
export default {
name:'LeftAside',
props:['collapsed'],
data:function(){
return{
intMue:[]
}
},
methods:{
},
//钩子函数，一进主页就获取数据
created:function(){
let url=this.axios.urls.INIT_MENU;
this.axios.get(url,{params:{methodName:'queryTreeNode'}}).then(resp=>{
let data=resp.data.data;
// console.log(data);
this.intMue=data;
}).catch(error=>{
console.log(error);
})
}
}
</script>效果：
3.页面跳转
el-menu组件实现路由跳转及当前项的设置
<el-menu router :default-active="$route.path">
<el-menu-item index="/company/userManager">用户管理</el-menu-item>注1：要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。
创建页面，配置路由，配置到主页面Main中：
//书本新增
import AddBook from '@/views/book/AddBook'
//书本列表
import BookList from '@/views/book/BookList'children:[
{
path: '/book/AddBook',
name: 'AddBook',
component: AddBook
},{
path: '/book/BookList',
name: 'BookList',
component: BookList
}
]二、数据表格
在api/action.js中定义后端接口路径
'QUERY_BOOK': '/bookAction.action', //书本管理接口
1.面包屑
<!-- 1)面包屑，路径导航 -->
<el-breadcrumb style="font-size:16px;" separator-class="el-icon-arrow-right">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>书本列表</el-breadcrumb-item>
</el-breadcrumb>2.搜索栏
<!-- 2）搜索栏 -->
<el-form :inline="true" style="margin-top:15px;margin-bottom:-15px;">
<el-form-item label="书本名称">
<el-input v-model="bookname" placeholder="书本名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="query(1)">查询</el-button>
</el-form-item>
</el-form>3.表格
<!-- 3）数据表格 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="编号">
</el-table-column>
<el-table-column prop="bookname" label="书本名称" width="180">
</el-table-column>
<el-table-column prop="price" label="书本价格">
</el-table-column>
</el-table-column>
<el-table-column prop="booktype" label="书本类型">
</el-table-column>
</el-table>
初始数据：
export default{
name:'BookList',
data:function(){
return{
bookname:'',
tableData:[],
page:1,
rows:10,
total:0
}
},定义方法：
query:function(p){
this.page=p;
//定义请求路径
let url=this.axios.urls.BOOK_MANAGER;
//定义请求参数
let params={
methodName:'queryBookPager',
bookname:this.bookname,
page:p,
rows:this.rows
};
//发起ajax请求
this.axios.post(url,params).then(resp=>{
let data=resp.data;
console.log(data);
this.total=data.data.total;
this.tableData=data.data.rows;
}).catch(err=>{
console.log(err);
});
}注2：导航当前项，在el-menu标签中绑定 :default-active="$route.path",注意是绑定属性，不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。
注3：后台t_tree_node表有几个节点的url为空，则会导致几个节点样式会一致
三、分页
分页栏：
<!-- 4）分页栏 -->
<el-pagination background style="margin-top:15px;"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[rows,10, 20, 30, 40]"
:page-size="rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
参数说明：
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| small | 是否使用小型分页样式 | boolean | — | false |
| background | 是否为分页按钮添加背景色 | boolean | — | false |
| page-size | 每页显示条目个数，支持 .sync 修饰符 | number | — | 10 |
| total | 总条目数 | number | — | — |
| page-count | 总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | Number | — | — |
| pager-count | 页码按钮的数量，当总页数超过该值时会折叠 | number | 大于等于 5 且小于等于 21 的奇数 | 7 |
| current-page | 当前页数，支持 .sync 修饰符 | number | — | 1 |
| layout | 组件布局，子组件名用逗号分隔 | String | sizes, prev, pager, next, jumper, ->, total, slot | 'prev, pager, next, jumper, ->, total' |
| page-sizes | 每页显示个数选择器的选项设置 | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | 每页显示个数选择器的下拉框类名 | string | — | — |
| prev-text | 替代图标显示的上一页文字 | string | — | — |
| next-text | 替代图标显示的下一页文字 | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| hide-on-single-page | 只有一页时是否隐藏 | boolean | — | - |
事件说明：
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| size-change | pageSize 改变时会触发 | 每页条数 |
| current-change | currentPage 改变时会触发 | 当前页 |
| prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
| next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
方法：
methods:{
//每页显示条数的改变事件
handleSizeChange:function(r){
console.log(r);
this.rows=r;
//this.page=1;
this.query(1);
},
//当前页码的改变事件
handleCurrentChange:function(p){
console.log(p);
//this.page=p;
this.query(p);
}效果：
博主水平有限，难免有错。欢迎评论交流
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
