使用 node 搭建 web 服務(wù)
1夕吻、瀏覽器請求根目錄,把index.html頁面返回給瀏覽器
2古劲、index.html頁面中包含用戶名和密碼輸入框揪胃,用戶點(diǎn)擊提交按鈕璃哟,使用get方式提交(提交使用ajax方式異步提交,不能使用表單默認(rèn)的提交事件)
3喊递、服務(wù)器接收用戶提交參數(shù)随闪,判斷user為yuZhi,pass為123456時,驗(yàn)證通過骚勘,給用戶返回’success’字段铐伴,前端頁面收到該返回值后撮奏,彈框顯示:登陸成功,否則返回“fail”字段当宴,前端頁面彈框顯示”登錄失敗“
/**
- Created by My on 2016/9/19.
*/
var fs = require('fs');
var url = require('url');
var http = require('http');
var server = http.createServer(function (req,res) {
var urlObj = url.parse(req.url)
console.log(urlObj);
if(urlObj.query == 'username=yuZhi&password=123456'){
res.end('success')
}else if(urlObj.pathname == '/' || urlObj.pathname == '/index.html'){
var rs = fs.createReadStream('index.html') rs.pipe(res);
}else if(urlObj.pathname != '/favicon.ico'){
var rs = fs.createReadStream('.'+urlObj.pathname); rs.pipe(res)
}else{
res.end('fail')
}});
server.listen(8080);
html 方面創(chuàng)建ajax請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script>
$(function () {
var data = '';
$('button').on('click',function () {
data = 'username='+$('#name').val()+'&'+'password='+$('#pass').val();
$.ajax({
type:'get',
url:'/?'+data,
success:function (data) {
if(data=='success'){
alert('驗(yàn)證成功')
}else{
alert('驗(yàn)證失敗')
}
}
})
})
})
</script>
</head>
<body>
用戶名 : <input type="text" value="" id="name"></br>
密碼: <input type="password" value="" id="pass</br>
<button>提交</button></body></html>