前后端传值交互方法

第一种:路径传值(id,token等)
前端在ajax的url路径上通过模板字符串在url后拼接token或id

 url:baseUrl + `:9008/user/register/${code}`, 

后端通过@PathVariable注解拿到这个值

 @GetMapping("/userInfo/{token}")
public Result demo(@PathVariable String token){

第二种:date传值(对象或单一变量)
前端

 data:{"username":username,"password":password,"mobile":mobile},

后端可以直接定义一个对象来接收,不过对象的字段前后端需要一样,不一定一一对应,

 @PostMapping("/login")
    public Result login(Employee employee) {
    //或者
    @PostMapping("/login")
   public Result login(@Param("username")String username,@Param("password")string password) {
    或者
  public Result login(HttpServletRequest request) {
      String mobile = request.getParameter("mobile");
      String password = request.getParameter("password");

第三种:请求头传token或其他信息
前端,将token放入请求头里面。

  url:baseUrl + `:9008/get/`, 
    beforeSend: function(request) {
        request.setRequestHeader("Authorization", token);
    },
    success: function (msg) {   
        alert("成功回调")
    }

后端HttpServletRequest 得到请求头信息,然后解析

 @PostMapping("/get")
    public Result getAll(HttpServletRequest request){
        String token = request.getHeader(”Authorization“);
        String id = JwtTokenUtils.getUid(token);

第四种:前端表单提交

 var formData = {
        name: uname.value,
        sex: sex.value,
        age: age.value
    };

    $.ajax({
        url: 'http://localhost:7777/input',
        type: 'post',
        data: formData,
        dataType: 'json',

后端

 @PostMapping("/input")
    public String input(@Param("name") String name, @Param("sex") String sex, @Param("age") String age){

后端返回对象的两种方法

第一:通过新写一个实体类,然后实体类属性为要返回的信息,在返回的时候新new这个实体类在给他赋值,然后返回这个对象
第二:通过新建一个map集合(可以自动转换为对象返回)

 Map<String,String> userInfo = new HashMap<>();
  userInfo.put("mobile",employee.getMobile());
  userInfo.put("userName",employee.getUsername());
  userInfo.put("role",employee.getRole());
  return userInfo;

你可能感兴趣的:(前后端分离)