NodeJS实现登录注册功能（图文）

深藏阁楼爱情的钟 2023-08-17 15:42 78阅读 0赞

该Demo根据菜鸟教程的练手项目，请提前到菜鸟教程的官网查看[nodejs][]的相关教程，根据教程实际操作一遍，然后自己动手去实现登录、注册功能，此Demo只作参考，不符合前端相关规范。

![16d230c1536107ca?w=1076&h=891&f=png&s=80347][16d230c1536107ca_w_1076_h_891_f_png_s_80347]

## 使用的技术栈 ##

node+express+mongodb

## 项目目录结构 ##

>  *  node\_modules: 第三方模块目录
>  *  public: 公共文件目录（js、css、image）
>  *  login.html：登录页面
>  *  register.html：注册页面
>  *  main.html：主页面
>  *  db.js：数据库相关封装（数据库添加、查询）
>  *  login.js：接口启动文件（登录、注册接口）

## 登录场景 ##

（1）用户名不能为空；  
（2）密码不能为空；  
（3）用户名和密码不为空的情况下，查询数据库，判断用户是否存在。  
如果存在，判断用户名和密码是否一致，一致登录成功；不一致返回用户名或密码错误；  
如果不存在，直接返回不存在该用户。

## 注册场景 ##

（1）用户名不能为空；  
（2）密码不能为空；  
（3）用户名和密码不为空的情况下，查询数据库，判断用户是否存在。  
如果存在，返回该用户已存在，可直接登录；  
如果不存在，注册用户，插入数据库。

## 部分操作演示 ##

### 登录 ###

![16d230bbaae8caf9?w=1624&h=850&f=png&s=65806][16d230bbaae8caf9_w_1624_h_850_f_png_s_65806]

### 主页 ###

![16d230b60cd9c211?w=976&h=576&f=png&s=12368][16d230b60cd9c211_w_976_h_576_f_png_s_12368]

### 注册 ###

![16d230b02295dbcd?w=1815&h=922&f=png&s=77095][16d230b02295dbcd_w_1815_h_922_f_png_s_77095]

### 插入数据库 ###

![16d230a1eebdd1cf?w=1362&h=622&f=png&s=57786][16d230a1eebdd1cf_w_1362_h_622_f_png_s_57786]

## 项目初始化 ##

### 1、新建目录 ###

新建目录，例如：node-login

### 2、安装express ###

安装 Express 并将其保存到依赖列表中：  
打开cmd命令行，定位到项目目录，使用命令行`cnpm install express --save`  
如下图：

![16d230c77198f140?w=1188&h=256&f=png&s=14658][16d230c77198f140_w_1188_h_256_f_png_s_14658]

以上命令会将 Express 框架安装在当前目录的 node\_modules 目录中， node\_modules 目录下会自动创建 express 目录。以下几个重要的模块是需要与 express 框架一起安装的：

>  *  body-parser - node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。
>  *  cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie，并把它们转成对象。
>  *  multer - node.js 中间件，用于处理 enctype="multipart/form-data"（设置表单的MIME编码）的表单数据。

使用的命令如下：

cnpm install body-parser --save
    cnpm install cookie-parser --save
    cnpm install multer --save

依赖的模块如图：

![16d230cbd16f71fa?w=1321&h=528&f=png&s=37719][16d230cbd16f71fa_w_1321_h_528_f_png_s_37719]

### 3、安装MongoDB ###

使用命令`cnpm install mongodb`

### 4、新建文件夹public ###

新建public文件夹，用来存放公共文件目录（js、css、image）

### 5、github地址：[node-login][]，欢迎start。 ###

转载于:https://www.cnblogs.com/YYW303/p/11510201.html

[nodejs]: https://www.runoob.com/nodejs/nodejs-tutorial.html
[16d230c1536107ca_w_1076_h_891_f_png_s_80347]: https://user-gold-cdn.xitu.io/2019/9/12/16d230c1536107ca?w=1076&h=891&f=png&s=80347
[16d230bbaae8caf9_w_1624_h_850_f_png_s_65806]: https://user-gold-cdn.xitu.io/2019/9/12/16d230bbaae8caf9?w=1624&h=850&f=png&s=65806
[16d230b60cd9c211_w_976_h_576_f_png_s_12368]: https://user-gold-cdn.xitu.io/2019/9/12/16d230b60cd9c211?w=976&h=576&f=png&s=12368
[16d230b02295dbcd_w_1815_h_922_f_png_s_77095]: https://user-gold-cdn.xitu.io/2019/9/12/16d230b02295dbcd?w=1815&h=922&f=png&s=77095
[16d230a1eebdd1cf_w_1362_h_622_f_png_s_57786]: https://user-gold-cdn.xitu.io/2019/9/12/16d230a1eebdd1cf?w=1362&h=622&f=png&s=57786
[16d230c77198f140_w_1188_h_256_f_png_s_14658]: https://user-gold-cdn.xitu.io/2019/9/12/16d230c77198f140?w=1188&h=256&f=png&s=14658
[16d230cbd16f71fa_w_1321_h_528_f_png_s_37719]: https://user-gold-cdn.xitu.io/2019/9/12/16d230cbd16f71fa?w=1321&h=528&f=png&s=37719
[node-login]: https://github.com/ywyan/node-login