NodeJS学习笔记之Connect中间件应用实例

前端技术 2023/09/02 JavaScript

一，开篇分析

大家好哦，大熊君又来了，昨天因为有点个人的事没有写博客，今天又出来了一篇，这篇主要是写一个记事本的小应用，前面的文章，

我也介绍过“Connect”中间件的使用以及“Mongodb”的用法，今天就结合这两个中间件，写个实际的例子，不断完善和重构，已达到

充分学习的目的。好了，废话不说了，直接进入主题。

二，需求分析

（1），用户注册，登录功能（没有涉及很复杂的交互场景，注册时会有用户判断是否已存在）。

（2），用户登录成功，进入笔记管理系统的后台（笔记模块的增删改查功能）。

（3），用户可以具有简单的权限划分（管理员，注册用户）。

（4），界面比较简单，以学习为主。

三，开始设计应用（第一部分）

(1)，建立用户登录页面，代码如下：

复制代码 代码如下:

<!doctype html>
<html>
    <head>
        <title>Bigbear记事本应用登录</title>
        <meta content=\"IE=8\" http-equiv=\"X-UA-Compatible\"/>
        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
        <style type=\"text/css\">
            .note-title {
                margin-bottom : 45px ;
                background : #6699cc ;
                font-size : 14px ;
                font-weight : bold ;
                color : #fff;
                font-family:arial ;
                height : 24px ;
                line-height : 24px ;
            }
            a {
                color : #336699;
                font-family:arial ;
                font-size : 14px ;
                font-weight : bold ;
            }
        </style>
        <script src=\"js/index.js\"></script>
    </head>
    <body>
        <div class=\"note-title\">Bigbear记事本应用登录</div>
            <form action=\"/login\" method=\"post\">
                <span>用户名：</span><input type=\"text\" name=\"name\" /><br/><br/>
                <span>密  码：</span><input type=\"password\" name=\"password\" />
                <input type=\"submit\" value=\"登录\" />
                <a href=\"reg.html\">我要注册</a>
            </form>
    </body>
</html>

　　效果图：

（2），建立用户注册页面，代码如下：

复制代码 代码如下:

 <!doctype html>
 <html>
     <head>
         <title>Bigbear记事本应用注册</title>
         <meta content=\"IE=8\" http-equiv=\"X-UA-Compatible\"/>
         <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
         <style type=\"text/css\">
             .note-title {
                 margin-bottom : 45px ;
                 background : #ff3300 ;
                 font-size : 14px ;
                 font-weight : bold ;
                 color : #fff;
                 font-family:arial ;
                 height : 24px ;
                 line-height : 24px ;
             }
         </style>
         <script src=\"js/index.js\"></script>
     </head>
     <body>
         <div class=\"note-title\">Bigbear记事本应用注册</div>
             <form action=\"/reg\" method=\"post\">
                 <span>用户名：</span><input type=\"text\" name=\"name\" /><br/><br/>
                 <span>密  码：</span><input type=\"password\" name=\"password\" /><br/><br/>
                 <input type=\"submit\" value=\"注册\" />
             </form>
     </body>
 </html>

　　效果图：

（3），建立“Mongodb”连接代码，如下：

复制代码 代码如下:

 var mongodb = require(\"mongodb\") ;
 var server = new mongodb.Server(\"localhost\",27017,{
     auto_reconnect : true
 }) ;
 var conn = new mongodb.Db(\"bb\",server,{
     safe : true
 }) ;
 conn.open(function(error,db){
     if(error) throw error ;
     console.info(\"mongodb connected !\") ;
 }) ;
 exports = module.exports = conn ;

（4），建立模型实体类“User”，如下：

复制代码 代码如下:

 var conn = require(\"../conn\") ;
 function User(user){
     this.name = user[\"name\"] ;
     this.password = user[\"password\"] ;
 } ;
 User.prototype.save = function(callback){
     var that = this ;
     conn.collection(\"users\",{
         safe : true
     },function(error,collection){
         if(error) return conn.close() ;
         collection.findOne({   // 判断此用户是否存在
             name : that.name
         },function(error,user){
             if(error) return conn.close() ;
             if(!user){
                 collection.insert({
                     name : that.name + \"\" ,
                     password : that.password + \"\"
                 },{
                     safe : true
                 },function(error,user){
                     if(error) return conn.close() ;
                     callback && callback(user) ;
                     conn.close() ;
                 }) ;       
             }
             else{
                 callback(\"User has registed !\") ;
             }
         }) ;
     }) ;
 } ;
 User.login = function(name,password,callback){
     conn.collection(\"users\",{
         safe : true
     },function(error,collection){
         if(error) return conn.close() ;
         collection.findOne({
             name : name ,
             password : password
         },function(error,user){
             if(error) return conn.close() ;
             callback && callback(user) ;
             conn.close() ;
         }) ;
     }) ;
 } ;
 exports = module.exports = User ;

　　效果图：

（5），建立应用程序“app”,如下：

复制代码 代码如下:

 // app.js
 var connect = require(\"./lib/connect\") ;
 var user = require(\"./models/user\") ;
 var app = connect.createServer() ;
 app .use(connect.logger(\"dev\"))
 .use(connect.query())
 .use(connect.bodyParser())
 .use(connect.cookieParser())
 .use(connect.static(__dirname + \"/views\"))
 .use(connect.static(__dirname + \"/public\"))
 .use(\"/login\",function(request,response,next){
     var name = request.body[\"name\"] ;
     var password = request.body[\"password\"] ;
     user.login(name,password,function(user){
         if(user){
             response.end(\"Welcome to:\" + user[\"name\"] + \" ^_^ ... ...\") ;   
         }
         else{
             response.end(\"User:\" + name + \" Not Register !\")    ;
         }
     }) ;
 })
 .use(\"/reg\",function(request,response,next){
     var name = request.body[\"name\"] ;
     var password = request.body[\"password\"] ;
     new user({
         name : name ,
         password : password
     }).save(function(user){
         if(user && user[\"name\"]){
         　　response.end(\"User:\" + name + \"Register Done !\")    ;   
         }
         else{
         　　response.end(\"User: \" + name + \"has registed !\") ; 
         }
     }) ;
 })
 .listen(8888,function(){
     console.log(\"Web Server Running On Port ---> 8888 .\") ;
 }) ;

　　说明一下：

　　　　（1）“connect.query()”------处理“Get”请求参数解析。

　　　　（2）“connect.bodyParser()”------处理“Post”请求参数解析。

　　　　（3）“connect.static(__dirname + \"/views\")，connect.static(__dirname + \"/public\")”

　　　　　分别代表模板视图“html”以及静态资源如“js，css,jpg,gif”的资源目录。

　　　　　以下是这个应用的目录结构：

四，总结一下

　　（1），掌握NodeJs操作数据库的基本操作语句。

　　（2），划分层级，如模型，视图，路由。

　　（3），不断优化和修改本文的例子（比如注册验证用户是否存在，可以独立出“UserManager”做一层代理完成用户验证和保存的动作）。

　　（4），明天继续完成后续的功能，尽请期待。

本文地址：https://www.stayed.cn/item/4486

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案