複習一下： | 基礎模塊 | 作用 | | | | | fs | fs模塊用於對系統文件及目錄進行讀寫操作 | | http | 創建伺服器。e.g.http.createServer(); | | queryString | 把url帶的參數串轉化為數組對象 | | url | 直接解析URL中字 ...
複習一下：
| 基礎模塊 | 作用 |
|---|---|
| fs | fs模塊用於對系統文件及目錄進行讀寫操作 |
| http | 創建伺服器。e.g.http.createServer(); |
| queryString | 把url帶的參數串轉化為數組對象 |
| url | 直接解析URL中字元串，提煉出我們需要的結果。 |
提示：
querystring主要用來解析POST數據(如‘querystring.parse()’)
Url主要用來解析GET數據(比如‘url.parse()’)。
1.url.parse()方法回顧：
var url = require('url');
var queryUrl = "http://localhost:8888/bb?name=bigbear&memo=helloworld"
console.log(url.parse(queryUrl)) ;運行結果：
{
protocol: 'http:',
slashes: true,
auth: null,
host: 'localhost:8888',
port: '8888',
hostname: 'localhost',
hash: null,
search: '?name=bigbear&memo=helloworld',
query: 'name=bigbear&memo=helloworld',
pathname: '/bb',
path: '/bb?name=bigbear&memo=helloworld',
href: 'http://localhost:8888/bb?name=bigbear&memo=helloworld'
}說明:
query: 查詢字元串中的參數部分（問號後面部分字元串），或者使用 querystring.parse() 解析後返回的對象。
2.querystring.parse()方法回顧
QueryString" 模塊用於實現URL參數字元串與參數對象的互相轉換
在url.parse()基礎上，把參數字元串編程jsonp對象格式:
例子：
思路：
一、首先，我們確定一下介面。
/user?act=reg&user=aaa&pass=123456 {"ok": false, "msg": "原因"} /user?act=login&user=aaa&pass=123456 {"ok": true, "msg": "原因"}
二、 文件位置：
三、伺服器接受數據後，處理並返回data的思路
- 介面名為user。如果url中地址不指向user，就顯示404，否則進入2；
- 用戶是登錄還是註冊？
- 如果既不是註冊也不是登錄。就提示“未知action”；
4.“登錄部分”接下去是如果密碼正確，就提示“登錄成功”，否則提示“密碼不正確”；
如果是註冊，檢測賬號是否存在，也進行相應的提示。
const http = require('http');
const fs = require('fs');
const querystring = require('querystring');
const urlLib = require('url');
var users = {}; //將註冊信息保存在緩存中
var server = http.createServer(function (req, res) {
// 解析數據
var str = '';
req.on("data", function (data) {
str += data;
});
req.on("end", function () {
var obj = urlLib.parse(req.url, true);
var url = obj.pathname;
const GET = obj.query;
const POST = querystring.parse(url);
// 區分介面和文件讀取
if (url == '/user') { //讀取‘url’介面下的文件時
switch (GET.act) {
case 'reg':
//用戶名已經存在
if (users[GET.user]) {
res.write('{"ok":false, "msg":"已經註冊過了！"}');
} else {
// 插入到users
users[GET.user] = GET.pass;
res.write('{"ok":true,"msg":"註冊成功！"}');
}
break;
case 'login':
//用戶名是否存在
if (users[GET.user]) {
if (user[GET.pass] === GET.pass) { //密碼是否正確
res.write('{"ok":true,"msg":"登錄成功！"}');
} else {
res.write('{"ok":flase,"msg":"密碼不正確！"}');
}
} else { //用戶名不存在
res.write('{"ok":false,"msg":"用戶名不存在"}');
}
break;
default:
res.write('{"ok":false,"msg":"未知操作"}');
}
res.end();
} else { //讀取別的文件
var file_name = './www' + url;
fs.readFile(file_name, function (err, data) {
if (data) {
res.write(data);
} else {
res.write("404");
}
res.end();
});
}
});
});
server.listen(8080);user.html文件代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入jQuery文件-->
<script src="ajax.js" charset="utf-8"></script>
<!--我們需要的js代碼-->
<script type="text/javascript">
window.onload = function () {
var oTxtUser = document.getElementById('user');
var oTxtPass = document.getElementById('pass');
var oBtnReg = document.getElementById('reg_btn');
var oBtnLogin = document.getElementById('login_btn');
oBtnLogin.onclick = function () {
ajax({
url: '/user',
data: {
act: 'login',
user: oTxtUser.value,
pass: oTxtPass.value
},
type: 'get',
success: function (str) {
var json = eval('(' + str + ')');
if (json.ok) {
alert('登錄成功');
} else {
alert('登錄失敗：' + json.msg);
}
},
error: function () {
alert('通信錯誤');
}
});
};
oBtnReg.onclick = function () {
ajax({
url: '/user',
data: {
act: 'reg',
user: oTxtUser.value,
pass: oTxtPass.value
},
type: 'get',
success: function (str) {
var json = eval('(' + str + ')');
if (json.ok) {
alert('註冊成功');
} else {
alert('註冊失敗：' + json.msg);
}
},
error: function () {
alert('通信錯誤');
}
});
};
};
</script>
</head>
<body>
用戶：
<input type="text" id="user">
<br> 密碼：
<input type="password" id="pass">
<br>
<input type="button" value="註冊" id="reg_btn">
<input type="button" value="登錄" id="login_btn">
</body>
</html>執行以下server.js，然後在瀏覽器中打開user.html頁面。值得註意的是跨域問題，
註意：我們應該在伺服器上跑，而不是只打開本地靜態頁面！
接下來就正常玩耍吧……
