2018.7.22 來一次交互，還是因為記不住
講的是注冊和登陸的故事
文件目錄：
-www
-- ajax.js
-- user.html
-server.js
- 前端
<body>
<div style="margin-bottom: 10px;">
<input type="text" id="user"> <br>
<input type="password" id="pass"> <br>
</div>
<input type="button" id="reg_btn" value="注冊">
<input type="button" id="login_btn" value="登陸">
</body>
// script 腳本
const select = (selector) => document.querySelector(selector);
let oTextUser = select('#user');
let oTextPass = select('#pass');
let oBtnReg = select('#reg_btn');
let oBtnLogin = select('#login_btn');
oBtnReg.onclick = () => {
ajax({
url:'/user',
type:'get',
data:{
act:'reg',
user: oTextUser.value,
pass: oTextPass.value
},
success: res => {
let o = JSON.parse(res);
if(o.ok) {
alert('注冊成功');
} else {
console.error('注冊失?。?,o.msg)
}
},
error: () => {
alert('通信失敗');
}
});
};
oBtnLogin.onclick = () => {
ajax({
url:'/user',
type:'get',
data:{
act:'login',
user: oTextUser.value,
pass: oTextPass.value
},
success: res => {
let o = JSON.parse(res);
if(o.ok) {
alert('登陸成功');
} else {
console.error('登陸失?。?,o.msg)
}
},
error: () => {
alert('通信失敗');
}
});
};
- nodejs的后端服務(wù)
思路
0.照例提前準(zhǔn)備模塊
1.啟動一個服務(wù)
2.監(jiān)聽端口
3.解析前端傳回來的數(shù)據(jù)
4.數(shù)據(jù)讀完，保存各種請求的變量
5.互動開始
----- 5.1如果是 url === '/user' ，就表示請求的接口
----- 5.2如果不是，就是請求文件
// 0. 照例提前準(zhǔn)備模塊
const http = require('http');
const fs = require('fs');
const querystring = require('querystring');
const urlLib = require('url');
let users = {}; // { name1:value1, name2:value2}
// 1. 啟動一個服務(wù)
const server = http.createServer((req, res) => {
// 3. 解析前端傳回來的數(shù)據(jù)
let str = ''; // 存數(shù)據(jù)的變量
req.on('data' , data => {
str += data;
});
req.on('end', () => {
// 4. 數(shù)據(jù)讀完，保存各種請求的變量
let o = urlLib.parse(str);
let url = o.pathname;
const GET = o.query;
const POST = querystring.parse(str);
// 5. 互動開始
if (url === '/user') {
// 5.1 如果是醬紫的，就表示請求的接口
let pass = users[GET.user];
switch(GET.act){
case 'reg' :
// 注冊
if(pass){
res.write(JSON.stringify({"ok":false,msg:"此用戶已經(jīng)存在"}));
} else {
users[GET.user] = GET.pass;
res.write(JSON.stringify({"ok":true,msg:"注冊成功"}));
}
break;
case 'login' :
// 登陸
if(pass === undefined){
res.write(JSON.stringify({"ok":false,msg:"未找到用戶名"}));
} else if( pass !== GET.pass ) {
res.write(JSON.stringify({"ok":false,msg:"用戶名或密碼錯誤"}));
} else {
res.write(JSON.stringify({"ok":true,msg:"登陸成功"}));
}
break;
default :
res.write(JSON.stringify({"ok":false,msg:"未知的act"}));
break;
}
} else {
// 5.2 此處寫請求是文件的 code
let file_name = './www' + url;
fs.readFile(file_name, (err, data) => {
// res.write() 、 res.end(); 成雙成對
if(err) {
res.write('404');
} else {
res.write(data);
}
res.end();
});
}
})
});
// 2. 監(jiān)聽端口
server.listen(8080);
欲做精金美玉的人品，定從烈火中煅來；思立掀天揭地的事功，須向薄冰上履過。----《菜根譚》
努力中前進(jìn)，加油 ~~~~
以上操作有坑沒填，不會填，?(?*)
