用express模块写一个登录注册系统,并且带有登陆注册页面
时间: 2024-06-09 21:11:51 浏览: 8
好的,以下是一个简单的登录注册系统的代码,使用了 Express 模块和 EJS 模板引擎:
首先,安装 Express 和 EJS 模块:
```
npm install express ejs
```
然后,创建一个名为 `app.js` 的文件,写入以下代码:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();
// 设置 EJS 模板引擎
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));
// 解析表单数据的中间件
app.use(bodyParser.urlencoded({ extended: false }));
// 登录页面路由
app.get('/login', (req, res) => {
res.render('login');
});
// 注册页面路由
app.get('/register', (req, res) => {
res.render('register');
});
// 登录表单提交路由
app.post('/login', (req, res) => {
const { username, password } = req.body;
// TODO: 校验用户名和密码是否正确
res.send(`Welcome, ${username}!`);
});
// 注册表单提交路由
app.post('/register', (req, res) => {
const { username, email, password } = req.body;
// TODO: 将用户信息保存到数据库
res.send(`Thanks for registering, ${username}!`);
});
// 启动服务器
app.listen(3000, () => {
console.log('Server started on port 3000');
});
```
在项目根目录下,创建一个名为 `views` 的文件夹,然后在该文件夹下创建 `login.ejs` 和 `register.ejs` 两个文件,分别写入以下代码:
`login.ejs`
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h1>Login</h1>
<form action="/login" method="POST">
<div>
<label>Username:</label>
<input type="text" name="username">
</div>
<div>
<label>Password:</label>
<input type="password" name="password">
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
</body>
</html>
```
`register.ejs`
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register</title>
</head>
<body>
<h1>Register</h1>
<form action="/register" method="POST">
<div>
<label>Username:</label>
<input type="text" name="username">
</div>
<div>
<label>Email:</label>
<input type="email" name="email">
</div>
<div>
<label>Password:</label>
<input type="password" name="password">
</div>
<div>
<button type="submit">Register</button>
</div>
</form>
</body>
</html>
```
最后,在项目根目录下,创建一个名为 `public` 的文件夹,用于存放静态文件,例如图片、CSS、JavaScript 等。
现在,启动服务器,访问 `http://localhost:3000/login` 和 `http://localhost:3000/register` 即可看到登录和注册页面了。
相关推荐
![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_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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)