uniapp项目微信授权登录,用vue3语言uni-ui组件,后端用springbootCloud分为controller层,service接口,service实现类,mapper接口和mapper配置文件,请写出符合的前后端代码
时间: 2023-06-11 15:06:55 浏览: 118
前端代码:
1. 登录页面的视图组件:
```vue
<template>
<view>
<button @click="login">微信授权登录</button>
</view>
</template>
<script>
import { onMounted, ref } from "vue";
import { login } from "@/api/user";
export default {
setup() {
const loading = ref(false);
const login = async () => {
loading.value = true;
try {
const res = await uni.login();
const code = res.code;
const userInfo = await uni.getUserInfo();
const data = {
code,
encryptedData: userInfo.encryptedData,
iv: userInfo.iv,
};
await login(data);
uni.switchTab({
url: "/pages/index/index",
});
} catch (error) {
console.error(error);
} finally {
loading.value = false;
}
};
onMounted(() => {
uni.showNavigationBarLoading();
});
return {
loading,
login,
};
},
};
</script>
```
2. 调用后端接口的 API:
```javascript
import axios from "axios";
const BASE_URL = "http://localhost:8080";
export const login = async (data) => {
return axios.post(`${BASE_URL}/api/user/login`, data);
};
```
后端代码:
1. Controller 层:
```java
@RestController
@RequestMapping("/api/user")
public class UserController {
@Autowired
private UserService userService;
@PostMapping("/login")
public Result login(@RequestBody LoginDTO loginDTO) {
return Result.success(userService.login(loginDTO));
}
}
```
2. Service 接口:
```java
public interface UserService {
UserDTO login(LoginDTO loginDTO);
}
```
3. Service 实现类:
```java
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public UserDTO login(LoginDTO loginDTO) {
// TODO: 根据微信授权登录获取的 code、encryptedData 和 iv,调用微信 API 获取用户的 openid 和 session_key
String openid = "mock openid";
String sessionKey = "mock session_key";
User user = userMapper.selectByOpenid(openid);
if (user == null) {
// 用户不存在,创建新用户
user = new User();
user.setOpenid(openid);
user.setNickname(loginDTO.getNickname());
user.setAvatarUrl(loginDTO.getAvatarUrl());
userMapper.insert(user);
} else {
// 更新用户信息
user.setNickname(loginDTO.getNickname());
user.setAvatarUrl(loginDTO.getAvatarUrl());
userMapper.updateByPrimaryKey(user);
}
UserDTO userDTO = new UserDTO();
BeanUtils.copyProperties(user, userDTO);
userDTO.setSessionKey(sessionKey);
return userDTO;
}
}
```
4. Mapper 接口和 Mapper 配置文件:
```java
@Mapper
public interface UserMapper {
int deleteByPrimaryKey(Integer id);
int insert(User record);
int insertSelective(User record);
User selectByPrimaryKey(Integer id);
int updateByPrimaryKeySelective(User record);
int updateByPrimaryKey(User record);
User selectByOpenid(String openid);
}
```
```xml
<mapper namespace="com.example.demo.mapper.UserMapper">
<resultMap id="BaseResultMap" type="com.example.demo.domain.User">
<id column="id" jdbcType="INTEGER" property="id"/>
<result column="openid" jdbcType="VARCHAR" property="openid"/>
<result column="nickname" jdbcType="VARCHAR" property="nickname"/>
<result column="avatar_url" jdbcType="VARCHAR" property="avatarUrl"/>
</resultMap>
<insert id="insert" parameterType="com.example.demo.domain.User">
insert into user (openid, nickname, avatar_url)
values (#{openid,jdbcType=VARCHAR}, #{nickname,jdbcType=VARCHAR}, #{avatarUrl,jdbcType=VARCHAR})
</insert>
<select id="selectByOpenid" parameterType="String" resultMap="BaseResultMap">
select *
from user
where openid = #{openid,jdbcType=VARCHAR}
</select>
<update id="updateByPrimaryKey" parameterType="com.example.demo.domain.User">
update user
set openid = #{openid,jdbcType=VARCHAR},
nickname = #{nickname,jdbcType=VARCHAR},
avatar_url = #{avatarUrl,jdbcType=VARCHAR}
where id = #{id,jdbcType=INTEGER}
</update>
</mapper>
```
阅读全文