• ElementUI之动态树及书籍的分页查询

    目录

    一.前言

    二.Element之动态树

            2.1 后台

       2.2 前台

    三. 动态表格--书籍的分页查询

    一.前言

            本文章是继上篇的案例之上教大家如何使用ElementUI去实现动态树和书籍的分页查询，如果有不懂的大家可以翻看上篇的博客查看，其中的样式是ElementUI的官网提供的供的样式，ElementUI的官网链接放下方啦！！

            上一篇博客的链接：http://t.csdn.cn/zN1CEicon-default.png?t=N7T8http://t.csdn.cn/zN1CE

    Element - 网站快速成型工具icon-default.png?t=N7T8https://element.eleme.cn/#/zh-CN        Element UI 是一款基于 Vue.js 的桌面端组件库，提供了丰富的 UI 组件和交互效果，帮助开发者快速构建现代化的 Web 应用程序。

    二.Element之动态树

            2.1 后台

            写一个菜单栏查询的方法连接数据库

    1. @Controller
    2. @RequestMapping("/module")
    3. public class ModuleController {
    4.  
    5.     @Autowired
    6.     private IModuleService moduleService;
    7.  
    8.     @RequestMapping("/queryRootNode")
    9.     @ResponseBody
    10.     public JsonResponseBody> queryRootNode(){
    11.         try {
    12.             List modules = moduleService.queryRootNode(-1);
    13.             return new JsonResponseBody<>("OK",true,0,modules);
    14.         } catch (Exception e) {
    15.             e.printStackTrace();
    16.             return new JsonResponseBody<>("初始化首页菜单错误",false,0,null);
    17.         }
    18.     }
    19. }

                 以及写一个书籍分页查询的方法：

    1.     @RequestMapping("/queryBookPager")
    2.     @ResponseBody
    3.     public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
    4.         try {
    5.             PageBean pageBean=new PageBean();
    6.             pageBean.setRequest(req);
    7.             List<Book> books = bookService.queryBookPager(book, pageBean);
    8.             return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
    9.         } catch (Exception e) {
    10.             e.printStackTrace();
    11.             return new JsonResponseBody<>("分页查询书本失败",false,0,null);
    12.         }
    13.     }

     

       2.2 前台

              首先可以先去ElementUI官网copy左侧菜单栏的样式，然后 vue+element的el-menu组件实现路由跳转及当前项的设置，这个菜单栏是有二级菜单的，数据库已定义好，借助两个 v-for 循环，还定义了一个menus将数据放入里面循环遍历

           实现页面跳转需要添加：router :default-active="$route.path" 

    1.   <el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo" background-color="peachpuff" text-color="white"
    2.     active-text-color="orange" :collapse="collapsed">
    3.     <!-- <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"> -->
    4.     <div class="logobox">
    5.       <img class="logoimg" src="../assets/img/logo.png" alt="">
    6.     </div>
    7. <!-- 左侧菜单栏 -->
    8.       <el-submenu v-for="m in menus" :index="'idx_'+m.id" :key="'key_'+m.id">
    9.         <template slot="title">
    10.           <i :class="m.icon"></i>
    11.           <span>{{m.text}}</span>
    12.         </template>
    13.         <el-menu-item v-for="m2 in m.modules" :index="m2.url" :key="'key_'+m2.id">
    14.          <i :class="m2.icon"></i>
    15.          <span>{{m2.text}}</span>
    16.         </el-menu-item>
    17.       </el-submenu>
    18.  
    19.   </el-menu>

    路由路径的配置：                                                                                                              

    接着编写菜单栏中的JavaScript代码，组件的逻辑和业务逻辑。

    1. <script>
    2.   export default {
    3.     data() {
    4.       return {
    5.         collapsed: false,
    6.         menus:[]
    7.       }
    8.     },
    9.     created() {
    10.       this.$root.Bus.$on("aaa", v => {
    11.         this.collapsed = v;
    12.       });
    13.       // 获取路径
    14.       let url = this.axios.urls.SYSTEM_MENUS;
    15.       this.axios.get(url, {}).then(r => {
    16.         console.info(r);
    17.         //定义数据
    18.         this.menus=r.data.rows;
    19.       }).catch(e => {
    20.  
    21.       });
    22.     }
    23.   }
    24. </script>

    效果现在就是这样啦：它现在可以跳转，只是还没有新增其路径

    里面的书本管理还有两个子菜单，在定义两个组件，在组件里面先不写代码，我们就先写一个字段：

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

    然后配置路径在index.js里面：

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from '@/components/HelloWorld'
    4. import Login from '@/views/Login'
    5. import Register from '@/views/Register'
    6. import LeftNav from '@/components/LeftNav'
    7. import TopNav from '@/components/TopNav'
    8. import AppMain from '@/components/AppMain'
    9. import AddBook from '@/views/book/AddBook'
    10. import BookList from '@/views/book/BookList'
    11.  
    12.  
    13. Vue.use(Router)
    14.  
    15. export default new Router({
    16.   routes: [{
    17.       path: '/',
    18.       name: 'Login',
    19.       component: Login
    20.     },
    21.     {
    22.       path: '/Register',
    23.       name: 'Register',
    24.       component: Register
    25.     },
    26.     {
    27.       path: '/AppMain',
    28.       name: 'AppMain',
    29.       component: AppMain,
    30.       children: [{
    31.           path: '/LeftNav',
    32.           name: 'LeftNav',
    33.           component: LeftNav
    34.         },
    35.         {
    36.           path: '/TopNav',
    37.           name: 'TopNav',
    38.           component: TopNav
    39.         }, {
    40.           path: '/book/AddBook',
    41.           name: 'AddBook',
    42.           component: AddBook
    43.         },
    44.         {
    45.           path: '/book/BookList',
    46.           name: 'BookList',
    47.           component: BookList
    48.         }
    49.       ]
    50.     }
    51.   ]
    52. })

    现在来看一下效果吧：

    三. 动态表格--书籍的分页查询

            一样去ElementUI的官网copy表格，搜索框以及分页条的样式：在BookList.vue中

    1. <template>
    2.   <div class="books" style="padding: 20px;">
    3.     <!-- 1.搜索框 -->
    4.     <el-form :inline="true" class="demo-form-inline">
    5.       <el-form-item label="书籍名称">
    6.         <el-input v-model="bookname" placeholder="书籍名称"></el-input>
    7.       </el-form-item>
    8.       <el-form-item>
    9.         <el-button type="primary" @click="onSubmit">查询</el-button>
    10.       </el-form-item>
    11.     </el-form>
    12.     <!-- 2.表格 -->
    13.     <el-table :data="tableData" style="width: 100%">
    14.       <el-table-column prop="id" label="书籍ID" width="180">
    15.       </el-table-column>
    16.       <el-table-column prop="bookname" label="书籍名称" width="180">
    17.       </el-table-column>
    18.       <el-table-column prop="price" label="书籍价格" width="180">
    19.       </el-table-column>
    20.       <el-table-column prop="booktype" label="书籍类型" width="180">
    21.       </el-table-column>
    22.     </el-table>
    23.     <!-- 3.分页条 -->
    24.     <div class="block">
    25.       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
    26.         :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
    27.       </el-pagination>
    28.     </div>
    29.   </div>
    30. </template>

            定义后台分页查询的方法：

    1.     @RequestMapping("/queryBookPager")
    2.     @ResponseBody
    3.     public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
    4.         try {
    5.             PageBean pageBean=new PageBean();
    6.             pageBean.setRequest(req);
    7.             List<Book> books = bookService.queryBookPager(book, pageBean);
    8.             return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
    9.         } catch (Exception e) {
    10.             e.printStackTrace();
    11.             return new JsonResponseBody<>("分页查询书本失败",false,0,null);
    12.         }
    13.     }

    接着在前台获取接口：在action.js里面：

    'BOOK_LIST':'/book/queryBookPager',//表格的数据

    最后就是逻辑代码：

    最后看看效果吧！！

     

    今天的分享就到这啦！！ 

  • 相关阅读:
    远程登陆Ubuntu服务器anaconda的使用问题（多用户）
    aliyun Rest ful api V3版本身份验证构造
    WordPress主题开发（ 八）之—— 模板循环详细用法
    文档对象模型DOM
    Ansible概述和模块解释
    C++基础——运算符
    java计算机毕业设计专业主任排课系统源码+数据库+系统+lw文档+mybatis+运行部署
    （二）移植FreeRTOS到STM32中
    Ubuntu中安装OpenSSL
    微服务OR单体架构
  • 原文地址：https://blog.csdn.net/YZZdear/article/details/133312839