使用ElementUI结合Vue完善主页的导航菜单和书籍管理以及后台数据分页查询

目录

动态树

数据表

 案列

书籍管理

---

动态树

动态树（Dynamic tree）是一种数据结构，它可以在树中动态地插入、删除和修改节点。与静态树不同，静态树的节点是固定的，一旦构建完成就无法再进行修改。而动态树可以在运行时根据需要进行节点的插入、删除和修改操作。

在计算机科学中，动态树常用于解决一些与树相关的问题，如动态连通性问题、动态最小生成树问题等。动态树的设计和实现较为复杂，通常会使用一些高级数据结构和算法，如平衡二叉树、堆等。

动态树的应用场景很广泛，例如在网络路由算法中可以使用动态树来维护网络拓扑结构，以便动态地调整路由路径；在图像处理中可以使用动态树来表示图像的层次结构，以便进行图像的快速搜索和修改等。

数据表

首先先创建数据表以及添加好数据

 案列

在src/api目录下增加action.js的地址配置

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/ssm', //服务器
	'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆
	'SYSTEM_USER_DOREG': '/userAction.action', //注册
  'SYSTEM_MENUS': '/module/queryRootNode', //左侧菜单树
	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}
}

AppMain.vue的组件代码中修改<template>标签中的代码

 LeftNav.vue编写组件中的代码

在src/views目录中创建book文件，再在book的文件下创建以下两个组件

AddBook.vue

 BookList.vue

在src/router目录中的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 Register from '@/views/Register'
import AddBook from '@/views/book/AddBook'
import BookList from '@/views/booK/BookList'
Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'Login',
    component: Login
  }, {
    path: '/Register',
    name: 'Register',
    component: Register
  }, {
    path: '/AppMain',
    name: 'AppMain',
    component: AppMain,
    children: [{
      path: '/LeftNav',
      name: 'LeftNav',
      component: LeftNav
    }, {
      path: '/TopNav',
      name: 'TopNav',
      component: TopNav
    },{
      path: '/book/AddBook',
      name: 'AddBook',
      component: AddBook
    }, {
      path: '/booK/BookList',
      name: 'BookList',
      component: BookList
    }]
  }]
})

效果图

书籍管理

 BookList.vue 的组件中编写

查询效果