为了学习了解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>
ivy.xml
后台代码主要实现接口的发布，用于前台交互，这里就不写了！
开始写代码：
新建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%;
}
vue.css
重点来了，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:{
// 监控
}
});
}
以上！