珠海网站建设防,东莞人才市场现场招聘信息,鹰潭网站建设yt1983,wordpress 搜索 字母基于VueELement搭建动态树与数据表格实现分页 一、前言二、左侧动态树实现2.1.后台数据接口定义2.2.前端导航菜单绑定2.3.根据数据渲染页面 3.分页 一、前言 在上一篇博文我们搭建了首页导航和左侧菜单#xff0c;但是我们的左侧菜单是死数据今天我们就来把死的变成活的#… 基于VueELement搭建动态树与数据表格实现分页 一、前言二、左侧动态树实现2.1.后台数据接口定义2.2.前端导航菜单绑定2.3.根据数据渲染页面 3.分页 一、前言 在上一篇博文我们搭建了首页导航和左侧菜单但是我们的左侧菜单是死数据今天我们就来把死的变成活的并且完成右侧内容的书籍数据表格的展示与分页效果话不多说上代码 二、左侧动态树实现
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 {Autowiredprivate IModuleService moduleService;RequestMapping(/queryRootNode)ResponseBodypublic JsonResponseBodyListModule queryRootNode(){try {ListModule modules moduleService.queryRootNode(-1);return new JsonResponseBody(OK,true,0,modules);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody(初始化首页菜单错误,false,0,null);}}RequestMapping(/queryElementTree)ResponseBodypublic JsonResponseBodyListTreeNode queryElementTree(){try {ListTreeNode 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)ResponseBodypublic 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)ResponseBodypublic JsonResponseBodyListString queryModuleByRoleId(RoleModule roleModule){try {ListString 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
templateel-menu router :default-active$route.path default-active2 classel-menu-vertical-demo background-color#334157text-color#fff active-text-color#ffd04b :collapsecollapsed !-- el-menu default-active2 :collapsecollapsed collapse-transition router :default-active$route.path unique-opened classel-menu-vertical-demo background-color#334157 text-color#fff active-text-color#ffd04b --div classlogoboximg classlogoimg src../assets/img/logo.png alt/divel-submenu v-form in menus :indexidx_m.id :keyidx_m.idtemplate slottitlei :classm.icon/ispan{{m.text}}/span/templateel-menu-item v-form2 in m.modules :indexm2.url :keyidx_m2.idi :classm2.icon/ispan{{m2.text}}/span/el-menu-item/el-submenu!-- el-submenu index1template slottitlei classel-icon-location/ispan导航一/span/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-submenu/el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle导航二/span/el-menu-itemel-menu-item index3 disabledi classel-icon-document/ispan slottitle导航三/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle导航四/span/el-menu-item--/el-menu
/template
scriptexport default {data(){return{collapsed:false,menus:[]}},created() {this.$root.Bus.$on(aaa,v{this.collapsedv;});let urlthis.axios.urls.SYSTEM_USER_MENUS;this.axios.get(url,{}).then(r{console.log(r)this.menusr.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;}
/style2.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/TopNavimport login from /views/login
import register from /views/register
import AddBook from /views/book/AddBook
import BookList from /views/book/BookListVue.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中显示组件就需要加上
templateel-container classmain-containerel-aside v-bind:classasideClassLeftNav/LeftNav/el-asideel-containerel-header classmain-headerTopNav/TopNav/el-headerel-main classmain-centerrouter-view/router-view/el-main/el-container/el-container
/templatescript// 导入组件import TopNav from /components/TopNav.vueimport LeftNav from /components/LeftNav.vue// 导出模块export default {components: {TopNav,LeftNav},data() {return {asideClass: main-aside}},created(){this.$root.Bus.$on(aaa,r{this.asideClassr ? 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 {Autowiredprivate IBookService bookService;RequestMapping(/addBook)ResponseBodypublic 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)ResponseBodypublic 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)ResponseBodypublic 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)ResponseBodypublic JsonResponseBodyListBook queryBookPager(Book book, HttpServletRequest req){try {PageBean pageBeannew PageBean();pageBean.setRequest(req);ListBook 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)ResponseBodypublic JsonResponseBody? queryBookCharts(){try{MapString, Object charts bookService.queryBookCharts();return new JsonResponseBody(OK,true,0,charts);}catch (Exception e){e.printStackTrace();return new JsonResponseBody(查询统计分析数据失败,false,0,null);}}RequestMapping(/upload)ResponseBodypublic 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-Dispositionresponse.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);}}
}前台
templatediv classbooks stylepadding: 20px;el-form :inlinetrue classdemo-form-inlineel-form-item label书籍名称el-input v-modelbookname placeholder书籍名称/el-input/el-form-itemel-form-item/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-formel-table :datatableData stripe stylewidth: 100%el-table-column propid label书籍编号 width180/el-table-columnel-table-column propbookname label书籍名称 width180/el-table-columnel-table-column propprice label价格/el-table-columnel-table-column propbooktype label书籍类别/el-table-column/el-tablespan classdemonstration完整功能/spanel-pagination size-changehandleSizeChange current-changehandleCurrentChange:current-pagepage :page-sizes[10, 20, 30, 40] :page-sizerowslayouttotal, sizes, prev, pager, next, jumper :totaltotal/el-pagination/div/templatescriptexport 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.totalr.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({});}}
/scriptstyle
/style
