您的位置：首页 > Web前端 > Node.js

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

2017-12-18 17:19 579 查看

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，

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航