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

一、动态树功能

1.1修改静态树形

先对左侧菜单栏进行修改：
LeftNav.vue

/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

运行结果：

1.2拿到树形菜单数据

然后拿到树新菜单数据;

r然后运用 let url = this.axios.urls.SYSTEM_MENU_TREE;定义路径；
this.axios.post发送请求
写在钩子函数created里面；

/  //拿到树形节点的数据
      let url = this.axios.urls.SYSTEM_MENU_TREE;
      this.axios.post(url, {})
        .then(resp => { //代表成功 箭头函数 jdk8的语法
          console.log(resp);
        }).catch(function() { //代表失败

        });
1
2
3
4
5
6
7
8

拿到数据

1.3、通过拿到的数据，渲染树形节点

先定义变量然后赋值

 created() {
      // 从总线拿到this.collapsed变量
      this.$root.bus.$on('collapsed-side', v => {
        this.collapsed = v;
      });

      //拿到树形节点的数据
      let url = this.axios.urls.SYSTEM_MENU_TREE;
      this.axios.post(url, {})
        .then(resp => { //代表成功 箭头函数 jdk8的语法
        this.menus=resp.data.result;
          console.log(resp);
        }).catch(function() { //代表失败

        });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

然后通过变量menus，拿到里面的数据，然后用v-for遍历给树形节点赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

运行结果：

1.4实现路由跳转

在el-menv里面写入 router :default-active=“$route.path”

第二步找到放页面的地方，定义锚点

然后定义路由
先写一个Articles.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

index.js

import Vue from 'vue'
import Router from 'vue-router'
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
        }
      ]
    }


  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

运行结果：

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

2.1实现数据表格

先找一个表格模板进行改造

   
     
    
    
    
      
      
      
      
      
      
      
      
      
    

  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

然后定义我们需要的变量

data() {
      return {
        listData: []/* ,
        formInline: {
          page: 1,
          rows: 10,
          title: ''
        },
        total: 0 */
      };
    }
1
2
3
4
5
6
7
8
9
10
11

然后定义路径，获取数据

 created() {
      //拿到书籍表的数据
      let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
      this.axios.post(url, {})
        .then(resp => { //代表成功 箭头函数 jdk8的语法
          this.listData = resp.data.result;
          console.log(resp);
        }).catch(function() { //代表失败

        });
    }
1
2
3
4
5
6
7
8
9
10
11

运行结果：

2.2 分页查询

2.2.1半成品

 
      
        
      
      
        搜索
        
     
    
1
2
3
4
5
6
7
8
9

分页条

 
   
    
1
2
3
4
5

定义分页所需要的变量

data() {
      return {
        listData: [],
        formInline: {
          page: 1,
          rows: 10,
          title: ''
        },
        total: 0
      };
    }
1
2
3
4
5
6
7
8
9
10
11

分页需要的方法：

methods: {
      handleSizeChange(rows) {
        this.formInline.page = 1;
        this.formInline.rows = rows;
        this.search();
      },
      handleCurrentChange(page) {
        this.formInline.page = page;
        this.search();
      }
    }
1
2
3
4
5
6
7
8
9
10
11

运行结果：半成品

2.2.2成品

页面代码

    
      
        
      
      
        搜索
        
      
    
    
    
      
      
      
      
      
      
      
      
      
    
    
    
    
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

所需变量：

 data() {
      return {
        listData: [],
        formInline: {
          page: 1,
          rows: 10,
          title: ''
        },
        total: 0
      };
    }
1
2
3
4
5
6
7
8
9
10
11

方法：

 methods: {
      // 页数大小改变方法
      handleSizeChange(rows) {
        this.formInline.page = 1;
        this.formInline.rows = rows;
        this.search();
      },
      // 页码发生改变方法
      handleCurrentChange(page) {
        this.formInline.page = page;
        this.search();
      },
      // 分页查询方法带参数
      doSearch(params) {
        let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
        // let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';

        this.axios.post(url, params).then((response) => {
          console.log(response);
          this.listData = response.data.result;
          this.total = response.data.pageBean.total;
        }).catch(function(error) {
          console.log(error);
        });
      },
      search() {
        this.doSearch(this.formInline);
      }
    },
    // 不带参数查询方法
    created() {
      this.doSearch({});
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

运行结果：