axiosを使用してjsonデータを転送する問題と、vueプロジェクトとSSMプロジェクト間でのクロスドメインの問題を解決します

<template>
  <el-form ref="user" >
    <el-form-item label="用户名">
      <el-input v-model="user.username" placeholder="请输入用户名" clearable="true"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="user.password" placeholder="请输入密码" clearable="true" type="password" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="userlogin12(user.username,user.password)">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      user: {
        username1: "",
        password1: "",
      }
    }
  },
      methods: {
        userlogin12(username,password){
          this.$axios({
            method: 'post',
            headers:{
              'Content-type': 'application/json'
            },
            url: 'http://localhost:8080/HHH/user/ReagentuserLoginService.do',
            data:JSON.stringify({    //这里是发送给后台的数据
              username:username,
              password:password,
            })
          }).then((response) => {          //这里使用了ES6的语法
        console.log(response)       //请求成功返回的数据
        alert("成功")
      }).catch((error) => {
        console.log(error)       //请求失败返回的数据
      })
    }
  }
}
</script>
<style scoped>
</style>

背景はオブジェクトの形式で受け入れられ、キーと値のペアが必要であるため、これはログイン用のvueインターフェイスです。それ以外の場合はqs.stringifyの形式を使用できます。

@RequestMapping("/user")
@Controller
public class  ReagentUserController {
    @Resource
    private UserManagerService userManagerService;
  @RequestMapping(value = "/ReagentuserLoginService.do",method = RequestMethod.POST)
    @CrossOrigin
    @ResponseBody
    public UserAndPermissions ReagentUserLogin(@RequestBody UserAndPermissions user) {
        System.out.println(user);
        return user;
    }

这是控制层的代码，只需三个注释搞定
@CrossOrigin是解决跨域问题的
@ResponseBody是将返回值自动转为json对象形式
@RequestBody 是接受json字符串的