以下是使用Uniapp的交互数据的两种方式
后端使用@Parameter接收数据
后端使用@RequestBody接收Json格式数据
后端:
@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {
@GetMapping("/login")
public String login(@RequestParam("username") String username,@RequestParam("password") String password){
System.out.println(username);
System.out.println(password);
return "登录成功";
}
@PostMapping("/login")
public String jsonLogin(@RequestBody UserDTO userDTO){
System.out.println(userDTO.getUsername());
System.out.println(userDTO.getPassword());
return "登录成功";
}
}
前端:
import { ref } from 'vue';
let username = ref('')
let password = ref('')
function login() {
uni.request({
url: "http://localhost:8080/user/login",
data:({
username: username.value,
password: password.value
}),
success: function(res) {
console.log(res.data);
},
fail: function(err) {
console.error(err);
},
complete() {
}
});
}
function jsonLogin(){
uni.request({
url: 'http://localhost:8080/user/login', // 你的后端API地址
method: 'POST',
data: {
username: username.value,
password: password.value
},
success: function (res) {
// 请求成功时的回调函数
console.log(res.data); // 打印后端返回的数据
},
fail: function (error) {
// 请求失败时的回调函数
console.error(error); // 打印错误信息
}
});
}