Node.js基于express搭建注册登录功能

Dear 丶 2022-09-30 12:52 166阅读 0赞

学习新技术最快捷的方式就是做项目。这两天我写了个基于express和MongoDB的Web登录功能

## 先看看效果 ##

![demo.gif][]

## 技术选择 ##

1.  [Node.js][]
2.  [MongoDB][]
3.  [express][]
4.  [mongoose][]
5.  [Bootstrap][]

其中MongoDB的简单使用可以看我[上一篇博文][Link 1]

## 项目目录 ##

.
    ├── database 
    │   ├── entity.js //实体Entity
    │   ├── model.js //模型Model
    │   └── schema.js //骨架Schema
    ├── package.json
    ├── public
    │   ├── home.html //主页
    │   ├── login.html //登陆页
    │   ├── register.html //注册页
    │   └── source
    │       ├── login.css
    │       ├── login.less
    │       └── reset.css
    ├── routes
    │   ├── home.js //主页路由
    │   ├── login.js //登录路由
    │   ├── login_process.js //登录POST处理
    │   ├── register.js //注册路由
    │   └── register_process.js //注册POST处理
    └── server
        └── index.js //入口文件

## 实现思路 ##

1.  进入登陆页面
2.  点击登录按钮并利用POST方法提交
3.  提交的数据传给后台与数据库取出的数据进行匹配按情况分配路由

## 路由 ##

index.js

在入口文件中分配路由

简单说明一下，当浏览器的地址栏变为localhost:3000/的时候，渲染login.html

