SPA项目开发之动态树+数据表格+分页

已于 2022-09-13 11:34:19 修改
阅读量160 收藏
点赞数
文章标签： java vue.js javascript
于 2022-09-13 11:06:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44247968/article/details/126829496
版权

目录

一、树形菜单功能实现

二、书籍列表查询

一、树形菜单功能实现


完成树形菜单的功能

1、要确定静态树形菜单节点的样式排版
2、要获取树形节点的数据
        this.axios.post

3、通过拿到的数据，渲染树形节点
        v-for渲染节点

        定义渲染节点的变量

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="'id_'+m.treeNodeId">
      <template slot="title">
          <i :class="m.icon"></i>
          <span>{{ m.treeNodeName}}</span>
        </template>
      <el-menu-item v-for="m2 in m.children" :key="'id_'+m2.treeNodeId" :index="m2.url">
          <i :class="m2.icon"></i>
          <span>{{ m2.treeNodeName}}</span>
      </el-menu-item>
    </el-submenu>
	</el-menu>
</template>
<script>
	export default {
        data(){
          return {
            collapsed:false,
            menus:[]
          }
        },
      created() {
      //    从总线上取出this.collapsed变量
        this.$root.Bus.$on("collapsed-side",v => {
          this.collapsed=v;
        });
 
      // 获取树形节点的数据
        let url = this.axios.urls.SYSTEM_MENU_TREE;
 
        //this指的是vue实例
        this.axios.post(url,{})
          .then(resp => {//代表成功 箭头函数 jdk8的语法
            console.log(resp);
            this.menus=resp.data.result;
          }).catch(function (){//代表失败
 
        });
      }
  }
</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>

Articles.vue：

<template>
<div>
  文章管理组件
</div>
</template>
 
<script>
export default {
  name: 'Articles',
  data() {
    return {
      msg: 'Welcome'
    }
  }
}
</script>
 
<style scoped>
 
</style>

index.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 Reg from "../views/Reg";
import Articles from "../views/sys/Articles";
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        },
        {
          path: '/sys/Articles',
          name: 'Articles',
          component: Articles
        }
      ]
    }
  ]
})

 

二、书籍列表查询


文章查询功能

1、el-table 列表组件
2、利用axios调用后台的文章查询接口 ——> created   （无传参）
3、el-pagination 列表组件
        size-change        页大小改变调用事件

        current-change    页面改变调用的事件

 4、优化
        将调用后台的文章查询接口的代码进行封装，为了复用

5、el-form  查询的筛选条件    （传参）

this.doSeach  公用的查询方法

this.search  带领查询条件的方法

 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="'id_'+m.treeNodeId">
      <template slot="title">
          <i :class="m.icon"></i>
          <span>{{ m.treeNodeName}}</span>
        </template>
      <el-menu-item v-for="m2 in m.children" :key="'id_'+m2.treeNodeId" :index="m2.url">
          <i :class="m.icon"></i>
          <span>{{ m2.treeNodeName}}</span>
      </el-menu-item>
    </el-submenu>
	</el-menu>
</template>
<script>
	export default {
        data(){
          return {
            collapsed:false,
            menus:[]
          }
        },
      created() {
      //    从总线上取出this.collapsed变量
        this.$root.Bus.$on("collapsed-side",v => {
          this.collapsed=v;
        });
 
      // 获取树形节点的数据
        let url = this.axios.urls.SYSTEM_MENU_TREE;
 
        //this指的是vue实例
        this.axios.post(url,{})
          .then(resp => {//代表成功 箭头函数 jdk8的语法
            console.log(resp);
            this.menus=resp.data.result;
          }).catch(function (){//代表失败
 
        });
      }
  }
</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>

Articles.vue：

<template>
<div>
<!--  搜索筛选-->
  <el-form :inline="true" :model="formInline" class="user-search">
    <el-form-item label="搜索：">
      <el-input size="small" v-model="formInline.title" placeholder="输入文章标题"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
       <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
    </el-form-item>
  </el-form>
  <!--列表-->
  <el-table size="small" :data="listData" highlight-current-row style="width: 100%;">
    <el-table-column align="center" type="selection" min-width="60">
    </el-table-column>
    <el-table-column sortable prop="id" label="文章ID" min-width="300">
    </el-table-column>
    <el-table-column sortable prop="title" label="文章标题" min-width="300">
    </el-table-column>
    <el-table-column sortable prop="body" label="文章内容" min-width="300">
    </el-table-column>
    <el-table-column align="center" label="操作" min-width="300">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页条 -->
  <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                 :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
                 :total="formInline.total">
  </el-pagination>
</div>
</template>
 
<script>
export default {
  name: 'Articles',
  data() {
    return {
       listData:[],
      formInline:{
         page:1,
        total:10,
        title:''
      }
    }
  },
  methods:{
    handleSizeChange(rows) {
      this.formInline.page = 1;
      this.formInline.rows = rows;
      this.search();
    },
    handleCurrentChange(page) {
      this.formInline.page = page;
      this.search();
    },
    //是为了代码复用
    doSearch(param){
      // 获取树形节点的数据
      let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
 
      //this指的是vue实例
      this.axios.post(url,param)
        .then(resp => {//代表成功 箭头函数 jdk8的语法
          console.log(resp);
          this.listData=resp.data.result;
          this.formInline=resp.data.pageBean;
        }).catch(function (){//代表失败
 
      });
    },
    search(){
    //  按照条件进行查询
      this.doSearch(this.formInline);
    }
 
  },
  created() {
      this.doSearch({});
  }
}
</script>
 
