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

news2024/11/26 3:22:53

目录

一、动态树

( 1 )  数据表

( 2 )  后端

( 2 )  前端

二、书籍管理

数据表

后端

前端

ElementUI的背景

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

一、动态树

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

( 1 )  数据表

数据表的创建及数据添加

表结构

表数据

( 2 )  后端

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

  <!--先根据id查询菜单根级目录，再利用上次查询结果collection中column的值id作为递归查询条件，查出所有子菜单，返回结果必须为resultMap，并且值为上面构建的resultMap的id值-->
  <select id="queryChildNodeByPid" resultMap="BaseResultMap" parameterType="int">
    select <include refid="Base_Column_List"/> from t_module_vue
    where pid=#{value}
  </select>

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

 List<Module> queryChildNodeByPid(Integer id);

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

在控制器中编写访问方法的地址 名为: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 {

    @Autowired
    private IModuleService moduleService;

    @RequestMapping("/queryRootNode")
    @ResponseBody
    public JsonResponseBody<List<Module>> queryRootNode(){
        try {
            List<Module> modules = moduleService.queryRootNode(-1);
            return new JsonResponseBody<>("OK",true,0,modules);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("初始化首页菜单错误",false,0,null);
        }
    }

}

( 2 )  前端

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

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

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

<template>
  <el-container class="main-container">
    <el-aside v-bind:class="asideClass">
      <LeftNav></LeftNav>
    </el-aside>
    <el-container>
      <el-header class="main-header">
        <TopNav></TopNav>
      </el-header>
      <el-main class="main-center">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

LeftNav.vue编写组件中的代码

<template>
  <el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
    active-text-color="#ffd04b" :collapse="collapsed">
    <!-- <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"> -->
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    <el-submenu v-for="m in menus" :index="'idx'+m.id" :key="'key'+m.id">
      <template slot="title">
        <i :class="m.icon"></i>
        <span>{{m.text}}</span>
      </template>
      <el-menu-item  v-for="n in m.modules" :index="n.url" :key="'key'+n.id">
             <i :class="n.icon"></i>
             <span>{{n.text}}</span>
            </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
  export default {
    data() {
      return {
        collapsed: false,
        menus:[]
      }
    },
    created() {
      this.$root.bus.$on('shrink', t => {
        this.collapsed = t;
      });
      //获取后台请求数据的地址
      let url = this.axios.urls.SYSTEM_MENU;
      this.axios.get(url, {}).then(d => {
        console.log(d)
          this.menus=d.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;
  }
</style>

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

AddBook.vue

<template>
  <h1>书籍的新增</h1>
</template>

<script>
</script>

<style>
</style>

 BookList.vue

<template>
  <h1>书籍的数据</h1>
</template>

<script>
</script>

<style>
</style>

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

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import TopNav from '@/components/TopNav'
import LeftNav from '@/components/LeftNav'
import Home from '@/views/Home'
import About from '@/views/About'
import AboutMe from '@/views/AboutMe'
import AboutMeaning from '@/views/AboutMeaning'
import Login from '@/views/Login'
import Register from '@/views/Register'
import AddBook from '@/views/book/AddBook'
import BookList from '@/views/book/BookList'



Vue.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: '/TopNav',
        name: 'TopNav',
        component: TopNav
      }, {
        path: '/LeftNav',
        name: 'LeftNav',
        component: LeftNav
      },{
        path: '/book/AddBook',
        name: 'AddBook',
        component: AddBook
      }, {
        path: '/book/BookList',
        name: 'BookList',
        component: BookList
      }]
    }
    // {
    //   path: '/',
    //   name: 'Home',
    //   component: Home
    // },
    // {
    //   path: '/Home',
    //   name: 'Home',
    //   component: Home
    // },
    // {
    //   path: '/About',
    //   name: 'About',
    //   component: About,
    //   children:[{
    //   path: '/',
    //   name: 'AboutMe',
    //   component: AboutMe
    //   },{
    //   path: '/AboutMe',
    //   name: 'AboutMe',
    //   component: AboutMe
    //   },{
    //   path: '/AboutMeaning',
    //   name: 'AboutMeaning',
    //   component: AboutMeaning
    //   }]
    // }
  ]
})

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

效果如图 : 

二、书籍管理

数据表

表结构

后端

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

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 {

    @Autowired
    private IBookService bookService;

    @RequestMapping("/queryBookPager")
    @ResponseBody
    public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
        try {
            PageBean pageBean=new PageBean();
            pageBean.setRequest(req);
            System.out.println(req.getRequestURL());
            System.out.println(book);
            List<Book> books = bookService.queryBookPager(book, pageBean);
            return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("分页查询书本失败",false,0,null);
        }
    }

}

前端

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

