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

最新推荐文章于 2022-05-16 16:35:29 发布
最新推荐文章于 2022-05-16 16:35:29 发布
阅读量704 收藏
点赞数
分类专栏： 笔记 文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60385807/article/details/121268017
版权

目录

一、树形菜单显示

main.js注释

 leftNav.vue

二、列表查询

views目录下新建

 index.js

Articles.vue

 三、分页及查询

Articles.vue

一、树形菜单显示 

main.js注释

 leftNav.vue

   //定义一个数组，放所有的一级菜单
        menus:[]

 <!-- index里面填写的是路由跳转路径-->
                <el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">

数据库读取树状图数据 

 <el-menu router :default-active="$route.path" 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 :index="'id_'+m.treeNodeId" v-for="m in menus">
                <template slot="title">
          <i :class="m.icon"></i>
          <span>{{m.treeNodeName}}</span>
          </template>
          <!-- index里面填写的是路由跳转路径-->
                <el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">
          <i :class="m2.icon"></i>
          <span>{{m2.treeNodeName}}</span>
          </el-menu-item>
            </el-submenu>
        </el-submenu>
    </el-menu>

<template>
	<el-menu router :default-active="$route.path" 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 :index="'id_'+m.treeNodeId" v-for="m in menus">
				<template slot="title">
          <i :class="m.icon"></i>
          <span>{{m.treeNodeName}}</span>
          </template>
          <!-- index里面填写的是路由跳转路径-->
				<el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">
          <i :class="m2.icon"></i>
          <span>{{m2.treeNodeName}}</span>
          </el-menu-item>
			</el-submenu>
		</el-submenu>
	</el-menu>
</template>
<script>
	export default {
		data(){
      return{
        collapsed:false,
        //定义一个数组，放所有的一级菜单
        menus:[]
      }
    },
    created(){
      let url = this.axios.urls.SYSTEM_MENU_TREE;
      // 箭头函数解决了this 指针污染的问题
      this.axios.post(url, {}).then((resp) => {
        console.log(resp);
        this.menus=resp.data.result;


      }).catch(function(error) {
        console.log(error);
      });

      this.$root.Bus.$on("collapsed-aside",(v)=>{
        this.collapsed=v;
      });
    }
	}
</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>

效果： 

二、列表查询

views目录下新建

 index.js

import Articles from '@/views/sys/Articles'

 {
              path: '/sys/Articles',
              name: 'Articles',
              component: Articles,
              }

Articles.vue

<template>
  <div>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="文章id" width="300">
      </el-table-column>
      <el-table-column sortable prop="title" label="文章标题" width="300">
      </el-table-column>
      <el-table-column sortable prop="body" label="文章内容" 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>
  </div>
</template>

<script>
  export default {
    name:'Articles',
  	data(){
      return {
      listData:[]
      }
    },
    created() {
      let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
      // 箭头函数解决了this 指针污染的问题
      this.axios.post(url, {}).then((resp) => {
        console.log(resp);
        this.listData=resp.data.result;

      }).catch(function(error) {
        console.log(error);
      });

      this.$root.Bus.$on("collapsed-aside",(v)=>{
        this.collapsed=v;
      });
    }
  }
</script>

<style>
</style>

效果：

 三、分页及查询

分页条

 <!-- 分页条-->
            <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>

listData:[],
      formInline:{
        page:1,
        rows:10,
        total:0,
        title:''
      }

methods:{
      handleSizeChange(rows) {
                      this.formInline.page = 1;
                      this.formInline.rows = rows;
                      this.search();
                  },
                  handleCurrentChange(page) {
                      this.formInline.page = page;
                      this.search();
                  },
            doSeach(param){
              let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
                // 箭头函数解决了this 指针污染的问题
                this.axios.post(url, param).then((resp) => {
                  console.log(resp);
                  this.listData=resp.data.result;
                  this.formInline.total=resp.data.pageBean.total;

                }).catch(function(error) {
                  console.log(error);
                });
                this.$root.Bus.$on("collapsed-aside",(v)=>{
                  this.collapsed=v;
                });
              },
              search(){
                this.doSeach(this.formInline);
              }
    },

搜索框 

