目录

一、动态树

1.1 准备工作

1.1.1 准备数据库

1.1.2 准备好后台服务接口，Moudel查询，和Book查询（支持分页）

1.1.3 修改mock.js测试环境

1.1.4 配置请求路径

1.2 构建导航菜单

1.2.1 通过接口获取数据

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

1.3 点击菜单实现路由跳转

1.3.1 创建书本管理组件

1.3.2 配置路由 

1.3.3 修改LeftNav组件

1.3.4 修改AppMain组件

1.3.5 效果展示

二、表格数据分页显示

2.1 前端页面和分页实现

2.2 效果展示

---

一、动态树

1.1 准备工作

1.1.1 准备数据库

1. 左侧导航栏

2. 书籍表

1.1.2 准备好后台服务接口，Moudel查询，和Book查询（支持分页）

1.1.3 修改mock.js测试环境

 

1.1.4 配置请求路径

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

'SYSTEM_MODULE_REQ': '/module/queryRootNode', //左侧菜单

1.2 构建导航菜单

1.2.1 通过接口获取数据

LeftNav.vue：

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

    }

 通过打印resp.data数据，在控制台查看数据是否正常获取：

 

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

动态生成菜单：

<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#ffbf00" 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/imgs/logo.png" alt="">
    </div>

    <el-submenu v-for="m in moduleDatas" :key="'key_'+m.id" :index="'index_'+m.id">
      <template slot="title">
        <i :class="m.icon"></i>
        <span slot="title">{{m.text}}</span>
      </template>
      <!--
       使用v-for生成二级导航菜单，index为功能url值，二级菜单为叶子节点，为具体功能的功能菜单，
       所以url一定有值（一级菜单的url为空）。
       测试数据二级菜单没有分组，所以不用el-menu-item-group，只要生成el-menu-item即可。
       -->
      <el-menu-item v-for="m2 in m.modules" :key="m2.id" :index="m2.url">
        <span>{{m2.text}}</span>
      </el-menu-item>
    </el-submenu>

  </el-menu>
</template>

 

 

1.3 点击菜单实现路由跳转

1.3.1 创建书本管理组件

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

 

 

1.3.2 配置路由 

1.3.3 修改LeftNav组件

        要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。

注1：导航当前项，在el-menu标签中绑定 :default-active="$route.path"，注意是绑定属性，不要忘了加“:”，当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。

注2：el-submenu标签中的url属性不能为空，且不能相同，否则会导致多个节点收缩/折叠效果相同的问题。

1.3.4 修改AppMain组件

1.3.5 效果展示

 

二、表格数据分页显示

2.1 前端页面和分页实现

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

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="warning" 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
        }
        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.BOOKMSG_BOOKINFO_REQ;
        this.axios.get(url, {
          params: params
        }).then(d => {
          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>

 

2.2 效果展示