node学习笔记（五）网站访问量统计功能实现

来源：互联网发布：石油钻井英语翻译软件编辑：程序博客网时间：2024/05/21 09:48

index.js

const express = require('express');const session = require('express-session');const cookieParser = require('cookie-parser');const querystring = require('querystring');let app = express();let count = 0;app.use(cookieParser("hello"));app.use(session({    secret:"hello",    name:'sid',    cookie:{        maxAge:10000,    },    resave:true,    rolling:true,}));app.get('/',function (req,res,next) {    if(req.session.isLogined === 1){        res.sendfile('./count.html')    }else {        res.sendfile('./index.html')    }});app.post('/check',function (req,res,next) {    let data = "";    req.on("data",function (chunk) {        data += chunk;    });    req.on("end",function () {        data = querystring.parse(data);        if(data.username === 'tom' && data.pwd === 'tom'){            req.session.name = data.username;            req.session.isLogined = 1;            res.redirect('/');        }else{            res.redirect('/');        }    });});app.post('/form',function (req,res,next){    let fc = function(){        function foo(){            count++  ;            return count;        }        return foo()    };    res.send(`您是第${fc()}位访客`);});app.post('/out',function (req,res){    res.clearCookie('sid')    req.session.isLogined = 0;    res.redirect('/')})app.listen(8000,"￥￥￥",function () {    console.log("服务挂起")});

count.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        #box{            width: 100%;            height: 100px;            background-color:  cornflowerblue;            position: absolute;            bottom: 50%;            transform: translateY(50%);            text-align: center;            font-size: 30px;            line-height: 100px;        }        input{            top: 10%;            position: absolute;            left:50%;            transform: translateX(-50%);            width: 100px;            height: 34px;            background-color: cornflowerblue;            color: white;            border-radius: 10px;        }    </style></head><body><div id="box"></div><form action="http://***:8000/out" method="post">    <input type="submit" value="退出"></form><script>        var xhr;        xhr = new XMLHttpRequest();        xhr.onreadystatechange=function() {            if (xhr.readyState==4 && xhr.status==200) {                document.getElementById("box").innerHTML= xhr.responseText};        };        xhr.open("post","http://***:8000/form",true);        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");        xhr.send(null);</script></body></html>

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Welcome to 66</title>    <style>        *{            margin: 0;            padding: 0;            background-color: rgba(20,20,20,1);        }        h1{            color: white;            position: relative;            z-index: 2;            text-align: center;            line-height: 200px;        }        form{            color: white;            font-size: 20px;            font-family:"Myanmar Text";            background-color: rgba(20,20,20,1);            width: 300px;            height: 200px;            padding: 200px;            position: fixed;            top: 50%;            left: 50%;            transform: translate(-50%,-50%);        }        .input{            box-shadow: 0px 0px 10px white;            color: white;            background-color: rgba(30,30,30,.1);            width: 200px;            height: 25px;            border: 2px solid white;            border-radius: 5px;            margin: 20px 10px;        }        .input::placeholder{            color: rgba(255,252,252,.9);        }        .btn{            box-shadow: 0px 0px 30px white;            width: 100px;            height: 35px;            position: absolute;            left: 50%;            transform: translateX(-50%);            background-color: rgba(20,20,20,1);            border: 2px solid white;            color: white;            border-radius: 5px;        }        .btn:hover{            background-color: rgba(20,20,20,1);            border: 2px solid black;            border-radius: 5px;            box-shadow: 0px 0px 10px white;        }        #zhuce:hover{            background-color: rgba(20,20,20,1);            border: 2px solid black;            border-radius: 5px;            box-shadow: 0px 0px 10px white;        }        #zhuce{            color: white;            text-align: center;            font-size: 14px;            line-height: 35px;            text-decoration: none;            background-color: rgba(20,20,20,1);            border: 2px solid white;            border-radius: 5px;            box-shadow: 0px 0px 30px white;            width: 95px;            height: 29px;            position: absolute;            left: 50%;            bottom: 22%;            transform: translateX(-50%);        }        small{            font-size: 15px;        }    </style></head><body><h1>Welcome to my website！<small>账号密码为：tom</small></h1><form action="http://***:8000/check" method="post">    <label>账号：</label>    <input id="in1" class="input" type="text" name="username" placeholder="请输入用户名">    <br>    <label>密码：</label>    <input class="input" type="password" name="pwd" placeholder="请输入密码">    <br>    <br>    <input class="btn" type="submit" value="登录">    <a href="" id="zhuce">注册<a/></form></body></html>

***：公网IP，￥￥￥：私网IP，

阅读全文

0 0