目录
项目背景
这是一个基于SpringBoot3和Vue3的前后端分离项目教程摘要。后端使用JDK17开发，创建了User实体类及Controller，实现用户查询（GET）和添加（POST）接口，并配置CORS解决跨域问题。前端采用Vue3组合式API(v2语法糖)和axios 1.9.0进行HTTP请求。
技术架构
环境：JDK17 + Node.JS 22
前端: Vue3(v2语法糖) + axios 1.9.0
后端: Springboot3
前端
nodejs 教程(在下一篇那边有)
axios 官网：https://www.axios-http.cn
vue官网：https://cn.vuejs.org/
后端
创建基础springboot 工程
勾选 Spring Web
创建实体类 user
空构造、有参构造、get\set 、tostring
package com.wmcode.www.entity;public class User {private int id;private String name;public User() {}public User(int id, String name) {this.id = id;this.name = name;}public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}@Overridepublic String toString() {return "User{" +"id=" + id +", name='" + name + '\'' +'}';}}
创建用户控制器
创建控制层的包 controller ,然后创建UserController
package com.wmcode.www.controller;import org.springframework.web.bind.annotation.*;@RestControllerpublic class UserController {/*** 根据用户id查询用户信息* @param id 用户id* @return 用户信息* */@GetMapping("/user/{id}")public User getUser(@PathVariable("id") int id) {return new User(id, "Tom"); // 假设查询的用户id为1，用户是 tom}/*** 添加用户信息* @param user* @return ToString()* */@PostMapping("/adduser")public String addUser(@RequestBody User user) {System.out.println(user.toString());return "Hello "+user.getId()+", "+user.getName();}}
跨域问题
在后端创建个config 包+WebConfig.java
import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpublic class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("http://localhost:5173/").allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*").allowCredentials(true);}}
测试
提交数据就post json格式
获取就get 就完事了
* Thanks you *
如果觉得文章内容不错，随手帮忙点个赞、在看、转发一下，如果想第一时间收到推送，也可以给我个星标⭐～谢谢你看我的文章。
*往期推荐 *
Swagger | 手把手带你写自动生成接口文档的爽感(零基础亲测实用)
SpringBoot整合Openfeign接入Kimi Ai!!超简单，居然没多少行代码？？(附加兜底教程)
Maven | 站在初学者的角度配置与项目创建(新手必学会)
Spring Ai | 极简代码从零带你一起走进AI项目(中英)
MongoDB | 零基础学习与Springboot整合ODM实现增删改查(附源码)
Openfeign | 只传递城市代码，即可获取该地域实时的天气数据(免费的天气API)
Mongodb | 基于Springboot开发综合社交网络应用的项目案例(中英)
感谢阅读 | 更多内容尽在公棕号 WMCode | CSDN@小Mie不吃饭