node写一个登录注册并可以上传头像,不用数据库
时间: 2024-06-09 16:11:22 浏览: 11
这里提供一种使用JSON文件存储用户数据的方案,可以实现基本的登录注册和头像上传功能。
首先,我们需要安装一些需要的包:
```bash
npm install express multer fs path
```
- `express`:web框架
- `multer`:处理文件上传
- `fs`:文件系统
- `path`:处理文件路径
接下来创建一个 `server.js` 文件,代码如下:
```javascript
const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');
const app = express();
const jsonFilePath = path.join(__dirname, 'users.json');
app.use(express.json());
// Multer配置
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
const ext = path.extname(file.originalname);
cb(null, Date.now() + ext);
},
});
const upload = multer({ storage });
// 静态文件服务
app.use(express.static('public'));
// 注册
app.post('/register', (req, res) => {
const { username, password } = req.body;
// 读取JSON文件
fs.readFile(jsonFilePath, 'utf8', (err, data) => {
if (err) {
console.error(err);
return res.status(500).send('服务器错误');
}
const users = JSON.parse(data);
// 检查用户名是否已存在
if (users.find((user) => user.username === username)) {
return res.status(400).send('用户名已存在');
}
// 生成新用户
const newUser = {
id: Date.now().toString(),
username,
password,
avatar: '',
};
// 添加新用户
users.push(newUser);
// 写入JSON文件
fs.writeFile(jsonFilePath, JSON.stringify(users), (err) => {
if (err) {
console.error(err);
return res.status(500).send('服务器错误');
}
res.send('注册成功');
});
});
});
// 登录
app.post('/login', (req, res) => {
const { username, password } = req.body;
// 读取JSON文件
fs.readFile(jsonFilePath, 'utf8', (err, data) => {
if (err) {
console.error(err);
return res.status(500).send('服务器错误');
}
const users = JSON.parse(data);
// 查找用户
const user = users.find((user) => user.username === username);
if (!user) {
return res.status(400).send('用户名或密码错误');
}
if (user.password !== password) {
return res.status(400).send('用户名或密码错误');
}
res.send('登录成功');
});
});
// 上传头像
app.post('/upload', upload.single('avatar'), (req, res) => {
const { userId } = req.body;
// 读取JSON文件
fs.readFile(jsonFilePath, 'utf8', (err, data) => {
if (err) {
console.error(err);
return res.status(500).send('服务器错误');
}
const users = JSON.parse(data);
// 查找用户
const user = users.find((user) => user.id === userId);
if (!user) {
return res.status(400).send('用户不存在');
}
// 更新用户头像
user.avatar = req.file.filename;
// 写入JSON文件
fs.writeFile(jsonFilePath, JSON.stringify(users), (err) => {
if (err) {
console.error(err);
return res.status(500).send('服务器错误');
}
res.send('头像上传成功');
});
});
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
```
这里我们假设前端已经实现了登录注册和头像上传的表单,并通过 `POST` 请求发送数据。在服务器端,我们使用 `express` 框架处理请求,并使用 `multer` 处理文件上传,使用 `fs` 模块读写JSON文件存储用户数据。
我们使用 `express.json()` 中间件解析请求体中的JSON数据,使用静态文件服务中间件 `express.static()` 提供头像图片的访问。
在 `/register` 路由中,首先读取JSON文件中的用户数据,检查是否已存在相同用户名的用户,如果不存在则生成新用户并写入JSON文件。在 `/login` 路由中,查找用户并检查密码是否匹配。在 `/upload` 路由中,根据请求中的 `userId` 查找用户并更新对应用户的头像文件名,并写入JSON文件。
注意,在本地开发时,需要手动创建 `uploads` 文件夹用于存储上传的头像图片,并在表单中指定 `enctype="multipart/form-data"` 属性。
最后,运行 `node server.js` 启动服务器,访问 http://localhost:3000 即可进行测试。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.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/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)