Vue动态树、配置请求路径、表格数据显示、实现分页、创建书本管理组件、点击菜单实现路由跳转以及系统首页配置。

news2024/11/24 13:38:39

目录

1. 准备工作

2. 动态树

2.1 在配置请求路径

2.2 使用动态数据构建导航菜单

2.2.1 通过接口获取数据

2.2.3 通过后台获取的数据构建菜单导航

2.2.3.1 先构建一级导航菜单

2.3 点击菜单实现路由跳转

2.3.1 创建书本管理组件

3. 系统首页配置

4. 表格数据显示

4.1 页面布局

4.2 查询并在表格中显示数据

4.3 实现分页


1. 准备工作

  1. 创建测试数据库
  2. 准备好后台服务接口,Moudel查询,和Book查询(支持分页)
  3. 后台单元测试
  4. 修改vue配置,使用真实环境

2. 动态树

2.1 在配置请求路径

在src/api/action.js中配置获取动态树数据的请求路径

export default {
	//服务器
	'SERVER': 'http://localhost:8080/webserver',

	//登陆请求
	'SYSTEM_USER_DOLOGIN': '/userMsg/userAction!login.action', //登陆

	//获取动态树数据请求
	'SYSTEM_MODULE_REQ': '/sysMsg/sysMsgAction!getModules.action',

	//获取完整的请求地址
	'getFullPath': k => { //获得请求的完整地址,用于mockjs测试时使用
		return this.SERVER + this[k];
	}

}

 

2.2 使用动态数据构建导航菜单

2.2.1 通过接口获取数据

LeftAside.vue:

测试,通过控制台查看数据是否正常获取:

 

2.2.3 通过后台获取的数据构建菜单导航

2.2.3.1 先构建一级导航菜单

LeftAside.vue:

页面效果:

 

 

2.3 点击菜单实现路由跳转

2.3.1 创建书本管理组件

t_module_vue表中已经配置了功能url,为方便,将书本管理组件定义为BookList。如果使用其他名字则需要修改功能url配置,保持一致。

2.3.2 配置路由

 

 

2.3.3 修改LeftAside组件

 

2.3.4 修改Main组件

 

3. 系统首页配置

首先创建一个首页组件

 

配置路由:

 

配置首页菜单:

 

菜单图标可以到官网去查找。

设置登录成功后默认显示系统首页:

4. 表格数据显示

4.1 页面布局

页面上使用的面包屑,查询条件,表格,分页等空间,可以查看element-ui官网。该步骤主要关注页面布局,并没有绑定数据,编写完成后,观察页面效果。
BookList.vue:

<template>
  <div style="margin-left: 15px; margin-right: 15px;">

    <!--面包屑-->
    <el-breadcrumb style="margin-top:15px;" separator="/">
      <el-breadcrumb-item :to="{path: '/Home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>书本管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!--查询条件-->
    <el-form style="margin-top: 15px;" :inline="true" class="demo-form-inline">
      <el-form-item label="书名">
        <el-input placeholder="书名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
        <el-button type="primary">新增</el-button>
      </el-form-item>
    </el-form>

    <!--表格-->
    <el-table style="width: 100%;" :border="true" max-height="550">
      <el-table-column prop="id" label="编号" min-width="40" align="center"></el-table-column>
      <el-table-column prop="bookname" label="名称" min-width="100" align="center"></el-table-column>
      <el-table-column prop="price" label="价格" min-width="70" align="center"></el-table-column>
      <el-table-column prop="booktype" label="类型" min-width="70" align="center"></el-table-column>
    </el-table>

    <!--分页-->
    <div class="block" style="text-align:right;margin-top:10px;">
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
  </div>
</template>

 

4.2 查询并在表格中显示数据

先不考虑分页,从后台接口获取数据并绑定到表格显示。

  1. 将查询书本信息的接口配置到api/action.js中
//获取书本信息
 'BOOKMSG_BOOKINFO_REQ':'/bookMsg/bookAction!getBooks.action',

BookList.vue组件
图一: template部分:

图二: script部分

 

4.3 实现分页

