NodeJS學(xué)習(xí)筆記之Connect中間件應(yīng)用實(shí)例
一,開(kāi)篇分析
大家好哦,大熊君又來(lái)了,昨天因?yàn)橛悬c(diǎn)個(gè)人的事沒(méi)有寫(xiě)博客,今天又出來(lái)了一篇,這篇主要是寫(xiě)一個(gè)記事本的小應(yīng)用,前面的文章,
我也介紹過(guò)“Connect”中間件的使用以及“Mongodb”的用法,今天就結(jié)合這兩個(gè)中間件,寫(xiě)個(gè)實(shí)際的例子,不斷完善和重構(gòu),已達(dá)到
充分學(xué)習(xí)的目的。好了,廢話不說(shuō)了,直接進(jìn)入主題。
二,需求分析
(1),用戶注冊(cè),登錄功能(沒(méi)有涉及很復(fù)雜的交互場(chǎng)景,注冊(cè)時(shí)會(huì)有用戶判斷是否已存在)。
(2),用戶登錄成功,進(jìn)入筆記管理系統(tǒng)的后臺(tái)(筆記模塊的增刪改查功能)。
(3),用戶可以具有簡(jiǎn)單的權(quán)限劃分(管理員,注冊(cè)用戶)。
(4),界面比較簡(jiǎn)單,以學(xué)習(xí)為主。
三,開(kāi)始設(shè)計(jì)應(yīng)用(第一部分)
(1),建立用戶登錄頁(yè)面,代碼如下:
<!doctype html>
<html>
<head>
<title>Bigbear記事本應(yīng)用登錄</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記事本應(yīng)用登錄</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">我要注冊(cè)</a>
</form>
</body>
</html>
效果圖:
(2),建立用戶注冊(cè)頁(yè)面,代碼如下:
<!doctype html>
<html>
<head>
<title>Bigbear記事本應(yīng)用注冊(cè)</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記事本應(yīng)用注冊(cè)</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="注冊(cè)" />
</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),建立模型實(shí)體類“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),建立應(yīng)用程序“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 .") ;
}) ;
說(shuō)明一下:
?。?)“connect.query()”------處理“Get”請(qǐng)求參數(shù)解析。
?。?)“connect.bodyParser()”------處理“Post”請(qǐng)求參數(shù)解析。
?。?)“connect.static(__dirname + "/views"),connect.static(__dirname + "/public")”
分別代表模板視圖“html”以及靜態(tài)資源如“js,css,jpg,gif”的資源目錄。
以下是這個(gè)應(yīng)用的目錄結(jié)構(gòu):
四,總結(jié)一下
?。?),掌握NodeJs操作數(shù)據(jù)庫(kù)的基本操作語(yǔ)句。
?。?),劃分層級(jí),如模型,視圖,路由。
(3),不斷優(yōu)化和修改本文的例子(比如注冊(cè)驗(yàn)證用戶是否存在,可以獨(dú)立出“UserManager”做一層代理完成用戶驗(yàn)證和保存的動(dòng)作)。
(4),明天繼續(xù)完成后續(xù)的功能,盡請(qǐng)期待。
相關(guān)文章
Node 使用express-http-proxy 做api網(wǎng)關(guān)的實(shí)現(xiàn)
這篇文章主要介紹了Node 使用express-http-proxy 做api網(wǎng)關(guān)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10Node.js原理阻塞和EventEmitter及其繼承的運(yùn)用實(shí)戰(zhàn)
這篇文章主要介紹了Node.js原理阻塞和EventEmitter及其繼承的運(yùn)用實(shí)戰(zhàn),文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08nodejs創(chuàng)建簡(jiǎn)易web服務(wù)器與文件讀寫(xiě)的實(shí)例
下面小編就為大家?guī)?lái)一篇node js系列課程-創(chuàng)建簡(jiǎn)易web服務(wù)器與文件讀寫(xiě)的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09詳解node登錄接口之密碼錯(cuò)誤限制次數(shù)(含代碼)
這篇文章主要介紹了nodejs登錄接口之密碼錯(cuò)誤限制次數(shù)(含代碼),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10npm報(bào)錯(cuò)"A?complete?log?of?this?run?can?be?found?
這篇文章主要給大家介紹了關(guān)于npm報(bào)錯(cuò)"A?complete?log?of?this?run?can?be?found?in:"的解決辦法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04node.js降低版本的方式詳解(解決sass和node.js沖突問(wèn)題)
這篇文章主要介紹了node.js降低版本的方式(解決sass和node.js沖突),本文是因?yàn)閟ass版本和node版本不匹配(可以找一下對(duì)應(yīng)的版本),本文給大家詳細(xì)講解,需要的朋友可以參考下2023-02-02node實(shí)現(xiàn)登錄圖片驗(yàn)證碼的示例代碼
這篇文章主要介紹了node實(shí)現(xiàn)登錄圖片驗(yàn)證碼的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04