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); // 打印错误信息  
	    }  
	});
}
相关推荐
雪芽蓝域zzs几秒前
第二十七节:进阶:路由权限控制 + 404 / 401 全局异常页面开发
前端·javascript·html
风骏时光牛马1 分钟前
稳定性治理与疑难问题深度分析实践
前端
大梦想家a1 小时前
基于 Spring Boot 的物流运单管理系统后端设计与实现(JWT + MyBatis-Plus + MySQL)
spring boot·mysql·mybatis
梦曦i9 小时前
@meng-xi/create-uni-app vs unibest:轻量脚手架与重型框架的定位之争
前端·uni-app
平头哥技术团队9 小时前
Day 10 | 工欲善其事:VS Code 配置与项目归档
android·开发语言·前端·javascript·html·交互
乌恩大侠10 小时前
GH200 新增 NVMe SSD 分区、格式化与挂载完整流程
运维·服务器·前端
yume_sibai10 小时前
Element Plus 数据展示组件完全指南(15个核心组件)
前端·javascript·vue.js
步行cgn10 小时前
YAML 的语法规则
spring boot·后端
海水冷却10 小时前
uniappx 实现 IM 聊天:SDK 支持现状、三条集成路径与踩坑实战
uniapp·即时通讯
骇客野人10 小时前
SpringBoot电商系统用户注册、登录、留存及数据埋点设计与落地实施方案
java·spring boot·后端