大熊君大話NodeJS之------基於Connect中間件的小應用（Bigbear記事本應用之第一篇）

時間 2019-12-09

標籤大話 nodejs 基於 connect 中間件應用 bigbear 記事本應用之一篇简体版

原文原文鏈接

一，開篇分析css

你們好哦，大熊君又來了，昨天由於有點我的的事沒有寫博客，今天又出來了一篇，這篇主要是寫一個記事本的小應用，前面的文章，html

我也介紹過「Connect」中間件的使用以及「Mongodb」的用法，今天就結合這兩個中間件，寫個實際的例子，不斷完善和重構，已達到mongodb

充分學習的目的。好了，廢話不說了，直接進入主題。數據庫

二，需求分析cookie

（1），用戶註冊，登陸功能（沒有涉及很複雜的交互場景，註冊時會有用戶判斷是否已存在）。app

（2），用戶登陸成功，進入筆記管理系統的後臺（筆記模塊的增刪改查功能）。post

（3），用戶能夠具備簡單的權限劃分（管理員，註冊用戶）。學習

（4），界面比較簡單，以學習爲主。優化

三，開始設計應用（第一部分）ui

(1)，創建用戶登陸頁面，代碼以下：

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>Bigbear記事本應用登陸</title>
 5         <meta content="IE=8" http-equiv="X-UA-Compatible"/>
 6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7         <style type="text/css">
 8             .note-title {
 9                 margin-bottom : 45px ;
10                 background : #6699cc ;
11                 font-size : 14px ;
12                 font-weight : bold ;
13                 color : #fff;
14                 font-family:arial ;
15                 height : 24px ;
16                 line-height : 24px ;
17             }
18             a {
19                 color : #336699;
20                 font-family:arial ;
21                 font-size : 14px ;
22                 font-weight : bold ;
23             }
24         </style>
25         <script src="js/index.js"></script>
26     </head>
27     <body>
28         <div class="note-title">Bigbear記事本應用登陸</div>
29             <form action="/login" method="post">
30                 <span>用戶名：</span><input type="text" name="name" /><br/><br/>
31                 <span>密&nbsp;&nbsp;碼：</span><input type="password" name="password" />
32                 <input type="submit" value="登陸" />
33                 <a href="reg.html">我要註冊</a>
34             </form>
35     </body>
36 </html>

　　效果圖：

（2），創建用戶註冊頁面，代碼以下：

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title>Bigbear記事本應用註冊</title>
 5         <meta content="IE=8" http-equiv="X-UA-Compatible"/>
 6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7         <style type="text/css">
 8             .note-title {
 9                 margin-bottom : 45px ;
10                 background : #ff3300 ;
11                 font-size : 14px ;
12                 font-weight : bold ;
13                 color : #fff;
14                 font-family:arial ;
15                 height : 24px ;
16                 line-height : 24px ;
17             }
18         </style>
19         <script src="js/index.js"></script>
20     </head>
21     <body>
22         <div class="note-title">Bigbear記事本應用註冊</div>
23             <form action="/reg" method="post">
24                 <span>用戶名：</span><input type="text" name="name" /><br/><br/>
25                 <span>密&nbsp;&nbsp;碼：</span><input type="password" name="password" /><br/><br/>
26                 <input type="submit" value="註冊" />
27             </form>
28     </body>
29 </html>

　　效果圖：

（3），創建「Mongodb」鏈接代碼，以下：

 1 var mongodb = require("mongodb") ;
 2 var server = new mongodb.Server("localhost",27017,{
 3     auto_reconnect : true
 4 }) ;
 5 var conn = new mongodb.Db("bb",server,{
 6     safe : true
 7 }) ;
 8 conn.open(function(error,db){
 9     if(error) throw error ;
10     console.info("mongodb connected !") ;
11 }) ;
12 exports = module.exports = conn ;

（4），創建模型實體類「User」，以下：

 1 var conn = require("../conn") ;
 2 function User(user){
 3     this.name = user["name"] ;
 4     this.password = user["password"] ;
 5 } ;
 6 User.prototype.save = function(callback){
 7     var that = this ;
 8     conn.collection("users",{
 9         safe : true
10     },function(error,collection){
11         if(error) return conn.close() ;
12         collection.findOne({   // 判斷此用戶是否存在
13             name : that.name
14         },function(error,user){
15             if(error) return conn.close() ;
16             if(!user){
17                 collection.insert({
18                     name : that.name + "" ,
19                     password : that.password + ""
20                 },{
21                     safe : true
22                 },function(error,user){
23                     if(error) return conn.close() ;
24                     callback && callback(user) ;
25                     conn.close() ;
26                 }) ;        
27             }
28             else{
29                 callback("User has registed !") ;
30             }
31         }) ; 
32     }) ;
33 } ;
34 User.login = function(name,password,callback){
35     conn.collection("users",{
36         safe : true
37     },function(error,collection){
38         if(error) return conn.close() ;
39         collection.findOne({
40             name : name ,
41             password : password
42         },function(error,user){
43             if(error) return conn.close() ;
44             callback && callback(user) ;
45             conn.close() ;
46         }) ; 
47     }) ;
48 } ;
49 exports = module.exports = User ;

　　效果圖：

（5），創建應用程序「app」,以下：

 1 // app.js
 2 var connect = require("./lib/connect") ;
 3 var user = require("./models/user") ;
 4 var app = connect.createServer() ;
 5 app .use(connect.logger("dev"))
 6 .use(connect.query())
 7 .use(connect.bodyParser())
 8 .use(connect.cookieParser())
 9 .use(connect.static(__dirname + "/views"))
10 .use(connect.static(__dirname + "/public"))
11 .use("/login",function(request,response,next){
12     var name = request.body["name"] ;
13     var password = request.body["password"] ;
14     user.login(name,password,function(user){
15         if(user){
16             response.end("Welcome to:" + user["name"] + " ^_^ ... ...") ;    
17         }
18         else{
19             response.end("User:" + name + " Not Register !")    ;
20         }
21     }) ;
22 })
23 .use("/reg",function(request,response,next){
24     var name = request.body["name"] ;
25     var password = request.body["password"] ;
26     new user({
27         name : name ,
28         password : password
29     }).save(function(user){
30         if(user && user["name"]){
31         　　response.end("User:" + name + "Register Done !")    ;    
32         }
33         else{
34         　　response.end("User: " + name + "has registed !") ;  
35         }
36     }) ;
37 })
38 .listen(8888,function(){
39     console.log("Web Server Running On Port ---> 8888 .") ;
40 }) ;