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

src/main/java/com/fjy/spring/controller/LoginController.java

@@ -13,11 +13,6 @@ public class LoginController {
     @Autowired
     private UserService userService;
 
-    @GetMapping(value = {"index",""})
-    public String toLoginPage(){
-        return "login";
-    }
-
     @PostMapping("/login/dologin")
     public String doLogin(TbUser tbUser)throws Exception{
         if (userService.doLoginService(tbUser.getColname(),tbUser.getColpassword())){

src/main/java/com/fjy/spring/controller/NavController.java

@@ -0,0 +1,17 @@
+package com.fjy.spring.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class NavController {
+    @GetMapping(value = {"index",""})
+    public String toLoginPage(){
+        return "login";
+    }
+
+    @GetMapping(value = {"testthymeleaf"})
+    public String toTestPage(){
+        return "/dist/thymeleafTest";
+    }
+}

src/main/resources/application-dev.yml

@@ -18,7 +18,7 @@ spring:
     hibernate:
       ddl-auto: update
     show-sql: true
-  resources:
+  #resources:
-    static-locations: classpath:/templates/
+  #  static-locations: classpath:/templates/
 debug: true
 

src/main/resources/static/css/style.css

@@ -0,0 +1,11 @@
+@charset "utf-8";
+/* CSS Document */
+@font-face {
+    /* font-properties */
+    font-family: element-icons;
+    src: url('../fonts/element-icons.ttf'),
+    url('../fonts/element-icons.woff'); /* IE9 */
+}
+.loginTitle{
+	text-align: center;
+}

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);
+            }
+        }
+    })
+};*/

src/main/resources/templates/home/home.html

@@ -1,75 +1,23 @@
-<!DOCTYPE html>
+<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
-<html lang="en">
+<html xmlns="http://www.w3.org/1999/xhtml"
-<head>
+      xmlns:th="http://www.thymeleaf.org">
-    <meta charset="UTF-8">
+<head th:include="dist/thymeleaf/common_head :: header('首页')">
-    <title>主页</title>
-    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
-    <link rel="stylesheet" href="../dist/css/style.css">
 </head>
 <body>
-<!-- 先引入 Vue -->
+<div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
-<script src="https://unpkg.com/vue/dist/vue.js"></script>
-<!-- 引入组件库 -->
-<script src="https://unpkg.com/element-ui/lib/index.js"></script>
 <div id="app">
     <el-container>
-        <el-aside width="200px">
+        <div th:include="dist/thymeleaf/layout :: asider"></div>
-            <el-row class="tac">
+        <div th:include="dist/thymeleaf/layout :: header"></div>
-                <el-col :span="24">
-                    <h5>默认颜色</h5>
-                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
-                        <el-submenu index="1">
-                            <template slot="title">
-                                <i class="el-icon-location"></i>
-                                <span>导航一</span>
-                            </template>
-                            <el-menu-item-group>
-                                <template slot="title">分组一</template>
-                                <el-menu-item index="1-1">选项1</el-menu-item>
-                                <el-menu-item index="1-2">选项2</el-menu-item>
-                            </el-menu-item-group>
-                            <el-menu-item-group title="分组2">
-                                <el-menu-item index="1-3">选项3</el-menu-item>
-                            </el-menu-item-group>
-                            <el-submenu index="1-4">
-                                <template slot="title">选项4</template>
-                                <el-menu-item index="1-4-1">选项1</el-menu-item>
-                            </el-submenu>
-                        </el-submenu>
-                        <el-menu-item index="2">
-                            <i class="el-icon-menu"></i>
-                            <span slot="title">导航二</span>
-                        </el-menu-item>
-                        <el-menu-item index="3">
-                            <i class="el-icon-setting"></i>
-                            <span slot="title">导航三</span>
-                        </el-menu-item>
-                    </el-menu>
-                </el-col>
-            </el-row>
-        </el-aside>
         <el-container>
-            <el-header>
-                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
-                    <el-menu-item index="1">处理中心</el-menu-item>
-                    <el-submenu index="2">
-                        <template slot="title">我的工作台</template>
-                        <el-menu-item index="2-1">选项1</el-menu-item>
-                        <el-menu-item index="2-2">选项2</el-menu-item>
-                        <el-menu-item index="2-3">选项3</el-menu-item>
-                    </el-submenu>
-                    <el-menu-item index="3"><a href="index">登出</a></el-menu-item>
-                </el-menu>
-            </el-header>
             <el-main>
-                <!-- <template>
+                
-                     <el-button :plain="true" @click="open">成功</el-button>
-                 </template>-->
             </el-main>
         </el-container>
     </el-container>
 </div>
-<script src="../dist/js/homePage.js"></script>
+<!--<div th:include="/dist/thymeleaf/footer :: copyright"></div>-->
-<script src="../dist/js/msg.js"></script>
+<script th:src="@{../js/homePage.js}"></script>
+<script th:src="@{../js/msg.js}"></script>
 </body>
 </html>

src/main/resources/templates/login.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
     <title>登录</title>