Cuando estaba libre, lo escribí en base a la página de inicio de Zhihu y me referí a alguna información para simularla, incluidos antecedentes dinámicos, así como funciones de inicio de sesión y registro.
Iniciar sesión aquí es usar Spring Security
El registro es enviado por AJAX
El código específico es muy simple, puede decir de un vistazo que incluye verificaciones de datos, etc.
<%@ page lenguaje = "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 ()+ruta+"/"; %> <! DocType html> <html> <adhe> <meta charset = "utf-8"> <title> </title> <script src = "jQuery/jQuery.js"> </script> <style> Body {padding: 0; margen: 0; fondo: #f7fafc;} A {text-decoration: none;} .index-box {width: 300px; altura: auto; margin: 0 auto; margin-top: 40px;} .logo {fondos: url (imágenes/header/headernew4.png) no-repeat ;; videth: 350px; altura: 100px; margin: 0 auto} .title {font-size: 18px; text-eLode; #707171; font-weight: bold; margen: 30px auto;} .index-body {text-align: center;} .nav-sliders {posicion: relative; display: inline-block; margin-bottom: 20px;} .nav-sliders> a {font-tize: 20px; visual "Microsoft Yahei"; Color: #999; cursor: pointer; float: izquierda; $ ancho} .nav-sliders> a.active {color: #0f88eb;} .nav-sliders> span {posición: absoluta; altura: 2px; fondo: #0f88eb; display: block; izquierda: 5px; 50px; .Stage {posición: absoluto; izquierda: 0; arriba: 0; ancho: 100%; altura: 100%; fondo: #f7fafc;} .login-box {ancho: 300px;} .wrap {border: 1px sólido #d5d5d5; borde-radius: 5px; fondo: #ffff;} .wrap> div {posicion: posicion; .wrap> div> entrada {ancho: 95%; borde: none; relleno: 17px 2.5%; border-radio: 5px;} .wrap> div> etiqueta traducir (25px, 0);-moz-transform: traduce (25px, 0); opacidad: 0; visibilidad: oculto; cursor: text;} .wrap> div> etiqueta 1; visibilidad: visible;} .password {border-top: solid 1px #d5d5d5;} .code {right: 115px;} .name {right: 5px;} .loginName {right: 5px;} .loginpass {right: 5px;} .pass {right: 5px;} .pass .pass. .passagain{right:5px;} .button{height: 40px;background:#0f88eb;text-align: center;line-height: 40px;border-radius: 5px;margin-top: 25px;color: #fff;font-family: "Microsoft Yahei";cursor: pointer;} .remember{text-align: Izquierda; margen-top: 20px; Font-Family: "Microsoft Yahei"; color: #6666666;} .remember> a {float: right; cursor: pointer; color: #666666;} .other {text-align: izquierda; margin-top: 20px; font-Family: "Microsoft Yehei"; #6666666; Overflow: Hidden;} .Other> span {font-size: 14px; float: izquierda; margin-top: 2px; cursor: pointer;} .Other> div {float: izquierda; transición: todos los 1s facilates; -webkit-transition: todos 0.3s facilition; opacity: 0; transform: translatex (-20px; traduceX (-18px);-moz-transform: traduceX (-18px); visibilidad: hidden;} .other> div> a {margin-left: 20px; color: #6666666; font-size: 15px;} .Other> .hidden {transición: todas 1s-in; visual 1; transformar: traduceX (0);-webkit-transform: traduceX (0);-Moz-Transform: traduceX (0); Visibility: Visible;} .download {Border: sólido 1px #0f88eb; altura: 40px; line-height: 40px; border-radius: 5px; color: #0f88eb; font-font-family " Yahei "; margin-top: 50px; cursor: pointer; posición: relativo;} .download> .close {display: none;} .download .pic {display: none; posicion: absoluta; fondos: #fff; fondo: 78px; ancho: 310px;--10px; z-index. 0 0 8PX 0 RGBA (0,0,0, .15);} .Registered-Box {width: 300px; visualización: ninguno;} .Text {font-size: 14px; margin-top: 20px; font-family: "Microsoft Yahei"; color: #6666666;} .Text> a {color: #0f88eb;} .verification-Code {Posición: absoluto; correcto: 22px; top: 14px; font-marcily: "Microsofts. Yahei "; font-size: 18px; cursor: pointer;} #register: Hover {opacidad: 0.7;} #login: hover {opacidad: 0.7;} </ystye> </head> <body> <Div Style =" Z-Index: 9999; Posición: Relativo "> <Div> <hi1> </h1> <h2> </iv> <viv> <a id = "LoginButton"> Login </a> <a> registrar </a> <span> </span> </div> <div> <!-Inicio de inicio de inicio-> <Div> <Form id = "Loginform" Action = "$ {PageContext.Request.ContextPath}/j_spring_security_check" <input type = "correo electrónico" id = "usernoName" name = 'j_username' value = "" PlaceHolder = "UserName"> <Lelbel> Por favor ingrese el nombre de inicio de sesión (dirección de correo electrónico) </selebel> </div> <viv> <viñera type = "contraseña" id = "contraseña" name = 'j_password' planteholder = "contraseña"> <labinatel> contraseña </selebel> </biv> </div> <11 id = "Login"> Login </iv> <iv> <label> <input id = "recordme" name = "_ spring_security_remember_me" type = "checkbox"> Recuerde me: </selete> <a> No se puede iniciar sesión? </a> </div> </form> <div> <pan> = "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 </a> <a href = "javascript: volid (0);"> wechat </a> </div> </div> <div> <span style = "color: rojo"> $ {sessionscope.spring_security_last_exception.messagege} </span> </div> </div> <!-login final-> <!-registrar inicio-> <div> <viv> "method" Action = "RegisterUser.do"> <div> <div> <input type = "correo electrónico" name = "name" value = "" id = "name" placeholder = "nombre de usuario (correo electrónico)"> <label> Por favor, ingrese el nombre de usuario </selabel> </divs> <!-<div> <put type = "text" id = "teléfono" value = "" Tolderal = "número de móvil"> <Lelse> por favor ingrese su número de móvil </Etiqueta </etiquetado de la etiqueta </etiquetado>----HID>-HIDHO>------"Número de móvil =" Número de móvil "> <Lelich> por favor ingrese su número de móvil </Etiqueta </Etiqueta de móvil < <div> <input type = "contraseña" id = "passwor" name = "passwor" value = "" placeholder = "contraseña"> <label> Por favor, ingrese su contraseña </seleting> </div> <div> <divit type = "contraseña" id = "pssworagain" name = "" value = "" tytepla de lugar = "Ingrese la contraseña"> <Lel etiqueta> Ingrese su contraseña Again </Label> </div> <iv> <iv> <viV> type = "text" id = "código" name = "" maxLength = "6" value = "" PlaceHoldeer = "Código de verificación"> <Lelbel> Por favor, ingrese el código de verificación </etiqueta> <div id = "createCade"> </div> </div> </div> <divi = "registrar"> registrar </div> </form> </div> <!-final id = "Canvas" style = "Z-Index: 1000"> </Canvas> <Script> "Use Strict"; (function (H, D) {var g = typeof d === "String"? Docum.QuerySelector (D): D, F = G.getBoundingClientRect (), C = F.Width, L = F.Height, N = G.GetContext ("2d"), J = {x: C/2, Y: L//L/ 2, radio: 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, esto;}; función 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 ("dibujar", 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+")"; 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 [s [q]]; p.beginpath (); p.moveto (this.x, this.y); p.lineto (ux, uy); p.stroke ();}}} if (this._ismit) {this.move (); return;} if (this.timer ++ === this._moveframes) {this.setMove ();}}). Method ("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", 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;}). Method ("facilitar", function (q, p, s, r) {if ((q/= r/2) <1) {return s/2*Q*Q*Q+P;} -S/2*((-Q)*(Q-2) -1)+P;}). Método ("_ 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; para (; R <t; R ++) {para (S = 0; S <V; S ++) {U = nuevo 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 ();} función 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-f.top;},},}, h. dDeventListener ("resize", function () {Caf (b); a = []; f = g.getBoundingClientRect (); g.width = c = f.width; g.height = l = f.height; m ();}, falso); m ();}) (this, documento. </script> <script> var código; // Define un código de verificación global $ (function () {jcpublic.register (); jcpublic.tab (); jcppublic.login ();/ * jcpublic.download (); */jcppublic.createcode (); jcpublic.clickcode (); $ (". wrap> titing"). $ (this) .css ({"esquema": "ninguno"}); }); var jcpublic = {registro: function () {// registrar var currentThis = this; // objeto actual $ ("registro"). on ("click", function () {var $ this = $ (this); var name = $ ("#name"). val (); // name var registroNetNeMe.paper.getElementById ("name"); var contraseña = $ ("#passWor"). Val (); $ ("#pssworagain"). val (); || name == "NULL") {$ this.prev (". dirección "). addClass (" mover "); return false;} else if (passwor ==" "|| contraseña ==" indefinido "|| contraseña == null) {$ this.prev (". wrap "). find (". pass "). addClass (" mover "); return false;} si (passWoragain ==" "|| PasswordAgin ==" echafined "Únocir" "Únete" "Únete". contraseña == null) {$ this.prev (". wrap"). Find (". Passagain"). AddClass ("Move"); devolver falso; } else if (passworagain == "" || contraseña == "indefinido" || contraseña == null) {$ this.prev (". wrap"). find (". passagain"). addClass ("mover"); devolver falso; } else if (passworagain! = contraseña) {$ this.prev (". wrap"). Find (". Passagain"). Html ("Por favor, asegúrese de que la contraseña ingresada sea consistente"). AddClass ("Move"); devolver falso; } else if (código! == código) {$ this.prev (". wrap"). find (". código"). html ("el código de verificación es incorrecto"). addClass ("moverse"); return currentThis.createCode (); // Actualice el código de verificación y vuelva a entrar} else {// Enviar la aplicación de usuario para agregar $ .AJAX ({type: "post", url: "registreuser.do", data: {"nombre": nombre, "contraseña": passwor}, tipo de datos: "json", error: function (xmlhttprequest, textate, textatat, textatat, textatus, textatus, textatus, textatus. ERRORTHROWN) {alerta ("Error:"+xmlhttprequest.status+",,,"+textStatus); $ ("#RegisterForm") [0] .Reset (); /* $ ("#RegisterForm"). AJAXSUBMIT (function (Message) {Alert (Message.MessageString);}); */}}); }, Tab: function () {// Switch Registration and Sogin $ (". Nav-Sliders> A"). ON ("Click", Function () {$ (this) .addclass ("Active"). SIBLINGS (). $ (this) .index (); // index $ (". on"). Stop (True, True) .animate ({"izquierda": $ ancho*$ index+5+"px"}, 300); }); }, login: function () {$ ("#login"). on ("hacer clic", function () {var $ this = $ (this); var userName = $ ("#userName"). val (); var contraseña = $ ("#contraseña"). val (); var checkLoginName (username.length == 0)) {// no al mismo tiempo $ this.prev (". wrap"). Find ("Label"). AddClass ("Move"); $ this.prev (". Wrap"). Find (". LoginName"). AddClass ("Move"); == "" || }, descargar: function () {$ (". download"). on ("hacer clic", function () {$ (this) .children (". pic"). toggle (300);}); }, createCode: function () {// Código de verificación 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', '; código = ""; var codeLength = 4; // La longitud del código de verificación para (var i = 0; i <codeLength; i ++) {var index = math.floor (math.random ()*selectchar.length); // código aleatorio+= selectar [index]; //$(("#CreateCade").html(code)} return $ ("#createCade"). html (código); }, ClickCode: function () {// Código de verificación de conmutación var $ this = this; $ ("#createCade"). on ("hacer clic", function () {return $ this.createCode ();}); }}; </script> </body> </html>Lo anterior es el código completo de desarrollo web de Java que imita la página de inicio de Zhihu introducida por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!