<!-- 搜索筛选 -->
    <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>

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 border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="id" label="文章id" width="300">
      </el-table-column>
      <el-table-column sortable prop="title" label="文章标题" width="300">
      </el-table-column>
      <el-table-column sortable prop="body" label="文章内容" 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,
        rows:10,
        total:0,
        title:''
      }
      }
    },
    methods:{
      handleSizeChange(rows) {
      				this.formInline.page = 1;
      				this.formInline.rows = rows;
      				this.search();
      			},
      			handleCurrentChange(page) {
      				this.formInline.page = page;
      				this.search();
      			},
            doSeach(param){
              let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
                // 箭头函数解决了this 指针污染的问题
                this.axios.post(url, param).then((resp) => {
                  console.log(resp);
                  this.listData=resp.data.result;
                  this.formInline.total=resp.data.pageBean.total;

                }).catch(function(error) {
                  console.log(error);
                });
                this.$root.Bus.$on("collapsed-aside",(v)=>{
                  this.collapsed=v;
                });
              },
              search(){
                this.doSeach(this.formInline);
              }
    },

    created() {
        this.doSeach({});
  }
}
</script>

<style>
</style>

效果：

分页

---------------没有了--------------------------------

在敲！！！别催
关注
专栏目录
vue+layui实现select动态加载后台数据的例子
10-16
动态加载数据是Web开发中的常见需求，尤其是在单页应用中，经常需要与后端API进行交互，获取数据后动态更新页面内容。在Vue.js中，通常使用`axios`这个HTTP库来发送请求并处理响应数据。 ### 问题解决：时间差问题 ...
vue+elementUI开发的h5商城项目.zip
10-21
在H5商城项目中，这些特性用于动态更新页面内容，比如商品列表、购物车状态等，当数据发生变化时，视图会自动更新，反之亦然。Element UI的组件如Table和Pagination可以与Vue的数据模型无缝对接，轻松实现数据的展示...
资源前后端分离式分布式微服务架构项目CMS前端开发讲义+源码+视频
最新发布
03-03
本文详细介绍了资源前后端分离式分布式微服务架构项目中的关键技术点，包括 Vue.js 的使用技巧、Webpack 的搭建与使用、CMS 前端工程的创建以及分页查询的前端开发等内容。这些知识点对于理解和掌握现代 Web 开发...
表格数据做分页的逻辑
04-27
在IT行业中，表格数据的分页处理是一项常见的需求，特别是在Web应用、数据分析或者数据库操作中。这个主题涉及到如何有效地管理和展示大量数据，确保用户能够高效地浏览和操作。以下是对"表格数据做分页的逻辑"这一...
SQL Server Profiler
m0_60385807的博客
05-16 7106
一、SQL Server Profiler 介绍 SQL Server Profiler 是一个图形界面和一组系统存储过程 作用： 图形化监视SQLServer查询； 在后台收集查询信息； 分析性能； 诊断像死锁之类的问题； 调试SQL语句 模拟重放SQL Server活动； 也可以使用SQL Profiler捕捉在SQL Server实例上执行活动。这样的活动被称为Profiler跟踪。 ...
JWT的使用
m0_60385807的博客
11-17 6305
目标： ①、jwt出现的原因及工作原理 ②、jwt工具类介绍，三种场景 ③、jwt与vuex配合在SPA项目中的应用 一、jwt的介绍 1、jwt是什么 JSON Web Token (JWT)，它是目前最流行的跨域身份验证解决方案 2、为什么使用JWT JWT的精髓在于：“去中心化”，数据是保存在客户端的。 3、JWT的工作原理 是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，示例如下： {"UserName": "Chongchong","Role": "Ad
Shiro授权
m0_60385807的博客
12-25 2305
一、shiro授权角色、权限 思路： 给用户授予角色 给用户授予权限 做法： 1、拿到账号 2、通过用户账号查询对应的能够看到的那些菜单 3、将这些权限交给shiro管理 授予角色做法： 1、拿到账号 2、通过用户账号查询对应的能够看到的那些角色 3、将这些权限交给shiro管理 mapper.xml Mapper.java Service.java Mapper.xml <!--添加通过账号查询用户信息--> <select id="queryByName" resul
Vuex的使用
m0_60385807的博客
11-15 1652
一、vuex 1、Vuex的介绍 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库）， 让其在各个页面上实现数据的共享包括状态，并且可操作 Vuex分成五个部分： 1.State：单一状态树 2.Getters：状态获取 3.Mutations：触发同步事件 4.Actions：提交mutation，可以包含异步操作 5.Module：将vuex进行分模块 2、vue中各个组件之间传值 ①、父子组件 父组件-->.
动态SQL和分页
m0_60385807的博客
12-13 843
一、mybatis动态sql 例如： 需求：页面展示数据有十列，点击修改，只修改其中一例 之前：哪怕只修改一列数据，都需要向后台传递10列的数据到后台，否则为空 采用mybatis的动态sql(通过传值来编写sql语句) <update id="updateByPrimaryKeySelective" parameterType="com.dhm.model.Book" > update t_mvc_book <set > <if test="bn
SPA项目开发之首页导航及左侧
m0_60385807的博客
11-09 769
目录 一、Mock.js 1、介绍 2、mock.js的使用步骤 2.1安装mockjs依赖 2.2、引入 3、mock.js的使用 二、总线的讲解 1、点击提交跳转主界面 2、导航栏的收缩 ​3、退出 一、Mock.js 1、介绍 前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 众所周知Mock.js因为两个重要的特性风靡前端: 老大，接...
svn应用
m0_60385807的博客
11-18 711
一、为什么使用svn(版本控制器) 1、代码整合问题 2、团队项目，在不使用版本控制器的时候，代码改动很难追责 3、组员所写代码丢失问题 二、安装VisualSVN idea中使用svn必须要安装svn的客户端TortoiseSVN,通俗一点来说就是小乌龟啦，其它同eclipse svn可视化工具 第一个用于eclipse集成 第二个单独的svn客户端 第三个视图化的svn服务端 1、安装VisualSVN-Server-3.9.1-x64.msi 在re...
SPA项目开发之登录注册
m0_60385807的博客
11-08 671
一、安装插件 在spa项目目录下搜索cmd命令窗口 在命令窗口执行 npm安装elementUI cd pro01 #进入新建项目的根目录 npm install element-ui -S #安装element-ui模块 npm install axios -S npm install qs -S npm install vue-axios -S 执行之后会跳转到 在项目中写一个按钮样式看elementUI是否引入成功 有样式则引入成功 二、用户登录注册界面布局及跳转..
Mybatis与Spring集成
m0_60385807的博客
12-15 606
一、Mybatis与spring集成 解决了代码重复的问题 1、导入pom依赖 1.1 添加spring相关依赖(5.0.2.RELEASE) spring-core spring-beans spring-context spring-orm spring-tx spring-aspects spring-web 1.2 添加mybatis相关依赖 ...
Springmvc文件上传
m0_60385807的博客
12-21 500
步骤： 页面：多功能表单设置multipart/form-data 后台：再上传的方法上传递一个multipartFile的类接收页面传递过来的参数 访问：tomcat配置映射地址 idea:直接在tomcat的发布目录进行配置 相关pom依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</ar.
MySQL 8.0密码修改错误解决方法
m0_60385807的博客
12-10 477
错误： ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement. 解决方式： 先设置一个复杂的密码 然后执行 set global validate_password.policy=0; set global validate_password.length=1; 再设置密码 ...
Mybatis整合Redis实现二级缓存
m0_60385807的博客
12-17 477
一、mybatis 采用ehcache作为二级缓存 导入相关的pom依赖 mybatis、ehcache、slf4j、log4j2、applicationContext-ehcache.xml 配置的是缓存管理器：ehcache.xml mybatis中配置二级缓存开启 applicationContext-ehcache.xml ...
Mybatis关联关系映射
m0_60385807的博客
12-19 440
一、一对多关联关系 需求：通过mybatis完成订单查询，给一个订单id,查询对应订单及订单项的信息 实现： order:定义一个引用对象：List<OrderItem> OrderItems OrderItem:定义一个引用对象 Order Order resultMap的映射 1、在generatorConfig.xml中根据表生成实体类 <table schema="" tableName="t_hibernate_order" domainObjectName=.
Vue与Quasar的crudapi前端SPA项目：业务数据操作实战
"该文档是关于一个免费开源的前端SPA项目实战教程，专注于Vue和Quasar框架下实现业务数据的CRUD操作。作者在前一篇文章中完成了元数据设计功能，现在将详细介绍如何通过配置表单生成CRUD接口，并实现业务数据的增删...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值