anchor.diff:  - **VueJS 2.0**
   - **ElementUI**
   
  -
  -后端数据库用的是Mysql，其实使用其他的数据库也可以，因为PageHelper插件里有对于各个数据库的兼容。PageHelper的本质是插入一个Interceptor，在mybatis的sql语句执行之前进行分页处理，本质上是加了两个limit的参数。对于PageHelper的配置和用法，请参考joker_zhou写的[Spring + Mybatis 使用 PageHelper 插件分页][1]这篇文章，这里不再赘述。
  +后端数据库用的是Mysql，其实使用其他的数据库也可以，因为PageHelper插件里有对于各个数据库的兼容。PageHelper的本质是插入一个Interceptor，在mybatis的sql语句执行之前进行分页处理，本质上是加了两个limit的参数。对于PageHelper的配置和用法，请参考joker_zhou写的
  +[http://blog.csdn.net/joker_zhou/article/details/50418005[Spring + Mybatis 使用 PageHelper 插件分页]]这篇文章，这里不再赘述。
   
   前端所使用的是最近很火的vuejs框架2.0，这是一个mvvm架构的框架，类似于AngularJS，但是更加轻量。UI框架使用的是由饿了么团队推出的elementUI框架，这是一款基于vuejs的框架，正好和我们的前端框架完美结合，并且封装了很多组件，开发起来很方便。
   下面就是这个Demo的截图，实现了基本的增删改查功能，表格排序是elementUI的表格控件里自带的一个属性，可以很方便的设置。
   
   ### 正文
   下面是程序的截图，右键在新标签页中打开图片可以看得清楚些。
  -<center>
  -(http://img.blog.csdn.net/20170419115058079?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjkwNzA0OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
  -<center>
  +
  +image::http://img.blog.csdn.net/20170419115058079?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjkwNzA0OQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast[]
   
   下面来看一下前端的代码，首先是引入的文件：
   
  
positive.code: 
  ```
  	<style>
  	  .el-select .el-input {
  	    width: 110px;
  	  }
  
    	  .el-table .info-row {
      		background: #c9e5f5;
        }	  
        
        #top {
  	      background:#20A0FF;
  	      padding:5px;
  	      overflow:hidden
        }
  	</style>
  ```
  
  
negative.code: 	<script src="./js/vue-resource.js"></script>
  	<script src="./element-ui/lib/index.js"></script>
  ```
  其中第一行和最后一行是ElementUI的导入包，可以从[http://element.eleme.io/#/zh-CN/component/installation[ElementUI官网]]下载到源文件引入，也可以直接使用CDN的方式来引入：
  ```
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
  