当前位置：移动技术网 > IT编程>开发语言>Java > JavaWeb开发之模仿知乎首页完整代码

JavaWeb开发之模仿知乎首页完整代码

2019年07月22日 | 移动技术网IT编程 | 我要评论

闲来无事，就根据知乎的首页，参考了一些资料模拟写了下，包含了动态的背景，以及登录和注册功能

登录这里使用的是spring security

注册是ajax发送的

具体代码很简单，一看就知道，包含了数据的检查等

<%@ page language="java" import="java.util.*" pageencoding="utf-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<% 
string path = request.getcontextpath(); 
string basepath = request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path+"/"; 
%> 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<script src="jquery/jquery.js"></script> 
<style> 
body{padding: 0;margin: 0;background: #f7fafc;} 
a{text-decoration: none;} 
.index-box{width:300px;height: auto;margin:0 auto;margin-top: 40px;} 
.logo{background:url(images/header/headernew4.png) no-repeat;;width: 350px;height: 100px;margin:0 auto} 
.title{font-size: 18px;text-align: center;color: #707171;font-weight: bold;margin: 30px auto;} 
.index-body{text-align: center;} 
.nav-sliders{position: relative;display: inline-block;margin-bottom: 20px;} 
.nav-sliders>a{font-size: 20px;display: inline-block;width:60px ;font-family: "微软雅黑";color: #999;cursor: pointer;float: left;$width} 
.nav-sliders>a.active{color: #0f88eb;} 
.nav-sliders>span{position: absolute;height: 2px;background:#0f88eb;display:block;left: 5px;width: 50px;bottom:-8px;} 
.stage{position:absolute;left:0;top:0;width:100%;height:100%;background:#f7fafc;} 
.login-box{width: 300px;} 
.wrap{border:1px solid #d5d5d5;border-radius: 5px;background: #fff;} 
.wrap>div{position: relative;overflow: hidden;} 
.wrap>div>input{width: 95%;border:none;padding:17px 2.5%;border-radius: 5px;} 
.wrap>div>label.error{position: absolute;color: #c33;top: 0;line-height: 50px;transform: translate(25px,0);transition: all 0.5s ease-out;-webkit-transform: translate(25px,0);-moz-transform: translate(25px,0);opacity: 0;visibility:hidden;cursor: text;} 
.wrap>div>label.move{transform: translate(0,0);transition: all 0.5s ease-out;-webkit-transform: translate(0,0);-moz-transform: translate(0,0);opacity: 1;visibility: visible;} 
.password{border-top: solid 1px #d5d5d5 ;} 
.code{right:115px ;} 
.name{right:5px ;} 
.loginname{right:5px ;} 
.loginpass{right:5px ;} 
.pass{right:5px ;} 
.passagain{right:5px ;} 
.button{height: 40px;background:#0f88eb;text-align: center;line-height: 40px;border-radius: 5px;margin-top: 25px;color: #fff;font-family: "微软雅黑";cursor: pointer;} 
.remember{text-align: left;margin-top: 20px;font-family: "微软雅黑";color: #666666;} 
.remember>a{float:right;cursor: pointer;color: #666666;} 
.other{text-align: left;margin-top: 20px;font-family: "微软雅黑";color: #666666;overflow: hidden;} 
.other>span{font-size: 14px;float: left;margin-top: 2px;cursor: pointer;} 
.other>div{float: left; transition: all 1s ease-in;-webkit-transition: all 0.3s ease-in;opacity: 0;transform: translatex(-20px);-webkit-transform: translatex(-18px);-moz-transform: translatex(-18px);visibility: hidden;} 
.other>div>a{margin-left: 20px;color: #666666;font-size: 15px;} 
.other>.hidden{ transition: all 1s ease-in;display: block;-webkit-transition: all 0.3s ease-in;opacity: 1;transform: translatex(0);-webkit-transform: translatex(0);-moz-transform: translatex(0);visibility: visible;} 
.download{border:solid 1px #0f88eb;height: 40px;line-height: 40px;border-radius: 5px;color:#0f88eb ;font-family: "微软雅黑";margin-top: 50px;cursor: pointer;position: relative;} 
.download>.close{display: none;} 
.download .pic{display:none;position: absolute;background: #fff;bottom: 78px;width: 310px;left: -10px;z-index: 5;padding: 40px 0;border-radius: 8px;box-shadow: 0 0 8px 0 rgba(0,0,0,.15);} 
.registered-box{width: 300px; display: none;} 
.text{font-size: 14px;margin-top: 20px;font-family: "微软雅黑";color: #666666;} 
.text>a{color: #0f88eb;} 
.verification-code{position: absolute;right:22px;top: 14px;font-family: "微软雅黑";font-size: 18px;cursor: pointer;} 
#register:hover{opacity: 0.7;} 
#login:hover{opacity: 0.7;} 
</style> 
</head> 
<body> 
<div class="index-box" style="z-index:9999;position:relative"> 
<div class="index-header"> 
<h1 class="logo"></h1> 
<h2 class="title">speed4c开发平台</h2> 
</div> 
<div class="index-body"> 
<div class="nav-sliders"> 
<a id="loginbutton" class="login active">登录</a> 
<a class="registered">注册</a> 
<span class="on"></span> 
</div> 
<div class="change"> 
<!--登录开始--> 
<div class="login-box"> 
<form id="loginform" action="${pagecontext.request.contextpath}/j_spring_security_check" method="post"> 
<div class="wrap"> 
<div class="phone"> 
<input type="email" id="username" name='j_username' value="" placeholder="用户名"> 
<label class="error loginname">请输入登录名（email地址）</label> 
</div> 
<div class="password"> 
<input type="password" id="password" name='j_password' placeholder="密码"> 
<label class="error loginpass">密码</label> 
</div> 
</div> 
<div class="button" id="login">登录</div> 
<div class="remember"> 
<label><input id="rememberme" name="_spring_security_remember_me" type="checkbox">记住我:</label> 
<a>无法登陆?</a> 
</div> 
</form> 
<div class="other"> 
<span>社交账号登录</span> 
<div class="other-login"> 
<a href ="javascript:volid(0);">扣扣</a> 
<a href ="javascript:volid(0);">微信</a> 
<a href ="javascript:volid(0);">微博</a> 
</div> 
</div> 
<div class="other"> 
<span style="color:red">${sessionscope.spring_security_last_exception.message}</span> 
</div> 
</div> 
<!--登录结束--> 
<!--注册开始--> 
<div class="registered-box"> 
<form id="registerform" method="post" action="registeruser.do"> 
<div class="wrap"> 
<div class="phone"> 
<input type="email" name="name" value="" id="name" placeholder="用户名（邮箱）"> 
<label class="error name">请输入用户名</label> 
</div> 
<!-- <div class="password"> 
<input type="text" id="phone" value="" placeholder="手机号"> 
<label class="error phone restet">请输入手机号</label> 
</div> --> 
<div class="password"> 
<input type="password" id="passwor" name="passwor" value="" placeholder="密码"> 
<label class="error pass" >请输入密码</label> 
</div> 
<div class="password"> 
<input type="password" id="pssworagain" name="" value="" placeholder="再次输入密码"> 
<label class="error passagain">请再次输入密码</label> 
</div> 
<div class="password"> 
<input type="text" id="code" name="" maxlength="6" value="" placeholder="验证码"> 
<label class="error passwor code">请输入验证码</label> 
<div class="verification-code" id="createcade"></div> 
</div> 
</div> 
<div class="button" id="register">注册</div> 
</form> 
</div> 
<!--注册结束--> 
</div> 
</div> 
</div> 
<canvas id="canvas" class="stage" style="z-index:1000"></canvas> 
<script> 
"use strict";(function(h,d){var g=typeof d==="string"?document.queryselector(d):d,f=g.getboundingclientrect(),c=f.width,l=f.height,n=g.getcontext("2d"),j={x:c/2,y:l/2,radius:180},k=40,e=60,a=[],b;g.width=c;g.height=l;h.raf=h.requestanimationframe||webkitrequestanimationframe||function(p){return settimeout(p,1000/60);};h.caf=h.cancelanimationframe||webkitcancelanimationframe||function(p){cleartimeout(p);};function.prototype.method=function(q,p){return this.prototype[q]=p,this;};function i(p,r,q){this.x=this.ox=p;this.y=this.oy=r;this.radius=math.random()*1+2;this.timer=q|0;}i.method("draw",function(p,v,r){var s=this.closest,q,u,t=this.getalpha(r);if(t>0){p.fillstyle=p.strokestyle="rgba(156,217,249,"+t+")";p.beginpath();p.arc(this.x,this.y,this.radius,0,math.pi*2,true);p.closepath();p.fill();if(s){q=s.length;while(q--){u=v[s[q]];p.beginpath();p.moveto(this.x,this.y);p.lineto(u.x,u.y);p.stroke();}}}if(this._ismove){this.move();return;}if(this.timer++===this._moveframes){this.setmove();}}).method("setmove",function(){this._ismove=true;this._frames=math.random()*100+120;this._frame=0;this._tx=this.ox+math.random()*100-50;this._ty=this.oy+math.random()*100-50;}).method("move",function(){this.x=this.ease(this._frame++,this.x,this._tx-this.x,this._frames);this.y=this.ease(this._frame,this.y,this._ty-this.y,this._frames);if(math.abs(this.x-this._tx)<0.5&&math.abs(this.y-this._ty)<0.5){this._ismove=false;this.timer=0;}}).method("getalpha",function(s){var q=this.x-s.x,p=this.y-s.y,u=math.sqrt(q*q+p*p),t=s.radius;return u>t?0:(1-u/t)*0.6;}).method("ease",function(q,p,s,r){if((q/=r/2)<1){return s/2*q*q+p;}return -s/2*((--q)*(q-2)-1)+p;}).method("_moveframes",e);function m(){var q=math.max(60,c*1.5/k),t=l*1.5/q+0.5|0,v,r=0,s,u,p;v=c/q+0.5|0;for(;r<t;r++){for(s=0;s<v;s++){u=new i(s*q+(math.random()*q*2-q),r*q+(math.random()*q*2-q),math.random()*e);p=r*v+s;a[p]=u;if(r&1&&s&&1){u.closest=[p-1,p-v,p-v-1];s<v-1&&u.closest.push(p+1);r<t-1&&u.closest.push(p+v);}}}o();}function o(){n.clearrect(0,0,c,l);a.foreach(function(r,q,p){r.draw(n,p,j);});b=raf(o);}g.addeventlistener("mousemove",function(p){j.x=p.clientx-f.left;j.y=p.clienty-f.top;},false);h.addeventlistener("resize",function(){caf(b);a=[];f=g.getboundingclientrect();g.width=c=f.width;g.height=l=f.height;m();},false);m();})(this,document.queryselector(".stage")); 
</script> 
<script> 
var code;//定义一个全局验证码 
$(function(){ 
jcpublic.register(); 
jcpublic.tab(); 
jcpublic.login(); 
/* jcpublic.download(); */ 
jcpublic.createcode(); 
jcpublic.clickcode(); 
$(".wrap>div>input").focus(function(){ 
$(this).css({"outline": "none" }); 
var $this = $(this); 
$this.next("label").removeclass("move");//隐藏提示信息 
}); 
$(".other>span").on("click",function(){ 
$(this).parent().children("div").toggleclass("hidden"); 
}); 
}); 
var jcpublic = { 
register:function(){//注册 
var currentthis = this;//当前对象 
$("#register").on("click",function(){ 
var $this = $(this); 
var name = $("#name").val();//姓名 
var registername = document.getelementbyid("name"); 
var passwor = $("#passwor").val(); 
var passworagain = $("#pssworagain").val(); 
var code = $("#code").val();//验证码 
if(name.length==0 && passwor.length==0){//同时为空 
$this.prev(".wrap").find("label").addclass("move"); 
return false; 
}else if(name == "" || name == "undefined" || name == "null"){ 
$this.prev(".wrap").find(".name").html("请输入用户名").addclass("move"); 
return false; 
}else if(!registername.checkvalidity()){ 
$this.prev(".wrap").find(".name").html("请输入有效的email地址").addclass("move"); 
return false; 
}else if(passwor == "" || passwor == "undefined" || passwor == null ){ 
$this.prev(".wrap").find(".pass").addclass("move"); 
return false; 
}else if(passworagain == "" || passworagain == "undefined" || passworagain == null ){ 
$this.prev(".wrap").find(".passagain").addclass("move"); 
return false; 
}else if(passworagain == "" || passworagain == "undefined" || passworagain == null ){ 
$this.prev(".wrap").find(".passagain").addclass("move"); 
return false; 
}else if(passworagain != passwor){ 
$this.prev(".wrap").find(".passagain").html("请确保输入的密码一致").addclass("move"); 
return false; 
}else if(code !== code ){ 
$this.prev(".wrap").find(".code").html("验证码有误").addclass("move"); 
return currentthis.createcode();//验证码输入有误就刷新验证码重新输入 
}else{ 
//发送添加用户申请 
$.ajax({ 
type : "post", 
url : "registeruser.do", 
data : {"name":name,"password":passwor}, 
datatype: "json", 
error: function(xmlhttprequest, textstatus, errorthrown){ 
alert("error:"+xmlhttprequest.status+",,,"+textstatus); 
}, 
success : function(msg) { 
alert(msg.messagestring); 
if(msg.messagestring == "注册成功"){ 
$("#loginbutton").click(); 
$("#registerform")[0].reset(); 
} 
} 
}); 
/* $("#registerform").ajaxsubmit(function(message){ 
alert(message.messagestring); 
}); */ 
} 
}); 
}, 
tab:function(){//切换注册和登录 
$(".nav-sliders>a").on("click",function(){ 
$(this).addclass("active").siblings().removeclass("active"); 
var $width = $(this).width();//当前a的宽度 
var $index = $(this).index();//索引 
$(".on").stop(true,true).animate({"left":$width*$index+5+"px"},300); 
$(this).parents(".index-body").children(".change").children().eq($index).stop(true,false).show().siblings().hide(); 
}); 
}, 
login:function(){ 
$("#login").on("click",function(){ 
var $this = $(this); 
var username = $("#username").val(); 
var password = $("#password").val(); 
var checkloginname = document.getelementbyid("username"); 
if((password.length==0) && (username.length==0)){//同时为空 
$this.prev(".wrap").find("label").addclass("move"); 
return false; 
}else if(username == "" || username == "undefined" || username == null ){ 
$this.prev(".wrap").find(".loginname").addclass("move"); 
return false; 
}else if(!checkloginname.checkvalidity()){ 
$this.prev(".wrap").find(".loginname").html("请输入有效的email地址").addclass("move"); 
return false; 
}else if(password == "" || password == "undefined" || password == null ){ 
$this.prev(".wrap").find(".loginpass").addclass("move"); 
return false; 
}else{ 
//全部通过再提交 
$("#loginform").submit(); 
} 
}); 
}, 
download:function(){ 
$(".download").on("click",function(){ 
$(this).children(".pic").toggle(300); 
}); 
}, 
createcode:function(){//验证码 
var selectchar = new array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');//所有候选组成验证码的字符，也可以用中文的 
code=""; 
var codelength=4;//验证码的长度 
for(var i =0;i<codelength;i++){ 
var index = math.floor(math.random()*selectchar.length);//随机数 
code +=selectchar[index]; 
//$("#createcade").html(code) 
} 
return $("#createcade").html(code); 
}, 
clickcode:function(){//切换验证码 
var $this = this; 
$("#createcade").on("click",function(){ 
return $this.createcode(); 
}); 
} 
}; 
</script> 
</body> 
</html>

以上所述是小编给大家介绍的javaweb开发之模仿知乎首页完整代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

[JVM学习之路]一、初识JVM，了解其结构、模型及生命周期

JVM入门简介一、JVM位置JVM是运行在操作系统之上的，与硬件之间没有直接的联系二、JVM的整体结构方法区和堆... [阅读全文]
从 Exadata 到 TiDB，中通快递 HTAP 实践

作者介绍：朱志友，中通快递大数据架构师。中通快递背景介绍中通快递业务的规模目前是世界第一，是第一个达成年百亿业务... [阅读全文]
实时计算入门篇-了解storm

离线计算最近在了解离线系统，根据自己的了解，以及参考网上的相关资料，总结了相关知识，供刚入门的同学们了解。离线计... [阅读全文]
VMware NSX Manager install

前言NSX Manager是一个虚拟设备，提供图形用户界面 (Graphical User Interface,... [阅读全文]
【JAVA并发编程】LinkedBlockingQueue原理

LinkedBlockingQueue原理最近在看并发编程的知识，比如ConcurrentHashMap、Ree... [阅读全文]
Apollo学习笔记

Apollo学习笔记前言apollo=1.6.2相关链接：Apollo Github 地址：https://gi... [阅读全文]
SpringCloud学习笔记——持续更新中

SpringCloud学习笔记1.常见面试题1.1 什么是微服务？1.2 微服务之间如何通信？1.3 Sprin... [阅读全文]
rancher安装fastDFS

fastDFS服务端有两个角色:tracker(跟踪器)和storage(存储节点).22122是跟踪器的端口.... [阅读全文]
MyBatis知识概括

MyBatis知识概括MyBatis介绍MyBatis介绍 [阅读全文]
Spring Boot 太狠了，一次性发布了 3 个版本！

Spring Boot 太狠了，北京时间 2020/07/25 今天一次性发布了三个主要版本，三条版本线同时更新... [阅读全文]

网友评论


验证码：

JavaWeb开发之模仿知乎首页完整代码

2019年07月22日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论