vue09动态树+数据表格+分页模糊查

ゝ一世哀愁。 2024-04-01 11:32 91阅读 0赞

[14天阅读挑战赛][14]  
*努力是为了不平庸~*

**目录**

1. 准备工作

2. 动态树

2.1 在配置请求路径

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

2.2.1 通过接口获取数据

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

2.3 点击菜单实现路由跳转

2.3.1 创建书本管理组件

2.3.2 配置路由

2.3.3 修改LeftAside组件

2.3.4 修改Main组件

3. 系统首页配置

4. 表格数据显示

4.1 页面布局

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

4.3 实现分页

--------------------

## 1. 准备工作 ##

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

![9526499713824a2b8d9e63bc829e0316.png][]

##  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:

![88657224e0ba43cd8b866b6212bfe8ea.png][]

//声明周期钩子函数，此时的Vue实例已经创建，且data和methods已经创建，但没有开始编译模板
        //利用该钩子函数获取动态树数据
        created: function() {
          let url = this.axios.urls.SYSTEM_MODULE_REQ;
          this.axios.get(url, {}).then(resp => {
            //在data中声明moduleDatas数组，接收返回的数据，以便于在template中使用数据双向绑定
            this.moduleDatas = resp.data;
            console.log(resp.data);
          }).catch(resp => {});
    
          //登录成功后默认显示系统首页
          this.$router.push("/Home");
        }

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

![409dd1a7c09b4f2c8e805d520596654e.png][]

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

2.2.3.1 先构建一级导航菜单

LeftAside.vue:

![2c726233cf1d42158e85e3bd9aa0e47a.png][]

<el-submenu v-for="(m1) in moduleDatas" :key="m1.id" :index="'index_'+m1.id">
    
          <template slot="title">
            <i :class="m1.icon"></i>
            <span slot="title">{
       {m1.text}}</span>
          </template>
          
       </el-submenu>

页面效果：

![92848ea2223240038d3efc4af36f65a1.png][]

2.2.3.2 构建二级导航菜单

LeftAside.vue:

![f96fa432cb16453497452f7d1ff4d080.png][]

<el-menu-item v-for="m2 in m1.childrens" :key="m2.id" :index="m2.url">
            <span>{
       {m2.text}}</span>
          </el-menu-item>

页面效果：

![e3d9f04025884a84b5a1b6bc24d37af1.png][]

### 2.3 点击菜单实现路由跳转 ###

#### 2.3.1 创建书本管理组件 ####

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

![1a85d95cfc8d4a0f805d543b0f1d8782.png][]

#### 2.3.2 配置路由 ####

![6944d9dad4d0436eb2b9261012e63e27.png][]

#### 2.3.3 修改LeftAside组件 ####

![10991862c99c4b4999e842fdd35e16ff.png][]

#### 2.3.4 修改Main组件 ####

![ab2036a55b7244e0ab639c1f7560fd40.png][]

## 3. 系统首页配置 ##

首先创建一个首页组件

![9aea6fadb2dd4d4cba2ae470702789fa.png][]

> 在Main组件中指定的<router-view/>是用于显示各功能组件的。

配置路由：

![22314048e9c1410ea2579106410d3282.png][]

配置首页菜单：

![ac9cf55cb0ec4a2fa0d20d62f9d463c3.png][]

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

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

![37a3f4468f5a48ef8c64f9f9f6550495.png][]

<el-menu-item key="home" index="/Home">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </el-menu-item>

## 4. 表格数据显示 ##

### 4.1 页面布局 ###

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

BookList.vue:

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

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

1.  将查询书本信息的接口配置到api/action.js中

//获取书本信息
     'BOOKMSG_BOOKINFO_REQ':'/bookMsg/bookAction!getBooks.action',

2.BookList.vue组件  
图一： template部分：

![0b4f7c1ca0024b5c9685eb275d6df4cf.png][]

图二： script部分

![6137f8a8ef19419caf2f0f95d32d7283.png][]

