根据nodejs写一个登录注册结合MySQL然后登录成功后展示在HTML table 页面上
时间: 2023-12-17 21:02:04 浏览: 216
好的,下面是一个简单的登录注册系统,使用Node.js和MySQL,同时登录成功后将用户信息展示在HTML table页面上。
1. 安装MySQL和相关依赖
首先需要安装MySQL,并创建一个名为`login_demo`的数据库,以及一个名为`users`的表,该表包含以下列:
```
id INT(11) AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL,
password VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL
```
接下来,在Node.js项目中安装MySQL和相关依赖:
```
npm install mysql express body-parser ejs
```
2. 创建服务器
在项目根目录下创建一个名为`server.js`的文件,并输入以下代码:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
const port = process.env.PORT || 3000;
// 创建MySQL连接池
const pool = mysql.createPool({
connectionLimit: 10,
host: 'localhost',
user: 'root',
password: 'password',
database: 'login_demo'
});
// 使用body-parser中间件解析POST请求体
app.use(bodyParser.urlencoded({ extended: false }));
// 设置模板引擎为ejs
app.set('view engine', 'ejs');
// 访问登录页面
app.get('/login', (req, res) => {
res.render('login');
});
// 处理登录请求
app.post('/login', (req, res) => {
const { username, password } = req.body;
// 在MySQL中查询用户
pool.query('SELECT * FROM users WHERE username = ? AND password = ?', [username, password], (error, results) => {
if (error) throw error;
if (results.length > 0) {
// 登录成功,将用户信息传递给模板引擎渲染页面
res.render('dashboard', { user: results[0] });
} else {
// 登录失败,返回登录页面,显示错误消息
res.render('login', { error: '用户名或密码不正确' });
}
});
});
// 访问注册页面
app.get('/register', (req, res) => {
res.render('register');
});
// 处理注册请求
app.post('/register', (req, res) => {
const { username, password, email } = req.body;
// 在MySQL中插入新用户
pool.query('INSERT INTO users (username, password, email) VALUES (?, ?, ?)', [username, password, email], (error, results) => {
if (error) throw error;
// 注册成功,返回登录页面
res.render('login', { success: '注册成功,请登录' });
});
});
// 启动服务器
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
```
3. 创建模板文件
在项目根目录下创建一个名为`views`的文件夹,并创建以下三个模板文件:
- `login.ejs`: 登录页面模板
- `register.ejs`: 注册页面模板
- `dashboard.ejs`: 登录成功后展示用户信息的页面模板
`login.ejs`模板代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
</head>
<body>
<% if (typeof error !== 'undefined') { %>
<p style="color: red;"><%= error %></p>
<% } %>
<form action="/login" method="post">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" required><br>
<label for="password">密码:</label>
<input type="password" name="password" id="password" required><br>
<input type="submit" value="登录">
</form>
<p>没有账号?<a href="/register">点击这里注册</a></p>
</body>
</html>
```
`register.ejs`模板代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
</head>
<body>
<form action="/register" method="post">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" required><br>
<label for="password">密码:</label>
<input type="password" name="password" id="password" required><br>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" required><br>
<input type="submit" value="注册">
</form>
<p>已有账号?<a href="/login">点击这里登录</a></p>
</body>
</html>
```
`dashboard.ejs`模板代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人中心</title>
</head>
<body>
<h1>个人信息</h1>
<table>
<tr>
<td>用户名:</td>
<td><%= user.username %></td>
</tr>
<tr>
<td>邮箱:</td>
<td><%= user.email %></td>
</tr>
</table>
</body>
</html>
```
4. 运行服务器
在命令行中输入以下命令运行服务器:
```
node server.js
```
然后在浏览器中访问`http://localhost:3000/login`即可看到登录页面。注册页面URL为`http://localhost:3000/register`。登录成功后会跳转到个人中心页面,URL为`http://localhost:3000/dashboard`,并展示用户信息。
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)