使用thymeleaf模板引擎，引入frame框架和公用css和js文件

src/main/resources/static/js/LoginStyle.js

@@ -0,0 +1,116 @@
+var Main = {
+    data() {
+        var checkuserName = (rule, value, callback) => {
+            if (!value) {
+                return callback(new Error('用户名不能为空'));
+            } else {
+                callback();
+            }
+            /*        setTimeout(() => {
+                      if (!Number.isInteger(value)) {
+                        callback(new Error('请输入数字值'));
+                      } else {
+                        if (value < 18) {
+                          callback(new Error('必须年满18岁'));
+                        } else {
+                          callback();
+                        }
+                      }
+                    }, 1000);*/
+        };
+        var validatePass = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请输入密码'));
+            } else {
+                if (this.ruleForm2.checkPass !== '') {
+                    this.$refs.ruleForm2.validateField('checkPass');
+                }
+                callback();
+            }
+        };
+        var validatePass2 = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请再次输入密码'));
+            } else if (value !== this.ruleForm2.pass) {
+                callback(new Error('两次输入密码不一致!'));
+            } else {
+                callback();
+            }
+        };
+        return {
+            ruleForm2: {
+                pass: '',
+                checkPass: '',
+                userName: '',
+                email: ''
+            },
+            activeName: 'login',
+            rules2: {
+                pass: [
+                    {validator: validatePass, trigger: 'blur'}
+                ],
+                checkPass: [
+                    {validator: validatePass2, trigger: 'blur'}
+                ],
+                userName: [
+                    {validator: checkuserName, trigger: 'blur'}
+                ]
+            }
+        };
+    },
+    methods: {
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    alert('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        handleClick(tab, event) {
+            console.log(tab, event);
+        },
+        showMsg(msg) {
+            this.$message({
+                message: msg,
+                type: 'error'
+            });
+        },
+        notiSuccess(title, value) {
+            this.$notify({
+                title: title,
+                message: value,
+                type: 'success'
+            });
+        },
+        notiWarning(title, value) {
+            this.$notify({
+                title: title,
+                message: value,
+                type: 'warning'
+            });
+        },
+
+        notiInfo(title, value) {
+            this.$notify.info({
+                title: title,
+                message: value
+            });
+        },
+
+        notiError(title, value) {
+            this.$notify.error({
+                title: title,
+                message: value
+            });
+        }
+
+    }
+}
+var Ctor = Vue.extend(Main)
+var con = new Ctor().$mount('#app')

src/main/resources/static/js/homePage.js

@@ -0,0 +1,56 @@
+var Main = {
+    data() {
+        return {
+            activeIndex: '1',
+            activeIndex2: '1'
+        };
+    },
+    methods: {
+        handleSelect(key, keyPath) {
+            console.log(key, keyPath);
+        },
+        handleOpen(key, keyPath) {
+            console.log(key, keyPath);
+        },
+        handleClose(key, keyPath) {
+            console.log(key, keyPath);
+        },
+        showMsg(msg) {
+            this.$message({
+                message: msg,
+                type: 'success'
+            });
+        },
+        notiSuccess(title, value) {
+            this.$notify({
+                title: title,
+                message: value,
+                type: 'success'
+            });
+        },
+        notiWarning(title, value) {
+            this.$notify({
+                title: title,
+                message: value,
+                type: 'warning'
+            });
+        },
+
+        notiInfo(title, value) {
+            this.$notify.info({
+                title: title,
+                message: value
+            });
+        },
+
+        notiError(title, value) {
+            this.$notify.error({
+                title: title,
+                message: value
+            });
+        }
+    }
+}
+var Ctor = Vue.extend(Main)
+var con = new Ctor().$mount('#app')
+//con.showMsg('登录成功');

src/main/resources/static/js/msg.js

@@ -0,0 +1,30 @@
+/*
+/!*
+ * the first time to call
+ *!/
+setTimeout(function () {
+    Push();
+//  alert("setTimeout called");
+}, 200);
+
+setInterval(function () {
+    Push();
+    //alert("setInterval called");
+}, 3000);
+
+//con.showMsg('登录成功');
+function Push() {
+    $.ajax({
+        type: "POST",
+        url: "../CheckLoginServlet?dt=" + new Date().getTime(),//why getTime and wont use
+        data: {},
+        beforeSend: function () {
+        },
+        success: function (data) {
+            var obj = eval("(" + data + ")");//eval使用前要先加括号，才能得到完整的json数据
+            if (obj.msg != 0) {
+                con.showMsg(obj.msg);
+            }
+        }
+    })
+};*/