template部分:

 

script部分,图一

 

script部分,图二:

 

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

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

相关文章

探密工业互联网网络体系:构建端到端的稳定传输

什么是工业互联网网络&#xff1f; 工业互联网网络是一种将工业设备、传感器和计算机系统连接到一起&#xff0c;以便它们可以共同工作、共享数据和实现更高效的生产和控制。这个网络体系的目标是提高工业过程的效率、可靠性和安全性。 在数字时代的今天&#xff0c;工业互联网…

无广告弹出的便签工具选择哪一款?

广告弹窗&#xff0c;是许多人在日常办公中比较反感的问题&#xff0c;打开一个软件正准备使用时&#xff0c;突然冒出一个广告弹窗&#xff0c;这会给人一种特别反感的情绪&#xff0c;尤其是在专注记录工作任务备忘的时候&#xff0c;意外冒出的广告窗口可真让人心烦。那么&a…

Apple 苹果发布 M3、M3 Pro 和 M3 Max 芯片

本心、输入输出、结果 文章目录 Apple 苹果发布 M3、M3 Pro 和 M3 Max 芯片前言M3、M3 Pro 和 M3 Max 芯片的性能相关资料图M3 Pro规格M3 Max规格弘扬爱国精神 Apple 苹果发布 M3、M3 Pro 和 M3 Max 芯片 编辑&#xff1a;简简单单 Online zuozuo 地址&#xff1a;https://blog…

若依框架中SpringSecurity的实现流程

文章目录 Spring Security概述核心原理 若依Sprint Security分析配置类分析流程分析图过滤器分析 若依登录/退出流程流程图登录退出 写在开头: 本篇博客与核桃共同完成 Spring Security 概述 Spring Security 是一个功能强大且高度可定制的身份验证和访问控制框架&#xff0c…

go微信开发sdk-简单使用_已设置图床

go微信开发sdk-简单使用 GitHub - silenceper/wechat: WeChat SDK for Go &#xff08;微信SDK&#xff1a;简单、易用&#xff09; 使用的sdk为上述的&#xff0c;这边给出快速的项目实例 git clone https://github.com/gowechat/example.git简单的项目结构 这边简单用dock…

多线程锁的升级原理是什么

在 Java 中&#xff0c;锁共有 4 种状态&#xff0c;级别从低到高依次为&#xff1a;无状态锁&#xff0c;偏向锁&#xff0c;轻量级锁和重量级锁状态&#xff0c;这几个状态会随着竞争情况逐渐升级。锁可以升级但不能降级。 多线程锁锁升级过程 如下图所示 多线程锁的升级过程…

数字孪生技术:城市交通的智能引领

城市交通问题一直是我们日常生活中的头等大事。交通拥堵、公共交通不便、环境污染等问题常常困扰着城市居民。然而&#xff0c;数字孪生技术正以令人兴奋的方式改变着城市交通的面貌&#xff0c;为城市交通带来了新的变化。 实时交通监测&#xff1a;数字孪生技术通过网络连接的…

动态规划:“以宇换宙”的优雅工艺

Those who do not remember the past are condemned to repeat it. 那些不能铭记历史的人注定要重蹈覆辙。 在动态规划——经典案例分析中我们提到了斐波那契数列的求解思路。知道动态规划的主要优点是能够在解决问题时避免重复计算&#xff0c;通过利用已经计算过的结果来加速…

Java实现Web的ashx对接ORM

之前的介绍已经实现了ORM的主体和Web的调用结构主题&#xff0c;那么这次把Web和LIS.Core的容器和ORM做对接&#xff0c;通过ashx实现的业务类测试调用ORM查询数据。 首先改造容器让传入根地址 package LIS.Core.Context;import org.w3c.dom.Document; import org.w3c.dom.El…

单例模式-懒汉式双重锁机制

正是因为担心并发问题&#xff0c;才在双重检查锁模式中的synchronized内部进行了再次判断 tnull。 在第一次判断 tnull 之后&#xff0c;当多个线程同时通过这个检查&#xff0c;其中一个线程会获得锁并创建实例。然而&#xff0c;其他线程在此期间可能会继续等待锁释放&…

