vue返回的json数据与实体类字段不对应怎么办

当Vue返回的JSON数据字段与后端实体类字段不匹配时,可以使用Jackson的@JsonAlias注解为Java实体类字段设置别名,以实现映射。这样即使前端字段名称与后端不一致,也能正确解析数据。
摘要由CSDN通过智能技术生成

在实体类中使用jackson映射实体类的别名

@JsonAlias 给实体类字段取别名

@JsonProperty 直接定义成别名

 

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Business {

    private Integer business_id;
    @JsonAlias("name")
    private String business_name;
    @JsonAlias("password")
    private String business_password;
    private String business_shop_name;

}

我的前端vue是这样的

var vues = new Vue({
               el:"#app",
               data:{
                  role:{
                     name:"",
                     password:"",
                  },
               },
               methods: {
                  create : function(){
                     console.log("运行了login方法")
                     axios.post("http://localhost:8081/business/login",this.role).then(
                        response=> {
                           console
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这里提供一个简单的示例,实现前后端分离的技术,前端使用Vue.js框架,后端使用Spring Boot框架。 首先,我们需要在后端实现一个RESTful API,用于接收前端发送的请求,并返回JSON格式的数据。假设我们要实现一个用户管理系统,包括用户的增删改查操作,那么我们可以按照以下步骤来完成: 1. 创建一个Spring Boot项目,并添加相关依赖,如spring-boot-starter-web、spring-boot-starter-data-jpa等。 2. 定义一个用户实体类User,包括id、username、password等字段,并使用JPA注解进行标注。 3. 创建一个UserController类,用于处理用户相关的请求。在类上添加@RestController注解,表示这是一个RESTful API的控制器。 4. 在UserController类中定义以下几个方法: - 查询所有用户:使用@GetMapping注解,返回一个List<User>类型的数据,将所有用户信息封装成JSON格式返回给前端。 - 查询单个用户:使用@GetMapping注解,并传入用户id作为参数,返回一个User类型的数据,将该用户信息封装成JSON格式返回给前端。 - 添加用户:使用@PostMapping注解,并传入一个User类型的参数,将该用户信息保存到数据库中,并返回一个表示操作是否成功的JSON格式数据给前端。 - 修改用户:使用@PutMapping注解,并传入一个User类型的参数,根据该用户id在数据库中查询并更新该用户信息,并返回一个表示操作是否成功的JSON格式数据给前端。 - 删除用户:使用@DeleteMapping注解,并传入用户id作为参数,根据该用户id在数据库中删除该用户信息,并返回一个表示操作是否成功的JSON格式数据给前端。 5. 在前端使用Vue.js框架,通过axios库发送请求,调用后端API接口,实现用户管理系统的前端界面。 以上就是一个简单的案例,实现了前后端分离的技术,前端通过发送请求调用后端的API接口,获取数据并进行展示和操作,后端使用Spring Boot框架提供RESTful API服务,返回JSON格式的数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值