前端使用 Vue 3,后端使用 Spring Boot 构建 Hello World 程序

前端使用 Vue 3,后端使用 Spring Boot 构建 Hello World 程序

前端(Vue 3)

首先,创建一个 Vue 3 项目。

1. 安装 Vue CLI

npm install -g @vue/cli

2. 创建 Vue 项目

vue create frontend

在交互式提示中,选择默认的 Vue 3 预设。

3. 修改 App.vue

frontend/src 目录下,修改 App.vue 文件:

<template><div id="app"><h1>{{ message }}</h1><p v-if="error">{{ error }}</p></div>
</template><script>
export default {data() {return {message: "Loading...",error: null};},created() {fetch("http://localhost:8080/api/hello").then(response => {if (!response.ok) {throw new Error(\`HTTP error! status: \${response.status}\`);}return response.json();}).then(data => {this.message = data.message;}).catch(error => {this.error = error.toString();});}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

4. 运行前端项目

cd frontend
npm run serve

后端(Spring Boot)

接下来,创建一个 Spring Boot 项目。

1. 使用 Spring Initializr 创建项目

可以通过 Spring Initializr 创建项目,选择以下配置:

  • Project: Maven
  • Language: Java
  • Spring Boot:
  • Dependencies: Spring Web

下载项目并解压缩,或者通过命令行工具生成项目。

2. 创建 Spring Boot 项目结构

在项目的 src/main/java/com/example/demo 目录下,创建一个控制器类 HelloController.java

package com.example.demo;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
public class HelloController {@GetMapping("/api/hello")public Message hello() {return new Message("Hello, World!");}public static class Message {private String message;public Message(String message) {this.message = message;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}}
}

3. 创建 CORS 配置类

在项目的 src/main/java/com/example/demo 目录下,创建一个配置类 CorsConfig.java

package com.example.demo;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/api/**").allowedOrigins("http://localhost:8081").allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD").allowCredentials(true);}};}
}

4. 运行 Spring Boot 应用

在项目根目录下运行:

./mvnw spring-boot:run

整合前后端

确保 Vue 应用和 Spring Boot 应用同时运行。前端 Vue 应用将在 http://localhost:8081 上运行,后端 Spring Boot 应用将在 http://localhost:8080 上运行。

前端应用将通过 fetch 请求从后端获取数据,并显示在页面上。

项目结构

确保项目结构如下:

project-directory/
│
├── frontend/
│   ├── public/
│   ├── src/
│   │   └── App.vue
│   ├── package.json
│   └── ...
│
├── backend/
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/example/demo/
│   │   │   │   └── HelloController.java
│   │   │   │   └── CorsConfig.java
│   │   │   └── resources/
│   │   ├── test/
│   │   └── ...
│   ├── mvnw
│   ├── mvnw.cmd
│   ├── pom.xml
│   └── ...

验证

  1. 启动前端和后端应用

    • 前端:npm run serve
    • 后端:./mvnw spring-boot:run
  2. 访问 Vue 应用:在浏览器中打开 http://localhost:8081,查看是否显示 “Hello, World!”。

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

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

相关文章

web滚动页面到指定位置

方法&#xff1a;scrollTo(x-coord,y-coord) 方法是Web API中Element接口的一部分&#xff0c;但它主要用于Window对象或可滚动的元素&#xff08;如具有overflow属性为auto或scroll的<div>&#xff09;。此方法用于将窗口滚动到文档中的特定位置&#xff0c;或者将某个元…

【Linux】权限的管理和Linux上的一些工具

文章目录 权限管理chgrpchownumaskfile指令sudo指令 目录权限粘滞位Linux中的工具1.软件包管理器yum2.rzsz Linux开发工具vim 总结 权限管理 chgrp 功能&#xff1a;修改文件或目录的所属组 格式&#xff1a;chgrp [参数] 用户组名 文件名 常用选项&#xff1a;-R 递归修改文…

股指期货与股票抛空机制的区别是什么?

在投资的世界里&#xff0c;有两种看似相似&#xff0c;实则大有不同的玩法&#xff1a;股指期货和股票抛空。让我们用通俗易懂的话来搞清楚这两者的区别。 股票抛空&#xff1a;借来卖出&#xff0c;期待低价买回 想象一下&#xff0c;你看到市场上有只股票&#xff0c;觉得…

基于STM32设计的超声波测距仪(微信小程序)(186)

基于STM32设计的超声波测距仪(微信小程序)(186) 文章目录 一、前言1.1 项目介绍【1】项目功能介绍【2】项目硬件模块组成1.2 设计思路【1】整体设计思路【2】ESP8266工作模式配置1.3 项目开发背景【1】选题的意义【2】可行性分析【3】参考文献1.4 开发工具的选择1.5 系统框架图…

Oracle 常用系统

常用系统包 查看系统包 SELECT * FROM all_objects WHERE object_type PACKAGE AND owner SYS AND object_name 包名称;AUTO_SERVER_PKG AUTO_SERVER_PKG 在Oracle数据库的上下文中&#xff0c;并不是一个标准的Oracle系统包或内置功能。然而&#xff0c;在参考文章中提到…

大模型笔记3 Longformer for Extractive Summarization训练

目录 改为GPU运行 从文本label生成输入token label 多样本输出文本 保存训练过程损失和模型 部署到服务器 训练集构建 改为GPU运行  1.检查是否有可用的GPU&#xff0c;并根据可用性设置设备。  2.使用方法将模型和输入张量移动到GPU。.to(device)  3.将所有…

DeepSORT:高效对象跟踪算法

在自动驾驶领域&#xff0c;对象检测和跟踪是实现安全驾驶的关键技术。检测对象是第一步&#xff0c;而跟踪它们的去向则是更为复杂和关键的一环。本文将深入探讨一种先进的对象跟踪算法——DeepSORT&#xff0c;它结合了简单排序算法、卡尔曼滤波器、深度外观描述符等技术&…

Latte: Latent Diffusion Transformer for Video Generation

文章目录 AbstractIntroductionMethodology潜在扩散模型的初步研究Latte的模型变体Latte的实验验证潜在视频片段的patch embeddingTimestep-class information injectionTemporal positional embedding通过学习策略增强视频生成 Experiments Abstract Latte首先从输入的视频提…

成像光谱遥感技术中的AI革命:ChatGPT

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力&#xff0c;ChatGPT在遥感中的应用&#xff0c;人工智能在…

太速科技-FMC207-基于FMC 两路QSFP+光纤收发子卡

FMC207-基于FMC 两路QSFP光纤收发子卡 一、板卡概述 本卡是一个FPGA夹层卡&#xff08;FMC&#xff09;模块&#xff0c;可提供高达2个QSFP / QSFP 模块接口&#xff0c;直接插入千兆位级收发器&#xff08;MGT&#xff09;的赛灵思FPGA。支持利用Spartan-6、Virtex-6、Kin…

PTA - 接收n个关键字参数

接收n个以关键字形式传入的参数&#xff0c;按格式输出。 函数接口定义&#xff1a; def print_info (**keyargs) 提示&#xff1a;keyargs为可变参数&#xff0c;其可接受若干个关键字形式的实参值&#xff0c;并将接收到的值组装为一个字典。 裁判测试程序样例&#xff1…

Nextjs 调用组件内的方法

在 Next.js 中&#xff0c;如果你想从一个组件外部调用组件内部的方法&#xff0c;可以使用 React 的 useRef 钩子来引用组件实例并调用其方法。这种方法主要适用于类组件&#xff0c;但也可以用于函数组件&#xff0c;通过将方法暴露在 ref 对象上。 以下是一个示例&#xff…

Ningx配置前端http缓存

在构建高性能的网站或Web应用程序时&#xff0c;优化前端资源的加载速度是至关重要的。一个有效的方法是利用HTTP缓存机制&#xff0c;通过缓存静态资源来减少网络请求&#xff0c;降低服务器负载&#xff0c;并提升用户体验。本文将介绍如何使用Nginx配置前端HTTP缓存&#xf…

业务需求方面

S 最爱小组件引导弱&#xff0c;需要在用户操作的关键路径上增加引导。用户在直播间点击关注并且设为我的最爱后&#xff0c;首次会出现直播间引导条&#xff1b;若首次未点击引导条&#xff0c;之后观看满30s&#xff0c;出现引导条。写了去添加和区桌面添加两个UI。其中&…

linux学习笔记整理: 关于linux系统操作/安装软件 2024/7/16;

安装软件 安装方式: 二进制安装。---只需要解压就可以。 只针对特殊平台。 比如jdk tomcat RPM&#xff1a; 按照一定的规范就可以按照该软件。 无法安装依赖的文件。 mysql yum 远程安装 基于RPM 帮你把依赖的文件安装上去。 必须联网。 安装源码安装。 查看端口插件: 下载…

数据库:redis练习题

1、安装redis&#xff0c;启动客户端、验证。 redis-server redis-cli 2、string类型数据的命令操作&#xff1a; &#xff08;1&#xff09; 设置键值&#xff1a; set mykey "haha" &#xff08;2&#xff09; 读取键值&#xff1a; get mykey &#xff08;3&…

08_TypeScript 中的类(静态属性、静态方法、抽象类、继承多态)

静态属性、静态方法、抽象类、继承多态 一、静态属性和静态方法1、回顾ES5中的静态方法2、TS 中定义静态方法和静态属性 二、多态1、定义&#xff1a;父类定义一个方法不去实现&#xff0c;让继承它的子类去实现&#xff0c;每一个子类有不同的表现。多态属于继承 三、 抽象方法…

Halcon与C++之间的数据转换

HALCON的HTuple类型(元组)功能很强大&#xff0c;可以表示INT、double、string等多种类型数据。当元组中只有一个成员时&#xff0c;HTuple也可表示原子类型 1. haclon -> C //HTuple转int HTuple hTuple 1; int data1 hTuple[0].I(); // data1 1//HTuple转do…

MSSQL Server运维常用SQL命令

1、数据库连接数 select name, state, state_desc from sys.databases; 查询结果&#xff1a; 2、数据库状态 select name, state, state_desc from sys.databases; 查询结果&#xff1a; 3、数据文件状态 select a.name, b.physical_name, b.state, b.state_desc from sy…

TCP连接如何确保可靠性

TCP通过序列号、确认应答、超时重传、数据校验、流量控制、拥塞控制等机制&#xff0c;确保了数据传输的可靠性和效率。 序列号&#xff1a;每个TCP段都有一个序列号&#xff0c;代表了数据流中的字节位置。 通过序列号&#xff0c;接收方可以检测数据包是否丢失或重复&#…