該Demo根據菜鳥教程的練手項目,請提前到菜鳥教程的官網查看nodejs的相關教程,根據教程實際操作一遍,然后自己動手去實現登錄、注冊功能,此Demo只作參考,不符合前端相關規范。
使用的技術棧
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)用戶名和密碼不為空的情況下,查詢數據庫,判斷用戶是否存在。
如果存在,返回該用戶已存在,可直接登錄;
如果不存在,注冊用戶,插入數據庫。
部分操作演示
登錄
主頁
注冊
插入數據庫
項目初始化
1、新建目錄
新建目錄,例如:node-login
2、安裝express
安裝 Express 並將其保存到依賴列表中:
打開cmd命令行,定位到項目目錄,使用命令行cnpm install express --save
如下圖:
以上命令會將 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
依賴的模塊如圖:
3、安裝MongoDB
使用命令cnpm install mongodb
4、新建文件夾public
新建public文件夾,用來存放公共文件目錄(js、css、image)