<style scoped>
 
</style>

查询 

分页

 

 

Lme1216
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
spa项目开发之动态树+数据表格+分页
m0_67864917的博客
09-13 102
将左侧树的数据绑定到elementui中的menu标签上。绑定elementui提供的分页组件来完成分页功能。准备好后台（左侧树，带分页的文章查询）新增一个自定义组件用来展示文章列表的。
超微 P4SPA+/P4SPE BIOS驱动程序下载
03-16
Supermicro超微P4SPA+/P4SPE主板最新BIOS 1.2C版（2006年3月9日发布）
详解webpack与SPA实践之开发环境搭建
08-28
主要介绍了详解webpack与SPA实践之开发环境搭建,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
12-09
之前写了一些关于element-ui表格合并的方法,不过用的数据都是确定的数据(死数据),但是很多时候我们的数据都是通过后台获得的,数据不稳定,这个时候使用表格合并就需要先处理一下数据,先看一下一种很常见的数据展示...
本项目使用node.js+express+MongoDB编写后端接口代码.zip
01-16
本项目使用node.js+express+MongoDB编写后端接口代码，主要为vue-admin-spa（前端项目）提供在线api接口 软件开发设计：应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目...
基于vue+vue-ruoter+webpack仿写饿了么SPA.zip
02-15
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
jar包增量更新分析
junlaiyan的专栏
05-16 285
借助jdeps分析出jar包的增量文件
docker中安装jenkins，并在node和cloud上跑通基于源码控制SCM的pipeline
qq_29022265的博客
05-19 1053
从安装jenkins到创建jenkins的node和cloud，最后再将scm和FreeStyle两种流水线跑通。
Spring-Cloud 微服务
weixin_65127444的博客
05-15 913
先来思考一个问题*通过上一章的操作，我们已经可以实现微服务之间的调用。但是我们把服务提供者的网络地址（ip，端口）等硬编码到了代码中，这种做法存在许多问题：1.一旦服务提供者地址变化，就需要手工修改代码2. 一旦是多个服务提供者，无法实现负载均衡功能3.一旦服务变得越来越多，人工维护调用关系困难那么应该怎么解决呢，这时候就需要通过注册中心动态的实现。
java实现拼图小游戏
monkey108的博客
05-16 644
本文主要提供用java实现的拼图小游戏源代码。
命令执行漏洞（二）
XLbb的博客
05-15 917
POST方法，S2-045-bypass-2漏洞存在！,程序更改为S2-045-bypass-2漏洞测试模式, 响应码: 200。POST方法，S2-046-bypass漏洞存在！POST方法，S2-045-bypass漏洞存在！POST方法，S2-046-1漏洞存在！POST方法，S2-046-2漏洞存在！POST方法，S2-046-3漏洞存在！POST方法，S2-045-1漏洞存在！POST方法，S2-045-3漏洞存在！POST方法，S2-045-2漏洞存在！POST方法，S2-045-4漏洞存在！
java数据结构与算法(验证二叉搜索树)
磐门的博客
05-17 256
节点返回空为ture,节点的值不在对应数据大小范围内返回false。将验证二叉搜索树计算同样可以转换为相同子问题，所以比较适合用递归。node为root的左节点时，max更新为root.val。node为root的右节点时，min更新为root.val。
SpringMVC基础
Java小白的博客 致力分享每一天学到的知识
05-15 1311
介绍了有关SpringMVC的基础内容
C++ 11
qq_65112813的博客
05-17 662
对于类类型，如果定义了接受。
Kubernetes 审计日志采集与分析最佳实践
观测云的博客
05-17 1029
​Kubernetes 在 1.7 版本中发布了审计（Audit）日志功能，通过审计日志，我们能够非常清晰的知道 K8S 集群到底发生了什么事情。
java导出excel动态加载多sheet多复杂表头
weixin_43931108的博客
05-14 257
java导出excel动态加载多sheet多复杂表头
Spring6基础笔记
最新发布
质胜文则野，文胜质则史。文质彬彬，然后君子。
05-21 548
Spring 是一款主流的 Java EE 轻量级开源框架 ，Spring 由“Spring 之父”Rod Johnson 提出并创立，其目的是用于简化 Java 企业级应用的开发难度和开发周期。Spring的用途不仅限于服务器端的开发。从简单性、可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。Spring 框架除了自己提供功能外，还提供整合其他技术和框架的能力。Spring 自诞生以来备受青睐，一直被广大开发人员作为 Java 企业级应用程序开发的首选。时至今日，Spring 俨然
SpringBoot事件发布与监听，观察者模式使用
小哇
05-16 222
可以发现，用户注册与信息推送强耦合，用户注册其实到存库成功，就已经算是完成了，后面的信息推送都是额外的操作，甚至信息推送失败报错，还会影响API接口的结果，如果在同一事务，报错信息不捕获，还会导致事务回滚，存库失败。本文记录springboot使用@EventListener监听事件、ApplicationEventPublisher.publishEvent发布事件实现业务解耦。
spa+单页面应用+seo
09-16
SPA（单页面应用）在SEO（搜索引擎优化）方面相对较差。由于SPA只有一个主页面，而所有的内容都是通过ajax异步加载，搜索引擎爬虫很难获取到完整的页面信息。这导致搜索引擎很难对SPA进行正确的索引和排名。然而，可以通过使用SSR（服务器端渲染）来改善SPA的SEO。SSR可以在服务器上渲染出完整的HTML页面，使得搜索引擎可以正确地抓取和索引SPA的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值