• 使用ElementUI结合Vue完善主页的导航菜单和书籍管理的后台数据分页查询


    目录

    一、动态树

    ( 1 )  数据表

    ( 2 )  后端

    ( 2 )  前端

    二、书籍管理

    数据表

    后端

    前端


    ElementUI的背景

    是一套基于Vue.js的桌面端组件库,由饿了么前端团队开发维护。它提供了丰富的UI组件和交互效果,可以帮助开发者快速构建出美观、易用的Web应用程序。ElementUI的背景可以追溯到2016年,当时饿了么团队正在开发一款新的后台管理系统,他们发现市面上缺乏一款符合他们需求的组件库,于是决定自己开发一套。经过两年的不断迭代和完善,ElementUI已经成为了Vue.js生态圈中非常受欢迎的组件库之一。

    一、动态树

    以下的全部内容基于上篇博客的代码进行继续编写 : 使用ElementUI结合Mock完成主页

    ( 1 )  数据表

    数据表的创建及数据添加

    表结构

    表数据

    ( 2 )  后端

    在自动生成的名为 : ModuleMapper.xml 配置文件中编写动态SQL

    1. <select id="queryChildNodeByPid" resultMap="BaseResultMap" parameterType="int">
    2. select <include refid="Base_Column_List"/> from t_module_vue
    3. where pid=#{value}
    4. select>

    在自动生成的接口 ModuleMapper 编写查询的方法

     List queryChildNodeByPid(Integer id);

    并且在自己为菜单创建的接口里进行编写方法之后,再到实现类里面进行重新。

    在控制器中编写访问方法的地址 名为:ModuleController

    1. package com.zking.ssm.controller;
    2. import com.zking.ssm.model.Module;
    3. import com.zking.ssm.model.RoleModule;
    4. import com.zking.ssm.model.TreeNode;
    5. import com.zking.ssm.service.IModuleService;
    6. import com.zking.ssm.util.JsonResponseBody;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.stereotype.Controller;
    9. import org.springframework.web.bind.annotation.RequestMapping;
    10. import org.springframework.web.bind.annotation.ResponseBody;
    11. import java.util.List;
    12. @Controller
    13. @RequestMapping("/module")
    14. public class ModuleController {
    15. @Autowired
    16. private IModuleService moduleService;
    17. @RequestMapping("/queryRootNode")
    18. @ResponseBody
    19. public JsonResponseBody> queryRootNode(){
    20. try {
    21. List modules = moduleService.queryRootNode(-1);
    22. return new JsonResponseBody<>("OK",true,0,modules);
    23. } catch (Exception e) {
    24. e.printStackTrace();
    25. return new JsonResponseBody<>("初始化首页菜单错误",false,0,null);
    26. }
    27. }
    28. }

    ( 2 )  前端

    在src/api目录下增加action.js的地址配置:

    1. /**
    2. * 对后台请求的地址的封装,URL格式如下:
    3. * 模块名_实体名_操作
    4. */
    5. export default {
    6. 'SERVER': 'http://localhost:8080/ssm', //服务器地址
    7. 'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆请求
    8. 'SYSTEM_USER_DOREG': '/user/userRegister', //注册请求
    9. 'SYSTEM_MENU': '/module/queryRootNode', //左侧菜单导航数据请求
    10. 'SYSTEM_BookList': '/book/queryBookPager', //书籍的后端数据请求
    11. 'getFullPath': k => { //获得请求的完整地址,用于mockjs测试时使用
    12. return this.SERVER + this[k];
    13. }
    14. }

    AppMain.vue的组件代码中修改<template>标签中的代码

    1. <template>
    2. <el-container class="main-container">
    3. <el-aside v-bind:class="asideClass">
    4. <LeftNav>LeftNav>
    5. el-aside>
    6. <el-container>
    7. <el-header class="main-header">
    8. <TopNav>TopNav>
    9. el-header>
    10. <el-main class="main-center">
    11. <router-view>router-view>
    12. el-main>
    13. el-container>
    14. el-container>
    15. template>

    LeftNav.vue编写组件中的代码

    1. <template>
    2. <el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
    3. active-text-color="#ffd04b" :collapse="collapsed">
    4. <div class="logobox">
    5. <img class="logoimg" src="../assets/img/logo.png" alt="">
    6. div>
    7. <el-submenu v-for="m in menus" :index="'idx'+m.id" :key="'key'+m.id">
    8. <template slot="title">
    9. <i :class="m.icon">i>
    10. <span>{{m.text}}span>
    11. template>
    12. <el-menu-item v-for="n in m.modules" :index="n.url" :key="'key'+n.id">
    13. <i :class="n.icon">i>
    14. <span>{{n.text}}span>
    15. el-menu-item>
    16. el-submenu>
    17. el-menu>
    18. template>
    19. <script>
    20. export default {
    21. data() {
    22. return {
    23. collapsed: false,
    24. menus:[]
    25. }
    26. },
    27. created() {
    28. this.$root.bus.$on('shrink', t => {
    29. this.collapsed = t;
    30. });
    31. //获取后台请求数据的地址
    32. let url = this.axios.urls.SYSTEM_MENU;
    33. this.axios.get(url, {}).then(d => {
    34. console.log(d)
    35. this.menus=d.data.rows;
    36. }).catch(e => {});
    37. }
    38. }
    39. script>
    40. <style>
    41. .el-menu-vertical-demo:not(.el-menu--collapse) {
    42. width: 240px;
    43. min-height: 400px;
    44. }
    45. .el-menu-vertical-demo:not(.el-menu--collapse) {
    46. border: none;
    47. text-align: left;
    48. }
    49. .el-menu-item-group__title {
    50. padding: 0px;
    51. }
    52. .el-menu-bg {
    53. background-color: #1f2d3d !important;
    54. }
    55. .el-menu {
    56. border: none;
    57. }
    58. .logobox {
    59. height: 40px;
    60. line-height: 40px;
    61. color: #9d9d9d;
    62. font-size: 20px;
    63. text-align: center;
    64. padding: 20px 0px;
    65. }
    66. .logoimg {
    67. height: 40px;
    68. }
    69. style>

    在src/views目录中创建book文件的创建以下两个组件:

    AddBook.vue

    1. <template>
    2. <h1>书籍的新增h1>
    3. template>
    4. <script>
    5. script>
    6. <style>
    7. style>

     BookList.vue

    1. <template>
    2. <h1>书籍的数据h1>
    3. template>
    4. <script>
    5. script>
    6. <style>
    7. style>

    在src/router目录中的index.js下配置路径:

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from '@/components/HelloWorld'
    4. import AppMain from '@/components/AppMain'
    5. import TopNav from '@/components/TopNav'
    6. import LeftNav from '@/components/LeftNav'
    7. import Home from '@/views/Home'
    8. import About from '@/views/About'
    9. import AboutMe from '@/views/AboutMe'
    10. import AboutMeaning from '@/views/AboutMeaning'
    11. import Login from '@/views/Login'
    12. import Register from '@/views/Register'
    13. import AddBook from '@/views/book/AddBook'
    14. import BookList from '@/views/book/BookList'
    15. Vue.use(Router)
    16. export default new Router({
    17. routes: [{
    18. path: '/',
    19. name: 'Login',
    20. component: Login
    21. },
    22. {
    23. path: '/Register',
    24. name: 'Register',
    25. component: Register
    26. },
    27. {
    28. path: '/AppMain',
    29. name: 'AppMain',
    30. component: AppMain,
    31. children: [{
    32. path: '/TopNav',
    33. name: 'TopNav',
    34. component: TopNav
    35. }, {
    36. path: '/LeftNav',
    37. name: 'LeftNav',
    38. component: LeftNav
    39. },{
    40. path: '/book/AddBook',
    41. name: 'AddBook',
    42. component: AddBook
    43. }, {
    44. path: '/book/BookList',
    45. name: 'BookList',
    46. component: BookList
    47. }]
    48. }
    49. // {
    50. // path: '/',
    51. // name: 'Home',
    52. // component: Home
    53. // },
    54. // {
    55. // path: '/Home',
    56. // name: 'Home',
    57. // component: Home
    58. // },
    59. // {
    60. // path: '/About',
    61. // name: 'About',
    62. // component: About,
    63. // children:[{
    64. // path: '/',
    65. // name: 'AboutMe',
    66. // component: AboutMe
    67. // },{
    68. // path: '/AboutMe',
    69. // name: 'AboutMe',
    70. // component: AboutMe
    71. // },{
    72. // path: '/AboutMeaning',
    73. // name: 'AboutMeaning',
    74. // component: AboutMeaning
    75. // }]
    76. // }
    77. ]
    78. })

    开启前端和后端项目的服务进行访问

    效果如图 : 

    二、书籍管理

    数据表

    表结构

    后端

    在书籍对象的控制器中配置方法访问路径

    1. package com.zking.ssm.controller;
    2. import com.zking.ssm.model.Book;
    3. import com.zking.ssm.service.IBookService;
    4. import com.zking.ssm.util.JsonResponseBody;
    5. import com.zking.ssm.util.PageBean;
    6. import com.zking.ssm.vo.BookFileVo;
    7. import org.apache.commons.io.IOUtils;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.stereotype.Controller;
    10. import org.springframework.web.bind.annotation.RequestMapping;
    11. import org.springframework.web.bind.annotation.ResponseBody;
    12. import org.springframework.web.multipart.MultipartFile;
    13. import javax.servlet.http.HttpServletRequest;
    14. import javax.servlet.http.HttpServletResponse;
    15. import java.io.File;
    16. import java.io.FileInputStream;
    17. import java.io.InputStream;
    18. import java.io.OutputStream;
    19. import java.net.URLEncoder;
    20. import java.util.List;
    21. import java.util.Map;
    22. @Controller
    23. @RequestMapping("/book")
    24. public class BookController {
    25. @Autowired
    26. private IBookService bookService;
    27. @RequestMapping("/queryBookPager")
    28. @ResponseBody
    29. public JsonResponseBody> queryBookPager(Book book, HttpServletRequest req){
    30. try {
    31. PageBean pageBean=new PageBean();
    32. pageBean.setRequest(req);
    33. System.out.println(req.getRequestURL());
    34. System.out.println(book);
    35. List books = bookService.queryBookPager(book, pageBean);
    36. return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
    37. } catch (Exception e) {
    38. e.printStackTrace();
    39. return new JsonResponseBody<>("分页查询书本失败",false,0,null);
    40. }
    41. }
    42. }

    前端

    在名为 : BookList.vue 的组件中编写

    1. <template>
    2. <div class="Book" style="padding: 30px;">
    3. <el-form :inline="true" class="demo-form-inline">
    4. <el-form-item label="书籍名称 : ">
    5. <el-input v-model="bookname" placeholder="书籍名称">el-input>
    6. el-form-item>
    7. <el-form-item>
    8. <el-button type="primary" plain @click="onSubmit">查询el-button>
    9. el-form-item>
    10. el-form>
    11. <el-table :data="tableData" style="width: 100%">
    12. <el-table-column prop="id" label="书籍ID">el-table-column>
    13. <el-table-column prop="bookname" label="书籍名称">el-table-column>
    14. <el-table-column prop="price" label="书籍价格">el-table-column>
    15. <el-table-column prop="booktype" label="书籍类型">el-table-column>
    16. el-table>
    17. <div class="block" style="padding: 20px;">
    18. <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
    19. background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
    20. :total="total">
    21. el-pagination>
    22. div>
    23. div>
    24. template>
    25. <script>
    26. export default {
    27. data() {
    28. return {
    29. bookname: '',
    30. tableData: [],
    31. rows: 10,
    32. total: 0,
    33. page: 1
    34. }
    35. },
    36. methods: {
    37. handleSizeChange(r) {
    38. //当页大小发生变化
    39. let params = {
    40. bookname: this.bookname,
    41. rows: r,
    42. page: this.page
    43. }
    44. // console.log(params)
    45. this.query(params);
    46. },
    47. handleCurrentChange(p) {
    48. //当前页码大小发生变化
    49. let params = {
    50. bookname: this.bookname,
    51. rows: this.rows,
    52. page: p
    53. }
    54. // console.log(params)
    55. this.query(params);
    56. },
    57. query(params) {
    58. //获取后台请求书籍数据的地址
    59. let url = this.axios.urls.SYSTEM_BookList;
    60. this.axios.get(url, {
    61. params: params
    62. }).then(d => {
    63. console.log(url)
    64. this.tableData = d.data.rows;
    65. this.total = d.data.total;
    66. }).catch(e => {});
    67. },
    68. onSubmit() {
    69. let params = {
    70. bookname: this.bookname
    71. }
    72. console.log(params)
    73. this.query(params);
    74. this.bookname = ''
    75. }
    76. },
    77. created() {
    78. this.query({})
    79. }
    80. }
    81. script>
    82. <style>
    83. style>

    开启前端和后端项目的服务进行访问

    查询效果:

    分页效果:

  • 相关阅读:
    pip 离线到内网安装包
    Go中原生http服务的实现方式
    黑马JVM总结(九)
    Qt拖拽文件到窗口、快捷方式打开
    理解整型在内存中的存储
    深度学习项目:火灾烟雾监测【附完整源码】
    MySQL中如何处理重复数据(Duplicate)?
    周报 | 24.6.3-24.6.9文章汇总
    第二十二 查询、检索、搜索
    [LeetCode周赛复盘] 第 311 场周赛20220918
  • 原文地址:https://blog.csdn.net/SAME_LOVE/article/details/133321011