电子商务网站设计与开发,海口最新新闻消息,建设行业网站大概需要都少钱,网站开发实习生目录
前言
一. ElementUI动态树
二. 数据表格和分页
三. 后端代码 service层
controller层 前言
在上一篇博客中实现了左侧菜单栏#xff0c;在此基础上将它变为动态的#xff0c;即动态的展示数据库的数据。还有数据表格的实现以及分页。#xff08;纯代码分享#…目录
前言
一. ElementUI动态树
二. 数据表格和分页
三. 后端代码 service层
controller层 前言
在上一篇博客中实现了左侧菜单栏在此基础上将它变为动态的即动态的展示数据库的数据。还有数据表格的实现以及分页。纯代码分享
ElementUI官网https://element.eleme.cn/#/zh-CN/component/pagination
一. ElementUI动态树
LeftNav.vue
templateel-menu router :default-active$route.path default-active2 classel-menu-vertical-demo background-color#334157 text-color#fffactive-text-color#ffd04b :collapsecollapseddiv classlogoboximg classlogoimg src../assets/img/logo.png alt/divel-submenu v-form in menus :indexidx_m.id :keykeym.idtemplate slottitlei :classm.icon/ispan{{m.text}}/span/templateel-menu-item v-form2 in m.modules :indexm2.url :keykeym2.idi :classm2.icon/ispan{{m2.text}}/span/el-menu-item/el-submenu/el-menu
/template
scriptexport default {data() {return {collapsed: false,menus: []}},created() {this.$root.Bus.$on(aaa, v {this.collapsed v});let url this.axios.urls.SYSTEM_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;}
/styleindex.js
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/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}]}]
})action.js
/*** 对后台请求的地址的封装URL格式如下* 模块名_实体名_操作*/
export default {SERVER: http://localhost:8080, //服务器SYSTEM_USER_DOLOGIN: /user/userLogin, //登陆SYSTEM_USER_DOREG: /user/userRegister, //注册SYSTEM_MENUS: /module/queryRootNode, //左侧菜单树getFullPath: k { //获得请求的完整地址用于mockjs测试时使用return this.SERVER this[k];}
}展示效果 二. 数据表格和分页 BookList.vue
templatediv classbooks stylepadding: 20px;!-- 搜索框 --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!-- 数据表格 --templateel-table:datatableDataborderstylewidth: 100%el-table-columnpropidlabel编号width180/el-table-columnel-table-columnpropbooknamelabel书籍名称width180/el-table-columnel-table-columnproppricelabel书籍价格/el-table-columnel-table-columnpropbooktypelabel书籍类别/el-table-column/el-table/template!-- 分页 --div classblockel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagepage:page-sizes[10, 20, 30, 40]:page-sizerowslayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div/div
/templatescriptexport default {data() {return {bookname:,tableData:[],page:1,rows:10,total:0}},methods:{// 当前页大小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);},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);}},created() {this.query({});}}
/scriptstyle
/styleaction.js BOOK_LIST: /book/queryBookPager, //数据表格 展示效果 三. 后端代码 service层
IModuleService
package com.zking.ssm.service;import com.zking.ssm.model.Module;
import com.zking.ssm.model.RoleModule;
import com.zking.ssm.model.TreeNode;
import com.zking.ssm.vo.RoleModuleVo;
import org.springframework.stereotype.Repository;import java.util.List;public interface IModuleService {ListModule queryRootNode(Integer id);ListTreeNode queryTreeNode(Integer id);int addRoleModule(RoleModule roleModule);ListString queryModuleByRoleId(RoleModule roleModule);
}
ModuleServiceImpl
package com.zking.ssm.service.impl;import com.zking.ssm.mapper.ModuleMapper;
import com.zking.ssm.mapper.RoleModuleMapper;
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.vo.RoleModuleVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;Service
public class ModuleServiceImpl implements IModuleService {Autowiredprivate ModuleMapper moduleMapper;Autowiredprivate RoleModuleMapper roleModuleMapper;Overridepublic ListModule queryRootNode(Integer id) {return moduleMapper.queryChildNodeByPid(id);}Overridepublic ListTreeNode queryTreeNode(Integer id) {return moduleMapper.queryTreeNodeByPid(id);}Overridepublic int addRoleModule(RoleModule roleModule) {roleModuleMapper.deleteRoleModule(roleModule);roleModuleMapper.insertRoleModule(roleModule);return 1;}Overridepublic ListString queryModuleByRoleId(RoleModule roleModule) {return roleModuleMapper.queryModuleByRoleId(roleModule);}
}IBookService
package com.zking.ssm.service;import com.zking.ssm.model.Book;
import com.zking.ssm.util.PageBean;import java.util.List;
import java.util.Map;public interface IBookService {int deleteByPrimaryKey(Integer id);int insert(Book record);Book selectByPrimaryKey(Integer id);int updateByPrimaryKey(Book record);ListBook queryBookPager(Book book, PageBean pageBean);MapString,Object queryBookCharts();
}BookServiceImpl
package com.zking.ssm.service.impl;import com.zking.ssm.mapper.BookMapper;
import com.zking.ssm.model.Book;
import com.zking.ssm.service.IBookService;
import com.zking.ssm.util.PageBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;
import java.util.Map;Service
public class BookServiceImpl implements IBookService {Autowiredprivate BookMapper bookMapper;Overridepublic int deleteByPrimaryKey(Integer id) {return bookMapper.deleteByPrimaryKey(id);}Overridepublic int insert(Book record) {return bookMapper.insert(record);}Overridepublic Book selectByPrimaryKey(Integer id) {return bookMapper.selectByPrimaryKey(id);}Overridepublic int updateByPrimaryKey(Book record) {return bookMapper.updateByPrimaryKey(record);}Overridepublic ListBook queryBookPager(Book book, PageBean pageBean) {return bookMapper.queryBookPager(book);}Overridepublic MapString, Object queryBookCharts() {return bookMapper.queryBookCharts();}
}controller层
ModuleController
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);}}
}BookController
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);}}
}
