الخطوة الأولى هي إظهار رمز التحقق. عندما نضغط على رخصة العمل ، اتركه يطفو على تشغيل صندوق منبثق. رمز التحقق أعلى من مربع المنبثقة ، كما هو موضح في الشكل 1:
(الصورة 1)
يظهر نمط الإطار المنبثق في الشكل 2:
(الشكل 2)
نحتاج إلى التحقق من قيمة رمز التحقق لتحديد ما إذا كان يتم إدخال رمز التحقق بشكل صحيح. عندما يكون الإدخال غير صحيح ، نطلب من رسالة خطأ ، ويتم عرض رسالة المطالبة في الشكل 3:
(الشكل 3)
إذا تم التحقق من الصفحة بشكل صحيح ، فلن يدفع هذا إلى رسالة خطأ وسيتم ضبطها على صفحة الهدف لدينا ، كما هو موضح في الشكل 4:
(الشكل 4)
وصف طبقة التوجيه
/** متجر الموردين-مقدمة متجر*/// 1 في طبقة التوجيه ، انقلب إلى /buyer/vshop/info.ejs صفحة في دليل الجذر للقفز ، ثم اتصل على router.get. : Function (fn) {// 3-call intevation للحصول على عنوان IP للآلة المحلية = {userip: tools.getClientip (req)} ؛ VerifyCodeHelper.CreatevCode (args ، الوظيفة (err ، النتيجة) {if (err) {console.log (err) ؛} آخر {fn (null ، {captcha: result.data.queryurl ، csnonce: result.csnonce || 0}) RES.END (error) ؛ Res.Render ("المشتري/vshop/وصف" ، {title: srcbiztype == 1؟ result.getDetail.name: }) ؛ }) ؛ }) ؛وصف طبقة EJS
<٪- include ../../header ٪> // 1-get the csnonce <script> app.newlogin = {csnonce: '<٪- csnonce ٪>' ،} ؛ <link href = "/css/vshop/prescons.css؟ v = <٪ = config.version ٪>" rel = "stylesheet"/> <style id = "dynamic"> </style> <div> </viv> <div> <img src = "/imgs/vshop/verification-code-back.png id = "btn_sku_dialog_close"> </span> <li> الرجاء إدخال رمز التحقق من الرسوم التالي </li> <li> <img id = "j_btnverifycodetencent" src = "" style = "الارتفاع: 30px ؛ margin: 0 15px ؛" /> </li> <li> <viv> <input type = "text" maxLength = "6"> </viv> </li></ul> <viv> <input type = "button" value = "submit"> </viv> </div> <div> <input type = "button" value = "submit"> ./widget_vshop ٪> </header> <section data-role = "body"> <viv> <ul> <li> <iv> الموقع </div> <٪- التفاصيل. السرعة </div> <viv> <٪- التفاصيل <٪ if (detail.shopTypeIndex == 1 || detail.shoptypeindex == 2 || detail.shoptypeindex == 3) {var bg = '/imgs '/imgs/vshop/tip3 ٪> </i> </span> </viv> </li></ul> <ul> <li> <a href = "tel: <٪-تفاصيل. ٪>"> هاتف الخدمة </a> </li> <li> <a data-aid = "<٪-Aid ٪>"> خدمة العملاء عبر الإنترنت </a> </li> <!- AID ٪> ">-> <a href ="#"> <span> ترخيص العمل </span> <label> عرض <span> </span> </sable> </a> </li> </ul> </viv> <sild-include ./footer ٪> <div id =" vue_hooker "> </section> </viv> // 2 احصل على captcha لـ Turple <script type = "text/javaScript" src = "<٪ = captcha ٪>"> </script> // 3-introduce files JS <script> seajs.use ("js_cmd/vshop/home-cmd") ؛ </script> <٪- تضمين ../../footer ٪>وصف طبقة JS
/** هذا ملف عام ، يتم مشاركة صفحة VSHOP الرئيسية وجميع منتجات VSHOP*//1-DEFINE (الوظيفة (الطلب ، الصادرات ، الوحدة النمطية) {var $ = require (. يتطلب (". vue ({data: {} ، {}}) $ (. btn_mes_text ') $ (. arrow_mask). if ($ (. $ (#j_btnverifycodetencent ') app.VerifyCode = function (fn) {// الحصول على إدخال المستخدم var ans = $ (". btn_mes_text"). val () ؛ $ (". btn_mes_text"). الكود </div> ") ؛} $ ('. btn_mes_text'). Blur (function () {$ (' وظيفة تهيئة الصفحة $ (function () {initPage () ؛ ترخيص () ؛ Verify_InitPage () ؛}) ؛وصف طبقة CCS
IMPORT url (common.css) ؛ . رفع الخط: 20 بكسل ؛ Border-Bottom: 1px Solid #e6e6e6 ؛ }. العرض: كتلة ؛ }. حجم الخلفية: 20px 60px ؛ خلفية الوضع: الحق 0 ؛ }. حجم الخلفية: 20px 60px ؛ خلفية الموضع: اليمين -30 بكسل ؛ }. تعويم: صحيح. }. العرض: 12 بكسل ؛ الارتفاع: 12 بكسل ؛ اليمين الحدودي: 1 بكسل Solid #666 ؛ Border-Bottom: 1px Solid #666 ؛ -webkit-transform: تدوير (-45deg) ؛ تعويم: صحيح. الهامش: 4 بكسل ؛ } .arrow_mask {الموضع: ثابت ؛ أعلى: 0 ؛ اليسار: 0 ؛ أسفل: 0 ؛ اليمين: 0 ؛ Z-index: 101 ؛ العرض: لا شيء ؛ الخلفية: أسود. العتامة: 0.7 ؛ } .arrow {width: 250px ؛ الارتفاع: 226 بكسل ؛ خلفية اللون: #fffff ؛ الموقف: ثابت ؛ أعلى: 50 ٪ ؛ اليسار: 50 ٪ ؛ Z-index: 102 ؛ -webkit-transform: ترجمة (-50 ٪ ، -50 ٪) ؛ -moz-transform: Translate (-50 ٪ ، -50 ٪) ؛ -MS-transform: ترجمة (-50 ٪ ، -50 ٪) ؛ -O التحول: ترجمة (-50 ٪ ، -50 ٪) ؛ التحويل: ترجمة (-50 ٪ ، -50 ٪) ؛ الحدود الحدودية: 10px ؛ العرض: لا شيء ؛ } .arrow-mess li: nth-type (1) {text-align: center ؛ هامش القاع: 8px ؛ حجم الخط: 14px ؛ اللون: #333333 ؛ } .arrow-mess li: nth-type (2) {text-align: center ؛ هامش القاع: 10 بكسل ؛ . الارتفاع: 30 بكسل ؛ الحدود: 1 بكسل Solid #979797 ؛ محاذاة النص: المركز ؛ الحدود الحدودية: 3px ؛ Font-Family: Pingfangsc-regular ؛ حجم الخط: 16 بكسل ؛ اللون: #333333 ؛ تباعد الرسائل: 0px ؛ } .btn_mes {margin-bottom: 15px ؛ العرض: 100 ٪ ؛ Padding-Left: 48px ؛ حشو اليمين: 48 بكسل ؛ الموقف: قريب } .btn_mes2 {width: 100 ٪ ؛ Padding-Left: 70px ؛ حشو اليمين: 70 بكسل ؛ /* الموقف: قريب ؛ */ الموقف: مطلق ؛ أسفل: 0px ؛ هامش القاع: 10 بكسل ؛ } .license-submit {العرض: 100 ٪ ؛ الارتفاع: 44 بكسل ؛ الخلفية: #ff534c ؛ الحدود: 1 بكسل الصلبة #ff534c ؛ حجم الخط: 14px ؛ الحدود الحدودية: 4px ؛ اللون: #ffffff ؛ . -webkit-background-size: 25px Auto ؛ العرض: كتلة مضمنة. العرض: 26px ؛ الارتفاع: 26 بكسل ؛ الموقف: مطلق ؛ اليمين: 0px ؛ أعلى: 0px ؛ يمين الهامش: -13px ؛ الهامش: -13px ؛ }. اللون: #ffaa00 ؛ الموقف: مطلق ؛ حجم الخط: 12 بكسل ؛ أعلى: 4 بكسل ؛ }. الموقف: مطلق ؛ الارتفاع: 46 بكسل ؛ } .arrow div: nth-type (1) {الموضع: النسبية ؛ } .arrow-mess {margin-top: 52px ؛ }ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.