Vue页面Demo

为了学习了解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>
        
        <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>

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>

<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代码：

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.ο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:{
            // 监控
        }
    });
}

以上！

转载于:https://www.cnblogs.com/liangblog/p/7403331.html