index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>用户名：<input type="text" id = "username"></p> <p>密码：<input type="password" id = "pwd"></p> <p><button id = "btn">注册</button></p> </body> </html> <script src = "./jquery.js"></script> <script> $('#btn').click(function(){ var obj = {}; //注册数据是对象类型 obj.username = $('#username').val(); obj.pwd = $('#pwd').val(); $.ajax({ type:'get', url:'/register', // /register是自己写的接口 data:obj, dataType:'json', success:function(res){ alert(res.info); //res.info是调用接口中的 location.href = "./list.html"; } }) }) </script>
list.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>用户名：<input type="text" id = "username"></p> <p>密码：<input type="password" id = "pwd"></p> <p><button id = 'btn'>登录</button></p> </body> </html> <script src = "./jquery.js"></script> <script> $('#btn').click(function(){ var obj = {}; obj.username = $('#username').val(); obj.pwd = $('#pwd').val(); $.ajax({ type:'get', url:'/login', //登录接口 data:obj, dataType:'json', success:function(res){ if(res.status){ alert(res.info); }else{ alert(res.info); } } }) }) </script>
server.js
const http = require('http'); const fs = require('fs'); const url = require('url'); http.createServer((req,res)=>{ let {pathname,query}= url.parse(req.url,true); if(pathname != "/favicon.ico"){ if(pathname == "/"){ fs.readFile('./index.html',(err,data)=>{ res.writeHead(200,{'content-type':'text/html;charset=utf8'}); res.end(data); }) }else if(pathname == "/list.html"){ fs.readFile('./list.html',(err,data)=>{ res.writeHead(200,{'content-type':'text/html;charset=utf8'}); res.end(data); }) }else if(pathname == "/jquery.js"){ fs.readFile('./jquery.js',(err,data)=>{ res.writeHead(200,{'content-type':'application/x-javascript;charset=utf8'}); res.end(data); }) }else if(pathname == '/register'){//写注册接口 // console.log(query); // for(var attr in query){ // console.log(query[attr]) // } res.writeHead(200,{'content-type':'application/x-javascript;charset=utf8'}); fs.readFile('./data.json',(err,data)=>{//读取json文件，将用户的注册信息存入json文件中 var data = JSON.parse(data+"");//读取json中的数据，赋值给json var json = JSON.parse(JSON.stringify(query));//query的内容就是用户注册的信息，所以将query中的数据拿出来放到json中； data.info.push(json);//将query中的数据push到json中 console.log(data); fs.writeFile('./data.json',JSON.stringify(data),(err)=>{});//读取json文件 res.end(JSON.stringify({ status:true, info:'注册成功' })) }) }else if(pathname == '/login'){ //登录接口 res.writeHead(200,{'content-type':'application/x-javascript;charset=utf8'}); //设置状态值和请求头格式 fs.readFile("./data.json",(err,data)=>{ //读取json文件 var data = JSON.parse(data+"").info; //从json文件中获取数据 var json = JSON.parse(JSON.stringify(query)); //解析query数据，判断query中的数据和json文件中的数据，如果相等，则登录成功 let {username,password} = json; //解构赋值 for(var i = 0; i < data.length; i ++){ var uname = data[i].username; var upwd = data[i].password; if( username == uname && password == upwd ){ //判断query中的数据和json文件中的数据，如果相等，则登录成功，不相等,则登录失败 res.end(JSON.stringify({ status:true, info:"登录成功" })) return; } } res.end(JSON.stringify({ status:false, info:"用户名或密码错误" })) }) } } }).listen(3000); console.log('服务器启动');
data.json
{"info":[]}
注：json中的数据值动态添加进去的。