前端用TS,后端用若依。来实现微信小程序的登录功能,写出其具体的代码
时间: 2024-09-19 10:01:56 浏览: 26
前端使用TypeScript开发微信小程序的登录功能,主要是处理用户输入和与服务器的交互。这里假设你已经设置了微信小程序的JS-SDK并且有了若依提供的后端接口。下面是一个简单的示例:
**前端 TypeScript (微信小程序) 登录页代码:**
```typescript
Page({
data: {
username: '',
password: '',
},
login: function(e) {
const username = e.detail.value.username;
const password = e.detail.value.password;
// 检查表单是否填写完整
if (!username || !password) {
wx.showToast({title: '请输入用户名和密码'});
return;
}
// 发送POST请求到后端API
wx.request({
url: 'https://your-server.com/api/login', // 替换为你实际的若依API地址
data: { username, password },
method: 'post',
header: {
'content-type': 'application/json'
},
success(res) {
// 如果登录成功,保存token并跳转到首页
if (res.data.success) {
wx.setStorageSync('token', res.data.token);
wx.navigateBack({
delta: 1
});
} else {
wx.showToast({title: res.data.message});
}
},
fail(err) {
console.error('登录失败:', err);
}
});
}
})
```
**后端 Java (若依) 验证登录的Controller代码:**
```java
@RestController
@RequestMapping("/api")
public class LoginController {
@PostMapping("/login")
public ResultBean login(@RequestBody UserLoginRequest userLoginRequest) {
// 实际的业务逻辑,例如数据库查询或JWT验证
boolean isSuccess = authenticate(userLoginRequest.getUsername(), userLoginRequest.getPassword());
if (isSuccess) {
// 创建Token并返回结果
String token = generateToken();
return new ResultBean(true, "登录成功", token);
} else {
return new ResultBean(false, "用户名或密码错误");
}
}
}
```
阅读全文