spring boot+vue 前后不分离

r囧r小猫 2023-10-04 13:47 30阅读 0赞

#### 使用 thymeleaf 视图解析器 ####

pom.xml配置

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

application.properties配置

spring.thymeleaf.prefix=classpath:/templates/
    spring.thymeleaf.suffix=.html
    spring.thymeleaf.encoding=UTF-8
    spring.thymeleaf.mode=HTML5

#### 在controller层直接return页面 ####

//测试页面
        @RequestMapping("/testPage")
        public String testPage(){
        
            return "test/testPage";
        }

#### 新建html页面放在resources底下的templates ####

![在这里插入图片描述][2021051716061032.png]

#### html页面跳转到vue页面 ####

跳转需要的js  
vue-router.js  
详情地址：https://www.runoob.com/vue2/vue-routing.html  
使用httpVueLoader.js来运行.vue文件  
详情地址：https://codechina.csdn.net/mirrors/franckfreiburger/http-vue-loader/-/tree/master/src

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="./js/element-ui/2.11.0/lib/theme-chalk/index.css">  //element的js
        <script src="./js/vue.js"></script> //vue的js
        <script src="./js/vue-router.js"></script>  //vue路由的js
        <script src="./js/httpVueLoader.js"></script> 
        <script src="./js/axios.min.js"></script> //axios的js
        <script src="./js/element-ui/2.11.0/lib/index.js"></script> //element的js
        <title>测试</title>
    </head>
    <body>
    <div id="app" v-cloak>
    //keep-alive作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
        <keep-alive> 
            <router-view></router-view>
        </keep-alive>
    </div>
    <script>
        const router = new VueRouter({
          //路由
            routes: [
                {
        
                    path: '/',
                    name: 'testPage',
                    component: httpVueLoader('/vue/testPage/testPage.vue') //跳转页面
                },
                {
        
                    path: '/detail',
                    name: 'detail',
                    component: httpVueLoader('/vue/testPage/detail.vue')
                },
            ]
        });
        const app = new Vue({
        
            el: '#app',
            router,
            data() {
        
                return {
        }
            },
            mounted() {
        
    
            },
            methods: {
        
            }
        });
    </script>
    </body>
    </html>

#### 在static目录下新建vue文件，存放.vue页面 ####

![在这里插入图片描述][20210517162056778.png]  
testPage.vue页面

<template>
        <div>
            <span>跳到vue页面了</span>
            <el-button type="primary" @click="tiaozhuan">跳到detail.vue</el-button>
        </div>
    </template>
    <script>
        module.exports = {
        
            name: 'list',
            data() {
        
                return {
        }
            },
            methods:{
        
                tiaozhuan(){
        
                    this.$router.push({
        path:"/detail"});
                }
            }
        }
    </script>

detail.vue页面

<template>
        <div>
            <span>跳到detail页面了</span>
            <el-button type="primary" @click="tiaozhuan">跳到testPage.vue</el-button>
        </div>
    </template>
    <script>
        module.exports = {
        
            name: 'list',
            data() {
        
                return {
        }
            },
            methods:{
        
                tiaozhuan(){
        
                    this.$router.push({
        path:"/"});
                }
            }
        }
    </script>

#### 访问接口，运行效果： ####

http://localhost:8088/testPage  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ4NzIxNzA2_size_16_color_FFFFFF_t_70]点击跳转  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ4NzIxNzA2_size_16_color_FFFFFF_t_70 1]

[2021051716061032.png]: https://img-blog.csdnimg.cn/2021051716061032.png
[20210517162056778.png]: https://img-blog.csdnimg.cn/20210517162056778.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ4NzIxNzA2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210517162530436.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ4NzIxNzA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ4NzIxNzA2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210517162558246.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ4NzIxNzA2,size_16,color_FFFFFF,t_70