0到1案例演示 vue + axios 请求 springboot 的 restful 风格接口(前后端分离+跨域问题)

目录

项目背景

技术架构

前端

后端

创建基础springboot 工程

勾选 Spring Web

创建实体类 user

创建用户控制器

跨域问题

测试

提交数据就post json格式

获取就get 就完事了

---

项目背景

这是一个基于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;    }    @Override    public 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 {    @Override    public void addCorsMappings(CorsRegistry registry) {        registry.addMapping("/**")                .allowedOrigins("http://localhost:5173/")                .allowedMethods("GET", "POST", "PUT", "DELETE")                .allowedHeaders("*")                .allowCredentials(true);    }}

测试

提交数据就post json格式

获取就get 就完事了

---

* Thanks you *

如果觉得文章内容不错，随手帮忙点个赞、在看、转发一下，如果想第一时间收到推送，也可以给我个星标⭐～谢谢你看我的文章。

---

*往期推荐 *

Ubuntu |  安装 Zabbix 一篇就够了

彻底删除 Nginx + 重新安装

Swagger | 手把手带你写自动生成接口文档的爽感(零基础亲测实用)

SpringBoot整合Openfeign接入Kimi Ai!!超简单，居然没多少行代码？？(附加兜底教程)

SpringBoot接入Kimi实践记录轻松上手

Wrod 也可以添加代码快啦！！快看有哪种你是会的吧！

Linux | 零基础Ubuntu搭建JDK

Maven | 站在初学者的角度配置与项目创建(新手必学会)

Spring Ai | 极简代码从零带你一起走进AI项目(中英)

Open Ai | 从零搭建属于你的Ai项目(中英结合)

MongoDB | 零基础学习与Springboot整合ODM实现增删改查(附源码)

Openfeign | 只传递城市代码，即可获取该地域实时的天气数据(免费的天气API)

API接口到底是什么

Redis | 缓存技术对后端的重要性，你知道多少？

Mongodb | 基于Springboot开发综合社交网络应用的项目案例(中英)

谈谈模块化设计在单体架构中的应用

彻底讲清楚 单体架构、集群架构、分布式架构及扩展架构

为什么还在使用单体架构

2025年Java路线一条龙服务

2025年健康新趋势：科技与生活方式的融合

---

感谢阅读 | 更多内容尽在公棕号 WMCode | CSDN@小Mie不吃饭

原文地址：https://blog.csdn.net/weixin_56861179/article/details/148652999

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！