注册 && 登录

registration.html -- 注册页面

<body>
        <h1>注册</h1>
        用户名：<input id="user" type="text" placeholder="请输入您的用户名"/><br/>
        密&nbsp;&nbsp;&nbsp;码：<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/>
        密&nbsp;&nbsp;&nbsp;码：<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")
})

最后编辑于：2018.07.11 21:30:01