Langkah pertama adalah menunjukkan kode verifikasi. Saat kami menekan lisensi usaha, biarkan memunculkan kotak pop-up. Kode verifikasi di atas kotak pop-up, seperti yang ditunjukkan pada Gambar 1:
(Gambar 1)
Gaya bingkai pop-up ditunjukkan pada Gambar 2:
(Gambar 2)
Kita perlu memverifikasi nilai kode verifikasi untuk menentukan apakah kode verifikasi dimasukkan dengan benar. Ketika input tidak benar, kami meminta pesan kesalahan, dan pesan prompt ditampilkan pada Gambar 3:
(Gambar 3)
Jika halaman diverifikasi dengan benar, ini tidak akan meminta pesan kesalahan dan akan disesuaikan ke halaman target kami, seperti yang ditunjukkan pada Gambar 4:
(Gambar 4)
Deskripsi Lapisan Routing
/** Supplier Store - Shop Introduction*/ //1-Set in the routing layer, jump to the /buyer/vshop/info.ejs page in the root directory for jump, and then call the interface router.get('/buyer/vshop/info', function(req, res, next) { //2-Calling the interface to get data async.parallel({ verifycode : function (fn) {// 3-panggilan antarmuka untuk mendapatkan alamat IP mesin lokal var args = {userip: tools.getClientIp (req)}; VerifikasiCodeHelper.CreateVCode (args, function (err, result) {if (err) {console.log (err);} else {fn (null, {captcha: result.data.queryUrl, csnonce: result.csnonce || 0})} {{{{{{{{{{{{{{{{{{); res.end); res.render ("pembeli/vshop/gambarkan", {judul: srcbizType == 1? result.getDetail.name: "Shop Pendahuluan", pagename: "vshopinfo", captcha: capsnon}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} ada: }); }); });Deskripsi Lapisan EJS
< %- termasuk ../../Header %> // 1-get csnonce yang dirutekan <script> app.newlogin = {csnonce: '< %- csnonce %>',}; <tautan href = "/css/vshop/gambaran.css? v = < %= config.version %>" rel = "stylesheet"/> <style id = "dynamic"> </style> <verv> </div> <ver> <img src = "/imgs/vshop/verifikasi-code-back.png" id = "btn_sku_dialog_close"> </span> <li> Harap masukkan kode verifikasi grafis berikut </li> <li> <img id = "j_btnverifypiccodetencen" src = "" style = "tinggi: 30px; margin: 0 15px;" /> </li> <li> <div> <input type = "text" maxlength = "6"> </div> </li> </ul> <div> <input type = "tombol" value = "kirim"> </div> </div> <div> <input type = "value =" kirim "> </Div> </Div> <input-roole = Tombol" value = "Submit"> </Div> </Div> DATA-ROPE = TOLED = Tombol "Nilai =" Submit "> </Div> </Div> DATA-ROLE = TYPED = Tombol" Sertakan ./widget_vshop%> </header> <section data-role = "body"> <ver> <ul> <li> <div> Lokasi </div> <%- detail. Kecepatan </div> <div> <%- detail.score.express%> </div> </li> <li> <ver> Sikap layanan </div> <viv> <%- detail.score.service%> </div> </li> <li> <ver> Deskripsi Konsisten </Div> <v div> <%- detail.score.describe% <%if (detail.shoptypeIndex == 1 || detail.shoptypeIndex == 2 || detail.shoptypeIndex == 3) {var bg = '/imgs/vshop/tip.png',color='#39dda5'} lainnya {var bg = '/imgs/vshop/tip3.png',color ='#59aaff '}%> <li> <div> sertifikasi </div> <ver> <span style = "latar belakang: url (<%-bg%>) meninggalkan 1px no-repeat; latar belakang-ukuran: 14px 12px;"> <i style = "latar belakang: latar belakang-–szery: 14px 12px;"> <i style = "latar belakang: latar belakang-–sze: 14px 12px;"> <i style = "latar belakang: latar belakang-–sh latar belakang: 14px 12px;"> <i style = "latar belakang: latar belakang-%-%-%-%-%-%-%-%-%-%-%-14px 12px;"> %> </i> </span> </div> </li> </ul> <ul> <li> <a href = "Tel: <%-detail.phone%>"> Telepon Layanan </a> </li> <li> <a Data-Aid = "<%-Aid%%>"> Layanan Pelanggan Online </a> </li> <a Li> <a!-<%hr = hr = "> Layanan Pelanggan Online </a> </Li> <a> <a!-<%hr = hr ="> Layanan Pelanggan Online </a> </li> <a> <li> <a hr = hr = "> LAYANAN ONLINE </a> </li> <li> <li> <a! aid%>">--> <a href="#"> <span >Business License</span> <label>View<span></span></label> </a> </li> </ul> </div> <%- include ./footer %> <div id="vue_hooker"> <child-nav></child-nav> <%- include ../../widget_navBtns %> </div> </siction> </div> // 2-get captcha untuk routed <script type = "text/javaScript" src = "< %= captcha %>"> </script> // 3-introduce file JS terkait <ript> seajs.use ("js_cmd/vshop/home-cmd"); </script> < %- termasuk ../../footer %>Deskripsi Lapisan JS
/** Ini adalah file publik, beranda vshop & semua produk vshop dibagikan*/// 1-define (fungsi (membutuhkan, ekspor, modul) {var $ = membutuhkan ("./ Main-cmd-cmd"), myDialog = membutuhkan ("lib_cmd/mydialog-cmd"), myDialog = "lib_cmd/mydialog-cmd"), mydialog = "js lib_cmd/mydialog-cmd"), myDialog = "js lib_cmd/mydialog-cmd"), myDialog = "js lib_cmd/mydialog-cmd"), myDialog = "jsMd/cmd"), lib_cmd/myDialog-cmd "), MAIN require("./tool-cmd"), fxzTool = require("./fxzTool-cmd"), Vue = require("lib_cmd/vue-cmd"), widget_navBtns = require("js_cmd/navBtns-cmd"), $eles = {}, eles = {}; //2-Vue instantiation var vm = new Vue ({data: {}, metode: {}}); $ ( $ ('. Arrow_mask'). Hide (); if ($ ('. Verifikasi'). Panjang! = 0) {$ ('. $ ('J_BTNVERVERIFYPICCODETENCENT'). ON ('Click', function () {tsocapobj.refresh ();}); Tsocapobj.refresh (); (ret_json.errorcode! = 0) {$ (". BTN_MES_TEXT"). Val (""); class = 'verifikasi-kode'> Harap masukkan kode verifikasi yang benar </div> ");} $ ('. BTN_MES_TEXT'). Blur (function () {$ ('. BTN_MES_TEXT'). Teks (");});} else {window.location = "/pembeli/vshop/vshop/vshop; }});}} // 6- Eksekusi fungsi inisialisasi halaman $ (function () {initpage ();Deskripsi Lapisan CCS
@Import URL (Common.CSS); .div-section-info .info4 {padding: 0} .div-section-info .info4 li {padding: 11px 14px; Line-Height: 20px; Border-Bottom: 1px solid #e6e6e6; } .div-section-info .info4 li a {color: #333; Tampilan: Blok; } .div-section-info .info4 li a.tel {latar belakang: url (/imgs/vshop/callandmsg.png) no-rePeat; Ukuran latar belakang: 20px 60px; Latar belakang posisi: benar 0; } .div-section-info .info4 li A.webim {latar belakang: url (/imgs/vshop/callandmsg.png) no-rePeat; Ukuran latar belakang: 20px 60px; posisi latar belakang: kanan -30px; } .div-section-info .info4 li label {display: block; float: benar; } .div-section-info .info4 li label span {display: block; Lebar: 12px; Tinggi: 12px; Border-Right: 1px Solid #666; Border-Bottom: 1px Solid #666; -webkit-transform: rotate (-45deg); float: benar; margin-top: 4px; } .arrow_mask {position: diperbaiki; TOP: 0; Kiri: 0; Bawah: 0; Kanan: 0; z-index: 101; Tampilan: Tidak Ada; Latar Belakang: Hitam; Opacity: 0.7; } .arrow {lebar: 250px; Tinggi: 226px; Latar Belakang-Color: #FFFFF; Posisi: diperbaiki; Atas: 50%; Kiri: 50%; z-index: 102; -webkit-transform: translate (-50%, -50%); -Moz-Transform: translate (-50%, -50%); -MS-Transform: translate (-50%, -50%); -o-transform: translate (-50%, -50%); Transform: Translate (-50%, -50%); Border-Radius: 10px; Tampilan: Tidak Ada; } .arrow-mess li: nth-of-type (1) {text-align: center; margin-bottom: 8px; Ukuran font: 14px; Warna: #333333; } .arrow-mess li: nth-of-type (2) {text-align: center; margin-bottom: 10px; } .arrow-mess li: input nth-of-type (3) {width: 100%; Tinggi: 30px; Perbatasan: 1px Solid #979797; Teks-Align: tengah; Border-Radius: 3px; Font-Family: Pingfangsc-Regular; font-size: 16px; Warna: #333333; spasi surat: 0px; } .btn_mes {margin-bottom: 15px; Lebar: 100%; Padding-left: 48px; Padding-Right: 48px; Posisi: kerabat; } .btn_mes2 {lebar: 100%; Padding-left: 70px; Padding-Right: 70px; /* posisi: relatif; */ Posisi: Absolute; Bawah: 0px; margin-bottom: 10px; } .license-submit {width: 100%; Tinggi: 44px; Latar Belakang: #FF534C; Perbatasan: 1px Solid #FF534C; Ukuran font: 14px; Border-Radius: 4px; Warna: #FFFFFF; } .sku-close {background: url (/imgs/vshop/verification-code-del.png) no-rePeat benar; -webkit-background-size: 25px auto; Tampilan: blok inline; Lebar: 26px; Tinggi: 26px; Posisi: Absolute; Kanan: 0px; Atas: 0px; margin -kanan: -13px; margin -top: -13px; } .verifikasi-kode {z-index: 102; Warna: #ffaa00; Posisi: Absolute; font-size: 12px; Atas: 4px; } .verifikasi-kode-back {width: 100%; Posisi: Absolute; Tinggi: 46px; } .arrow div: nth-of-type (1) {position: relatif; } .arrow-mess {margin-top: 52px; }Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.