尝试合并每个组件代码

WebService/.project

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>WebService</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.m2e.core.maven2Builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.m2e.core.maven2Nature</nature>
+	</natures>
+</projectDescription>

WebService/.settings/org.eclipse.m2e.core.prefs

@@ -0,0 +1,4 @@
+activeProfiles=
+eclipse.preferences.version=1
+resolveWorkspaceProjects=true
+version=1

WebService/src/main/java/com/java110/web/core/VueComponentElement.java

@@ -7,7 +7,9 @@ import org.slf4j.LoggerFactory;
 import org.thymeleaf.Arguments;
 import org.thymeleaf.dom.*;
 import org.thymeleaf.processor.element.AbstractMarkupSubstitutionElementProcessor;
+import org.thymeleaf.util.DOMUtils;
 
+import java.io.StringReader;
 import java.util.ArrayList;
 import java.util.List;
 
@@ -35,9 +37,10 @@ public class VueComponentElement extends AbstractMarkupSubstitutionElementProces
         if(html == null){
             throw new RuntimeException("在缓存中未找到组件【"+componentName+"】");
         }
-        Node nodeHtml = new Macro(html);
-
-        nodes.add(nodeHtml);
+        List<Node> tmpNodes = DOMUtils.getHtml5DOMFor(new StringReader(html)).getChildren();
+        for(Node tmpNode : tmpNodes) {
+            nodes.add(tmpNode);
+        }
         //css
         String css = VueComponentTemplate.findTemplateByComponentCode(componentName+"."+VueComponentTemplate.COMPONENT_CSS);
         if(css != null){
@@ -46,7 +49,7 @@ public class VueComponentElement extends AbstractMarkupSubstitutionElementProces
             nodes.add(nodeCss);
         }
 
-        //css
+        //js
         String js = VueComponentTemplate.findTemplateByComponentCode(componentName+"."+VueComponentTemplate.COMPONENT_JS);
         if(js != null){
             js = "<script type=\"text/javascript\">" + js +"</script>";

WebService/src/main/resources/components/common/commonTop.html

@@ -1,12 +1,12 @@
-<link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
-<link href="/font-awesome/css/font-awesome.css" rel="stylesheet">
+<link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css"/>
+<link href="/font-awesome/css/font-awesome.css" rel="stylesheet"/>
 <!-- Toastr style -->
-<link href="/css/plugins/toastr/toastr.min.css" rel="stylesheet">
+<link href="/css/plugins/toastr/toastr.min.css" rel="stylesheet"/>
 <!-- Gritter -->
-<link href="/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
-<link href="/css/animate.css" rel="stylesheet">
-<link href="/css/style.css" rel="stylesheet">
-<link rel="stylesheet" href="/css/common.css">
+<link href="/js/plugins/gritter/jquery.gritter.css" rel="stylesheet"/>
+<link href="/css/animate.css" rel="stylesheet"/>
+<link href="/css/style.css" rel="stylesheet"/>
+<link rel="stylesheet" href="/css/common.css"/>
 <script src="/js/vue/vue.min.js" ></script>
 <script src="/js/vue/vue-resource.min.js" ></script>
 <script src="/js/core.js" ></script>

WebService/src/main/resources/components/login/login.html

@@ -6,10 +6,10 @@
     <p style="color: red;">{{loginInfo.errorInfo}}</p>
     <div class="m-t" role="form">
         <div class="form-group">
-            <input type="text" v-model="loginInfo.username" class="form-control" placeholder="用户名" required="">
+            <input type="text" v-model="loginInfo.username" class="form-control" placeholder="用户名" required=""/>
         </div>
         <div class="form-group">
-            <input type="password" v-model="loginInfo.passwd" class="form-control" placeholder="密码" required="">
+            <input type="password" v-model="loginInfo.passwd" class="form-control" placeholder="密码" required=""/>
         </div>
         <vc:create name="validate-code"></vc:create>
         <button type="submit" v-on:click="doLogin()" class="btn btn-primary block full-width m-b">登录</button>

WebService/src/main/resources/components/login/login.js

@@ -34,6 +34,13 @@
     vc.component.$on('errorInfoEvent',function(_errorInfo){
         vm.loginInfo.errorInfo = _errorInfo;
         console.log('errorInfoEvent 事件被监听',_errorInfo)
-    })
+    });
+
+    vc.component.$on('login_param_change_event',function(params){
+            for(var tmpAttr in params){
+                vm.loginInfo.loginInfo[tmpAttr] = params[tmpAttr];
+            }
+            console.log('errorInfoEvent 事件被监听',params)
+        })
 
 })(window.vc);

