一共是两个页面,一个路由
- 登录页面
-html
<form><labelfor="username">用户名:</label><inputtype="text"name="username"id="username"><br/><labelfor="username">密码:</label><inputtype="password"name="password"id="password"><br/><label>是否记住:</label><selectid="remember"><optionvalue="0">不记住</option><optionvalue="1">记住</option></select><br/><inputid="submit"type="button"value="提交"><h1id="h1"></h1></form>
-js
核心代码cookie.set('logined',1);
//我自己封装了一个cookie,方便使用,详情可以看我之前的博客var cookie={
getAll:function(){var obj={};var arr=document.cookie.split('; ');for(var i=0;i<arr.length;i++){
obj[arr[i].split('=')[0]]=arr[i].split('=')[1];}return obj;},get:function(key){returnthis.getAll()[key];},set:function(key,value,time){var date=newDate().getTime()+time*1000;
document.cookie=key+'='+value+';expires='+newDate(date).toUTCString();},
remove:function(key){var date=newDate().getTime()-1;
document.cookie=key+'=;expires='+newDate(date).toUTCString();}};//页面加载完成后执行以下代码$(function(){var username=cookie.get('username');//获取cookievar password=cookie.get('password');$('#username').val(username);//将input框中的内容填上$('#password').val(password);if(cookie.get('logined')==1){//如果设置了这个'logined'cookie
location.href='/home.html';//则跳转到登录成功界面}})$('#submit').click(function(){//提交按钮的点击事件var username=$('#username').val();//获取input框中的用户名和密码var password=$('#password').val();if($('#remember').val()==1){//如果选择了记住
cookie.set('username',username);//设置cookie
cookie.set('password',password);}else{
cookie.remove('username',username);//否则删除cookie
cookie.remove('password',password);}
$.ajax({//post请求
url:'/login',
type:'post',
data:{
username:username,
password:password},
success:function(data){if(data.error==0){//如果用户名和密码正确
cookie.set('logined',1);//设置logined cookie并跳转到登陆成功界面
location.href='/home.html';}else{$('#h1').html('用户名或密码错误')}}})})
-登录成功界面
-html
<h1>登录成功</h1><buttonid="zxBtn">注销</button>
-js
//还是自己封装的cookievar cookie={
getAll:function(){var obj={};var arr=document.cookie.split('; ');for(var i=0;i<arr.length;i++){
obj[arr[i].split('=')[0]]=arr[i].split('=')[1];}return obj;},get:function(key){returnthis.getAll()[key];},set:function(key,value,time){var date=newDate().getTime()+time*1000;
document.cookie=key+'='+value+';expires='+newDate(date).toUTCString();},
remove:function(key){var date=newDate().getTime()-1;
document.cookie=key+'=;expires='+newDate(date).toUTCString();}};if(cookie.get('logined')!=1){//如果logined cookie的值不为1
location.href='cookie.html';//跳转回登录页面}$('#zxBtn').click(function(){//注销按钮事件
cookie.remove('logined');//移除logined cookie
location.href='/cookie.html';})
路由配置
var express=require('express');var bodyParser=require('body-parser');var app=express();
app.use(express.static('./public'));
app.use(bodyParser.urlencoded({extended:false}));
app.post('/login',function(req,res){var username=req.body.username;var password=req.body.password;if(username=='jack'&&password=='123'){
res.send({
error:0})}else{
res.send({
error:1})}})
app.listen(8080);