建设银行湖北省分行 网站,电商小程序运营,centos架设wordpress,游戏开发物语最强8人目录
项目背景
技术架构
前端
后端
创建基础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不吃饭
