เมื่อฉันเป็นอิสระฉันเขียนมันขึ้นอยู่กับหน้าแรกของ Zhihu และอ้างถึงข้อมูลบางอย่างเพื่อจำลองมันรวมถึงพื้นหลังแบบไดนามิกรวมถึงฟังก์ชั่นการเข้าสู่ระบบและการลงทะเบียน
เข้าสู่ระบบที่นี่คือการใช้ความปลอดภัยในสปริง
การลงทะเบียนถูกส่งโดย AJAX
รหัสเฉพาะนั้นง่ายมากคุณสามารถบอกได้อย่างรวดเร็วซึ่งรวมถึงการตรวจสอบข้อมูล ฯลฯ
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> 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> ร่างกาย {padding: 0; .index-box {width: 300px; ความสูง: auto; margin: 0 auto; margin-top: 40px;} .logo {พื้นหลัง: url (ภาพ/header/headernew4.png) no-repeat; #707171; font-weight: bold; margin: 30px auto;} .index-body {text-align: center;} .nav-sliders {ตำแหน่ง: ญาติ; แสดง: inline-block; margin-bottom: 20px;} .nav-sliders> a {font-size: 20px; "Microsoft Yahei"; สี: #999; เคอร์เซอร์: ตัวชี้; ลอย: ซ้าย; $ width} .nav-sliders> a.active {color: #0f88eb;} .nav-sliders> span {ตำแหน่ง: Absolute; ความสูง: 2px; .STAGE {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 100%; พื้นหลัง: #f7fafc;}. login-box {ความกว้าง: 300px;} .wrap {ชายแดน: 1px ของแข็ง #d5d5d5; border-radius: 5px; .wrap> div> อินพุต {width: 95%; ชายแดน: ไม่มี; padding: 17px 2.5%; Border-Radius: 5px;} .wrap> div> label.error {ตำแหน่ง: Absolute; สี: #C33; Top: 0; Hine-Height: 50PX; Transform: Translate (25px, 0) แปล (25px, 0);-moz-transform: แปล (25px, 0); opacity: 0; การมองเห็น: ซ่อน; เคอร์เซอร์: ข้อความ;} .wrap> div> label.move {transform: translate (0,0); Transition: 05S-out; 1; การมองเห็น: มองเห็นได้;} .password {border-top: Solid 1px #D5D5D5;} .Code {ขวา: 115px;} .name {ขวา: 5px;} .loginname {ขวา: 5px;} .loginpass {5px; .Passagain {ขวา: 5px;} .Button {ความสูง: 40px; พื้นหลัง: #0F88EB; TEXT-ALIGN: CENTRE; LINE-HEIGHT: 40PX; Border-Radius: 5PX; Margin-Top: 25px; สี: #FFF; ซ้าย; ขอบด้านบน: 20px; ฟอนต์-ครอบครัว: "Microsoft Yahei"; สี: #666666;}. Remember> a {float: ขวา; เคอร์เซอร์: ตัวชี้; สี: #666666;}. อื่น ๆ #666666; overflow: hidden;} .hother> span {font-size: 14px; float: ซ้าย; margin-top: 2px; เคอร์เซอร์: ตัวชี้;}. อื่น ๆ > div {float: transition: 1S ease-in; -webkit-transition translatex (-18px);-moz-transform: translatex (-18px); การมองเห็น: ซ่อน;}. อื่น ๆ > div> a {margin-left: 20px; สี: #666666; font-size: 15px;}. 1; แปลง: translatex (0);-webkit-transform: translatex (0);-moz-transform: translatex (0); การมองเห็น: มองเห็นได้;}. download {เส้นขอบ: ของแข็ง 1px #0f88eb; ความสูง: 40px; yahei "; margin-top: 50px; เคอร์เซอร์: ตัวชี้; ตำแหน่ง: สัมพัทธ์;} .download> .close {แสดง: ไม่มี;}. download .pic {แสดง: ไม่มี; ตำแหน่ง: Absolute; พื้นหลัง: #FFF; ด้านล่าง: 78PX; ความกว้าง: 310PX; 8px 0 rgba (0,0,0, .15);}. registered-box {width: 300px; จอแสดงผล: ไม่มี;} .Text {FONT-SIZE: 14PX; margin-top: 20px; Font-Family: "Microsoft Yahei"; สี: #666666;} .Text> a {สี: #0F88EB;}. yahei "; font-size: 18px; เคอร์เซอร์: pointer;} #register: hover {opacity: 0.7;} #login: hover {opacity: 0.7;} </style> </head> <body> <div style =" z-index: 9999; <div> <a id = "loginButton"> เข้าสู่ระบบ </a> <a> ลงทะเบียน </a> <span> </span> </div> <div> <!-เริ่มต้นเข้าสู่ระบบ-> <div> <form id = "loginform" action = "$ {pageContext.Request.ContextPath}/j_spring_sec id = "ชื่อผู้ใช้" name = 'j_username' value = "" placeholder = "ชื่อผู้ใช้"> <label> โปรดป้อนชื่อเข้าสู่ระบบ (ที่อยู่อีเมล) </label> </div> <div> <อินพุตประเภท = "รหัสผ่าน" id = "รหัสผ่าน" name = 'j_password <label> <อินพุต id = "จำได้" name = "_ spring_security_remember_me" type = "ช่องทำเครื่องหมาย"> จดจำฉัน: </label> <a> ไม่สามารถเข้าสู่ระบบ? = "JavaScript: volid (0);"> weChat </a> <a href = "javascript: volid (0);"> wechat </a> <a href = "javascript: volid (0);"> wechat </a> <a href = "javascript style = "color: red"> $ {sessionscope.spring_security_last_exception.message} </span> </div> </div> <!-สิ้นสุดการเข้าสู่ระบบ-> <! placeHolder = "ชื่อผู้ใช้ (อีเมล)"> <label> โปรดป้อนชื่อผู้ใช้ </label> </div> <!-<div> <อินพุต type = "text" id = "phone" value = "" placeholder = "หมายเลขโทรศัพท์มือถือ"> <lable> โปรดป้อนหมายเลขมือถือของคุณ รหัสผ่าน </label> </div> <div> <อินพุต type = "รหัสผ่าน" id = "pssworagain" name = "" value = "" placeholder = "ป้อนรหัสผ่านอีกครั้ง"> <lable> โปรดป้อนรหัสผ่านของคุณอีกครั้ง </label> </div> <div> id = "createCade"> </div> </div> </div> <div id = "register"> register </div> </form> </div> <!-สิ้นสุดการลงทะเบียน-> </div> </div> </div> </div> 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/l/ 2, รัศมี: 180}, k = 40, e = 60, a = [], b; g.width = c; g.height = l; h.raf = h.requestanimationframe || webkitrequestimationframe || ฟังก์ชั่น (p) { ส่งคืน settimeout (p, 1000/60);}; h.caf = h.cancelanimationFrame || webkitCancelanimationFrame || ฟังก์ชั่น (p) {cleartimeout (p);}; function.prototype.method = ฟังก์ชั่น (q, p) {return this.prototype [ 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 ("วาด", ฟังก์ชั่น (p, v, r) {var var s = this.closest, q, u, t = this.getalpha (r); ถ้า (t> 0) {p.fillstyle = p.strokestyle = "rgba (156,217,249,"+t+")" ath (); p.arc (this.x, this.y, this.radius, 0, math.pi*2, true); p.closepath (); p.fill (); ถ้า (s) {q = s.length; {u = v [s [q]]; p.beginpath (); p.moveto (this.x, this.y); p.lineto (ux, uy); p.stroke ();}}} ถ้า (this._ismove) {this.move (); return;} this._moveFrames) {this.setMove ();}}). วิธี ("setMove", function () {this._ismove = t 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;}). method ("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;}}). method ("getalpha", ฟังก์ชัน (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;}). วิธี ("ง่าย", ฟังก์ชั่น (q, p, r) {ถ้า (q/= r/2) -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, r = 0, s, u, p; v = c/q+0.5 | 0; สำหรับ (; r <t; r ++) {สำหรับ (s = 0; s <v; s ++) {u = ใหม่ 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 && s && s && 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 (ฟังก์ชั่น (r, q, p) {r.draw (n, p, j);}); b = raf (o);} g.addeventlistener ("Mousemove", ฟังก์ชั่น (p) ddeventListener ("resize", function () {caf (b); a = []; f = g.getBoundingClientRect (); g.width = c = f.width; g.height = l = f.height; m ();}, เท็จ); </script> <script> รหัส var; // กำหนดรหัสการตรวจสอบส่วนกลาง $ (ฟังก์ชัน () {jcpublic.register (); jcpublic.tab (); jcpublic.login ();/ * jcpublic.download (); */jcpublic.createcode (); $ (". wrap> div> input"). focus (function () {$ (this) .css ({"โครงร่าง": "none"}); var $ this = $ (this); $ this.next ("label") $ (นี้) .parent (). เด็ก ๆ ("div"). Toggleclass ("ซ่อนเร้น"); var jcpublic = {register: function () {// register var currentthis = this; // วัตถุปัจจุบัน $ ("#register"). on ("คลิก" ฟังก์ชัน () {var $ this = $ (this); var name = $ ("#name"). val (); $ ("#pssworagain"). val (); ชื่อ == "null") {$ this.prev (". wrap") ค้นหา (". name"). html ("โปรดป้อนชื่อผู้ใช้"). addclass ("ย้าย"); ที่อยู่ "). AddClass (" Move "); return false;} อื่นถ้า (passwor ==" "|| รหัสผ่าน ==" undefined "|| password == null) {$ this.prev (". wrap ") ค้นหา (" ผ่าน "). addClass (" ย้าย "); PasswordAgain == null) {$ this.prev (". wrap") ค้นหา (". passagain"). addclass ("ย้าย"); กลับเท็จ; } อื่นถ้า (passworagain == "" || passwordAgain == "undefined" || passwordAgain == null) {$ this.prev (". wrap") ค้นหา (". passagain"). addclass ("ย้าย"); กลับเท็จ; } อื่นถ้า (passworagain! = รหัสผ่าน) {$ this.prev (". wrap") ค้นหา (". passagain"). html ("โปรดตรวจสอบให้แน่ใจว่ารหัสผ่านที่ป้อนนั้นสอดคล้องกัน"). addClass ("ย้าย"); กลับเท็จ; } อื่นถ้า (รหัส! == รหัส) {$ this.prev (". wrap") ค้นหา (". รหัส"). html ("รหัสการตรวจสอบไม่ถูกต้อง"). addClass ("ย้าย"); ส่งคืน currentthis.createCode (); // รีเฟรชรหัสการตรวจสอบและอีกครั้ง} อื่น {// ส่งแอปพลิเคชันผู้ใช้เพื่อเพิ่ม $ .ajax ({type: "post", url: "registeruser.do", ข้อมูล: {"ชื่อ": ชื่อ "รหัสผ่าน": passwor} การแจ้งเตือน ("ข้อผิดพลาด:"+xmlhttprequest.status+",,,"+textstatus); - /* $ ("#registerform"). ajaxsubmit (ฟังก์ชั่น (ข้อความ) {alert (message.messagestring);}); - }, แท็บ: function () {// // สวิตช์ลงทะเบียนและเข้าสู่ระบบ $ (". nav-sliders> a"). on ("คลิก", ฟังก์ชัน () {$ (นี่) .addclass ("ใช้งาน"). พี่น้อง (). $ (นี่) .index (); // index $ (". on"). หยุด (จริง, จริง) .animate ({"ซ้าย": $ width*$ index+5+"px"}, 300); - }, เข้าสู่ระบบ: function () {$ ("#login"). on ("คลิก", function () {var $ this = $ (this); var username = $ ("#username"). val (); var password = $ ("#รหัสผ่าน") val (); (ชื่อผู้ใช้. length == 0)) {// nont ในเวลาเดียวกัน $ this.prev (". wrap") ค้นหา ("ฉลาก"). addclass ("ย้าย"); $ this.prev (". wrap") ค้นหา (". loginname"). addclass ("ย้าย"); == "|| รหัสผ่าน ==" ไม่ได้กำหนด "| | }, ดาวน์โหลด: function () {$ (". ดาวน์โหลด"). on ("คลิก", function () {$ (นี่) .children (". pic"). สลับ (300);}); }, createCode: function () {// รหัสการตรวจสอบ var selectchar = อาร์เรย์ใหม่ (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', 'q', ',', '', ',' รหัส = ""; var codelength = 4; // ความยาวของรหัสการตรวจสอบสำหรับ (var i = 0; i <codelength; i ++) {var index = math.floor (math.random ()*selectchar.length); // รหัสสุ่ม+= selectchar [index]; //$("#createCade").html(code)} ส่งคืน $ ("#createCade"). html (รหัส); }, clickCode: function () {// // สวิตช์รหัสการตรวจสอบ var $ this = this; $ ("#createCade") บน ("คลิก", function () {return $ this.createCode ();}); - </script> </body> </html>ข้างต้นเป็นรหัสที่สมบูรณ์ของการพัฒนาเว็บ Java เลียนแบบหน้าแรก Zhihu ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!