export default {
        name: 'BookList',
    
        data: function() {
          return {
            bookname: '',
            books: []
          }
        },
    
        methods: {
          qry: function() {
            let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
            this.axios.post(url, {
              bookname: this.bookname
            }).then(resp => {
              console.log(resp);
              this.books = resp.data.data;
              
            }).catch(error => {
              console.log(error);
            });
          }
        }
      }

### 4.3 实现分页 ###

template部分：

![7b25660f427d48d88f74ee024dff8d48.png][]

<div class="block" style="text-align:right;margin-top:10px;">
          
          <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

script部分，图一

![39134ac9a7334b6e904a201a3b3cea38.png][]

qry: function() {
            let url = this.axios.urls.BOOKMSG_BOOKINFO_REQ;
            this.axios.post(url, {
              bookname: this.bookname,
              //分页参数
              page: this.page,
              rows: this.rows
            }).then(resp => {
              console.log(resp);
              this.books = resp.data.data;
              //获取总页数
              this.total = resp.data.total;
            }).catch(error => {
              console.log(error);
            });
          }

script部分，图二：

![11607d800d2341fa95a166371f97692b.png][]

//当每页显示的记录数发生变化时，设置当前页码为1，执行查询。
          handleSizeChange: function(rows) {
            this.rows = rows;
            this.page = 1;
            this.qry();
          },
    
          //当前页码发生变化时，执行查询
          handleCurrentChange: function(page) {
            this.page = page;
            this.qry();
          }

[14]: https://marketing.csdn.net/p/bb9f9e25975dba9f9b87f5272afded16
[9526499713824a2b8d9e63bc829e0316.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/071b168f55244ba5b1b9b2c16c163253.png
[88657224e0ba43cd8b866b6212bfe8ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/98e9c389b90d47b5a415e3df589cc6e4.png
[409dd1a7c09b4f2c8e805d520596654e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1449fff1d1ce4bc08b27d86ab51f9257.png
[2c726233cf1d42158e85e3bd9aa0e47a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f1313549931541d194e4172f316e707e.png
[92848ea2223240038d3efc4af36f65a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/18c05cc1bc3c40ba827163870a04904b.png
[f96fa432cb16453497452f7d1ff4d080.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a0e10e07608c4ea7b7010439b227ce80.png
[e3d9f04025884a84b5a1b6bc24d37af1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2680cb0922a041869913657045491fa5.png
[1a85d95cfc8d4a0f805d543b0f1d8782.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/98991a2274e64dc5bedc84a4fe77208d.png
[6944d9dad4d0436eb2b9261012e63e27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/353d2fe28186493794384b7479673f11.png
[10991862c99c4b4999e842fdd35e16ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cfdcabbc05f24117b2f22090708f6070.png
[ab2036a55b7244e0ab639c1f7560fd40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2b6d5620c0304831ac76cf76db4c8b4c.png
[9aea6fadb2dd4d4cba2ae470702789fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d1b49d7627014cf2af0bc5d332fefd15.png
[22314048e9c1410ea2579106410d3282.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b0464ffe02674e7c84849b238b452949.png
[ac9cf55cb0ec4a2fa0d20d62f9d463c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/233cfb5097414dc995286bd81e873795.png
[37a3f4468f5a48ef8c64f9f9f6550495.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/59bece6b08194ccaafa6ac8fae944233.png
[0b4f7c1ca0024b5c9685eb275d6df4cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a46bd42a9fbd445985bbf20e55fc5ba1.png
[6137f8a8ef19419caf2f0f95d32d7283.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3a0a925357de47b0a1070e33de105b26.png
[7b25660f427d48d88f74ee024dff8d48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b5dadbbf37af4ec2bcb57941f91a58df.png
[39134ac9a7334b6e904a201a3b3cea38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5927732958b2441381a0b89faf7fd4a4.png
[11607d800d2341fa95a166371f97692b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/22f271ce40644ec7b9da9f7b8f58e90b.png