用vue,java,mysql搞一个登入页面
时间: 2023-07-01 22:16:50 浏览: 77
好的,我可以帮您简单介绍一下如何使用Vue、Java和MySQL开发一个登录页面。
首先,我们需要在前端使用Vue框架来构建登录页面,可以使用Vue CLI快速创建一个Vue项目。安装好Vue CLI之后,使用以下命令创建项目:
```
vue create login-page
```
接下来,我们需要在Java中编写登录接口,实现用户的登录验证。可以使用Spring Boot框架搭建Java后端项目。在Java中,我们可以使用MySQL数据库来存储用户信息和验证用户登录。
在Java中编写登录接口代码示例:
```java
@PostMapping("/login")
public Result login(@RequestBody LoginDTO loginDTO) {
User user = userService.getUserByUsername(loginDTO.getUsername());
if (user == null) {
return Result.fail("用户不存在!");
}
if (!user.getPassword().equals(loginDTO.getPassword())) {
return Result.fail("密码不正确!");
}
// 登录成功,返回token
String token = JWTUtils.createToken(user.getId());
return Result.success(token);
}
```
在MySQL中创建用户表,用来存储用户信息:
```sql
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(20) NOT NULL,
`password` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
```
最后,在前端页面中调用Java后端接口进行用户登录验证,并且存储用户的登录状态。代码示例:
```javascript
// 登录方法
async login() {
const res = await axios.post('/api/login', {
username: this.username,
password: this.password
});
if (res.data.code === 0) {
// 登录成功,保存token到本地存储
localStorage.setItem('token', res.data.data);
// 跳转到首页
this.$router.push('/');
} else {
// 登录失败,提示错误信息
this.$message.error(res.data.msg);
}
}
```
以上是一个简单的使用Vue、Java和MySQL开发登录页面的流程和示例代码,希望能对您有所帮助。