uniapp对接后端springboot

### UniApp与Spring Boot后端对接教程 #### 一、数据交互基础 UniApp 是一个多端开发框架，能够通过 HTTP 请求实现前端与 Spring Boot 后端的数据交互。HTTP 协议是最常见的通信方式之一，在实际项目中通常会封装 Axios 或者原生的 `uni.request` 方法来简化请求逻辑[^1]。 以下是基于 `uni.request` 的基本示例代码： ```javascript // 发起 GET 请求 uni.request({ url: 'http://your-spring-boot-server/api/data', // 替换为实际接口地址 method: 'GET', success(res) { console.log('成功:', res.data); }, fail(err) { console.error('失败:', err); } }); ``` 对于 POST 请求，则可以传递额外参数： ```javascript // 发起 POST 请求 uni.request({ url: 'http://your-spring-boot-server/api/data/create', method: 'POST', data: { name: 'example', value: 10 }, // 参数对象 header: { 'content-type': 'application/json' }, success(res) { console.log('创建成功:', res.data); }, fail(err) { console.error('创建失败:', err); } }); ``` #### 二、登录认证机制 为了保护 API 资源的安全性，推荐使用 JWT（JSON Web Token）作为身份验证的方式。JWT 可以在客户端存储并随每次请求发送给服务器用于校验用户的身份。 ##### Spring Boot 配置 JWT 认证 以下是一个简单的 Spring Security 和 JWT 实现片段： ```java import io.jsonwebtoken.Jwts; import org.springframework.security.authentication.UsernamePasswordAuthenticationToken; public class JwtUtil { public static String generateToken(String username, String secretKey) { return Jwts.builder() .setSubject(username) .signWith(io.jsonwebtoken.SignatureAlgorithm.HS256, secretKey.getBytes()) .compact(); } public static UsernamePasswordAuthenticationToken getAuthentication(String token, String secretKey) { String user = Jwts.parser().setSigningKey(secretKey.getBytes()).parseClaimsJws(token).getBody().getSubject(); return new UsernamePasswordAuthenticationToken(user, null, Collections.emptyList()); } } ``` ##### 客户端处理 JWT 当用户完成登录操作时，返回一个有效的 JWT 字符串保存至本地缓存中以便后续访问受保护资源时附加到请求头里去。 ```javascript function loginAndGetToken() { uni.request({ url: 'http://your-spring-boot-server/api/auth/login', method: 'POST', data: { username: 'testUser', password: 'password' }, success(res) { const jwtToken = res.data.token; // 假设响应中有 token 属性 uni.setStorageSync('jwt_token', jwtToken); // 存储令牌 // 测试带授权头部的新请求 testProtectedResource(jwtToken); } }); } function testProtectedResource(token) { uni.request({ url: 'http://your-spring-boot-server/api/secured/resource', method: 'GET', header: { Authorization: `Bearer ${token}` }, success(res) { console.log('Secured Resource Data:', res.data); } }); } ``` #### 三、API 调用实例 假设存在 `/api/product/list` 接口用于查询商品列表，那么可以在 UniApp 中这样调用它： ```javascript uni.request({ url: '/api/product/list', // 如果配置了 baseURL 则无需写全路径 method: 'GET', success(res) { this.products = res.data.list || []; // 将结果绑定到页面变量上显示出来 } }); ``` 注意这里的 URL 应该匹配后端定义的服务地址[^2]。 --- ###