ViT Vision Transformer超详细解析,网络构建,可视化,数据预处理,全流程实例教程

关于ViT的分析和教程&#xff0c;网上又虚又空的东西比较多&#xff0c;本文通过一个实例&#xff0c;将ViT全解析。 包括三部分内容&#xff0c;网络构建&#xff1b;orchview.draw_graph 将网络每一层的结构与输入输出可视化&#xff1b;数据预处理。附完整代码 网络构建 …

【Code Reading】Transformer in vision and video

文章目录 1. vit2. Swin-t3. vit_3D4. TimeSformer First&#x1f680;&#x1f680;5. vivit 1. vit 详细解释 在论文的Table1中有给出三个模型&#xff08;Base/ Large/ Huge&#xff09;的参数&#xff0c;在源码中除了有Patch Size为16x16的外还有32x32的。其中的Layers就…

基于MIMO通信系统的球形译码算法matlab性能仿真,对比PSK检测,SDR检测

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022A 3.部分核心程序 ................................................................ for i1:length(SNR) Bit…

SpringCloud(六) Nacos配置管理

Nacos除了可以做注册中心,同样可以做配置管理来使用; Nacos做注册中心的使用和注意事项详看:SpringCloud(四) Nacos注册中心-CSDN博客 目录 一, 统一配置管理 1. 在Nacos中添加配置文件 2. 从微服务拉取配置 (1) 引入nacos-config依赖 (2) 添加bootstrap.yaml (3) 读取n…

相机存储卡被格式化了怎么恢复?数据恢复办法分享!

随着时代的发展&#xff0c;相机被越来越多的用户所使用&#xff0c;这也意味着更多的用户面临着相机数据丢失的问题&#xff0c;很多用户在使用相机的过程中&#xff0c;都出现过不小心格式化相机存储卡的情况&#xff0c;里面的数据也将一并消失&#xff0c;相机存储卡被格式…

Android13充电动画实现

充电动画 以MTK平台为例&#xff0c;实现充电动画 效果图 修改文件清单 system/vendor/mediatek/proprietary/packages/apps/SystemUI/src/com/android/systemui/charging/BubbleBean.javasystem/vendor/mediatek/proprietary/packages/apps/SystemUI/src/com/android/system…

2023年【道路运输企业安全生产管理人员】考试资料及道路运输企业安全生产管理人员考试技巧

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 道路运输企业安全生产管理人员考试资料根据新道路运输企业安全生产管理人员考试大纲要求&#xff0c;安全生产模拟考试一点通将道路运输企业安全生产管理人员模拟考试试题进行汇编&#xff0c;组成一套道路运输企业安…

浅谈新能源汽车充电桩的选型与安装

叶根胜 安科瑞电气股份有限公司 上海嘉定201801 摘要&#xff1a;电动汽车的大力发展和推广是国家为应对日益突出的燃油供需矛盾和环境污染&#xff0c;加强生态环境保护和治理而开发新能源和清洁能源的措施之一&#xff0c;加快了电动汽车的发展。如今&#xff0c;电动汽车已…

Pure-Pursuit 跟踪双移线 Gazebo 仿真

Pure-Pursuit 跟踪双移线 Gazebo 仿真 主要参考学习下面的博客和开源项目 自动驾驶规划控制&#xff08;&#xff21;*、pure pursuit、LQR算法&#xff0c;使用c在ubuntu和ros环境下实现&#xff09; https://github.com/NeXTzhao/planning Pure-Pursuit 的理论基础见今年六月…

如何在 Endless OS 上安装 ONLYOFFICE 桌面编辑器 7.5

ONLYOFFICE 桌面编辑器是一款基于依据 AGPL v.3 许可进行分发的开源办公套件。使用这款应用&#xff0c;您无需保持网络连接状态即可处理存储在计算机上的文档。本指南会向您介绍&#xff0c;如何在 Endless OS 上安装 ONLYOFFICE 桌面编辑器 7.5。 ONLYOFFICE 桌面版是什么 O…