【Node.js】模拟路由渲染页面和登录操作

最新推荐文章于 2023-09-21 11:55:52 发布

夹心776655

最新推荐文章于 2023-09-21 11:55:52 发布

阅读量182

点赞数

分类专栏： ES6&Node 文章标签： javascript es6 node.js

本文链接：https://blog.csdn.net/qq_37086980/article/details/112255505

版权

ES6&Node 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

Node.js模拟路由渲染页面和登录

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
</head>
<body>
    <h1>Index</h1>
</body>
</html>

register.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            margin: 20px 0 20px 640px;
        }

        form {
            /* border: 1px solid #333; */
            text-align: center;
        }

        form input {
            width: 250px;
            height: 20px;
            border: 1px solid #828790;
            outline: none;
            margin: 10px 0 0 10px;
            text-indent: 15px;
        }

        form button {
            width: 186px;
            height: 30px;
            /* line-height: 46px; */
            background-color: #f36b11;
            color: #ffffff;
            font: 20px/30px "宋体";
            cursor: pointer;
            border-radius: 6px;
            margin: 22px 0 0 0px;
        }
    </style>
</head>

<body>
    <h1>注册</h1>
    <form action="" method="get">
        账户:<input type="text" name="username" autocomplete="off"><br>
        密码:<input type="password" name="password" autocomplete="off"><br>
        <button type="submit">注册</button>
    </form>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            margin: 20px 0 20px 640px;
        }

        form {
            /* border: 1px solid #333; */
            text-align: center;
        }

        form input {
            width: 250px;
            height: 20px;
            border: 1px solid #828790;
            outline: none;
            margin: 10px 0 0 10px;
            text-indent: 15px;
        }

        form button {
            width: 186px;
            height: 30px;
            /* line-height: 46px; */
            background-color: #f36b11;
            color: #ffffff;
            font: 20px/30px "宋体";
            cursor: pointer;
            border-radius: 6px;
            margin: 22px 0 0 0px;
        }
    </style>
</head>

<body>
    <h1>登录</h1>
    <form action="http://localhost:3000/dologin" method="get">
        账户:<input type="text" name="username" autocomplete="off"><br>
        密码:<input type="password" name="password" autocomplete="off"><br>
        <button type="submit">登录</button>
    </form>
</body>
</html>

user.json

[
    {
        "username": "jiaxin",
        "password": "123456"
    },
    {
        "username": "Mark",
        "password": "123456"
    },
    {
        "username": "SunYuan",
        "password": "123456"
    }
]

login.js

const fs = require('fs');
const http = require('http');
const url = require('url');

// create server
http.createServer((req, res) => {
    // set header
    res.setHeader("content-type", "text/html; charset = utf-8")
    // console.log(req.url);
    // exclude favicon
    if (req.url === '/favicon.ico') {
        return;
    }

    // get pathname, usename, password
    let { pathname, query } = url.parse(req.url, true);
    // console.log(pathname);
    // console.log(query);
    if (pathname == '/' || pathname == '/index') {
        // jump to index page
        let curPage = fs.readFileSync('./index.html')
        res.end(curPage)
    } else if (pathname == '/login') {
        // jump to login page
        let curPage = fs.readFileSync('./login.html')
        res.end(curPage)
    } else if (pathname == '/register') {
        let curPage = fs.readFileSync('./register.html')
        res.end(curPage)
    }else if (pathname == "/dologin") {
        // console.log(query);
        let { username, password } = query
        // console.log(username, password)
        // get userInfo from user.json
        let userInfo = fs.readFileSync("./user.json").toString();
        // console.log(userInfo);
        let userArr = JSON.parse(userInfo);
        let tag = userArr.some(v => {
            return (v.username == username && v.password == password)
        })
        if (tag) {
            res.end('Login Successfully!');
        } else {
            res.end('Please check your username and password');
        }
        /*  let flag = 0;
            userArr.forEach(v => {
            // console.log(v)
            if(v.username == username && v.password == password){
                console.log(v.username);
                flag = 1;
                res.end('Login Successfully!');
            }
        });
        if(flag == 0){
            res.end("Please check your username and password!");
        } */
    }else{
        res.writeHead(404, {"content-type":"text/html; charset = utf-8"})
        res.end("<h1>404 Not Found...</h1>")
    }

}).listen(3000, () => {
    console.log('Port 3000 is running!')
})

夹心776655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Node.js】模拟路由渲染页面和登录操作

Node.js模拟路由渲染页面和登录Index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Index</title></head>&l
复制链接

扫一扫

专栏目录