Vue+ElementUI+SpringMVC实现分页

Vue + ElementUI + SpringMVC实现分页

这一段时间写项目用到了Vue+ElementUI,这里记录一下使用ElementUI内置分页插件结合后端SSM框架的实现思路和实现过程。

其中遇到了很多坑,我会尽量把见到的坑都记录下来,希望对你有所帮助。

首先 让我们看一下最终效果:

起步

本博文的主要讲一下Vue+ElementUI结合后端SpringMVC实现分页的实现思路,基本的elementUI用法请自行百度;

介绍

本案例中设计到的技术栈:

  • ElementUI

  • Vue.js

  • vue-resource.js

  • SSM框架

  • PageHelper: Mybatis的分页插件

准备

1、SSM框架的整合教程可以参考我的这篇博文:

2、在后端项目中导入PageHelper.jar的依赖

1
2
3
4
5

    com.github.pagehelper
    pagehelper
    4.0.0

*注意**
使用PageHelper分页插件除了要导入依赖,还需要在Mybatis配置文件中进行相关配置,并交给Spring进行管理。如下配置即可:

1
2
3
4
5
6
7

    
    
        
        
    

这里还要注意的是PageHelper5.X版本和PageHelper4.X版本PageHelper类所在的包名是不同的。
在Spring配置文件中扫描此配置文件即可:

3、在HTML中导入vue.js and element-ui 。

好的,至此,我们把基本的环境已经讲过了,下面看下相关前端代码:

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
52
53
54
55
56
57
58
59
60
61
62


    
    
    
    
    
    
    
    
    
    
    
    
    
    




                    
                    
                    

你可能感兴趣的:(java入门篇)