为了学习了解Vue.js,试着写了一个demo,如下;
准备工作:
需要引入的js和css库有:
1、vue.js 主要是学习,所以引入了这个js库,实际运行时应该使用vue.min.js
2、axios.js 主要作用是网络请求,vue2.0推荐使用这个js库;
3、pure.css 轻量级的css库。
后台接口实现使用springMvc,引入的包如下:
![](http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif)
![](http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif)
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>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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>
<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">
<link rel="stylesheet" href="pure/grids-responsive-min.css">
<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 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 Lgpdiv>
body>
html>
使用pure.css,采用上中下布局,实现表格,表单和分页的展示;
css代码:
![](http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif)
![](http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif)
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.οnlοad=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:{ // 监控 } }); }
以上!