3. springboot中集成部署vue3

1. vue3构建

     构建命令 npm run build, 构建的结果在disc目录:

2. springboot集成

   2.1 拷贝vue3构建结果到springboot resources/static目录

2.2 springboot pom依赖

添加thymeleaf依赖

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

2.3 application.yml新增thymeleaf配置

server:
  port: 8081

spring:
  # 打成jar包必须添加如下配置才能找到页面
  thymeleaf:
    mode: HTML
    cache: false
    prefix: classpath:/static

2.4 新增后台页面controller

package com.spring.test.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * 页面跳转控制器
 */
@Controller
public class PageController {
    //后台页面
    @RequestMapping("/{backPage}")
    public String backPage(@PathVariable String backPage) {
        return "/" + backPage;
    }
}

2.5 运行springboot并访问后台页面

    访问后台页面: http://localhost:8081/index

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

文件操作命令touch、cat、more、cp、mv

touch 创建文件 1&#xff09;可以通过touch命令创建文件。 2&#xff09;语法&#xff1a; touch Linux路径 3&#xff09;touch命令无选项&#xff0c;参数必填&#xff0c;表示要创建的文件路径&#xff0c;相对、绝对、特殊路径符均可以使用。 注&#xff1a;以 d 开头的…

PlantUML - 时序图

时序图主要内容 下面是一个简单的时序图&#xff0c;我们可以很容易并且美观的表达我们的交互流程&#xff0c;只需要在箭头的两边指定一个名字&#xff0c;加上描述即可&#xff1a; startuml bkloanapply -> bkloanapprove : request bkloanapprove --> bkloanapply :…

LeetCode 刷题 [C++] 第215题.数组中的第K个最大元素

题目描述 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。 题目分析 根据题意分析&…

C++入门和基础

目录 文章目录 前言 一、C关键字 二、命名空间 2.1 命名空间的定义 2.2 命名空间的使用 2.3 标准命名空间 三、C输入&输出 四、缺省参数 4.1 缺省参数的概念 4.2 缺省参数的分类 五、函数重载 5.1 函数重载的简介 5.2 函数重载的分类 六、引用 6.1 引用的…

WordPress介绍(开源内容管理系统(CMS),一个用于构建和管理网站的平台)

文章目录 Introduction to WordPress: Powering the Web with Simplicity and Flexibility&#xff08;WordPress简介&#xff1a;以简洁和灵活性驱动万维网&#xff09;Overview of WordPress&#xff08;WordPress概述&#xff09;Evolution of WordPress&#xff08;WordPre…

华为od机试C卷-最长表达式求值

1 题目描述 提取字符串中的最长合法简单数学表达式子串&#xff0c;字符串长度最长的&#xff0c;并计算表达式的值&#xff0c;如果没有返回0。简单数学表达式只能包含以下内容0-9 数字&#xff0c;符号* 说明: 1.所有数字&#xff0c;计算结果都不超过 long 2.如果有多个长…

基于yolov5的草莓成熟度检测系统,可进行图像目标检测,也可进行视屏和摄像检测(pytorch框架)【python源码+UI界面+功能源码详解】

功能演示&#xff1a; 基于yolov5的草莓成熟度检测系统&#xff0c;系统既能够实现图像检测&#xff0c;也可以进行视屏和摄像实时检测_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于yolov5的草莓成熟度系统是在pytorch框架下实现的&#xff0c;这是一个完整的项目…

【XIAO ESP32S3 sense 通过 ESPHome 与 Home Assistant 连接】

XIAO ESP32S3 sense 通过 ESPHome 与 Home Assistant 连接 1. 什么是 ESPHome 和 Home Assistant&#xff1f;2. 软件准备3. 开始4. 将 Grove 模块与 ESPHome 和 Home Assistant 连接5. Grove 连接和数据传输6. Grove -智能空气质量传感器 &#xff08;SGP41&#xff09;7. OV2…

