之前学习视频的时候学习了node.js简单的项目联系,后台使用了node.js,前台交互用了原生ajax。
node部分
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); const url = obj.pathname; const GET = obj.query; const POST = querystring.parse(str);//将字符串转化为json格式 //区分————接口或文件 if(url == '/user'){//接口 switch(GET.act){ case 'reg': //检查用户名是否已经有了 //插入users if(users[GET.user]){ res.write('{"ok":false,"msg":"此用户已存在"}'); }else{ //插入用户名 users[GET.user] = GET.pass; res.write('{"ok":true,"msg":"注册成功"}'); } break; case 'login': //检查用户是否存在 //检查用户密码是否正确 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"}'); break; } res.end(); }else{//文件 //读取文件 var filename = './www'+url; fs.readFile(filename,function(err,data){ if(err){ res.write('404'); }else{ res.write(data); } res.end(); }); } }); }); server.listen(8080);原生ajax部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax</title> </head> <body> 用户名:<input type="text" id="user"><br> 密码:<input type="password" id="pass"><br> <input type="button" value="注册" id="reg"> <input type="button" value="登陆" id="login"> <script type="text/javascript"> var user = document.getElementById('user'); var padd = document.getElementById('pass'); var reg = document.getElementById('reg'); var login = document.getElementById('login'); reg.onclick = function(){ if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = ActiveXObject("Microsoft.XMLHTTP"); } xhr.onload = function(){ if(xhr.status == 200){ var json = JSON.parse(this.responseText); console.log(json); if(json.ok){ alert('注册成功'); }else{ alert('注册失败 '+json.msg); } }else{ alert('404'); } } xhr.open("GET","/user?act=reg&user="+user.value+"&pass="+pass.value,true); xhr.send(null); } login.onclick = function (){ if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = ActiveXObject("Microsoft.XMLHTTP"); } xhr.onload = function(){ if(xhr.status == 200){ var json = JSON.parse(this.responseText); console.log(json); if(json.ok){ alert('登陆成功'); }else{ alert('登陆失败 '+json.msg); } }else{ alert('404'); } } xhr.open("GET","/user?act=login&user="+user.value+"&pass="+pass.value,true); xhr.send(null); } </script> </body> </html>这部分的完成是根据视频完成了node部分的内容,自己完成了前端部分的内容,个人认为还有很多部分没有真正掌握。node中主要使用了get接受前端传来的数据并加以响应,而我的前端部分自然是主写get请求。