王者荣耀界面登录注册验证——express+mongodb
1.app.js
var express = require('express');
var path = require('path');
var app = express();
var router = require('./router');
//配置body-parser
var BodyParser = require('body-parser');
app.use(BodyParser.urlencoded({
extend: false}));
app.use(BodyParser.json());
//配置静态开放资源目录,便于请求访问
app.use('/public/',express.static(path.join(__dirname,'./public/')));
app.use('/node_modules',express.static(path.join(__dirname,'./node_modules/')));
app.use('/views/',express.static(path.join(__dirname,'./views/')));
//配置渲染的视图后缀名
app.engine('html',require('express-art-template'));
//引入session 文件
var session = require('express-session');
/*
-cookie数据存放在客户的浏览器上，session数据放在服务器上
-cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,如果主要考虑到安全应当使用session
-session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，如果主要考虑到减轻服务器性能方面，应当使用COOKIE
-单个cookie在客户端的限制是3K，就是说一个站点在客户端存放的COOKIE不能3K。
-所以：将登陆信息等重要信息存放为SESSION(默认暂存30分钟);其他信息如果需要保留，可以放在COOKIE中
-在 Express 框架中，默认不支持 Session 和 Cookie
但我们可以使用第三方中间件: express-session 来解决
1.nmp install express-session
2.配置
3.使用
Example: -添加 Session 数据: req.session.instance = 'Vodka';
-访问 Session 数据: req.session.instance;
*/
app.use(session({
//配置加密字符串，它会在原有的加密基础之上和这个自定义的字符串拼接起来
//目的是为了增加安全性，防止客户端的恶意伪造
secret: '688',
resave: false,
//无论客户端请求是否使用 session ，都默认分配一把 ‘钥匙’
saveUninitialized: false
}));
//加载路由
app.use(router);
app.listen(5000,function(){
console.log('running!');
});
2.router.js
var fs = require('fs');
var express = require('express');
var Router = express.Router();
var User = require('./data');
//密码加密包
// var md5 = require('blueimp-md5');
/*
{ NickName: 'Vodka',
PassWord: '123456',
Account: '190942' }
*/
//主页面
Router.get('/',function(request,response){
response.render('index.html');
});
//登录请求
Router.post('/logining',function(request,response){
var body = request.body;
console.log(body.Account)
var errCode = 0 ;
if( body.Account == '' || body.PassWord == '' ){
return response.status(200).json({
success: true,
message: 'Please fillout the information!',
errCode: -1
});
}
User.findOne({
$and: [
{
PassWord: body.PassWord
},
{
Account: body.Account
}
]
},function(error,result){
if(error){
//查询过程出错
return response.status(200).json({
success: false,
message: 'Server error!',
errCode: 500
})
} else if(result){
//成功查找到相应数据
/*
Express 提供了一个响应方法: json,该方法接收一个对象作为参数，它会自动把对象转为字符串
*/
return response.status(200).json({
success: true,
errCode: 0, //查找到已存在用户，所以返回注册失败的标记 '0'
message: 'The User had been exists'
});
}
//若当前用户并没有数据库记录，则跳转到注册页面
else {
return response.status(200).json({
success: true,
errCode: 1,
message: 'Please regist'
});
}
/*服务端重定向只对同步请求有效，对异步请求无效:
response.redirect('/');
需要在客户端重定向：
window.location.href = '/xxxx';
*/
});
});
//登录页面
Router.get('/login',function(request,response){
response.render('login.html');
});
//注册页面
Router.get('/regist',function(request,response){
response.render('register.html');
});
//处理注册请求
Router.post('/register',function(request,response){
//定义一个表数据用户对象，用于接收request的请求体
var body = request.body;
//先判断用户是否全部信息填写完毕
if (body.Account == '' || body.NickName == '' || body.PassWord == ''){
return response.status(200).json({
success: true,
message: 'Please fillout the information!',
errCode: -1
})
};
var errCode = 0; //定义标示
User.findOne({
//有其中一个属性相同，就可以证明数据库存在相同的用户
$or: [
{
NickName: body.NickName
},
{
Account: body.Account
}
]
},function(error,result){
if(error){
//查询过程出错
return response.status(200).json({
success: false,
message: 'Server error!',
errCode: 500
})
} else if(result){
//成功查找到相应数据
/*
Express 提供了一个响应方法: json,该方法接收一个对象作为参数，它会自动把对象转为字符串
*/
return response.status(200).json({
success: true,
errCode: 1 , //查找到已存在用户，所以返回注册失败的标记 '1'
message: 'The User had been exists'
});
}
//若当前用户并没有数据库记录，则允许注册
new User(body).save(function(error,data){
if(error){
return response.status(200).json({
success: true,
errCode: 500,
message: 'Internal error!'
});
}
//若注册成功,使用Session记录用户的信息
//(Session有会话生命周期，默认30分钟，存在服务端(通常用来保存敏感数据，安全性较高)
//Cookie的生命周期可以设置，存在浏览器本地内存)
request.session.User = data;
return response.status(200).json({
success: true,
errCode: 0,
message: 'Regist success!'
});
});
/*服务端重定向只对同步请求有效，对异步请求无效:
response.redirect('/');
需要在客户端重定向：
window.location.href = '/xxxx';
*/
})
});
//导出路由容器
module.exports = Router;
3.data.js
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/HeroUser',{
useNewUrlParser:true});
//定义用户表模式
var UserSchema = new mongoose.Schema({
Account: {
type: String,
default: null,
require: true
},
PassWord: {
type: String,
require: true,
defaultt: null
},
NickName: {
type: String,
require: true,
default: null
},
CreateTime: {
/*
账号创建时间，注意类型要写Date，而不是Date.now(),
因为Date.now()会立即调用，而写默认值在 new Model时，
没有传参数，系统就会调用默认值 default， 获得确切时间
*/
type: Date,
default: Date.now
},
LastModifyTime:{
//最近一次修改时间
type: Date,
default: Date.now
},
Gender: {
type: Number,
default: null
},
Birthday: {
type: Date,
},
avtar: {
type: String,
deafult: './views/img/huowu.png'
},
Status: {
/*
用户权限状态:
'0': 表示没有权限限制，
'1': 不可以评论,
'2': 不能登录
*/
type: Number,
enum: [0,1,2],
default: 0
}
});
//根据列名以及模式名，导出该表的模式
module.exports = mongoose.model('User',UserSchema);
1.index.html
{
{ extend '../layout/layout.html'}}
{
{ block 'head'}}
<link rel="stylesheet" href="/views/css/index.css">
<link rel="stylesheet" href="/views/icon/font_q7l36wd9ys/iconfont.css">
{
{ /block }}
{
{ block 'content'}}
<div id="BigBox">
<div id="Content">
<div id="TrangleLeft">div>
<div id="box" class="box">
<div id="Evaluate">庄周:天地与我并生,万物与我为一。div>
<div id="Time">2021/5/21div>
div>
<div id="TrangleRight">div>
div>
<div id="Content">
<div id="TrangleLeft">div>
<div id="box" class="box">
<div id="Evaluate">庄周:天地与我并生,万物与我为一。div>
<div id="Time">2021/5/21div>
div>
<div id="TrangleRight">div>
div>
<div id="Content">
<div id="TrangleLeft">div>
<div id="box" class="box">
<div id="Evaluate">庄周:天地与我并生,万物与我为一。div>
<div id="Time">2021/5/21div>
div>
<div id="TrangleRight">div>
div>
<div id="Content">
<div id="TrangleLeft">div>
<div id="box" class="box">
<div id="Evaluate">庄周:天地与我并生,万物与我为一。div>
<div id="Time">2021/5/21div>
div>
<div id="TrangleRight">div>
div>
<div id="Content">
<div id="TrangleLeft">div>
<div id="box" class="box">
<div id="Evaluate">庄周:天地与我并生,万物与我为一。div>
<div id="Time">2021/5/21div>
div>
<div id="TrangleRight">div>
div>
<div id="Content">
<div id="TrangleLeft">div>
<div id="box" class="box">
<div id="Evaluate">庄周:天地与我并生,万物与我为一。div>
<div id="Time">2021/5/21div>
div>
<div id="TrangleRight">div>
div>
<div id="TimeAxis">时间轴div>
div>
{
{ /block}}
{
{ block 'script' }}
<script>
/*
-window.scrollTo({ top,left ,behavior}),分别为数字、数字、字符串。
指定跳转到距离文档顶部、左边的距离，以及跳转效果（smooth、instant）
-监听事件跳转时机：添加事件监听
-获取元素到文档最顶部的距离（offsetTop属性）,offsetTop返回当前元素相对于其 offsetParent 元素的顶部的距离，
因此可以通过循环累加的方式来拿到距离文档最顶部的距离
*/
//获取偏移量的函数
function GetOffSetHeight(ins){
let height = 0;
let temp = ins;
let end = document.body;
//通过循环求出当前元素相对于body的绝对偏移量
do{
height += temp.offsetTop;
//将父级元素设置为temp，知道temp等于 document.body为止
temp = temp.offsetParent;
} while (temp !== end)
return height;
}
window.onload = function(){
//偏移量监听事件
var ele = document.getElementsByClassName('box');
var index = 0;
/*
原谅我现在技术不够，用这种愚蠢之极的方法来实现点击跳转到相应页面，
因为我还无法解决异步监听事件的变量与循环之间的问题,待我他日技术有成，
回来解决这个愚蠢的做法
*/
ele[0].addEventListener('click',function(){
var temp = index;
window.scrollTo({
top:GetOffSetHeight(ele[0]) - 150,
behavior: 'smooth'
})
});
ele[1].addEventListener('click',function(){
var temp = index;
window.scrollTo({
top:GetOffSetHeight(ele[1]) - 150,
behavior: 'smooth'
})
});
ele[2].addEventListener('click',function(){
var temp = index;
window.scrollTo({
top:GetOffSetHeight(ele[2]) - 150,
behavior: 'smooth'
})
});
ele[3].addEventListener('click',function(){
var temp = index;
window.scrollTo({
top:GetOffSetHeight(ele[3]) - 150,
behavior: 'smooth'
})
});
ele[4].addEventListener('click',function(){
var temp = index;
window.scrollTo({
top:GetOffSetHeight(ele[4]) - 150,
behavior: 'smooth'
})
});
ele[5].addEventListener('click',function(){
var temp = index;
window.scrollTo({
top:GetOffSetHeight(ele[5]) - 150,
behavior: 'smooth'
})
});
ele[6].addEventListener('click',function(){
var temp = index;
window.scrollTo({
top:GetOffSetHeight(ele[6]) - 150,
behavior: 'smooth'
})
});
ele[7].addEventListener('click',function(){
var temp = index;
window.scrollTo({
top:GetOffSetHeight(ele[7]) - 150,
behavior: 'smooth'
})
});
ele[8].addEventListener('click',function(){
var temp = index;
window.scrollTo({
top:GetOffSetHeight(ele[8]) - 150,
behavior: 'smooth'
})
});
ele[9].addEventListener('click',function(){
var temp = index;
window.scrollTo({
top:GetOffSetHeight(ele[9]) - 150,
behavior: 'smooth'
})
});
ele[10].addEventListener('click',function(){
var temp = index;
window.scrollTo({
top:GetOffSetHeight(ele[10]) - 150,
behavior: 'smooth'
})
});
}
script>
{
{ /block }}
2.login.html
{
{ extend '../views/register.html'}}
{
{ block 'head' }}
<link rel="stylesheet" href="../views/css/login.css">
{
{ /block}}
{
{ block 'content'}}
<form action="" method="POST" id="LoginForm">
<div class="Login">
<div class="box1">
<input type="text" placeholder="Account" name="Account">
div>
<div class="box2">
<input type="password" placeholder="PassWord" name="PassWord">
div>
<div class="box4">
<button type="submit" class="submit">Loginbutton>
div>
div>
form>
{
{ /block }}
{
{ block 'script'}}
<script src="/node_modules/jquery/dist/jquery.js">script>
<script>
$('#LoginForm').on('submit',function(event){
event.preventDefault();
var FormData = $(this).serialize();
$.ajax({
url: '/logining', //请求路由
type: 'post', //请求方法
data: FormData, //数据
dataType: 'json', //数据类型
success: function(data) {
var errCode = data.errCode;
//如果当前用户存在，则跳转到主页
if(errCode === 0 ){
window.alert('登录成功!');
window.location.href = '/';
}
//如果信息未填完整，则提醒用户填写完整
if(errCode === -1){
window.alert('请填写完整用户信息');
}
//如果当前用户不存在，则跳转到注册页面
if(errCode === 1){
window.alert('用户不存在，请先注册');
window.location.href = '/regist';
}
if(errCode === 500){
window.alert('服务端错误！');
}
}
});
});
script>
{
{ /block}}
3.register.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面title>
{
{ block 'head'}}
<link rel="stylesheet" href="../views/css/register.css">
{
{ /block }}
head>
<body>
{
{ block 'content'}}
<form action="" method="POST" id="RegistForm">
<div class="Register">
<div class="box1">
<input type="text" placeholder="NickName" name="NickName">
div>
<div class="box2">
<input type="password" placeholder="PassWord" name="PassWord">
div>
<div class="box3">
<input type="text" placeholder="Account" name="Account">
div>
<div class="box4">
<button type="submit" class="submit" >registbutton>
div>
div>
form>
{
{ /block}}
{
{ block 'script'}}
<script src="/node_modules/jquery/dist/jquery.js">script>
<script>
/*
-表单既有同步提交，也有异步提交，默认是同步的，同步表单提交，浏览器会锁死(加载转圈)，等待服务器端的响应结果。
-表单同步提交得到服务端返回的结果，会直接解析成(html页面)，之后就直接渲染到浏览器页面,对于这种情况，
可以直接用页面重定向，再将服务端返回的信息，渲染到重定向后的页面的某个固定位置，若想保留重定向前用户在页面留下的信息
，可以将原有的信息与服务端要返回的信息一并发送，并渲染到相应位置
*/
//表单异步提交数据
$('#RegistForm').on('submit',function(event){
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: '/register',
type: 'post',
data: formData,
//默认把接收到的数据，转换成对象
dataType: 'json',
//这里的success表示服务端对ajax响应请求是否成功
success: function(data) {
var errCode = data.errCode;
if(errCode === 0 ) {
//客户端重定向
window.location.href = '/login';
window.alert('注册成功!');
}
//处理没填写信息就注册的路由
if(errCode === -1){
window.alert('请填写完整信息!');
}
if (errCode === 1){
window.location.href = '/regist';
window.alert('用户已存在,请重新填写信息!');
}
if (errCode === 500) {
window.alert('服务器繁忙，请稍后重试!');
}
}
})
});
script>
{
{ /block }}
body>
html>
4.layout.html （主被继承页面）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局页面title>
{
{ block 'head' }}
{
{ /block}}
head>
<body>
{
{ include '../views/header.html'}}
{
{ block 'content' }}
<h1>待补充页面h1>
{
{ /block }}
{
{ include '../views/footer.html'}}
body>
{
{ block 'script' }}
{
{ /block }}
html>
5.header.html （用于页面共同的头部）
<div id="header">
<div id="Title">
<img src="../public/img/logo.png" alt="">
div>
<div id="MajorWeb">
<a href="">官网a>
div>
<div id="Comment">
<a href="">评论a>
div>
<div id="Hero">
<a href="">英雄简介a>
div>
<form action="" method="post" id="SearchContent">
<input type="text" id="Search" name="Search" class="iconfont icon-sousuo">
<button type="submit" id="SearchButton" class="iconfont icon-sousuo3">button>
form>
<div id="User">
<ul id="UserList">
<li>亲爱的召唤师,li>
<li>欢迎您!li>
<br>
<li>账号: 2291792561li>
<li>召唤师: 信予子li>
<br>
<a href="#">更多信息......a>
ul>
div>
<div id="Regist">
<a href="/regist" id="MajorRegist">注册a>
div>
<div id="Login">
<a href="/login" id="MajorLogin">登录a>
div>
div>
6.footer.html (用于共同的底部)
<div id="footer">
div>
#案例主要页面展示