내가 자유 롭을 때, 나는 Zhihu의 홈페이지를 기반으로 썼고 동적 배경, 로그인 및 등록 기능을 포함하여 시뮬레이션을 시뮬레이션하기 위해 정보를 언급했습니다.
여기에서 로그인은 스프링 보안을 사용하고 있습니다
등록은 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; bargu .Index-box {너비 : 300px; 높이; 높이; 마진 : 0 Auto; Margin-Top : 40px;} .Logo {배경 : URL (Image/Header/Headernew4.png) No-Repeat ;; width : 350px; 높이 : 100px; #707171; font-weight : bold; margin : 30px auto;}. index-body {텍스트-알림 : 센터;} .nav-sliders {position : repotative; display : inline-block; margin-bottom : 20px;} .nav-sliders> a {font-size; "Microsoft Yahei"; 컬러 : #999; 커서 : 포인터; float; float : 왼쪽; $ width} .nav-sliders> a.active {color : #0f88eb;} .nav-sliders> span {위치 : 절대; 높이; .Stage {위치 : 절대; 왼쪽; 왼쪽 : 0; 상단 : 0; 너비 : 100%; 높이 : 100%; 배경 : #f7fafc;} .Login-box {width : 300px;} .wrap {1px solid #d5d5d5; border-radius : 5px; 배경 : #ffff;}. .wrap> div> 입력 {너비 : 95%; 국경 : 없음; 패딩 : 17px 2.5%; 경계-라디우스 : 5px;} .wrap> div> label.error {위치 : 절대; 색상 : #c33; 상단 : 0; line-height : 50px : Translate (25px, 0); 번역 (25px, 0);-Moz-transform : translate (25px, 0); 불투명도 : 0; 가시성 : 가시성 : 숨겨진; 커서 : 텍스트;} .wrap> div> label.move {transform : translate (0,0); 전이 : 모든 0.5s 편의성; -webkit-transform : transity :-Moz-Transform : translate (0,0); 1; 가시성 : 가시적;} .Password {Border-Top : Solid 1px #d5d5d5;} .code {right : 115px;} .name {right : 5px;} .loginName {right : right : right : 5px;}. 5px;}. .PassAgain {right : 5px;} .Button {높이 : 40px; 배경 : #0f88eb; 텍스트-정렬 : 중심; 라인-하이트 : 40px; Border-Radius : 5px; Margin-Top : 25px; 컬러 : #fff; font-family : "Microsoft Yahei"; cursor : pointer;}. 20px; Font-Family : "Microsoft Yahei"; 컬러 : #666666;} .remember> a {float; right; cursor : pointer; color; color : #666666;}. 다른 {text-align : left; margin-top : 20px; font-family : "microsoft yahi"; #66666; .other> span {font-size : 14px; float : left; margin-top : 2px; cursor : pointer;} .other> div {float : 왼쪽; 왼쪽; 전환; 모든 0.3s eason-in; 모든 0.3s eason-in; 불투명 : 0; translatex (-20px);-Moz-Transx (-18px); TransLateX (-18px); 가시성 : 숨겨진;} .other> div> a {margin-left : 20px; color : #666666; font-size : 15px;} .other> .hidden {전환 : 모든 1s-display : display : block; -webkit-tranition : all 0.3s 편의성 : 1; eptrance : 1); TransLateX (0);-Moz-transform : translatex (0); 가시성 : 가시성;}. download {border : solid 1px #0f88eb; 높이 : 40px; 라인 높이 : 40px; Border-Radius : 5px; color : #0f88eb; font-family : "Microsoft yahei"; 상대;} .download> .close {display : none;}. download .pic {display : none; 위치 : 위치 : 절대; 배경 : #fff; 하단 : 78px; 너비 : 310px; 왼쪽 : -10px; z-index : 5; 패딩 : 40px 0; Border-Radius : 8px; Box-Shadow : 0 8px 0 8px (0,0,0); . 등록 -Box {너비 : 300px; 디스플레이 : none;} .text {font-size : 14px; margin-top : 20px; font-family : "microsoft yahei"; color : #666666;} .text> a {color : #0f88eb;}. yahei "; font-size : 18px; cursor : pointer;} #register : hover {vericacity : 0.7;} #login : hover {incacity : 0.7;} </style> </head> <div style ="z-index : 9999; 위치 : 9999; div> div> </h1> <h2> spe료 </h> <div> <a id = "loginButton"> 로그인 </a> <a> register </a> <span> </div> <div> <!-로그인 start-> <div> <form id = "loginform"action = "$ {pagecontext.Request.ContextPath}/j_spring_security_check"post "> <hip> <ind <spring_securcure" 유형 = "email"id = "username"name = 'j_username'value = ""placeholder = "username"> <label> 로그인 이름을 입력하십시오 (이메일 주소) </label> </div> <div> <입력 유형 = "id ="id = "password"name = 'j_password'placeHolder = "password"> label> </div> </div> </div> </div> </div> </div. id = "로그인"> 로그인 </div> <div> <label> <입력 id = "rememberme"name = "_ spring_security_remember_me"type = "checkbox"> 기억 나 : </label> <a> 로그인 할 수 없습니까? </a> </div> </form> <div> <span> 소셜 어교 어교 로그인> <div> <a href = "JavaScript : volid (0);"> qq </a> <a href = "javaScript : volid (0);"> wechat </a> <a href = "javaScript : volid (0);"> wechat </a> <a href = "javascript : volid (0);"> wechat = "JavaScript : volid (0);"> wechat </a> </div> </div> <div> <span style = "color : red"> $ {sessionscope.spring_security_last_exception.message} </span> </div> </div> <!-login end-> <register start-> action = "registeruser.do"> <div> <div> <입력 유형 = "이메일"이름 = "name"value = ""id = "id ="name "placeholder ="vaceholder = "vaceholder ="vaceholder = "vaceholder ="vaceholder = "valke </div> <!-<div> <div> <div> <div> <div> <div </lade> <divit> <divel> <div> <입력 유형 = "password"= "passwor"name = "passwor"value = ""plactholder = "plactome"> <labe> 비밀번호를 입력하십시오 </label> </div> <div> <입력 유형 = "possport"id = "pssworagain"name = ""valke = "placeholder ="putsion label> </label> </label> </label> </label> </label> id = "code"name = ""maxlength = "6"value = ""placeholder = "verification code"> <label> verification code </div id = "createcade"> </div> </div> </div> <div id = "register"> register </div> </div> </div> </div> </div> </div> </div> id = "canvas"style = "z-index : 1000"> </canvas> <cript> "Strict 사용"; (function (h, d) {var g = typeof d === "string"? docum 2, 반경 : 180}, k = 40, e = 60, a = [], b; g.width = c; g.height = l; h.raf = h.requestanimationFrame || webKitRequestAnimationFrame || 함수 (p) { return settimeout (p, 1000/60);}; h.caf = h.cancelanimationframe || webkitcancelanimationframe || function (p) {cleartimeout (p);}; function.prototype.method = function (q, p) {return this. this. this.prototype [q] = p, this;}; i (p, r, q) {this.x = this.x = 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.beginp ath (); 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 (ux, uy); p.Stroke ();}}} if (this._ismove) {this.move (); return;} if (this.timer ++ === 이 rue; this._frames = math.random ()*100+120; this._frame = 0; this._tx = this.ox+math.random ()*100-50; this._ty = this.o y+math.random ()*100-50;}). 메소드 ( "move", function () {this.x = this.ease (this._frame ++, this.x, this._tx- this.x, t his._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;}}). 메소드 ( "getAlpha", function (s) {var q = this.xs.x, p = this.ys.y, u = math.sqrt (q*q+p*p), t = s.radius; return u> t? 0 : (1-u/t)*0.6;}). 메소드 ( "eason", 함수 (q, p, s, s, r) {if ((q/= r/2) <1) {return s/2*q+p;} -s/2*((-q)*(q-2) -1)+p;}). 메소드 ( "_ moveframes", e); 함수 m () {var q = math.max (60, c*1.5/k), t = l*1.5/q+0.5 | 0, v, v, r = 0, s, u, p; 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 & s & 항상 1) {u.closest = [p-1, pv, pv-1]; s <v-1 && u.closest.push (p+1); r <t-1 && u.closest.push (p+v);}}} o ();} 함수 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) {jx = p.clientx-f.left; jy = p.clienty); ddeventListener ( "resize", function () {caf (b); a = []; f = g.getBoundingClientRect (); g.width = c = c = f.width; g.height = l = f.height; m ();}, false); m ();} (this, document.query telector ( "))). </script> <cript> var code; // 글로벌 검증 코드 정의 $ (function () {jcpublic.register (); jcpublic.tab (); jcpublic.login ();/ * jcpublic.download (); */jcpublic.createcode (); jcpublic.clickcode (); $ ( ". 랩> div> 입력"). focus (function () {$ (this) .css ({ "oldline": "none"}); var $ this = $ (this); removeClass ( "move"); // 프롬프트}); $ (this) .parent (). children ( "div"). var jcpublic = {register : function () {// var currentsthis = this; // current object $ ( "#register"). on ( "click", var () {var $ this = $ (this); var name = $ ( "#name"); // name var registername = document.getElementByid ( "name"); var passport = $ ( "#passwor"); "); $ ( "#psworagain". var code = $ ( "#code"); val (); || null ") {$ this.prev (". wrap ") 주소 "). addClass ("move "); return false;} else if (passwor ==" "|| password ="|| password == null) {$ this.prev ( ". 랩"). find ( ". pass"). addClass ( "move"); else} else if (passworagain == "|| passwordagain == null) {$ this.prev ( ". 랩"). 찾기 ( ". passagain"). addClass ( "move"); 거짓을 반환합니다. } else if (passworagain == ""|| passwordAgain == "정의되지 않은"|| passwordAgain == null) {$ this.prev ( ". 랩"). find ( ". passagain"). addClass ( "move"); 거짓을 반환합니다. } else if (passworagain! = password) {$ this.prev ( ". 랩"). find ( ". passagain"). html ( "입력 된 암호가 일관성이 있는지 확인하십시오"). addClass ( "move"); 거짓을 반환합니다. } else if (code! == code) {$ this.prev ( ". 랩"). find ( ". code"). html ( "확인 코드가 올바르지 않습니다"). addClass ( "move"); return currents.createcode (); // 검증 코드를 새로 고침하고 재창조} else} else {// $ .ajax ({type : "post :"post ","registeruser.do ", data : {"password ": passwor}, dataType :"json ", errore : eRry, eRry, eRRORTHORT (XMLHTTPREQUER) "오류 :"+xmlhttprequest. ","+textstatus}; }}); /* $ ( "#registerform"). ajaxSubmit (function (message) {alert (message.messagestring);}); */}}); }, tab : function () {// 등록 및 로그인 $ ( ". nav-sliders> a"). on ( "click", function () {$ (this) .addclass ( "active"). siblings (). removeClass ( "active"); "active"); var indelth a var in indely a a var a with indely. $ (이) }); }, login : function () {$ ( "#login"). on ( "click", function () {var $ this = $ (this); var username = $ ( "#username"); val (); var password = $ ( "#password"); var checkloginName = document.getElementById ( "username"); if (password.l.lengal.1) && (username.length == 0)) {// 동시에 $ this.prev ( ". 랩"). addClass ( "move"); this.prev ( ". loginname"). addlass (! = "|| }, 다운로드 : function () {$ ( ". download"). on ( "click", function () {$ (this) .children ( ". pic"). 토글 (300);}); }, createCode : function () {// villification code var selectchar = new Array (0, 1, 2, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 't', 'u', 'v', 'w', 'x', 'z') 코드 = ""; var codelength = 4; // (var i = 0; i <codelength; i ++) {var index = math.floor (math.random ()*selectchar.length); // random code+= selectchar [index]; //$("#createcade").html(code)} return $ ( "#createcade"). html (code); }, clickcode : function () {// switch verification code var $ this = this; $ ( "#createCade"). on ( "click", function () {return $ this.createCode ();}); }}; </script> </body> </html>위는 편집자가 소개 한 Zhihu 홈페이지를 모방하는 Java 웹 개발의 전체 코드입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!