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

目录

一、动态树功能

1、数据库树形菜单表

2、create方法中通过Ajax进行前后端数据数据交互

3、遍历menus数组，将数据渲染到页面

4、得到动态树页面

 5、定义跳转组件

 二、数据列表

1、表格代码

2、create方法中通过Ajax进行前后端数据数据交互

3、页面展示

三、右侧文章的分页查询功能

1、分页查询功能

2、定义组件中的数据和方法

3、页面展示

---

一、动态树功能

打开后台eclipse；连接后台不需要使用后台环境；

注掉src/main.js下的

// process.env.MOCK && require('@/mock')

1、数据库树形菜单表

左侧树形菜单数据 

2、create方法中通过Ajax进行前后端数据数据交互

3、遍历menus数组，将数据渲染到页面

①、 key是id标识唯一性， index是路由跳转路径

 :index="'id_'+m.treeNodeId" v-for="m in menus">
     
      :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">
       
        m2.icon">
        {{m2.treeNodeName}}
     
   

4、得到动态树页面

 5、定义跳转组件

①、LeftNav.vue标识index是路径

router :default-active="$route.path"

②、AppMain.vue中定义锚点

 ③、建立Articles组件

（1）属于业务，定在views中 

（2）新建sys目录，建立Articles组件

（3）配置路由router/index.js

        Articles 属于AppMain的子组件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
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
        }]
    }
  ]
})

（4）界面展示

 二、数据列表

1、表格代码

2、create方法中通过Ajax进行前后端数据数据交互

3、页面展示

三、右侧文章的分页查询功能

1、分页查询功能

可以从element官网中找到相关组件

2、定义组件中的数据和方法

3、页面展示

①、查询所有

②、带条件查询 

结束