江门网站建设推广,公司的网站建设价格,沧县网络推广公司,湖北钟祥建设局网站目录 前言 一、动态树的实现 1.数据表 2.编写后端controller层 3.定义前端发送请求路径 4.前端左侧动态树的编写 4.1.发送请求获取数据 4.2.遍历左侧菜单 5.实现左侧菜单点击展示右边内容 5.1.定义组件 5.2.定义组件与路由的对应关系 5.3.渲染组件内容 5.4.通过动态…目录 前言 一、动态树的实现 1.数据表 2.编写后端controller层 3.定义前端发送请求路径 4.前端左侧动态树的编写 4.1.发送请求获取数据 4.2.遍历左侧菜单 5.实现左侧菜单点击展示右边内容 5.1.定义组件 5.2.定义组件与路由的对应关系 5.3.渲染组件内容 5.4.通过动态路由跳转为当前项内容 二、表格分页模糊查询的实现 1.数据表 2.后端分页模糊查询的实现 3.编写书籍管理请求路径 4.编写书籍管理前端 前言 在Element UI搭建首页导航和左侧菜单以及Mock.js和组件通信总线的运用博文中讲解了首页导航和左侧树形菜单的搭建今天我们将通过前后端结合将左侧菜单数据变活以及实现点击动态树右边展示相应内容。并实现对表格的分页模糊查询。 一、动态树的实现 后端mapper.xml,以及biz层都比较简单这里就不过多讲解了 1.数据表 2.编写后端controller层 package com.ctb.ssm.controller;import com.ctb.ssm.model.Module; import com.ctb.ssm.model.RoleModule; import com.ctb.ssm.model.TreeNode; import com.ctb.ssm.service.IModuleService; import com.ctb.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);}}}3.定义前端发送请求路径 api/action.js SYSTEM_MENUS: /module/queryRootNode, //左侧菜单 4.前端左侧动态树的编写 4.1.发送请求获取数据 let url this.axios.urls.SYSTEM_MENUS;this.axios.get(url, {}).then(r {console.log(r);this.menus r.data.rows;}).catch(e {}) 4.2.遍历左侧菜单 el-submenu v-form in menus :indexidx_m.id :keykey_m.idtemplate slottitlei classm.icon/ispan{{m.text}}/span/templateel-menu-item v-form2 in m.modules :indexm2.url :keykey_m2.idi classm2.icon/ispan{{m2.text}}/span/el-menu-item/el-submenu 效果展示 5.实现左侧菜单点击展示右边内容 先编写两个组件测试效果也为下面内容进行铺垫 5.1.定义组件 AddBook templateh1书籍新增/h1 /templatescript /scriptstyle /styleBookList templateh1书籍管理/h1 /templatescript /scriptstyle /style5.2.定义组件与路由的对应关系 import Vue from vue import Router from vue-router import HelloWorld from /components/HelloWorldimport 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}]}] })5.3.渲染组件内容 在AppMain.vue中心区域显示内容处改为以下内容 router-view/router-view 5.4.通过动态路由跳转为当前项内容 router :default-active$route.path 效果展示 二、表格分页模糊查询的实现 1.数据表 2.后端分页模糊查询的实现 这里也就只展示controller层了有需要的评论区留言或私聊 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);}} 3.编写书籍管理请求路径 SYSTEM_BookList: /book/queryBookPager, //书籍管理---分页模糊查询 4.编写书籍管理前端 BookList.vue templatediv classbooks stylepadding: 20px;!-- 1.搜索框 --el-form :inlinetrue classdemo-form-inlineel-form-item label书籍名称el-input v-modelbookname placeholder书籍名称/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit搜索/el-button/el-form-item/el-form!-- 2.数据表格 --el-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-table!-- 3.分页条 --div classblock stylepadding: 20px;el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepage:page-sizes[10, 20, 30, 40] :page-sizerows layouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div/div/templatescriptexport default {data() {return {bookname: ,tableData: [],rows:10,page:1,total:0}},methods: {// 定义一个查询的方法方便调用减少代码冗余query(params) {// 向后台请求数据的访问路径let url this.axios.urls.SYSTEM_BookList;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) { //当页大小发生变化// 输出查看console.log(当前页大小:r);let params {bookname: this.bookname,rows:r,page:this.page}// 调用查询方法this.query(params);},handleCurrentChange(p) { //当前页页码发生变化// 输出查看console.log(当前页码:p);let params {bookname: this.bookname,page:p,rows:this.rows}// 调用查询方法this.query(params);}},created() {// 调用查询方法this.query({});}} /scriptstyle /style效果展示