ขั้นตอนแรกคือการแสดงรหัสการยืนยัน เมื่อเรากดใบอนุญาตธุรกิจให้มันปรากฏขึ้นในกล่องป๊อปอัพ รหัสการตรวจสอบอยู่เหนือกล่องป๊อปอัพดังแสดงในรูปที่ 1:
(รูปภาพ 1)
รูปแบบของเฟรมป๊อปอัพแสดงในรูปที่ 2:
(รูปที่ 2)
เราจำเป็นต้องตรวจสอบค่าของรหัสการตรวจสอบเพื่อตรวจสอบว่ารหัสการตรวจสอบถูกป้อนอย่างถูกต้องหรือไม่ เมื่ออินพุตไม่ถูกต้องเราจะแจ้งข้อความแสดงข้อผิดพลาดและข้อความพรอมต์จะแสดงในรูปที่ 3:
(รูปที่ 3)
หากหน้านั้นได้รับการตรวจสอบอย่างถูกต้องสิ่งนี้จะไม่แจ้งข้อความแสดงข้อผิดพลาดและจะถูกปรับให้เข้ากับหน้าเป้าหมายของเราดังแสดงในรูปที่ 4:
(รูปที่ 4)
คำอธิบายเลเยอร์เส้นทาง
/** ร้านขายของซัพพลายเออร์-สินค้าแนะนำ*// 1-set ในเลเยอร์การกำหนดเส้นทางข้ามไปที่/buyer/vshop/info.ejs หน้าในไดเรกทอรีรากสำหรับการกระโดดจากนั้นเรียกเราเตอร์อินเตอร์เฟส ('/ผู้ซื้อ/vshop/ข้อมูล' : ฟังก์ชั่น (FN) {// 3-calling อินเทอร์เฟซเพื่อรับที่อยู่ IP ของเครื่อง var args = {userip: tools.getClientip (REQ)}; VerifyCodeHelper.CreateVode (args, ฟังก์ชั่น (err, ผลลัพธ์) {ถ้า (err) {console.log (err);} else {fn (null, {captcha: result.data.queryurl, csnonce: result.csnonce || 0})}}}; Res.end (Err); res.render ("ผู้ซื้อ/vshop/อธิบาย", {title: srcBizType == 1? result.getDetail.name: "การแนะนำร้านค้า", pagename: "vshopinfo", captcha: result.VerifyCode.CAPTCHA, // CODIFICATION - - -คำอธิบายเลเยอร์ EJS
< %- รวม ../../header %> // 1-get csnonce <Script> App.newLogin = {CSNONCE: '< %- CSNONCE %>',}; <link href = "/css/vshop/design.css? v = < %= config.version %>" rel = "stylesheet"/> <style id = "dynamic"> </style> <div> </div> <div> <img src = "/imgs/vshop id = "btn_sku_dialog_close"> </span> <li> โปรดป้อนรหัสการตรวจสอบกราฟิกต่อไปนี้ </li> <li> <img id = "j_btnverifypiccodetencent" src = "" style = "ความสูง: 30px; /> </li> <li> <div> <อินพุต type = "text" maxlength = "6"> </div> </li> </ul> <div> <อินพุต type = "ปุ่ม" value = "ส่ง"> </div> </div> <div> <อินพุตประเภท = " ./widget_vshop%> </header> <ส่วน data-Role = "body"> <div> <ul> <li> <li> <lic> ตำแหน่ง </div> <%- รายละเอียดที่อยู่%> </v> </li> <li> <li> <li> ความเร็ว </div> <div> <%- detail.score.express%> </div> </li> <li> <li> <div> ทัศนคติการบริการ </div> <div> <%- รายละเอียด. <%ถ้า (detail.shopTypeIndex == 1 || detail.ShopTypeIndex == 2 || detail.ShopTypeIndex == 3) {var bg = '/imgs/vshop/tip.png', color='#39dda5' '/imgs/vshop/tip3.png', color ='#59aaff '}%> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> %> </i> </span> </div> </li></ul> <ul> <li> <a href = "โทรศัพท์: <%-detail.phone%>"> โทรศัพท์บริการ </a> </li> <li> <a data-aid = "<%-ช่วยเหลือ%> AID%> ">-> <a href ="#"> <pan> ใบอนุญาตธุรกิจ </span> <dabled> ดู <span> </span> </label> </a> </li> </ul> </div> <%-รวม./footer%> <div id =" vue_hooker " </section> </div> // 2- รับ captcha สำหรับการกำหนดเส้นทาง <script type = "text/javascript" src = "< %= captcha %>"> </script> // 3-introduce ไฟล์ JS ที่เกี่ยวข้อง </script> < %- รวม ../../footer %>คำอธิบายชั้น JS
/** นี่คือไฟล์สาธารณะหน้าแรกของ VSHOP และผลิตภัณฑ์ VSHOP ทั้งหมดที่ใช้ร่วมกัน*/// 1-define (ฟังก์ชั่น (ต้องการ, การส่งออก, โมดูล) {var $ = ต้องการ ("./ top-suction-cmd"), myDialog = ต้องการ ("lib_cmd/mydialog-cmd") ต้องการ ("./ tool-cmd"), fxztool = require ("./ fxztool-cmd"), vue = reghed ("lib_cmd/vue-cmd"), widget_navbtns = reghed ("js_cmd/navbtns-cmd") Vue ({data: {}, วิธีการ: {}}); $ ('. btn_mes_text'). val (""); $ ('. Arrow_mask'). ซ่อน (); if ($ ('. การตรวจสอบ-รหัส'). ความยาว! $ ('#j_btnverifypiccodetencent'). on ('คลิก', function () {tsocapobj.refresh ();}); tsocapobj.refresh (); app.verifypicCode = function (fn) {// รับอินพุตผู้ใช้ var ans = $ (". btn_mes_text"). val (); (ret_json.errorcode! = 0) {$ (". btn_mes_text"). val (""); class = 'Verification-Code'> โปรดป้อนรหัสการตรวจสอบที่ถูกต้อง </div> ");} $ ('. btn_mes_text'). blur (ฟังก์ชั่น () {$ ('. btn_mes_text') ข้อความ (" ");}); });คำอธิบายเลเยอร์ CCS
@import url (common.css); .div-section-info .info4 {padding: 0} .div-section-info .info4 li {padding: 11px 14px; ความสูงของสาย: 20px; ขอบด้านล่าง: 1px Solid #E6E6E6; } .div-section-info .info4 li a {color: #333; แสดง: บล็อก; } .div-section-info .info4 li a.tel {พื้นหลัง: url (/imgs/vshop/callandmsg.png) ไม่ต้องทำซ้ำ; ขนาดพื้นหลัง: 20px 60px; ตำแหน่งพื้นหลัง: ขวา 0; } .div-section-info .info4 li a.webim {พื้นหลัง: url (/imgs/vshop/callandmsg.png) ไม่ต้องทำซ้ำ; ขนาดพื้นหลัง: 20px 60px; ตำแหน่งพื้นหลัง: ขวา -30px; } .div-section-info .info4 li a label {display: block; ลอย: ขวา; } .div-section-info .info4 li a span label {display: block; ความกว้าง: 12px; ความสูง: 12px; ชายแดนขวา: 1px Solid #666; ขอบด้านล่าง: 1px Solid #666; -webkit-transform: หมุน (-45Deg); ลอย: ขวา; ระยะขอบด้านบน: 4px; } .ARROW_MASK {ตำแหน่ง: แก้ไข; ด้านบน: 0; ซ้าย: 0; ด้านล่าง: 0; ขวา: 0; z-index: 101; แสดง: ไม่มี; ความเป็นมา: ดำ; ความทึบ: 0.7; } .ARROW {WIDTH: 250PX; ความสูง: 226px; พื้นหลังสี: #FFFFF; ตำแหน่ง: แก้ไข; ด้านบน: 50%; ซ้าย: 50%; z-index: 102; -webkit-transform: แปล (-50%, -50%); -moz-transform: แปล (-50%, -50%); -ms-transform: แปล (-50%, -50%); -O-transform: แปล (-50%, -50%); แปลง: แปล (-50%, -50%); แนวชายแดน: 10px; แสดง: ไม่มี; } .ARROW-MESS LI: NTH-OF-TYPE (1) {TEXT-ALIGN: CENTER; มาร์จิ้น-ก้น: 8px; ขนาดตัวอักษร: 14px; สี: #333333; } .ARROW-MESS LI: NTH-OF-TYPE (2) {TEXT-ALIGN: CENTER; มาร์จิ้น-ก้น: 10px; } .ARROW-MESS LI: NTH-OF-TYPE (3) อินพุต {WIDTH: 100%; ความสูง: 30px; ชายแดน: 1px Solid #979797; TEXT-ALIGN: CENTER; แนวชายแดน: 3px; FONT-FAMILY: PINGFANGSC-Regular; ขนาดตัวอักษร: 16px; สี: #333333; ระยะห่างจดหมาย: 0px; } .BTN_MES {มาร์จิ้น-ด้านล่าง: 15px; ความกว้าง: 100%; Padding-Left: 48px; Padding-Right: 48px; ตำแหน่ง: ญาติ; } .BTN_MES2 {ความกว้าง: 100%; Padding-Left: 70px; Padding-Right: 70px; /* ตำแหน่ง: ญาติ; */ ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0px; มาร์จิ้น-ก้น: 10px; } .license-submit {width: 100%; ความสูง: 44px; ความเป็นมา: #FF534C; ชายแดน: 1px Solid #FF534C; ขนาดตัวอักษร: 14px; แนวชายแดน: 4px; สี: #ffffff; } .sku-close {พื้นหลัง: url (/imgs/vshop/verification-code-del.png) ไม่ซ้ำแล้วซ้ำอีก; -webkit-background-size: 25px auto; แสดง: Inline-Block; ความกว้าง: 26px; ความสูง: 26px; ตำแหน่ง: สัมบูรณ์; ขวา: 0px; ด้านบน: 0px; มาร์จิ้น -ขวา: -13px; ระยะขอบด้านบน: -13px; } .Verification-Code {z-index: 102; สี: #ffaa00; ตำแหน่ง: สัมบูรณ์; ขนาดตัวอักษร: 12px; ด้านบน: 4px; } .Verification-Code-Back {Width: 100%; ตำแหน่ง: สัมบูรณ์; ความสูง: 46px; } .ARROW DIV: NTH-OF-TYPE (1) {ตำแหน่ง: ญาติ; } .ARROW-MESS {MARGIN-TOP: 52PX; -ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น