標籤：method art images lang login world query 建立 密碼
一、路由初步
url.parse(string).query
|
url.parse(string).pathname |
| |
| |
------ -------------------
http://localhost:8888/start?foo=bar&hello=world
--- -----
| |
| |
querystring.parse(string)["foo"] |
|
querystring.parse(string)["hello"]
建立一個router_1.js
var http = require(‘http‘)
var url = require(‘url‘)
http.createServer(function(req, res){
res.writeHead(200, {‘Content-Type‘: ‘text/html; charset=utf-8‘})
if(req.url !== ‘/favicon.ico‘) {
var pathName = url.parse(req.url).pathname
console.log(pathName)
}
res.end()
}).listen(8000)
console.log(‘Server running at http://localhost:8000‘)
安裝supervisor模組，可以不用每次啟動js，使用命令supervisor route_1.js
建立一個modules/routers.js
module.exports = {
home: function(req, res) {
res.write(‘首頁‘)
},
login: function(req, res) {
res.write(‘登入頁面‘)
},
registor: function (req, res) {
res.write(‘註冊頁面‘)
}
}
修改router_1.js
var router = require(‘./modules/router‘)
var pathName = url.parse(req.url).pathname.replace(/\//, ‘‘)
console.log(pathName)
try {
router[pathName](req, res)
} catch(err) {
router[‘home‘](req, res)
}
二、讀取圖片檔案
將router_1.js另存新檔router_2.js
更改頭部資訊如下
res.writeHead(200,{"Content-Type":"image/jpeg"})；
在modules/router.js中添加讀取檔案路由
img:function(req,res){
file.readImg(‘./images/pet.jpg‘, res)
}
建立modules/file.js
var fs = require(‘fs‘)
readImg: function (file, res) {
fs.readFile(file, ‘binary‘, function (err, data) {
if (err) throw err
res.writeHead(200, {‘Content-Type‘: ‘image/jpeg‘})
res.write(data, ‘binary‘)
res.end()
})
}
此時可以刪除router_2.js中的res.end()
在router.js中匯入file.js
var file = require(‘./file‘)
此時發現如果在輸出圖片時沒法正確顯示
res.write(‘test‘);
res.write(data, ‘binary‘)
三、路由改造
在file.js刪除
res.write(‘test‘);
建立檔案views/home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
首頁
<!-- ./img為一個圖片請求 -->
<img src="./img" >
</body>
</html>
在file.js中建立一個模組readFile方法
readFile: function (file, res, req) {
fs.readFile(file, ‘utf-8‘, function (err, data) {
if (err) throw err
res.writeHead(200, {‘Content-Type‘: ‘text/html; charset=utf-8‘})
res.write(data)
res.end()
})
},
更改touter2_.js中的代碼，保證是一個乾淨的路由請求
if(req.url !== ‘/favicon.ico‘) {
var pathName = url.parse(req.url).pathname.replace(/\//, ‘‘)
try {
router[pathName](req, res)
} catch(err) {
router[‘home‘](req, res)
}
}
在router.js中的home路由中設定
home: function(req, res) {
file.readFile(‘./views/home.html‘, res, req)
},
四、參數接收
建立檔案views/login.html
<form action="./login" method="get" >
<label for="email">
E-mail: <input type="text" name="email" value="" />
</label>
<label for="password">
密碼：<input type="password" name="password" value="" />
</label>
<label for="submit">
<input type="submit" value="提交" />
</label>
</form>
更改路由router.js中的login方法
login:function(req,res){
var urlObject = url.parse(req.url,true).query;
console.log(urlObject.email)
console.log(urlObject.password)
file.readFile("./views/login.html",res,req);
}
post請求
修改files.js
引入querystring;
var queryString = require(‘querystring‘)
更改login方法
login: function(req, res) {
var post = ‘‘
req.on(‘data‘, function(chunk){
post += chunk
})
req.on(‘end‘, function() {
var urlObject = queryString.parse(post);
console.log(urlObject.email)
console.log(urlObject.password)
file.readFile("./views/login.html",res,req);
})
},
更改views/login.html中請求的方法
action="./login" method="POST"
如果需要將提交的資料顯示到頁面
在file.js中添加一個方法
postReadFile: function (file, res, req, post) {
var urlObject = queryString.parse(post)
var array = [‘email‘, ‘password‘]
var reg;
fs.readFile(file, ‘utf-8‘, function(err, data){
if(err) throw err
res.writeHead(200, {‘Content_Type‘: ‘text/html; charset=utf-8‘})
for(var i = 0; i < array.length; i++) {
reg = new RegExp(‘{‘ + array[i] + ‘}‘, ‘gi‘)
data = data.replace(reg, urlObject[array[i]])
}
res.write(data)
res.end()
})
},
更改router.js中的login方法
req.on(‘end‘, function() {
file.postReadFile(‘./views/login.html‘, res, req, post)
})
在login.html中添加顯示資訊
<div >
Email:{email}, 密碼：{password}
</div>
如果第一次的時候我們發現顯示不友好
可以設定一個樣式
.hide{
display:none
}
在div中添加class="{infoClass}"
在form中設定class="{formClass}"
在file.js中postReadFile中添加處理email和password代碼，放在for迴圈之後
if (urlObject.email && urlObject.password) {
data = data.replace(new RegExp(‘{infoClass}‘, ‘gi‘), ‘‘)
data = data.replace(new RegExp(‘{formClass}‘, ‘gi‘), ‘hide‘)
} else {
data = data.replace(new RegExp(‘{infoClass}‘, ‘gi‘), ‘hide‘)
data = data.replace(new RegExp(‘{formClass}‘, ‘gi‘), ‘‘)
}
nodejs中的路由
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
