用vue通过axios将注册信息封装成一个R<T>类提交给controller并存入数据库,应该怎么做?并给出后续的登录模块。
时间: 2023-06-03 17:02:23 浏览: 61
首先,需要在前端使用 Vue 框架编写注册表单,然后使用 Axios 发送 POST 请求将注册信息封装成 R<T> 类提交给后端的 Controller,可参考以下代码:
// 前端代码
// 注册表单
<template>
<form @submit.prevent="register">
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" />
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" />
<button type="submit">注册</button>
</form>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
register() {
const data = {
username: this.username,
password: this.password
}
axios.post('/api/register', data)
.then(res => {
// 注册成功后处理
})
.catch(err => {
// 注册失败后处理
})
}
}
}
</script>
然后在后端的 Controller 中接收 R<T> 类型的注册信息,并将其存入数据库,可参考以下代码:
// 后端代码
// Controller
@RestController
@RequestMapping("/api")
public class UserController {
@Autowired
private UserService userService;
@PostMapping("/register")
public ResponseEntity<User> register(@RequestBody R<User> r) {
User user = r.getData();
userService.save(user);
return ResponseEntity.ok(user);
}
}
// Service
@Service
public class UserService {
@Autowired
private UserRepository userRepository;
public void save(User user) {
userRepository.save(user);
}
public User findByUsername(String username) {
return userRepository.findByUsername(username);
}
public boolean verifyPassword(User user, String password) {
return BCrypt.checkpw(password, user.getPassword());
}
}
对于后续的登录模块,需要在前端编写登录表单,并使用 Axios 发送 POST 请求将登录信息提交给后端进行验证,在验证通过后将用户信息存入 Vuex 中,可参考以下代码:
// 前端代码
// 登录表单
<template>
<form @submit.prevent="login">
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" />
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" />
<button type="submit">登录</button>
</form>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
const data = {
username: this.username,
password: this.password
}
axios.post('/api/login', data)
.then(res => {
const user = res.data;
this.$store.commit('setUser', user); // 存入 Vuex
// 登录成功后处理
})
.catch(err => {
// 登录失败后处理
})
}
}
}
</script>
// Vuex
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
user: null,
},
mutations: {
setUser(state, user) {
state.user = user;
},
},
actions: {},
getters: {},
});
在后端的 Controller 中接收登录信息,并进行验证,在验证通过后返回 User 对象,可参考以下代码:
// 后端代码
// Controller
@RestController
@RequestMapping("/api")
public class AuthController {
@Autowired
private UserService userService;
@PostMapping("/login")
public ResponseEntity<User> login(@RequestBody R<User> r) {
User user = r.getData();
User dbUser = userService.findByUsername(user.getUsername());
if (dbUser == null) {
return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
}
if (!userService.verifyPassword(dbUser, user.getPassword())) {
return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
}
return ResponseEntity.ok(dbUser);
}
}
注意,上述代码中的 User 对象需要包含用户名和经过加密的密码字段。在存储密码时,应该使用加密算法,这里使用了 BCrypt 来加密密码。在验证密码时,应该使用 BCrypt 提供的 checkpw 方法来验证。