springboot整合vue,将vue项目整合到springboot项目中

news2024/11/28 6:32:59

将vue项目打包后,与springboot项目整合。

第一步,使用springboot中的thymeleaf模板引擎

导入依赖

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

在resources目录下建立static文件夹和templates文件夹

在yml中配置thymeleaf

spring:
  # 模板引擎
  thymeleaf:
    mode: HTML5
    encoding: utf-8
    # 禁用缓存
    cache: false

在配置中打开访问静态文件的权限

public class ResourceConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
    }
}

第二步:将vue项目打包后中的静态文件放入static文件夹中,将index.html放入templates文件夹中

第三步:在controller中写路由,让其跳转index.html页面

@Controller
@CrossOrigin
public class IndexController {
    @GetMapping("/")
    public String index(){
        return "index";
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1318672.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Frontier ,MDPI T3系列,植物科学领域高质量期刊分级目录发布!

公众号&#xff1a;生信漫谈&#xff0c;获取最新科研信息&#xff01; Frontier &#xff0c;MDPI T3系列&#xff0c;植物科学领域高质量期刊分级目录发布&#xff01;https://mp.weixin.qq.com/s/ukbjIgdyaza7LmKmZmy5bw 2023年3月31日&#xff0c;中国科学技术大学科研部…

运筹学经典问题(二):最短路问题

问题描述 给定一个图&#xff08;有向图或无向图&#xff09; G ( V , E ) G (V, E) G(V,E)&#xff0c; V V V是图中点的集合&#xff0c; E E E是图中边的集合&#xff0c;图中每条边 ( i , j ) ∈ E (i, j) \in E (i,j)∈E都对应一个权重 c i j c_{ij} cij​&#xff08;…

第7章 排序

前言 在这一章&#xff0c;我们讨论数组元素的排序问题。为简单起见&#xff0c;假设在我们的例子中数组只包含整数&#xff0c;虽然更复杂的结构显然也是可能的。对于本章的大部分内容&#xff0c;我们还假设整个排序工作能够在主存中完成&#xff0c;因此&#xff0c;元素的个…

Redis Cluster集群搭建 三主三从

Redis包下载 Linux&#xff1a; http://download.redis.io/releases/ Mac or Windows: https://redis.io/download/ 2.下载后解压进入文件夹&#xff08;本次我的Redis版本是6.2.14版本&#xff09; /redis/redis-6.2.14 开始安装 make instarll修改配置文件复制redis.conf 6…

pve8.1版本安装及环境初始化过程记录

背景 经历pve旧版本奔溃事件&#xff0c;果断重新购买了装备&#xff0c;做个稳定的pve环境&#xff0c;旧主机用于折腾其他系统&#xff0c;硬盘一定要用好的。 1.pve8.1.3系统版本安装 下载地址 Download Proxmox software, datasheets, agreements 使用种子下载会快一点儿…

英伟达盒子 Jetson Xshell连接串口查看日志方法(串口日志、盒子日志)

文章目录 连接串口xshell连接串口信息 连接串口 接盒子上的A2、B2&#xff0c;以及接地线&#xff1a; 另外一头接上电脑&#xff08;我用的RS485转USB工具&#xff09;&#xff1a; xshell连接 协议选择SERIAL&#xff1a; 设置盒子厂商约定的端口号、波特率、数据位、停止位…

ElaticSearch 是如何建立索引的?

前面讲到了 NoSQL 数据库的应用&#xff0c;在关系型数据库和 NoSQL 数据库之外&#xff0c;还有一类非常重要的存储中间件&#xff0c;那就是文件索引。当你在电商网站搜索商品&#xff0c;或者在搜索引擎搜索资料时&#xff0c;都离不开基于文件索引的各种检索框架的支持。 …

十二星座对音乐有感觉但是唱得最不着调的排名。

第一名&#xff08;狮子座&#xff09;、第二名&#xff08;水瓶座&#xff09;、第三名&#xff08;射手座&#xff09; 第四名&#xff08;金牛座&#xff09;、第五名&#xff08;摩羯座&#xff09;、第六名&#xff08;天秤座&#xff09; 第七名&#xff08;巨蟹座&#…

03 使用Vite开发Vue3项目

概述 要使用vite创建Vue3项目&#xff0c;有很多种方式&#xff0c;如果使用命令&#xff0c;则推荐如下命令&#xff1a; # 使用nvm将nodejs的版本切换到20 nvm use 20# 全局安装yarn npm install -g yarn# 使用yarnvite创建项目 yarn create vite不过&#xff0c;笔者更推荐…

解决“bat中文路径乱码“问题

今天&#xff0c;在使用.bat脚本&#xff0c;将hello.png从"D:\mypic\备份"目录&#xff0c;拷贝到"D:\mypic\备份"时&#xff1b;发现中文乱码,弹出如下对话框: 图(1) bat中文路径乱码 原来的命令是&#xff1a; copy D:\mypic\one\hello.png D:\mypic\备…

WordPress VIP收费下载插件Erphpdown v17.0.1 开心版

会员推广下载专业版 WordPress插件&#xff08;erphpdown&#xff09;是模板兔开发的一款针对虚拟资源收费下载/付费下载/付费视频/收费查看/付费阅读/付费查看/VIP下载查看的插件&#xff0c;经过完美测试运行于wordpress 3.x-5.x版本。后续模板兔会增加更多实用的功能。 模板…

1.10 实战:Postman生成在线接口文档

对于接口测试,最最关键的一个部分,就是接口文档,有了详细的接口文档,我们才能根据接口文档去写好我们的接口测试用例以及写好我们的接口自动化测试。目前比较常用的接口文档是两种方式 Swagger我们看一下Swagger的官网的例子就可以看到它有多方便了。我们打开REST API Docu…

开源的数据流技术,该选择Redpanda还是Apache Kafka?

本文将比较Apache Kafka和Redpanda两种开源的数据流技术&#xff0c;在云原生实时处理能力上的不同&#xff0c;以及如何在项目中做出选择。 目前&#xff0c;Apache Kafka不但成为了数据流处理领域事实上的标准&#xff0c;而且带动了同类产品的出现。Redpanda就是其中之一…

2. 基础数据结构-数组

2. 基础数据结构-数组 2.1 概念 数组是一种数据结构&#xff0c;它是一个由相同类型元素组成的有序集合。在编程中&#xff0c;数组的定义是创建一个具有特定大小和类型的存储区域来存放多个值。数组可以是一维、二维或多维的。每个元素至少有一个索引或键来标识。 2.2 数组特…

C++——C++11(1)

时至今日&#xff0c;C标准已经到了C23&#xff0c;但是你要说哪一次提出的标准最经 典&#xff0c;那C11一定会被人提及&#xff0c;C11带来了数量可观的变化&#xff0c;其中包 含了约140个新特性&#xff0c;以及对C03标准中约600个缺陷的修正&#xff0c;这使得 C11更像是从…

no module named ‘xxx‘

目录结构如下 我想在GCNmodel的model里引入layers的GraphConvolution&#xff1a;from GCNmodel.layers import GraphConvolution&#xff0c;但这样却报错no module named GCNmodel&#xff0c;而且用from layers import GraphConvolution也不行。然后用sys.path.appen(xxx)…

echarts地图的常见用法:基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图

前言 最近几天用echarts做中国地图&#xff0c;就把以前写的demo&#xff1a;在vue中实现中国地图 拿来用&#xff0c;结果到项目里直接报错了&#xff0c;后来发现是因为版本的问题&#xff0c;没办法只能从头进行踩坑了。以下内容基于vue3 和 echarts 5.32 基本使用 获取地…

广受好评的开源基础大模型最全梳理,你最钟意哪一个?

2023 年即将过去。一年以来&#xff0c;各式各样的大模型争相发布。当 OpenAI 和谷歌等科技巨头正在角逐时&#xff0c;另一方「势力」悄然崛起 —— 开源。 开源模型受到的质疑一向不少。它们是否能像专有模型一样优秀&#xff1f;是否能够媲美专有模型的性能&#xff1f; 迄…

go原生http开发简易blog(一)项目简介与搭建

文章目录 一、项目简介二、项目搭建前置知识三、首页- - -前端文件与后端结构体定义四、配置文件加载五、构造假数据- - -显示首页内容 代码地址&#xff1a;https://gitee.com/lymgoforIT/goblog 一、项目简介 使用Go原生http开发一个简易的博客系统&#xff0c;包含一下功能…

CCF-CSP真题《202309-5 阻击》思路+ c++满分题解

想查看其他题的真题及题解的同学可以前往查看&#xff1a;CCF-CSP真题附题解大全 试题编号&#xff1a;202309-5试题名称&#xff1a;阻击时间限制&#xff1a;2.0s内存限制&#xff1a;512.0MB问题描述&#xff1a; 问题描述 上回提到&#xff0c;西西艾弗岛下方有一个庞大的遗…