SpringBoot使用thymeleaf+vue

本文轉載自查看原文 2022-01-11 15:55 3535 SpringBoot使用thymeleaf+vue

因為 layui 下架了,雖然在 gitee 上面仍可以下載 layui ,現在 vue 很火爆,所以就嘗試在thymeleaf里面使用vue

准備樣式資源和資源

引入vue.js

<!-- 使用最新版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 使用明確的版本號和構建文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!-- 使用原生 ES Modules -->
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>

引入 element-ui

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

element-ui 默認圖標找不到:
進入目錄 https://unpkg.com/browse/element-ui@2.15.6/lib/theme-chalk/ 把fonts文件夾引入到element-ui同級目錄下

使用

目錄結構

登錄界面

<!DOCTYPE html>
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶登錄</title>
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../css/fonts/iconfont.css">
    <!-- 引入樣式 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <style lang="scss">
        body {
            width: 1920px;
            position: static;
            background: url(../img/loginbg.png) 0% 0% / cover no-repeat;
        }

        #app {
            width: 100%;
            height: 100%;
        }

        /*登錄框居中*/
        .login_center {
            width: 500px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -250px 0 0 -250px;
            border-radius: 10px;
            background-color: white;
        }

        .login_header {
            width: 100%;
            height: 20%;
            background-color: #1890ff;
            text-align: center;
            color: white;
        }

        /*輸入框寬度*/
        .el-input {
            width: 80%;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login_center">
        <div class="login_header">
            <span style="font-size: 35px;font-weight: bold">管理系統</span><br>
            <span style="font-size: 25px;">用戶登錄</span>
        </div>
        <div>
            <el-form style="margin-top: 10%;" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
                     label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="賬號" prop="username">
                    <el-input prefix-icon="icon-al-zhanghao" v-model="ruleForm.username"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密碼" prop="password">
                    <el-input prefix-icon="icon-al-mima" type="password" v-model="ruleForm.password"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item style="text-align: center;">
                    <el-button style="margin-left: -100px;width: 200px;margin-top: 5%;" type="primary"
                               @click="submitForm('ruleForm')">
                        登錄
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</body>
<script src="../js/vue-2.js"></script>
<script src="../js/element-ui.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/index/index.js"></script>
<!--<script src="../js/interceptor/interceptor.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>-->
<!--&lt;!&ndash; 引入組件庫 &ndash;&gt;-->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script>
    new Vue({
        el: '#app',
        data() {
            var validateUsername = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('請輸入賬號'));
                } else {
                    callback();
                }
            };
            var validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('請輸入密碼'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [
                        {validator: validateUsername, trigger: 'blur'}
                    ],
                    password: [
                        {validator: validatePassword, trigger: 'blur'}
                    ]
                }
            };
        },
        created() {
        },
        methods: {
            //表單提交
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const data = {client_id: "user-client", client_secret: 'stu_system', grant_type: 'password'};
                        Object.assign(data, this.ruleForm);
                        console.log(data)
                        login(data).then(res => {
                            if (res.status == 200) {
                                this.$notify.success("登錄成功");
                                //存入token
                                window.sessionStorage.setItem("access_token", res.data.access_token);
                                window.sessionStorage.setItem("refresh_token", res.data.refresh_token);
                                //跳轉到首頁
                                window.location.href = "/pages/homePage";
                            } else {
                                this.$notify.info("登錄失敗");
                                return false;
                            }
                        });
                    }
                });
            },
        }
    })
</script>
</html>

在外部定義axios請求和axios攔截器全局添加請求頭

外部定義請求方法 index.js

function login(data) {
    return axios({
        url: '/oauth/token',
        method: 'post',
        params: data,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
    });
}

攔截器 interceptor.js

// 請求攔截器
axios.interceptors.request.use(
    config => {
        // 從本地存儲中獲取token，攜帶在header中
        const token = sessionStorage.access_token;
        token && (config.headers.Authorization = 'Bearer' + ' ' + token);
        return config;
    },
    error => {
        return Promise.error(error);
    }
)

thymeleaf 模塊使用

定義兩個組件,test01.html test02.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>test01</title>
</head>
<body>
<div th:fragment="showCenter">
    this is test01 page
</div>
</body>
</html>

在 homePage.html 里面使用

<!DOCTYPE html>
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org"
                    xmlns:v-on="http://www.w3.org/1999/xhtml"
                    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <link rel="stylesheet" href="../css/element-ui.css">
    <style>
        body {
            width: 1920px;
            position: static;
            margin: 0px;
        }

        #app {
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
<div id="app">
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1">處理中心</el-menu-item>
        <el-menu-item index="2">消息中心</el-menu-item>
        <el-submenu index="3">
            <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 index="2-4">
                <template slot="title">選項4</template>
                <el-menu-item index="2-4-1">選項1</el-menu-item>
                <el-menu-item index="2-4-2">選項2</el-menu-item>
                <el-menu-item index="2-4-3">選項3</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item style="float: right;" index="6"><a href="https://www.ele.me" target="_blank">訂單管理</a>
        </el-menu-item>
    </el-menu>
    <div style="width: 100%;height: 500px;border: 1px solid red;">
        <div v-if="activeIndex==1">
            <div th:replace="~{fragment/test01.html :: showCenter}"></div>
        </div>
        <div v-if="activeIndex==2">
            <div th:replace="~{fragment/test02.html :: showCenter}"></div>
        </div>

    </div>
</div>
</body>
<script src="../js/vue-2.js"></script>
<script src="../js/element-ui.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/vue-router.js"></script>
<script th:inline="javascript">
    //這里寫thymeleaf的js
</script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeIndex: '1',
            };
        },
        created() {
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                this.activeIndex = key;
            }
        }
    });
</script>
</html>

效果