帮我写一套完整的前端后端,要求能够实现简单的注册登录功能。并且在后端连入数据库
时间: 2024-02-20 14:02:11 浏览: 29
好的,我可以为您提供一份简单的前后端注册登录代码示例。
前端代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册登录</title>
</head>
<body>
<h1>注册</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="button" value="注册" onclick="register()">
</form>
<h1>登录</h1>
<form>
<label for="login_username">用户名:</label>
<input type="text" id="login_username" name="login_username"><br>
<label for="login_password">密码:</label>
<input type="password" id="login_password" name="login_password"><br>
<input type="button" value="登录" onclick="login()">
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function register() {
const username = $('#username').val();
const password = $('#password').val();
$.post('/register', { username, password }, (data) => {
alert(data.msg);
});
}
function login() {
const username = $('#login_username').val();
const password = $('#login_password').val();
$.post('/login', { username, password }, (data) => {
if (data.code === 0) {
alert('登录成功');
} else {
alert(data.msg);
}
});
}
</script>
</body>
</html>
```
后端代码示例(使用 Node.js 和 Express 框架):
```javascript
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
// 创建数据库连接池
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: '123456',
database: 'test'
});
// 解析 application/x-www-form-urlencoded 格式的数据
app.use(bodyParser.urlencoded({ extended: false }));
// 处理注册请求
app.post('/register', (req, res) => {
const { username, password } = req.body;
if (!username || !password) {
res.send({ code: 1, msg: '用户名和密码不能为空' });
return;
}
// 查询用户名是否已存在
pool.query('SELECT * FROM users WHERE username = ?', [username], (err, results) => {
if (err) {
console.error(err);
res.send({ code: 1, msg: '系统错误' });
return;
}
if (results.length > 0) {
res.send({ code: 1, msg: '用户名已存在' });
return;
}
// 插入新用户
pool.query('INSERT INTO users SET ?', { username, password }, (err, results) => {
if (err) {
console.error(err);
res.send({ code: 1, msg: '系统错误' });
return;
}
res.send({ code: 0, msg: '注册成功' });
});
});
});
// 处理登录请求
app.post('/login', (req, res) => {
const { username, password } = req.body;
if (!username || !password) {
res.send({ code: 1, msg: '用户名和密码不能为空' });
return;
}
// 查询用户名和密码是否匹配
pool.query('SELECT * FROM users WHERE username = ? AND password = ?', [username, password], (err, results) => {
if (err) {
console.error(err);
res.send({ code: 1, msg: '系统错误' });
return;
}
if (results.length === 0) {
res.send({ code: 1, msg: '用户名或密码错误' });
return;
}
res.send({ code: 0, msg: '登录成功' });
});
});
// 启动服务器
app.listen(3000, () => {
console.log('Server started on port 3000');
});
```
在执行代码之前,您需要先安装以下依赖:
- Node.js
- Express
- body-parser
- mysql
您也需要在本地创建一个名为 `test` 的 MySQL 数据库,并在其中创建一个名为 `users` 的表,表结构如下:
```
CREATE TABLE `users` (
`id` int NOT NULL AUTO_INCREMENT,
`username` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
当您执行后端代码后,在浏览器中访问 `http://localhost:3000` 即可看到注册登录页面。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)