spring boot+vue 前后不分离

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

hmb↑

8137人浏览 · 2021-05-17 16:29:19

hmb↑ · 2021-05-17 16:29:19 发布

使用 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

在这里插入图片描述

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页面

在这里插入图片描述
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
在这里插入图片描述点击跳转

GitHub 加速计划 / vu / vue

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：4 个月前 )

9e887079 [skip ci] 3 个月前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的