<table style="margin:15px 0px; width:755.594px; overflow:auto; display:block; border-spacing:0px; border-collapse:collapse"> 
 <tbody style=""> 
  <tr style="display:flex"> 
   <td style="display:block; overflow:auto; background:rgb(43,48,59); color:rgb(192,197,206); padding:16px; border:none; font-size:13px; line-height:19px"> <pre style="margin-top:0px; margin-bottom:0px">
     
      
     <div style="height:19px">
      
       
      <span style="color:rgb(180,142,173)">var</span> express = 
      
       
      <span style="color:rgb(208,135,112)">require</span>(
      
       
      <span style="color:rgb(163,190,140)">'express'</span>);
     
      
     </div>
     
      
     <div style="height:19px">
      
       
      <span style="color:rgb(180,142,173)">var</span> path = 
      
       
      <span style="color:rgb(208,135,112)">require</span>(
      
       
      <span style="color:rgb(163,190,140)">'path'</span>);
     
      
     </div>
     
      
     <div style="height:19px">
      
       
      <span style="color:rgb(180,142,173)">var</span> bodyParser = 
      
       
      <span style="color:rgb(208,135,112)">require</span>(
      
       
      <span style="color:rgb(163,190,140)">'body-parser'</span>);
     
      
     </div>
     
      
     <div style="height:19px">
      
       
      <span style="color:rgb(180,142,173)">var</span> app = express();
     
      
     </div>
     
      
     <div style="height:19px">
      
       
      <span style="color:rgb(180,142,173)">var</span> router = express.Router();
     
      
     </div>
     
      
     <div style="height:19px">
      
       
      <span style="color:rgb(180,142,173)">var</span> UserModel = 
      
       
      <span style="color:rgb(208,135,112)">require</span>(
      
       
      <span style="color:rgb(163,190,140)">'../database/model'</span>);
     
      
     </div>
     
      
     <div style="height:19px">
      
       
      <span style="color:rgb(180,142,173)">var</span> UserEntity = 
      
       
      <span style="color:rgb(208,135,112)">require</span>(
      
       
      <span style="color:rgb(163,190,140)">'../database/entity'</span>);
     
      
     </div>
     
      
     <div style="height:19px">
      
       
      <span style="color:rgb(180,142,173)">var</span> urlencodedParser = bodyParser.urlencoded({ 
      
       
      <span style="">extended</span>: 
      
       
      <span style="color:rgb(208,135,112)">false</span> });
     
      
     </div>
     
      
     <div style="height:19px"></div>
     
      
     <div style="height:19px">
      
       
      router.post(
      
       
      <span style="color:rgb(163,190,140)">'/'</span>, urlencodedParser, 
      
       
      <span style=""><span style="color:rgb(180,142,173)">function</span> (<span style="color:rgb(208,135,112)">req, res</span>) </span>{ 
     
      
     </div>
     
      
     <div style="height:19px">
      
       
        response = {
     
      
     </div>
     
      
     <div style="height:19px">    
      
       
      <span style="">username</span>: req.body.username,
     
      
     </div>
     
      
     <div style="height:19px">    
      
       
      <span style="">password</span>: req.body.password
     
      
     </div>
     
      
     <div style="height:19px">
      
       
        };
     
      
     </div>
     
      
     <div style="height:19px">  
      
       
      <span style="color:rgb(180,142,173)">var</span> input_username = response.username;
     
      
     </div>
     
      
     <div style="height:19px">  
      
       
      <span style="color:rgb(180,142,173)">var</span> input_password = response.password;
     
      
     </div>
     
      
     <div style="height:19px">  
      
       
      <span style=""><span style="color:rgb(180,142,173)">function</span> <span style="color:rgb(143,161,179)">getUser</span>(<span style="color:rgb(208,135,112)"></span>) </span>{
     
      
     </div>
     
      
     <div style="height:19px">    
      
       
      <span style="color:rgb(180,142,173)">var</span> user;
     
      
     </div>
     
      
     <div style="height:19px">
      
       
          user = UserModel.findOne({ 
      
       
      <span style="">USERNAME</span>: input_username })
     
      
     </div>
     
      
     <div style="height:19px">
      
       
          .exec()
     
      
     </div>
     
      
     <div style="height:19px">
      
       
          .then(
      
       
      <span style=""><span style="color:rgb(180,142,173)">function</span> (<span style="color:rgb(208,135,112)">result</span>) </span>{
     
      
     </div>
     
      
     <div style="height:19px">      
      
       
      <span style="color:rgb(180,142,173)">return</span> result;
     
      
     </div>
     
      
     <div style="height:19px">
      
       
          })
     
      
     </div>
     
      
     <div style="height:19px">
      
       
          .error(
      
       
      <span style=""><span style="color:rgb(180,142,173)">function</span> (<span style="color:rgb(208,135,112)">error</span>) </span>{
     
      
     </div>
     
      
     <div style="height:19px">      
      
       
      <span style="color:rgb(180,142,173)">return</span> 
      
       
      <span style="color:rgb(163,190,140)">'Promise Error:'</span> + error;
     
      
     </div>
     
      
     <div style="height:19px">
      
       
          })
     
      
     </div>
     
      
     <div style="height:19px">    
      
       
      <span style="color:rgb(180,142,173)">return</span> user;
     
      
     </div>
     
      
     <div style="height:19px">
      
       
        }
     
      
     </div>
     
      
     <div style="height:19px">    
     
      
     </div>
     
      
     <div style="height:19px">
      
       
        getUser()
     
      
     </div>
     
      
     <div style="height:19px">
      
       
          .then(
      
       
      <span style=""><span style="color:rgb(180,142,173)">function</span>(<span style="color:rgb(208,135,112)">result</span>)</span>{
     
      
     </div>
     
      
     <div style="height:19px">      
      
       
      <span style="color:rgb(180,142,173)">if</span>(result === 
      
       
      <span style="color:rgb(208,135,112)">null</span>) {
     
      
     </div>
     
      
     <div style="height:19px">
      
       
              res.redirect(
      
       
      <span style="color:rgb(163,190,140)">'/'</span>);
     
      
     </div>
     
      
     <div style="height:19px">
      
       
            } 
      
       
      <span style="color:rgb(180,142,173)">else</span> 
      
       
      <span style="color:rgb(180,142,173)">if</span> (input_username === result.USERNAME || input_password === result.PASSWORD) {
     
      
     </div>
     
      
     <div style="height:19px">        
      
       
      <span style="color:rgb(208,135,112)">console</span>.log(
      
       
      <span style="color:rgb(163,190,140)">'true'</span>);
     
      
     </div>
     
      
     <div style="height:19px">
      
       
              res.redirect(
      
       
      <span style="color:rgb(163,190,140)">'/home'</span>);    
     
      
     </div>
     
      
     <div style="height:19px">
      
       
            } 
      
       
      <span style="color:rgb(180,142,173)">else</span> {
     
      
     </div>
     
      
     <div style="height:19px">        
      
       
      <span style="color:rgb(208,135,112)">console</span>.log(
      
       
      <span style="color:rgb(163,190,140)">'false'</span>);
     
      
     </div>
     
      
     <div style="height:19px">
      
       
              res.redirect(
      
       
      <span style="color:rgb(163,190,140)">'/'</span>);
     
      
     </div>
     
      
     <div style="height:19px">
      
       
            }
     
      
     </div>
     
      
     <div style="height:19px">
      
       
          })
     
      
     </div>
     
      
     <div style="height:19px">
      
       
          .error(
      
       
      <span style=""><span style="color:rgb(180,142,173)">function</span>(<span style="color:rgb(208,135,112)">error</span>)</span>{
     
      
     </div>
     
      
     <div style="height:19px">      
      
       
      <span style="color:rgb(180,142,173)">return</span> 
      
       
      <span style="color:rgb(163,190,140)">'Promise Error:'</span> + error;
     
      
     </div>
     
      
     <div style="height:19px">
      
       
          })
     
      
     </div>
     
      
     <div style="height:19px">
      
       
      });
     
      
     </div>
     
      
     <div style="height:19px"></div>
     
      
     <div style="height:19px">
      
       
      <span style="color:rgb(208,135,112)">module</span>.exports = router;
     
      
     </div></pre> </td> 
  </tr> 
 </tbody> 
</table>

在login\_process.js文件内，我们接收到了前端页面POST过来的数据，并利用mongoose的Model来查询数据库与之比较。利用了Promise来避免回调地狱，使得代码能够更好的被读懂和维护。

注：Model模型，是经过Schema构造来的，除了Schema定义的数据库骨架以外，还具有数据库行为模型，他相当于管理数据库属性、行为的类

## 不足 ##

这毕竟只是个小demo，有很多不完善的地方，就在这里列出来，以便日后补上

*  前端输入提示不友好
 *  没有利用session和cookie进行登录拦截

就写到这里，祝大家have a nice day ；）

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我[微信][Link 2]：iamaixiaoxiao。

![1460000008545203_w_276_h_261][]

[demo.gif]: http://ojiq40lzd.bkt.clouddn.com/demo.gif
[Node.js]: http://nodejs.cn/
[MongoDB]: https://www.mongodb.com/
[express]: http://www.expressjs.com.cn/
[mongoose]: http://mongoosejs.com/
[Bootstrap]: http://www.bootcss.com/
[Link 1]: http://www.huangxizhou.com/2017/03/06/mongodb/
[Link 2]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220705/e40ec88fd062425898679e56f2e959cb.png