WebService/src/main/resources/components/validate_code/validate-code.html

@@ -1,4 +1,4 @@
-<div class="form-group" id="validate-code">
-    <input type="text" v-model="code" class="form-control" placeholder="请输入验证码" required=""/>
-    <img v-bind:src="codeImage" v-on:click="testEvent()"/>
+<div class="form-group" id="validatecode">
+    <input type="text" v-model="validateCode" class="form-control" placeholder="请输入验证码" required=""/><slot></slot>
+    <img v-bind:src="codeImage" v-on:click="generateCode()"/>
 </div>

WebService/src/main/resources/components/validate_code/validate-code.js

@@ -1,14 +1,17 @@
 (function(vc){
     var vm = new Vue({
-        el:'#validate-code',
-            data:{
-                    code:'',
-                    codeImage:'',
-                    errorInfo:''
+        el:'#validatecode',
+            data:function(){
+                return {
+                   validateCode:'123',
+                   codeImage:'/callComponent/validate-code/generateValidateCode',
+                   errorInfo:''
+                }
             },
             mounted:function(){
                        this.generateCode();
                    },
+
             methods:{
                 generateCode(){
                     var param = {
@@ -17,24 +20,20 @@
                     vc.http.call('validate-code','generateValidateCode',param,
                                 {
                                     emulateJSON:true
-                                 },function(json,res){
+                                 },
+                                 function(json,res){
                                     //vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
                                     if(res.status == 200){
                                         vm.codeImage = json;
                                         return ;
                                     }
-                                    vm.$emit('errorInfoEvent',json);
+                                    vc.component.$emit('errorInfoEvent',json);
                                  },function(errInfo,error){
                                     console.log('请求失败处理');
 
-                                    vm.loginInfo.errorInfo = errInfo;
-                                 })
+                                    vm.errorInfo = errInfo;
+                                 });
 
-                },
-                testEvent(){
-                //vc.dispatchEvent('errorInfoEvent',"测试");
-                    vc.component.$emit('errorInfoEvent',"测试");
-                    console.log("testEvent")
                 }
             }
 

WebService/src/main/resources/static/js/core.js

@@ -4,18 +4,27 @@
 (function(window, undefined){
     "use strict";
    var vc = window.vc || {};
+   var _vmOptions = window.vc.vmOptions || {};
+
+   _vmOptions = {
+        el:'#component',
+        data:{
+
+        },
+        methods:{
+
+        },
+
+   };
+
     vc = {
         version:"v0.0.1",
         name:"vue component",
         author:'java110',
-        component:new Vue()
+        vmOptions:_vmOptions
     };
 
-    var component = window.component || new Vue({
-        methods:{
 
-        }
-    });
    //通知window对象
    window.vc = vc;
 })(window);
@@ -38,6 +47,26 @@
 
     };
 
+    var vmOptions = vc.vmOptions;
+    //继承方法,合并 _vmOptions 的数据到 vmOptions中
+    vc.extends = function(_vmOptions){
+        if(typeof _vmOptions !== Object){
+            throw "_vmOptions is not Object"
+        }
+        //处理 data 对象
+        if(_vmOptions.hasOwnProperty('data')){
+            for(var dataAttr in _vmOptions.data){
+                vmOptions.data[dataAttr] = _vmOptions.data[dataAttr];
+            }
+        }
+        //处理methods 对象
+        if(_vmOptions.hasOwnProperty('methods')){
+            for(var dataAttr in _vmOptions.data){
+                vmOptions.data[dataAttr] = _vmOptions.data[dataAttr];
+            }
+        }
+    };
+
     //绑定跳转函数
     vc.jumpToPage = function(url){
                                     window.location.href = url;

WebService/src/main/resources/static/js/vc-core.js

@@ -0,0 +1,11 @@
+/**
+    初始化vue 对象
+    @param vc vue component对象
+    @param vmOptions Vue参数
+**/
+(function(vc,vmOptions){
+
+    var vm = new Vue(vmOptions);
+
+    window.vc.component = vm;
+})(window.vc,window.vc.vmOptions);