1.导航菜单
1.1.后台数据接口定义
ModuleMapper.xml
部分代码实现如下:
<resultMap id="BaseResultMap" type="com.zking.ssm.model.Module" >
<id column="id" jdbcType="INTEGER" property="id" />
<result column="pid" jdbcType="INTEGER" property="pid" />
<result column="text" jdbcType="VARCHAR" property="text" />
<result column="icon" jdbcType="VARCHAR" property="icon" />
<result column="url" jdbcType="VARCHAR" property="url" />
<result column="sort" jdbcType="INTEGER" property="sort" />
<collection property="modules" ofType="com.zking.ssm.model.Module"
column="id" select="queryChildNodeByPid"/>
</resultMap>
<sql id="Base_Column_List" >
id, pid, text, icon, url, sort
</sql>
<!--先根据id查询菜单根级目录,再利用上次查询结果collection中column的值id作为递归查询条件,查出所有子菜单,返回结果必须为resultMap,并且值为上面构建的resultMap的id值-->
<select id="queryChildNodeByPid" resultMap="BaseResultMap" parameterType="int">
select <include refid="Base_Column_List"/> from t_module_vue
where pid=#{value}
</select>
1.2.前端导航菜单绑定
导航菜单样式
<el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo"
background-color="#334157" text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed"
>
<div class="logobox">
<img class="logoimg" src="../assets/img/logo.png" alt="">
</div>
<el-submenu v-for = "m in menus"
:index="'index_'+m.id" :key="'key_'+m.id">
<template slot="title">
<i :class="m.icon"></i>
<span>{{m.text}}</span>
</template>
<el-menu-item v-for="m2 in m.modules"
:index="m2.url" :key="'key_'+m2.id">
<i :class="m2.icon"></i>
<span>{{m2.text}}</span>
</el-menu-item>
</el-submenu>
</el-menu>
事件定义
<script>
export default {
data() {
return {
collapsed: false,
menus: []
}
},
created() {
this.$root.BUS.$on('doCollapsed', v => {
this.collapsed = v;
});
// 往后台发送axios请求,获取菜单数据
let url = this.axios.urls.SYSTEM_MENU;
this.axios.get(url,{}).then(resp=>{
alert(url);
console.log(resp);
this.menus = resp.data.rows;
}).catch(err=>{
});
}
}
</script>
效果展示
2.数据表格
搜索栏定义
<el-table :data="tableData" stripe style="width: 100%;">
<el-table-column prop="id" label="书籍编号" width="180%">
</el-table-column>
<el-table-column prop="name" label="书籍名称" width="180%">
</el-table-column>
<el-table-column prop="price" label="价格" width="180%">
</el-table-column>
<el-table-column prop="booktype" label="书籍类别" width="180%">
</el-table-column>
</el-table>
查询事件定义
query(params){
// 通用查询方法
let url = this.axios.urls.BOOK_LIST;
this.axios.get(url,{params: params}).then(resp=>{
console.log(resp);
this.tableData = resp.data.rows;
this.total = resp.data.total;
}).catch(error=>{
})
}
效果展示
3.分页查询
样式
<el-pagination
@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>
查询事件定义
query(params){
// 通用查询方法
let url = this.axios.urls.BOOK_LIST;
this.axios.get(url,{params: params}).then(resp=>{
console.log(resp);
this.tableData = resp.data.rows;
this.total = resp.data.total;
}).catch(error=>{
})
},
onSubmit(){
// 搜索方法
let params = {
bookname: this.bookname
}
this.query(params);
},
handleSizeChange(r){
console.log('当前展示的记录数为' + r + '条');
let params = {
bookname: this.bookname,
page: this.page,
rows: r
}
this.query(params);
},
handleCurrentChange(p){
console.log('当前为第'+ p + '页');
let params = {
bookname: this.bookname,
page: p,
rows: this.rows
}
this.query(params);
}
效果展示