以下是一个简单的Java Spring Boot应用程序，
使用MySQL数据库和
axios库
实现用户登录和注册的示例代码。
1. 创建数据库表
在MySQL数据库中创建一个名为"user"的表，用来存储
用户信息，包括id、
用户名和密码。
```
CREATE TABLE user (
id int(11) NOT NULL AUTO_INCREMENT,
username varchar(45) NOT NULL,
password varchar(45) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
```
2. 创建Java实体类
创建一个名为"User"的Java实体类，用来映射"user"表。
```
@Entity
@Table(name = "user")
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String username;
private String password;
// getters and setters
}
```
3. 创建Spring Boot控制器
创建一个名为"UserController"的Spring Boot控制器，用来处理
用户注册和
登录请求。
```
@RestController
@RequestMapping("/api/user")
public class UserController {
@Autowired
private UserRepository userRepository;
@PostMapping("/register")
public ResponseEntity<?> register(@RequestBody User user) {
if (userRepository.existsByUsername(user.getUsername())) {
return ResponseEntity.badRequest().body("Username is already taken!");
}
User savedUser = userRepository.save(user);
return ResponseEntity.ok(savedUser);
}
@PostMapping("/login")
public ResponseEntity<?> login(@RequestBody User user) {
User foundUser = userRepository.findByUsernameAndPassword(user.getUsername(), user.getPassword());
if (foundUser == null) {
return ResponseEntity.badRequest().body("Username or password is incorrect!");
}
return ResponseEntity.ok(foundUser);
}
}
```
4. 创建Spring Boot存储库
创建一个名为"UserRepository"的Spring Boot存储库，用来处理对"user"表的数据库操作。
```
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
boolean existsByUsername(String username);
User findByUsernameAndPassword(String username, String password);
}
```
5. 创建Vue.js前端应用程序
创建一个名为"Login.vue"的Vue.js组件，用来处理
用户登录请求。
```
<template>
<div>
<h1>Login</h1>
<form @submit.prevent="login">
<div>
<label>Username:</label>
<input type="text" v-model="username" required>
</div>
<div>
<label>Password:</label>
<input type="password" v-model="password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
import
axios from '
axios';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
axios.post('/api/user/login', {
username: this.username,
password: this.password
})
.then(response => {
localStorage.setItem('currentUser', JSON.stringify(response.data));
this.$router.push('/');
})
.catch(error => {
console.log(error);
});
}
}
};
</script>
```
创建一个名为"Register.vue"的Vue.js组件，用来处理
用户注册请求。
```
<template>
<div>
<h1>Register</h1>
<form @submit.prevent="register">
<div>
<label>Username:</label>
<input type="text" v-model="username" required>
</div>
<div>
<label>Password:</label>
<input type="password" v-model="password" required>
</div>
<button type="submit">Register</button>
</form>
</div>
</template>
<script>
import
axios from '
axios';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
register() {
axios.post('/api/user/register', {
username: this.username,
password: this.password
})
.then(response => {
localStorage.setItem('currentUser', JSON.stringify(response.data));
this.$router.push('/');
})
.catch(error => {
console.log(error);
});
}
}
};
</script>
```
6. 运行应用程序
将Java代码打包成一个jar包，并在命令行中运行该jar包，然后在浏览器中打开Vue.js应用程序。
```
java -jar myapp.jar
```
以上就是一个简单的Java Spring Boot应用程序，
使用MySQL数据库和
axios库
实现用户登录和注册的示例代码。
5876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
