前面我们学习了基础的node知识，现在我们把之前的东西综合一下，实现一个简易的httpserver，重要的是对浏览器传过来的数据的处理，以及服务端返回给浏览器的数据的处理。
1.先判断是接口还是文件，再根据get.act的值进行判断是登录还是注册，如果登录的话，判断名字是否存在，如果存在，再判断密码是否正确，如果注册的话，判断是否已经存在，满足条件的话则成功。
const http = require("http")
const querystring = require("querystring")
const fs = require('fs');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);
const url = obj.pathname;
const get = obj.query;
const post = querystring.parse(str);
//区分接口和文件
if(url == "/user"){//接口
// console.log(get.act)
switch(get.act){
case 'reg':
//1.检查用户名是否已经存在
if(users[get.user] ){
res.write('{"ok":false,"msg":"此用户已存在"}');
}
else{
//2.插入users
users[get.user] = get.pass;
res.write('{"ok":true,"msg":"注册成功"}');
}
break;
case 'login':
//检查用户是否存在
// console.log("444:"+users[get.user]);
// console.log("555"+users[get.pass]);
if(users[get.user] == null){
res.write('{"ok":false,"msg":"此用户不存在"}');
}
else if(
users[get.user]!=get.pass){
res.write('{"ok":false,"msg":"此用户或密码错误"}');
}
else{
res.write('{"ok":true,"msg":"登录成功"}'); } break;
default:
res.write('{"ok":false,"msg":"未知的act"}');
}
res.end();
}
else{//文件
var file_name = './www'+ url;
fs.readFile(file_name,function(err,data){
if(err){
res.write('404')
}
else{
//console.log(data.toString())
res.write(data.toString())
}
res.end();
});
}
});
});
server.listen(8090);
2.前端的部分就不详细的说了，代码如下:
<body>
用户：<input type="text" id ="user" value="" >
密码：<input type="password" id ="pass" value=""><br>
<input type="button" value="注册" id="reg_btn"><br>
<input type="button" value="登录" id="login_btn">
</body>
<script type="text/javascript">
window.onload = function(){
var oTxUser = document.getElementById('user');
var oTxpass = 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:oTxUser.value,
pass:oTxpass.value
},
type:"get",
success:function(str){
var json =eval('(' + str + ')');
// console.log(json);
if(json.ok){
alert("登录成功");
}
else{
alert("登录失败"+json.msg);
console.log(json.msg);
}
},
error:function(){
alert("失败");
}
});
}
oBtnReg.onclick= function(){
ajax({
url:"./user",
data: {
act:'reg',
user:oTxUser.value,
pass:oTxpass.value
},
type:"get",
success:function(str){
var json = eval('(' + str + ')');
if(json.ok){
alert("注册成功")
}
else{
alert('注册失败'+json.msg)
}
},
error:function(){
alert("通信错误");
}
});
}
}
</script>
3.还有重要的一部分就是ajax，连接了客户端与服务端的数据传输，这里可以直接用封装好的，：
function ajax(json){
if(window.XMLHttpRequest){
var ajax = new XMLHttpRequest();
}
else{
var ajax = new ActiveXObject( "Microsoft.XMLHTTP" );
}
if(json.type=='get'){
ajax.open('get',json.url+'?'+JsonToString(json.data),true);
ajax.send();
}
else if(json.type=='post'){
ajax.open('post',json.url,true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send(JsonToString(json.data));
}
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status>=200 && ajax.status<300 || ajax.status == 304){
json.success(ajax.responseText);
}
else{
json.error && json.error();
}
};
};
function JsonToString(json){
var arr = [];
for(var i in json){
arr.push(i+'='+json[i]);
};
return arr.join('&');
}}
这里已经实现了，感兴趣的可以试一下，这里需要注意的是前后端的变量名必须保持一致，还有写服务端的时候必须加上res.end(),不然请求一直都没有结束，会出错，今天这个错误找了很久，所以一定要；牢记。