自学Python笔记总结(2——了解)

网络了解 网络调试助手 NetAssist.exe NetAssist.exe 使用方法请自行寻找 UDP协议 &#xff08;只能一来一回的的发消息&#xff0c;不可连续发送&#xff09; UDP 是User Datagram Protocol的简称&#xff0c; 中文名是用户数据报协议。在通信开始之前&#xff0c;不需要建…

【JavaEE】_Spring MVC 项目传参问题

目录 1. 传递单个参数 1.1 关于参数名的问题 2. 传递多个参数 2.1 关于参数顺序的问题 2.2 关于基本类型与包装类的问题 3. 使用对象传参 4. 后端参数重命名问题 4.1 关于RequestPara注解 1. 传递单个参数 现创建Spring MVC项目&#xff0c;.java文件内容如下&#xff…

Kubernetes-1

学习Kubernetes第一天 k8s-11、什么是Kubernetes2、配置Kubernetes2.1、准备三台全新的虚拟机2.2、关闭防火墙和SElinux2.3、修改主机名2.4、升级操作系统(三台一起操作)2.5、配置主机hosts文件&#xff0c;相互之间通过主机名互相访问2.6、配置master和node之间的免密通道2.7、…

sql 行列互换

在SQL中进行行列互换可以使用PIVOT函数。下面是一个示例查询及其对应的结果&#xff1a; 创建测试表格 CREATE TABLE test_table (id INT PRIMARY KEY,name VARCHAR(50),category VARCHAR(50) );向测试表格插入数据 INSERT INTO test_table VALUES (1, A, Category A); INSE…

关键因素:公司并购或拆分后的SAP数据迁移成功执行要点

合并、收购和资产剥离对CIO和CFO来说都是一项艰巨的任务&#xff1b;它们在业务和技术方面都具有很大影响力&#xff0c;企业并购或拆分在数据迁移方面需要考虑哪些关键因素&#xff1f; 在迁移中构建自动化 先确定要迁移、集成或剥离的SAP系统和数据集&#xff0c;然后执行这…

Notepad3:告别Windows记事本,轻松进行文本编辑

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、什么是Notepad3&#xff1f;①Notepad3②核…

【bioinformation 2】生物数据库

&#x1f31e;欢迎来到AI医学的世界 &#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f31f;本文由卿云阁原创&#xff01; &#x1f4c6;首发时间&#xff1a;&#x1f339;2024年3月3日&…

安卓手机安装termux、kali linux及基本配置

相关阅读&#xff1a;Termux 高级终端安装使用配置教程 | 国光 百度安全验证 该文安装的 kali liunx 应该是简易版的&#xff0c;没有相关工具 一、下载安装termux 建议通过 f-droid 应用市场下载链接termux&#xff0c;点击即直接下载。 二、配置termux 1.更换镜像源 te…

【c++】继承深度解剖

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么事继承&#xff0c;基类和派生类的使用和…

C语言题目讲解

一&#xff1a;力扣485. 最大连续 1 的个数 1.题目&#xff1a; 2.思路分析 先设定两个变量&#xff0c;一个变量&#xff08;ret_e&#xff09;用来存连续的1的个数&#xff0c;当nums[i]为0时&#xff0c;该变量就置为0&#xff0c;当nums【i】为1时&#xff0c;再重新&…

Spring中的数据校验---JSR303

介绍–什么是JSR303 JSR 303是Java中的一项规范&#xff0c;用于定义在Java应用程序中执行数据校验的元数据模型和API。JSR 303的官方名称是"Bean Validation"&#xff0c;它提供了一种在Java对象级别上执行验证的方式&#xff0c;通常用于确保输入数据的完整性和准…

训练2布线 玛露希尔

前言 这不是雕刻 是布线纹理绘制blender材质渲染 2D 3D 起手式 八点眼 侧峰线 三角鼻(三面鼻) 下颚角 额, 嘴 线 法令环 橄榄嘴