一、前言
在上一篇博文我们搭建了首页导航和左侧菜单，但是我们的左侧菜单是死数据今天我们就来把死的变成活的，并且完成右侧内容的书籍数据表格的展示与分页效果，话不多说上代码！
二、左侧动态树实现
2.1.后台数据接口定义
package com.zking.ssm.controller; import com.zking.ssm.model.Module; import com.zking.ssm.model.RoleModule; import com.zking.ssm.model.TreeNode; import com.zking.ssm.service.IModuleService; import com.zking.ssm.util.JsonResponseBody; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.List; @Controller @RequestMapping("/module") public class ModuleController { @Autowired private IModuleService moduleService; @RequestMapping("/queryRootNode") @ResponseBody public JsonResponseBody<List<Module>> queryRootNode(){ try { List<Module> modules = moduleService.queryRootNode(-1); return new JsonResponseBody<>("OK",true,0,modules); } catch (Exception e) { e.printStackTrace(); return new JsonResponseBody<>("初始化首页菜单错误",false,0,null); } } @RequestMapping("/queryElementTree") @ResponseBody public JsonResponseBody<List<TreeNode>> queryElementTree(){ try { List<TreeNode> modules = moduleService.queryTreeNode(-1); return new JsonResponseBody<>("OK",true,0,modules); } catch (Exception e) { e.printStackTrace(); return new JsonResponseBody<>("初始化ElementUI的Tree组件错误",false,0,null); } } @RequestMapping("/addRoleModule") @ResponseBody public JsonResponseBody<?> addRoleModule(RoleModule roleModule){ try { moduleService.addRoleModule(roleModule); return new JsonResponseBody<>("新增角色权限成功",true,0,null); } catch (Exception e) { e.printStackTrace(); return new JsonResponseBody<>("新增角色权限失败",false,0,null); } } @RequestMapping("/queryModuleByRoleId") @ResponseBody public JsonResponseBody<List<String>> queryModuleByRoleId(RoleModule roleModule){ try { List<String> modules = moduleService.queryModuleByRoleId(roleModule); return new JsonResponseBody<>("OK",true,0,modules); } catch (Exception e) { e.printStackTrace(); return new JsonResponseBody<>("获取角色权限失败",false,0,null); } } }
2.2.前端导航菜单绑定
api
/** * 对后台请求的地址的封装，URL格式如下： * 模块名_实体名_操作 */ export default { 'SERVER': 'http://localhost:8080/', //服务器 'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆 'SYSTEM_USER_DOREG': '/user/userRegister', //注册 'SYSTEM_USER_MENUS': '/module/queryRootNode', //左侧 'BOOK_LIST': '/book/queryBookPager', //书籍列表 'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用 return this.SERVER + this[k]; } }
LeftNav
<template> <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" > <!-- <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 v-for="m in menus" :index="'idx_'+m.id" :key="'idx_'+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="'idx_'+m2.id"> <i :class="m2.icon"></i> <span>{{m2.text}}</span> </el-menu-item> </el-submenu> <!-- <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> --> </el-menu> </template> <script> export default { data(){ return{ collapsed:false, menus:[] } }, created() { this.$root.Bus.$on('aaa',v=>{ this.collapsed=v; }); let url=this.axios.urls.SYSTEM_USER_MENUS; this.axios.get(url,{}).then(r=>{ console.log(r) this.menus=r.data.rows; }).catch(e=>{ }) } } </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>
2.3.根据数据渲染页面
1.配置路由与路由路径的关系
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import AppMain from '@/components/AppMain' import LeftNav from '@/components/LeftNav' import TopNav from '@/components/TopNav' import login from '@/views/login' import register from '@/views/register' import AddBook from '@/views/book/AddBook' import BookList from '@/views/book/BookList' Vue.use(Router) export default new Router({ routes: [{ path: '/', name: 'login', component: login }, { path: '/register', name: 'register', component: register }, { path: '/AppMain', name: 'AppMain', component: AppMain, children: [{ path: '/LeftNav', name: 'LeftNav', component: LeftNav }, { path: '/TopNav', name: 'TopNav', component: TopNav }, { path: '/book/AddBook', name: 'AddBook', component: AddBook }, { path: '/book/BookList', name: 'BookList', component: BookList }] }] })
在AppMain.js中显示组件就需要加上
<template> <el-container class="main-container"> <el-aside v-bind:class="asideClass"> <LeftNav></LeftNav> </el-aside> <el-container> <el-header class="main-header"> <TopNav></TopNav> </el-header> <el-main class="main-center"> <router-view></router-view> </el-main> </el-container> </el-container> </template> <script> // 导入组件 import TopNav from '@/components/TopNav.vue' import LeftNav from '@/components/LeftNav.vue' // 导出模块 export default { components: { TopNav,LeftNav },data() { return { asideClass: "main-aside" } }, created(){ this.$root.Bus.$on('aaa',r=>{ this.asideClass=r ? 'main-aside-collapsed':'main-aside'; }); } }; </script> <style scoped> .main-container { height: 100%; width: 100%; box-sizing: border-box; } .main-aside-collapsed { /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */ width: 64px !important; height: 100%; background-color: #334157; margin: 0px; } .main-aside { width: 240px !important; height: 100%; background-color: #334157; margin: 0px; } .main-header, .main-center { padding: 0px; border-left: 2px solid #333; } </style>
3.分页
后台
package com.zking.ssm.controller; import com.zking.ssm.model.Book; import com.zking.ssm.service.IBookService; import com.zking.ssm.util.JsonResponseBody; import com.zking.ssm.util.PageBean; import com.zking.ssm.vo.BookFileVo; import org.apache.commons.io.IOUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import java.io.OutputStream; import java.net.URLEncoder; import java.util.List; import java.util.Map; @Controller @RequestMapping("/book") public class BookController { @Autowired private IBookService bookService; @RequestMapping("/addBook") @ResponseBody public JsonResponseBody<?> addBook(Book book){ try { bookService.insert(book); return new JsonResponseBody<>("新增书本成功",true,0,null); } catch (Exception e) { e.printStackTrace(); return new JsonResponseBody<>("新增书本失败",false,0,null); } } @RequestMapping("/editBook") @ResponseBody public JsonResponseBody<?> editBook(Book book){ try { bookService.updateByPrimaryKey(book); return new JsonResponseBody<>("编辑书本成功",true,0,null); } catch (Exception e) { e.printStackTrace(); return new JsonResponseBody<>("编辑书本失败",false,0,null); } } @RequestMapping("/delBook") @ResponseBody public JsonResponseBody<?> delBook(Book book){ try { bookService.deleteByPrimaryKey(book.getId()); return new JsonResponseBody<>("删除书本成功",true,0,null); } catch (Exception e) { e.printStackTrace(); return new JsonResponseBody<>("删除书本失败",false,0,null); } } @RequestMapping("/queryBookPager") @ResponseBody public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){ try { PageBean pageBean=new PageBean(); pageBean.setRequest(req); List<Book> books = bookService.queryBookPager(book, pageBean); return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books); } catch (Exception e) { e.printStackTrace(); return new JsonResponseBody<>("分页查询书本失败",false,0,null); } } @RequestMapping("/queryBookCharts") @ResponseBody public JsonResponseBody<?> queryBookCharts(){ try{ Map<String, Object> charts = bookService.queryBookCharts(); return new JsonResponseBody<>("OK",true,0,charts); }catch (Exception e){ e.printStackTrace(); return new JsonResponseBody<>("查询统计分析数据失败",false,0,null); } } @RequestMapping("/upload") @ResponseBody public JsonResponseBody<?> upload(BookFileVo bookFileVo){ try { MultipartFile bookFile = bookFileVo.getBookFile(); System.out.println(bookFileVo); System.out.println(bookFile.getContentType()); System.out.println(bookFile.getOriginalFilename()); return new JsonResponseBody<>("上传成功",true,0,null); } catch (Exception e) { e.printStackTrace(); return new JsonResponseBody<>("上传失败",false,0,null); } } @RequestMapping("/download") public void download(HttpServletRequest request, HttpServletResponse response){ try { String relativePath = "uploads/1.jpg"; String absolutePath = request.getRealPath(relativePath); InputStream is = new FileInputStream(new File(absolutePath)); OutputStream out = response.getOutputStream(); response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8")); byte[] by = new byte[1024]; int len = -1; while (-1 != (len = is.read(by))) { out.write(by); } is.close(); out.close(); } catch (Exception e) { e.printStackTrace(); } } @RequestMapping("/downloadUrl") public void downloadUrl(HttpServletRequest request, HttpServletResponse response){ String relativePath = "uploads/1.jpg"; String absolutePath = request.getRealPath(relativePath); InputStream is = null; OutputStream out = null; try { is = new FileInputStream(new File(absolutePath)); // 设置Content-Disposition response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8")); out = response.getOutputStream(); IOUtils.copy(is, out); response.flushBuffer(); System.out.println("完成"); } catch (Exception e) { e.printStackTrace(); } finally { IOUtils.closeQuietly(is); IOUtils.closeQuietly(out); } } }
前台
<template> <div class="books" style="padding: 20px;"> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="书籍名称"> <el-input v-model="bookname" placeholder="书籍名称"></el-input> </el-form-item> <el-form-item> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> </el-form-item> </el-form> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="id" label="书籍编号" width="180"> </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 prop="booktype" label="书籍类别"> </el-table-column> </el-table> <span class="demonstration">完整功能</span> <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> </div> </template> <script> export default { data() { return { bookname: '', tableData: [], rows:10, total:0, page:1, } }, methods: { query(params) { let url = this.axios.urls.BOOK_LIST; this.axios.get(url, { params: params }).then(r => { console.log(r) this.tableData = r.data.rows; this.total=r.data.total; }).catch(e => { }) }, onSubmit() { let params = { bookname: this.bookname } this.query(params); }, handleSizeChange(r){ let params = { bookname: this.bookname, rows:r, page:this.page } this.query(params); }, handleCurrentChange(p){ let params = { bookname: this.bookname, rows:this.rows, page:p } this.query(params); } }, created() { this.query({}); } } </script> <style> </style>
