registration.html -- 注册页面
<body>
<h1>注册</h1>
用户名：<input id="user" type="text" placeholder="请输入您的用户名"/><br/>
密 码：<input id="pass" type="password" placeholder="请输入您的密码"/><br/>
<button id="reg">注册</button>
</body>
<script>
reg.onclick=function(){
ajax({
type:"get",
url:"http://127.0.0.1:7766/reg",
data:{
username:user.value,
password:pass.value
},
success:function(res){
if(res=="注册成功"){
alert(res);
// 设置延时器 跳转到登录页面
setTimeout(function(){
window.location.href="./login.html"
},1000);
}else{
alert(res);
}
}
})
}
</script>
login.html -- 登录页面
<body>
<h1>登录</h1>
用户名：<input id="user" type="text" placeholder="请输入您的用户名"/><br/>
密 码：<input id="pass" type="password" placeholder="请输入您的密码"/><br/>
<button id="login">登录</button>
</body>
<script>
login.onclick=function(){
ajax({
type:"get",
url:"http://127.0.0.1:7766/login",
data:{
username:user.value,
password:pass.value
},
success:function(res){
if(res=="登陆成功"){
alert("登陆成功")
}else{
alert("登陆失败")
}
}
})
}
</script>
注册和登录页面里的ajax用的是我自己封装的一个原生ajax 稍后会发布一个我自己封装的原生ajax
server.js -- 服务器
var http = require("http");
// var jsonData = require("./data.json")
var url = require("url");
var qs = require("querystring")
var user = [
// 对象属性名最好和前面html的对应
{
username:"song",
password:"1500111"
},
{
username:"sun",
password:"1343957"
}
]
http.createServer(function(req,res){
// 跨域
res.setHeader("Access-Control-Allow-Origin","*");
res.writeHead(200,{"Content-type":"text/html;charset=utf-8"});
// 控制台不会报小图标的错
if(req.url == "favicon.ico"){
res.end(null);
return;
}
var query = url.parse(req.url,true).query;
// console.log(req.url)
// 判断页面是登陆还是注册
//console.log(url.parse(req.url).pathname)// /reg || /login
if(url.parse(req.url).pathname=="/reg"){
// get提交
var username = query.username;
// 遍历用户数据数组 -- some 方法 只要有一个符合条件就返回true
var reg_result = user.some( i=> i.username == username );
if(reg_result){
res.end("已经注册过了");
}else{
res.end("注册成功");
user.push(query);
// console.log(user)
}
}else if(url.parse(req.url).pathname=="/login"){
var login_result = user.some( i=> JSON.stringify(i) == JSON.stringify(query) );
console.log( user[0]);
console.log(typeof query)
if(login_result){
res.end("登陆成功")
}else{
res.end("登录失败")
}
}
}).listen(7766,function(){
console.log("ok 7766")
})
