为了学习了解Vue.js，试着写了一个demo，如下;
准备工作：
需要引入的js和css库有：
1、vue.js 主要是学习，所以引入了这个js库，实际运行时应该使用vue.min.js
2、axios.js 主要作用是网络请求，vue2.0推荐使用这个js库；
3、pure.css 轻量级的css库。
后台接口实现使用springMvc,引入的包如下：
<?xml version="1.0" encoding="UTF-8"?> <ivy-module version="2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://ant.apache.org/ivy/schemas/ivy.xsd"> <info organisation="com.my" module="httpdemo" status="integration"> </info> <configurations> <conf name="default" visibility="public" description="runtime dependencies and master artifact can be used with this conf" extends="runtime,master"/> <conf name="master" visibility="public" description="contains only the artifact published by this module itself, with no transitive dependencies"/> <conf name="compile" visibility="public" description="this is the default scope, used if none is specified. Compile dependencies are available in all classpaths."/> <conf name="provided" visibility="public" description="this is much like compile, but indicates you expect the JDK or a container to provide it. It is only available on the compilation classpath, and is not transitive."/> <conf name="runtime" visibility="public" description="this scope indicates that the dependency is not required for compilation, but is for execution. It is in the runtime and test classpaths, but not the compile classpath." extends="compile"/> <conf name="test" visibility="private" description="this scope indicates that the dependency is not required for normal use of the application, and is only available for the test compilation and execution phases." extends="runtime"/> <conf name="system" visibility="public" description="this scope is similar to provided except that you have to provide the JAR which contains it explicitly. The artifact is always available and is not looked up in a repository."/> <conf name="sources" visibility="public" description="this configuration contains the source artifact of this module, if any."/> <conf name="javadoc" visibility="public" description="this configuration contains the javadoc artifact of this module, if any."/> <conf name="optional" visibility="public" description="contains all optional dependencies"/> </configurations> <dependencies> <!-- Spring 相关内容 --> <dependency org="org.springframework" name="spring-core" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.springframework" name="spring-beans" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.springframework" name="spring-web" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.springframework" name="spring-context" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.springframework" name="spring-context-support" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.springframework" name="spring-aop" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.springframework" name="spring-expression" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.springframework" name="spring-tx" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.springframework" name="spring-jms" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.springframework" name="spring-jdbc" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.springframework" name="spring-webmvc" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="aopalliance" name="aopalliance" rev="1.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="com.sun.xml.fastinfoset" name="FastInfoset" rev="1.2.13" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="cglib" name="cglib-nodep" rev="3.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.aspectj" name="aspectjrt" rev="1.8.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.aspectj" name="aspectjweaver" rev="1.8.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <!-- CXF 相关内容 --> <dependency org="org.apache.cxf" name="cxf-bundle" rev="2.7.11" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.geronimo.specs" name="geronimo-javamail_1.4_spec" rev="1.7.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.geronimo.specs" name="geronimo-activation_1.1_spec" rev="1.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.geronimo.specs" name="geronimo-annotation_1.0_spec" rev="1.1.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.geronimo.specs" name="geronimo-stax-api_1.0_spec" rev="1.0.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.geronimo.specs" name="geronimo-ws-metadata_2.0_spec" rev="1.1.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.geronimo.specs" name="geronimo-jaxws_2.2_spec" rev="1.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.neethi" name="neethi" rev="3.0.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.velocity" name="velocity" rev="1.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.ws.xmlschema" name="xmlschema-core" rev="2.1.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="javax.xml.bind" name="jaxb-api" rev="2.2.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="javax.xml.soap" name="saaj-api" rev="1.3.5" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="javax.ws.rs" name="javax.ws.rs-api" rev="2.0-m10" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="com.sun.xml.bind" name="jaxb-xjc" rev="2.2.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="com.sun.xml.bind" name="jaxb-core" rev="2.2.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="com.sun.xml.messaging.saaj" name="saaj-impl" rev="1.3.23" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.codehaus.woodstox" name="woodstox-core-asl" rev="4.3.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.codehaus.woodstox" name="stax2-api" rev="3.1.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.codehaus.jettison" name="jettison" rev="1.3.5" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="wsdl4j" name="wsdl4j" rev="1.6.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="asm" name="asm" rev="3.3.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="mysql" name="mysql-connector-java" rev="5.1.18" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <!-- Log 相关内容 --> <dependency org="org.slf4j" name="slf4j-api" rev="1.7.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.slf4j" name="jcl-over-slf4j" rev="1.7.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.slf4j" name="jul-to-slf4j" rev="1.7.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.slf4j" name="log4j-over-slf4j" rev="1.7.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="ch.qos.logback" name="logback-classic" rev="1.1.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="ch.qos.logback" name="logback-core" rev="1.1.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <!-- json序列化相关 --> <dependency org="com.fasterxml.jackson.core" name="jackson-core" rev="2.7.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="com.fasterxml.jackson.core" name="jackson-annotations" rev="2.7.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="com.fasterxml.jackson.core" name="jackson-databind" rev="2.7.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="javax.servlet" name="javax.servlet-api" rev="3.1.0" conf="provided->*" transitive="false"/> <dependency org="dom4j" name="dom4j" rev="1.6.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="jaxen" name="jaxen" rev="1.1.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="com.googlecode.aviator" name="aviator" rev="2.3.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="commons-beanutils" name="commons-beanutils" rev="1.8.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.commons" name="commons-vfs2" rev="2.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.commons" name="commons-lang3" rev="3.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.poi" name="poi" rev="3.10-FINAL" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.apache.poi" name="poi-ooxml" rev="3.10-FINAL"/> <!--文件上传--> <dependency org="commons-fileupload" name="commons-fileupload" rev="1.3.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="commons-io" name="commons-io" rev="2.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="com.google.code.gson" name="gson" rev="2.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <!-- weibo使用 --> <dependency org="commons-httpclient" name="commons-httpclient" rev="3.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="com.sina" name="weibo4j-oauth2" rev="2.1.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <!-- BaiduPush使用 --> <dependency org="com.baidu" name="baidu-push" rev="1.1.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <!-- 编辑器使用 --> <dependency org="com.baidu" name="baidu-ueditor" rev="1.1.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <!-- Unit Test --> <dependency org="org.springframework" name="spring-test" rev="4.3.9.RELEASE" conf="test->*" transitive="false" /> <dependency org="junit" name="junit" rev="4.10" conf="test->*" transitive="false" /> <dependency org="org.hamcrest" name="hamcrest-core" rev="1.1" conf="test->*" transitive="false" /> <dependency org="org.dbunit" name="dbunit" rev="2.4.8" conf="test->*" transitive="false" /> <dependency org="com.yahoo.platform.yui" name="yuicompressor" rev="2.4.7" conf="compile->compile(*),master(*)" transitive="false"/> <!--image metadata--> <dependency org="com.drewnoakes" name="metadata-extractor" rev="2.8.1" conf="compile->compile(*),master(*)" transitive="false"/> <dependency org="com.adobe.xmp" name="xmpcore" rev="5.1.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <!-- FreeMarker --> <dependency org="org.freemarker" name="freemarker" rev="2.3.23" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false" /> <!-- 亚马逊--> <dependency org="com.amazonaws" name="aws-java-sdk-s3" rev="1.10.43" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="com.amazonaws" name="aws-java-sdk-core" rev="1.10.43" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="com.amazonaws" name="aws-java-sdk-kms" rev="1.10.43" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="joda-time" name="joda-time" rev="2.8.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <!-- 阿里云 --> <dependency org="com.aliyun.openservices" name="aliyun-openservices" rev="OTS-2.0.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="commons-codec" name="commons-codec" rev="1.10" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="commons-logging" name="commons-logging" rev="1.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <dependency org="org.jdom" name="jdom" rev="1.1.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/> <!--华为云--> <dependency org="com.jamesmurty.utils" name="java-xmlbuilder" rev="0.4" transitive="false" /> <dependency org="com.huawei.obs" name="obs-client" rev="1.5.50" transitive="false" /> </dependencies> </ivy-module>
后台代码主要实现接口的发布，用于前台交互，这里就不写了！
开始写代码：
新建html页面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>文件迁移监控</title> <script src="vue/vue.js"></script> <script src="vue/axios.js"></script> <script src="vue/js/vuemain.js"></script> <!-- pure的 --> <link rel="stylesheet" href="pure/pure-min.css"> <link rel="stylesheet" href="pure/base-min.css"> <link rel="stylesheet" href="pure/buttons-min.css"> <link rel="stylesheet" href="pure/forms-min.css"> <link rel="stylesheet" href="pure/grids-min.css"> <link rel="stylesheet" href="pure/menus-min.css"> <link rel="stylesheet" href="pure/tables-min.css"> <!--[if lte IE 8]> <link rel="stylesheet" href="pure/grids-responsive-old-ie-min.css"> <![endif]--> <!--[if gt IE 8]><!--> <link rel="stylesheet" href="pure/grids-responsive-min.css"> <!--<![endif]--> <!-- 自己的 --> <link type="text/css" media="screen,projection" rel="stylesheet" href="vue/css/vue.css" /> </head> <body> <div class="header">文件迁移监控</div> <div id="app" class="pure-g content"> <div class="pure-u-4-5 high-100"> <div class="high-5"> <div class="pure-u-1-12 high-100 runnig" @click="show()">{{runing}}</div> <div class="pure-u-1-12 high-100 complate">{{complate}}</div> <div class="pure-u-1-12 high-100 fail">{{fail}}</div> </div> <div class="pure-u-1-1 high-80"> <div class="high-100"> <table class="pure-table pure-table-bordered"> <thead> <tr> <th>#</th> <th v-for="th in taskTh"> {{th}} </th> </tr> </thead> <tbody> <tr v-for="(task,index) in taskList"> <td>{{index + 1}}</td> <td>{{task.id}}</td> <td>{{task.src}}</td> <td>{{task.dest}}</td> <td>{{task.state}}</td> <td>{{task.startTime}}</td> <td>{{task.endTime}}</td> <td v-on:click="deleteTask(index)">删除</td> </tr> </tbody> </table> </div> </div> <div> <ul class="pagination" > <li> <button v-on:click="refersh">刷新</button></li> <!-- <li> <select v-model="pageLen"> <option v-for="len in lenArr" v-bind:value="len"> {{ len }} </option> </select> </li> --> <li v-show="current != 1" @click="goto(1)" ><a href="#">首页</a></li> <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li> <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index"> <a href="#" >{{index}}</a> </li> <li v-show="totalPage != current && totalPage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li> <li v-show="totalPage != current && totalPage != 0 " @click="totalPage" ><a href="#">末页</a></li> <li><span>总数：{{total}},共{{totalPage}}页,当前页：{{current}}</span></li> </ul> </div> </div> <div class="pure-u-1-5 high-100"> <label>新建迁移任务</label> <form class="pure-form pure-form-stacked"> <fieldset> <div class="pure-control-group"> <label>源文件路径:</label> <input v-model="source" type="text" placeholder="" required="required"> <span class="pure-form-message" hidden="hidden">请输入源路径</span> </div> <div class="pure-control-group"> <label class="list-left">目标路径:</label> <input v-model="dest" type="text" placeholder="" required="required"> <span class="pure-form-message" hidden="hidden">请输入目标路径</span> </div> </fieldset> </form> <span class="pure-controls"> <button v-on:click="createTask" class="pure-button pure-button-primary list-left">创建</button> </span> </div> </div> <div class="footer">Write By Lgp</div> </body> </html>
使用pure.css，采用上中下布局，实现表格，表单和分页的展示；
css代码：
html , body, .high-100 { height: 100%; } .high-3 { height: 3%; } .high-5 { height: 5%; } .high-10 { height: 10%; } .high-20 { height: 20%; } .high-33 { height: 33%; } .high-50 { height: 50%; } .high-66 { height: 66%; } .high-80 { height: 80%; } .high-90 { height: 90%; } .header { height: 2%; background: #0080c0; color: #ffffff; text-align: left; padding: 1em; font-size: 100%; } .content{ height: 88%; overflow: auto; } .content>div , .content>div>div{ border: 1px solid #400040; box-sizing: border-box; padding: 5px; } .runnig{ background: #42bdb0; } .complate{ background: #b6ec13; } .fail{ background: #b5804a; } .pagination { position: relative; } .pagination li{ display: inline-block; margin:0 5px; } .pagination li a{ padding:.5rem 1rem; display:inline-block; border:1px solid #ddd; background:#fff; color:#0E90D2; } .pagination li a:hover{ background:#eee; } .pagination li.active a{ background:#0E90D2; color:#fff; } .footer { height: 2%; background: #808080; color: #000000; text-align: center; padding: 1em; font-size: 80%; }
重点来了，js代码：
window.onload=function(){ var content = new Vue({ el: '#app', data:{ runing:'正在运行', complate:'已完成', fail:'失败任务', source:'', dest:'', taskTh:[ 'id','源文件','目标文件','状态','开始时间','结束时间','操作' ], taskList:[ ], current:1, lenArr:[ 5,10,20 ], total:0, pageLen:10, showItem:5, totalPage:7 }, created:function(){ this.refersh(); }, methods:{ // 函数 createTask : function(){ this.taskList.push({ 'id':this.uuid(), 'src':this.source, 'dest':this.dest, 'state':'waiting', 'startTime': new Date(), 'endTime':'' }); }, deleteTask: function(index){ this.taskList.splice(index, 1); }, goto:function(index){ if(index == this.current) return; this.current = index; }, refersh:function(data){ var self = this; axios.get('/httpdemo/api/transfer/list',data).then(function(resp){ self.taskList = resp.data; }); }, uuid : function() { var s = []; var hexDigits = "0123456789abcdef"; for (var i = 0; i < 36; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); } s[14] = "4"; s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); s[8] = s[13] = s[18] = s[23] = "-"; var uuid = s.join(""); return uuid; }, }, computed:{ pages:function(){ var pag = []; if( this.current < this.showItem ){ // 如果当前的激活的项 小于要显示的条数 // 总页数和要显示的条数那个大就显示多少条 var i = Math.min(this.showItem,this.totalPage); while(i){ pag.unshift(i--); } }else{ // 当前页数大于显示页数了 var middle = this.current - Math.floor(this.showItem / 2 ),// 从哪里开始 i = this.showItem; if( middle > (this.totalPage - this.showItem) ){ middle = (this.totalPage - this.showItem) + 1 } while(i--){ pag.push( middle++ ); } } return pag } }, watch:{ // 监控 } }); }
以上！