Uniapp 的 uni.request传参后端

以下是使用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); // 打印错误信息  
	    }  
	});
}
相关推荐
Momo__1 小时前
VueUse createReusableTemplate —— 单文件组件内的模板复用神器
前端·vue.js
程序员小富1 小时前
我开源了一个开发者专属的智能 JSON 工具,得到了媳妇高度认可
前端·vue.js·后端
小小小小宇1 小时前
程序员如何给 LLM 装工具以及看懂推理过程
前端
写代码的皮筏艇1 小时前
React中的forwardRef
前端·react.js·面试
槑有老呆1 小时前
花三个月工资请了个 AI 程序员,结果它连青岛啤酒股价都查不了
前端
dunky1 小时前
Spring 的三级缓存与循环依赖
后端·spring
风骏时光牛马1 小时前
Verilog开发常见问题汇总解析
前端
子兮曰1 小时前
AI Coding Method Map:一张图看懂 AI 编程的完整链路
前端·人工智能·后端
weedsfly1 小时前
语法糖褪去之后——Babel 转译产物中的 JavaScript 本貌
前端·javascript