ssm + maven + vue 前后端分离之前后端数据交互

mac2025-02-08  16

前言

有很多教程都是面对后端想前端传递的数据,当遇到了前端想后端发送数据时,很多教程却有点儿麻烦。几经探索,我找到了一条适合自己发展的ssm 特色之路。现在给大家分享分享。

前端代码

// 用户注册 export function registerUser(registerForm) { console.log('前端传递数据') const data = { UserName: registerForm.UserName, pass: registerForm.pass, checkPass: registerForm.checkPass, Name: registerForm.Name, ID: registerForm.ID, Email: registerForm.Email, Phone: registerForm.Phone } console.log('data:', data) return http({ url: '/api/admin/register', method: 'post', data }) }

前端代码说明

这里我封装了axios,这个这里不做介绍,可以参考我的另外一篇博文。想后端传递的数据是json数据类型,一共有7歌参数后端的接口是**/register**

后端代码

// COntroller层 package com.ssm.controller; import com.ssm.pojo.User; import com.ssm.service.IUserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import java.util.List; @Controller @RequestMapping("/admin") public class UserController { @Autowired private IUserService userService; @RequestMapping("/login") @ResponseBody public List<User> userInfor(){ System.out.println("前后端已连接"); System.out.println( userService.getUser().size()); return userService.getUser(); } @RequestMapping(value = "/register",method = RequestMethod.POST) public void getData(@RequestBody RegisterData registerData){ System.out.println("userAccount "+registerData.getID()); } }

代码说明

后端的Controller层接收参数时 我定义了一个对象 RegisterData registerData注意***@RequestBody***这个设定一定不能丢, 否则就接收不到参数!!!!!

RegisterData .java 代码

package com.ssm.controller; // 注册界面 public class RegisterData { // 用户名 public String UserName; // 用户密码 public String pass; // 确认密码 public String checkPass; // 姓名 public String Name; // 用户ID(身份证号、港澳台居民证等) public String ID; // 用户邮箱 public String Email; // 用户手机号 public String Phone; //以下是Set 和 Get方法 public String getUserName() { return UserName; } public void setUserName(String userName) { UserName = userName; } public String getPass() { return pass; } public void setPass(String pass) { this.pass = pass; } public String getCheckPass() { return checkPass; } public void setCheckPass(String checkPass) { this.checkPass = checkPass; } public String getName() { return Name; } public void setName(String name) { Name = name; } public String getID() { return ID; } public void setID(String ID) { this.ID = ID; } public String getEmail() { return Email; } public void setEmail(String email) { Email = email; } public String getPhone() { return Phone; } public void setPhone(String phone) { Phone = phone; } }

结尾

还是那句话,好好努力吧!

最新回复(0)