<template>
  <div class="Book" style="padding: 30px;">
    <!-- 输入框搜索 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书籍名称 : ">
        <el-input v-model="bookname" placeholder="书籍名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 书籍的书籍表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍ID"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></el-table-column>
      <el-table-column prop="price" label="书籍价格"></el-table-column>
      <el-table-column prop="booktype" label="书籍类型"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="padding: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        bookname: '',
        tableData: [],
        rows: 10,
        total: 0,
        page: 1
      }
    },
    methods: {
      handleSizeChange(r) {
        //当页大小发生变化
        let params = {
          bookname: this.bookname,
          rows: r,
          page: this.page
        }
        // console.log(params)
        this.query(params);
      },
      handleCurrentChange(p) {
        //当前页码大小发生变化
        let params = {
          bookname: this.bookname,
          rows: this.rows,
          page: p
        }
        // console.log(params)
        this.query(params);
      },
      query(params) {
        //获取后台请求书籍数据的地址
        let url = this.axios.urls.SYSTEM_BookList;
        this.axios.get(url, {
          params: params
        }).then(d => {
          console.log(url)
          this.tableData = d.data.rows;
          this.total = d.data.total;
        }).catch(e => {});
      },
      onSubmit() {
        let params = {
          bookname: this.bookname
        }
        console.log(params)
        this.query(params);
        this.bookname = ''
      }
    },
    created() {
      this.query({})
    }
  }
</script>

<style>
</style>

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

查询效果:

分页效果:

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1042810.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

第77步 时间序列建模实战：多因素预测 vol-2（以ARIMA为例）

第77步 时间序列建模实战：多因素预测 vol-2（以ARIMA为例）

基于WIN10的64位系统演示 一、写在前面 上一期&#xff0c;我们构建了多变量的ARIMA时间序列预测模型&#xff0c;其实人家有名字的&#xff0c;叫做ARIMAX模型&#xff08;X就代表解释变量&#xff09;。 这一期&#xff0c;我们介绍其他机器学习回归模型如何建立多变量的时…
阅读更多...
『C语言进阶』qsort函数及模拟实现

『C语言进阶』qsort函数及模拟实现

&#x1f525;博客主页&#xff1a; 小羊失眠啦 &#x1f516;系列专栏&#xff1a; C语言 &#x1f325;️每日语录&#xff1a;没有退路&#xff0c;只能让自己变得强大 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前言 在上篇指针进阶中&#xff0c;我们对函数指针、函数…
阅读更多...
深入理解 Swift 新并发模型中 Actor 的重入（Reentrancy）问题

深入理解 Swift 新并发模型中 Actor 的重入（Reentrancy）问题

问题现象 我们知道，Swift 5.5 引入的新并发模型极大简化了并行逻辑代码的开发，更重要的是：使用新并发模型中的 Actor 原语可以大大降低并发数据竞争的可能性。 不过，即便 Actor 有如此神奇之功效，它也不是“万能药”，仍不能防止误用带来的问题。比如：Actor 重入（Reen…
阅读更多...
132.【MySQL_进阶篇】

132.【MySQL_进阶篇】

MySQL_进阶 (一)、存储引擎1.MySQL体系结构(1).连接层(2).服务层(3).引擎层(4).存储层 2.存储引擎简介(1).查看某张表的数据引擎(2).展示此版本支持的所有存储引擎(3).创建表my_myisam,并指定MyIASM存储引擎(4).存储引擎示列 3.存储引擎 _ Innodb(1).Innodb 介绍(2).Innodb 特点…
阅读更多...
通过 HelpLook ChatBot AI自动问答机器人降低客户服务成本

通过 HelpLook ChatBot AI自动问答机器人降低客户服务成本

在当今竞争激烈的商业环境中&#xff0c;提供卓越的客户服务对于维持忠诚的客户群和推动业务增长至关重要。客户服务涵盖了公司与其客户之间的所有互动&#xff0c;包括解答问题、解决问题和提供支持。它在塑造客户对品牌的看法方面起着关键作用&#xff0c;并且可以显著影响他…
阅读更多...
NSSSCTF做题（2）

NSSSCTF做题（2）

1.[BJDCTF 2020]easy_md5 打开页面发现没什么东西&#xff0c;只有一个提交表单&#xff0c;然后url会显示你提交的信息 源代码里也看不到什么 &#xff0c;用dirsearch扫一下&#xff0c;这些是扫出来的数据 抓包看到了提示 hint: select * from admin where passwordmd5($pas…
阅读更多...
【文件操作——详细讲解】

【文件操作——详细讲解】

1. 为什么使用文件&#xff1f;&#x1f9d0; 如果没有⽂件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失了&#xff0c;等再次运⾏程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数…
阅读更多...
cmd下scala退出命令

cmd下scala退出命令

cmd下scala退出命令 &#xff1a;quit
阅读更多...
checksec使用

checksec使用

checksec Relro&#xff1a;Full Relro&#xff08;重定位表只读&#xff09; Relocation Read Only&#xff0c; 重定位表只读。重定位表即.got 和 .plt个表。 Stack&#xff1a;No Canary found&#xff08;能栈溢出&#xff09; 栈保护。栈溢出保护是一种缓冲区溢出攻击缓解…
阅读更多...
Docker 部署前端项目(非自动化)

