2018-12-06 node.js--第五天

\color{red}{express-static}

const express=require('express');
const expressStatic=require('express-static');
var server=express();
server.listen(8080);
server.use(expressStatic('./www'))

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="http://localhost:8080" method="get">
            <p>用戶名: <input type="text" name="uname"></p>
            <p>密碼: <input type="text" name="upwd"></p>
            <p><input type="submit" value="提交"></p>
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>NCKLSDJGL</p>
    </body>
</html>


const express=require('express');
const expressStatic=require('express-static');
var server=express();
server.listen(8080);
server.use('/',function(req,res){
    console.log(req.query);//解析get發(fā)送的數(shù)據(jù)請求
})
server.use(expressStatic('./www'));

驗(yàn)證

//127.0.0.1:8080/login?uname=xxx&upwd=123    get 響應(yīng)對象
//{
//  "ok":true/false,
//  "msg":用戶名不存在
//}
//1.創(chuàng)建服務(wù)
const express=require('express');
//2.創(chuàng)建靜態(tài)文件目錄
const expressStatic=require('express-static');
var server=express();
server.listen(8080);
//4.模擬數(shù)據(jù)
var users={
    "blue":'123',
    "jack":'456',
    "tom":'789'
};

//3.處理用戶請求
server.use('/login',function(req,res){
    //req.query  {uname:jack,upwd:123}
    console.log(req.query); //{uname:jack,upwd:123}
    //獲取表單中的用戶名和密碼
    var user=req.query['uname'];
    //console.log(user)
    var upwd=req.query['upwd'];
    //console.log(upwd);
    if(users[user]==null){
        console.log(users[user]); //jack
        res.send({'ok':false,'msg':'用戶名不存在'})
    }else if(users[user]!=upwd){
        res.send({'ok':false,'msg':'密碼錯(cuò)誤'})
    }else{
        res.send({'ok':true,'msg':'登陸成功'})
    }
})
server.use(expressStatic('./www'));

\color{red}{form.html}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>用戶名: <input type="" name="uname" id='uname'></p>
        <p>密碼: <input type="" name="upwd" id='upwd'></p>
        <p><input type="button" value='登錄' id='btn'></p>
        <script src="js/jquery.js"></script>
        <script>
            var uname=document.getElementById('uname');
            //console.log(unameVal);
            var upwd=document.getElementById('upwd');
            //console.log(upwdVal);
            //var btn=document.getElementById('btn');
            
            $('#btn').click(function(){
                $.ajax({
                    type:'get',
                    url:'/login',
                    data:{'uname':uname.value,'upwd':upwd.value},
                    success:function(list){
                        //console.log(list);
                        if(list.ok==true){
                            console.log(list);
                            alert('登陸成功');
                        }else{
                            alert('登錄失敗');
                        }
                    }
                })
            })
        </script>
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容