Docker 部署前端项目(非自动化)

部署前端项目 1. nginx配置文件1.1 nginxConf 2. 创建容器2.1 添加项目2.2 下载项目依赖2.3 打包前端项目2.4 创建容器2.5 查看容器 3. 视频演示4. 注意 1. nginx配置文件 1.1 nginxConf 首先你需要有nginx配置文件&#xff0c;你可以执行以下命令获取配置文件 # 安装镜像-生成…
阅读更多...
JS进阶-闭包

JS进阶-闭包

概念&#xff1a;一个函数对周围状态的引用捆绑在一起&#xff0c;内层函数中访问到其外层函数的作用域 简单理解&#xff1a;闭包&#xff08;Closure&#xff09;内层函数外层函数的变量 function outer() {const a 1function f() {console.log(a)}f()} outer() 闭包作用…
阅读更多...
最新商道融绿ESG数据（2015-2023）

最新商道融绿ESG数据（2015-2023）

数据简介&#xff1a;环境、社会和公司治理&#xff08;environmental, social, and corporate governance, 简称ESG&#xff09;方面的非财务信息已经普遍被用于评估企业在可持续发展方面的绩效。投资者通过考察上市公司的ESG绩效&#xff0c;便于识别企业面临的风险&#xff…
阅读更多...
L1-033 出生年 c++解法

L1-033 出生年 c++解法

一、题目再现 以上是新浪微博中一奇葩贴&#xff1a;“我出生于1988年&#xff0c;直到25岁才遇到4个数字都不相同的年份。”也就是说&#xff0c;直到2013年才达到“4个数字都不相同”的要求。本题请你根据要求&#xff0c;自动填充“我出生于y年&#xff0c;直到x岁才遇到n个…
阅读更多...
ElementUI之动态树+数据表格+分页

ElementUI之动态树+数据表格+分页

目录 一.ElementUI动态树 编写left.vue界面 配置url ​编辑 建立书籍的页面 编写路由 显示子主键的类 测试结果 二.ElementUI数据表格分页 在booklist中编写数据表格和分页 编写url路径 测试结果 ​编辑 一.ElementUI动态树 编写left.vue界面 <template>…
阅读更多...
OpenAI 更新 ChatGPT：支持图片和语音输入【附点评】

OpenAI 更新 ChatGPT：支持图片和语音输入【附点评】

一、消息正文 9月25日消息,近日OpenAI宣布其对话AI系统ChatGPT进行升级,添加了语音输入和图像处理两个新功能。据OpenAI透露,这些新功能将在未来两周内面向ChatGPT Plus付费用户推出,免费用户也将很快可以使用这些新功能。这标志着ChatGPT继续朝着多模态交互的方向发展,为用户提…
阅读更多...
3D 视觉市场空间广阔，3D 感知龙头全技术路线布局

3D 视觉市场空间广阔，3D 感知龙头全技术路线布局

3D 视觉市场尚处在发展早期，空间广阔 人类 70%以上信息通过眼睛获取，对于机器而言，视觉感知也是其“智能化”升级的重要基础。3D 成像让每一个像素除 x、y 轴数据外，还有 z 轴(深度/距离)数据。围绕着人体、物体、空间扫描一圈，就能得到点云图和精准的“1:1”还原的 3D …
阅读更多...
abaqus命令行基础

abaqus命令行基础

1.abaqus命令行基础 使用 abaqus 时&#xff0c;如果需要进行参数分析&#xff0c;就需要生成大量的模型&#xff0c;这时一般会使用python文件定义函数进行批量生成并计算。 如果已经生成了计算文件(*.inp文件)&#xff0c;那么就可以直接在命令行进行求解&#xff0c;abaqu…
阅读更多...
自动化测试框架pytest命令参数

自动化测试框架pytest命令参数

【软件测试面试突击班】如何逼自己一周刷完软件测试八股文教程&#xff0c;刷完面试就稳了&#xff0c;你也可以当高薪软件测试工程师&#xff08;自动化测试&#xff09; 失败后停止 使用下面的参数可以让测试在第1(N)次测试失败后停止&#xff1a; pytest ‐x # 第一次测试…
阅读更多...
【大数据存储与处理】1. hadoop单机伪分布安装和集群安装

【大数据存储与处理】1. hadoop单机伪分布安装和集群安装

0. 写在前面 0.1 软件版本 hadoop2.10.2 ubuntu20.04 openjdk-8-jdk 0.2 hadoop介绍 Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下&#xff0c;开发分布式程序。充分利用集群的威力进行高速运算和存储。Hadoop实现了一个…
阅读更多...
数据结构_红黑树

数据结构_红黑树

1、二叉树 每一个分支不能超过两个 2、 排序数/查找树 在二叉树的基础上&#xff0c;元素是有大小顺序的左 子树 小&#xff0c;右 子树 大 3、平衡树 左孩子数 和 右孩子数 相等 4、不平衡树 5、 红黑树 特点&#xff1a;趋近于平衡树&#xff0c;查询的速度非常的快&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023