asp.net通用Web2.0仿淘宝脚本验证组件
2024-04-02 04:22:10
最近在做一个比较大型的电子商务网站，项目组内一直没人去把通用脚本验证封装出来，每个组员都是在开发页面时自己写脚本验证，这样搞不光开发效率低而且维护性极差，解决方式就是需要封装出通用的脚本验证组件，传统的组件都是很丑的，这里介绍一种既实用又漂亮的组件FieldVerify，先看一下效果图：
看完效果图之后，我们可以讲一下这一块的思路了，传统模式（很多项目都在用的模式）都是自己写js验证代码，在鼠标定位到输入框时捕获onfocus事件，在这个事件里加入友好提示，例如“请输入用户信息！”，鼠标移出输入框时捕获失去焦点事件onblur,在这个事件里对此控件进行脚本验证，像判空、长度、格式等等，这种模式的缺点是：每个页面都要自己的验证js代码，验证方式五花八门，每个页面输出给客户的也是不一致的效果，可维护性、扩展性极差，而且每个人水平都一样，容易产生大量bug；通用模式就是为了解决这一点，为了增强代码的可维护性、可扩展性，项目小组调用的都是统一的脚本验证组件，反馈给客户的界面也是一致的，具体怎么做呢？其实开发思路和模式1是差不多的，只不过是把被验证控件的一些通用的方法、代码、样式等抽取出来了，事件还是那两个，只不过调用这两个事件的js方法是通用的，通过传递不同的参数来去封装，还是把代码贴出来吧，没有代码的描述都是空洞的，JS文件代码如下：
/*
* 功能：Web 2.0通用脚本验证，友好人机交互界面，参考demo页
* 作者：李蒙强* 日期：2012.07.08
*/
function GetElement(i) {return document.getElementById(i)
}
function killErrors()
{ return true; }
window.onerror = killErrors;function parsestr(str) {if (isNaN(parseFloat(str)))return str;elsereturn parseFloat(str);
}
// 输出正确或错误提示
function addspan(Obj, msg) {var color;if (msg == "ok") {color = "green";SetResult("right", "", "dv" + Obj.id, Obj.id, "dr" + Obj.id);}else color = "red";if (GetElement("E_" + Obj.name)) {if (msg != "ok") {SetResult("error", msg, "dv" + Obj.id, Obj.id, "dr" + Obj.id);}}else {if (msg != "ok") {SetResult("error", msg, "dv" + Obj.id, Obj.id, "dr" + Obj.id);}}
}
// 验证控件输入
function CkValidate(Obj) {var msg = "";var msg1 = "";Obj = GetElement(Obj.name);var t = Obj.v_title.split('~|~');if (t.length > 3) {switch (t[3]) {case "hlg": if (GetValue(Obj).length < t[4] || GetValue(Obj).length > t[5]) msg = "输入字符数应在" + t[4] + "--" + t[5] + "之间";break; case "mxn": if (parsestr(GetValue(Obj)) < t[4] || parsestr(GetValue(Obj)) > t[5]) msg = "输入数值应在" + t[4] + "--" + t[5] + "之间";break; case "rep": if (GetValue(Obj) != GetValue(GetElement(t[4]))) msg = "两次输入密码不一至"; msg1 = msg; break;}} if (t.length > 2) { if (!RegExp(t[2], "i").test(String(GetValue(Obj)))) msg = t[1]; } if (t.length > 0) {if (!/.+/.test(GetValue(Obj)) && t[0] == "必填") msg = "不能为空！";if (!/.+/.test(GetValue(Obj)) && t[0] == "选填") msg = "";}if (GetElement(t[4])) if (msg) { addspan(Obj, msg); addspan(GetElement(t[4]), msg1); }else { addspan(Obj, "ok"); addspan(GetElement(t[4]), "ok"); } else if (msg){ addspan(Obj, msg); } else { addspan(Obj, "ok"); } return msg;
}
function GetValue(el) {var sType = el.type;switch (sType) {case "text": case "hidden":case "password": case "file":case "textarea": return el.value;case "checkbox":case "radio": return GetValueChoose(el);case "select-one":case "select-multiple":return GetValueSel(el);}function GetValueChoose(el) {var sValue = "";var tmpels = document.getElementsByName(el.name);for (var i = 0; i < tmpels.length; i++) {if (tmpels[i].checked) { sValue += "0"; }} return sValue;}function GetValueSel(el) {var sValue = "";for (var i = 0; i < el.options.length; i++) {if (el.options[i].selected && el.options[i].value != ""){ sValue += "0"; }} return sValue;}
}
// 验证整个表单输入域合法性
function CheckForm(oForm) {var els = oForm.elements;var msg = "";for (var i = 0; i < els.length; i++) {if (els[i].v_title) {msg = Ck(els[i]);if (msg) {break;}}}if (!msg) oForm.submit();
}//检测用户名是否合法
function CheckUserName(userName, divId, controlId, rowId) {userName = removeAllSpace(userName);if (userName.toString().length > 0) {$.ajax({type: 'POST',url: '/Controls/Register/CS/QueryAjax.ashx',data: 'name=Register.Simple.ascx&userName=' + escape(userName),cache: false,complete: function(msg, textStatus) {var data = msg.responseText.split("|");if (data[0] == "true") {SetResult("right", data[1], divId, controlId, rowId);}else {SetResult("error", data[1], divId, controlId, rowId);}}});}else {SetResult("error", "用户名不能为空", divId, controlId, rowId);}
}//检测Email是否合法
function CheckEmail(email, divId, controlId, rowId) {email = removeAllSpace(email);if (email.toString().length > 0) {$.ajax({type: 'POST',url: '/We7Controls/Register/CS/QueryAjax.ashx',data: 'name=Register.Simple.ascx&email=' + escape(email),cache: false,complete: function(msg, textStatus) {var data = msg.responseText.split("|");if (data[0] == "true") {SetResult("right", data[1], divId, controlId, rowId);}else {SetResult("error", data[1], divId, controlId, rowId);}}});}else {SetResult("error", "电子邮箱不能为空", divId, controlId, rowId);}}//检测密码是否合法
function CheckPWD(pwd, divId, controlId, rowId) {pwd = removeAllSpace(pwd);var data = "";if (!(pwd.toString().length >= 6 && pwd.toString().length <= 16)) {data = "密码必须在6-16个字符内";SetResult("error", data, divId, controlId, rowId);}else {SetResult("right", "", divId, controlId, rowId);}
}//检测确认密码是否合法
function CheckRePWD(pwdID, rePwd, divId, controlId, rowId) {var pwd = removeAllSpace($("#" + pwdID).val());rePwd = removeAllSpace(rePwd);var data = "";if (pwd != rePwd) {data = "密码不匹配";SetResult("error", data, divId, controlId, rowId);}else {SetResult("right", "", divId, controlId, rowId);}
}//处理结果
function SetResult(type, text, divId, controlId, rowId) {var result = "";if (type == "error") {InitStyle(divId, controlId, rowId);result = "<table width='100%' style='line-height:19px;' align='left'><tr><td width='20px' valign='top' align='left'><img src='images/error.jpg'/></td><td valign='top'>" + text + "</td></tr><table>";if ($("#" + controlId).val() != "") {$("#" + divId).html("");$("#" + divId).html(result);$("#" + divId).addClass("error");$("#" + controlId).addClass("error");}$("#" + controlId).attr("validate", "false");}else if (type == "right") {InitStyle(divId, controlId, rowId);result = "<img width='20px' src='images/right.jpg'/>";//<table width='100%' style='line-height:19px;' align='left'><tr><td width='20px' valign='top' align='left'>图片</td><td valign='top'>" + text + "</td></tr><table> $("#" + divId).html("");$("#" + divId).html(result);$("#" + divId).addClass("allRight");$("#" + controlId).attr("validate", "true");}else if (type == "init") {InitStyle(divId, controlId, rowId);result = "<table width='100%' style='line-height:19px;' align='left'><tr><td width='20px' valign='top' align='left'><img src='images/init.jpg'/></td><td valign='top'>" + text + "</td></tr><table>";$("#" + divId).html("");$("#" + divId).html(result);$("#" + divId).addClass("initDiv");$("#" + rowId).addClass("initRow");// alert(controlId);// alert($("#" + controlId).attr("class"));
}else if (type == "initValidateCode") {$("#" + divId).html("");$("#" + rowId).addClass("initRow");}else if (type == "errorValidateCode") {$("#" + rowId).removeClass("initRow");if ($("#" + controlId).val() != "") {$("#" + divId).html("<img src='images/error.jpg'/>");}$("#" + controlId).attr("validate", "false");}else if (type == "rightValidateCode") {$("#" + rowId).removeClass("initRow");$("#" + divId).html("<img src='images/right.jpg'/>");$("#" + controlId).attr("validate", "true");}
}//判断最后提交按钮是否可用
function CheckValidate(emailId, userNameId, pwdId, rePwdId, btnId, validateId) {alert($("#" + validateId).attr("validate"));if ($("#" + emailId).attr("validate") == "true" && $("#" + userNameId).attr("validate") == "true" && $("#" + pwdId).attr("validate") == "true" && $("#" + rePwdId).attr("validate") == "true" && $("#" + validateId).attr("validate") == "true") {$("#" + btnId).removeAttr('disabled');}else {$("#" + btnId).attr("disabled", 'disabled');}
}//出现该项目的填写帮助
function InitControlHelp(text, divId, controlId, rowId) {SetResult("init", text, divId, controlId, rowId);
}//去除该项目的填写帮助
function InitStyle(divId, controlId, rowId) {var initText = "";$("#" + divId).html(initText);$("#" + divId).removeClass("initDiv");$("#" + rowId).removeClass("initRow");$("#" + divId).removeClass("error");$("#" + controlId).removeClass("error");$("#" + divId).removeClass("allRight");$("#" + controlId).removeClass("allRight");
}///去除所有空格
function removeAllSpace(str) {return str.replace(/\s+/g, "");
}//检测验证码是否正确
function CheckValidateCode(validateCode, divId, controlId, rowId) {$.ajax({type: 'POST',url: '/Controls/Register/CS/QueryAjax.ashx',data: 'name=Register.Simple.ascx&validateCode=' + escape(validateCode),cache: false,complete: function(msg, textStatus) {var data = msg.responseText;if (data == "true") {SetResult("rightValidateCode", "", divId, controlId, rowId);}else {SetResult("errorValidateCode", "", divId, controlId, rowId);}}});
}这个js主要是对控件的一些通用逻辑进行了封装，主要的两个方法是：InitControlHelp(text, divId, controlId, rowId) 这个主要是onfucs的调用；CkValidate(obj)这个主要是对控件的验证，具体的脚本逻辑这里不再赘述。接下来是我们的前台界面Demo调用页面了，代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FV_Demo.aspx.cs" Inherits="BSTest.FieldVarify.FV_Demo" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>通用脚本验证Demo页面</title><script src="jquery-1.4.2.js" type="text/javascript"></script><script src="FieldVerify.js" type="text/javascript"></script><link rel="Stylesheet" href="FieldVerify.css" /></head>
<body><form id="form1" runat="server" method="get" action="FieldVerify.aspx"><div style="font-size: 12px" class="Register_Simple_common"><div class="reg-form"><table><tr style="height: 40px" id="trName"><td>真实姓名：</td><td><input οnblur='CkValidate(this)' οnfοcus="InitControlHelp('请输入姓名。','dvName',this.id,'trName');"name="Name" id="Name" v_title="必填~|~只允许中文且长度在2到5个字符~|~^[\u0391-\uFFE5]+$~|~hlg~|~2~|~5" /><spanid="E_Name" style='color: red'>*</span></td><td align="left"><div style="text-align: left" id="dvName" class="disPlayStyle"></div></td></tr><tr style="height: 40px" id="trNick"><td>英文名：</td><td><input οnblur='CkValidate(this)' οnfοcus="InitControlHelp('请输入英文名。','dvNick',this.id,'trNick');"name="Nick" id="Nick" v_title="必填~|~只允许英文字母且长度在4到20个字符~|~^[A-Za-z]+$~|~hlg~|~4~|~20"><spanid="E_Nick" style='color: red'>*</span></td><td align="left"><div style="text-align: left" id="dvNick" class="disPlayStyle"></div></td></tr><tr style="height: 40px" id="trHomepage"><td>主页：</td><td><input οnblur='CkValidate(this)' οnfοcus="InitControlHelp('请输入正确的主页。','dvHomepage',this.id,'trHomepage');"name="Homepage" id="Homepage" v_title="选填~|~非法的Url~|~^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>])*$"></td><td align="left"><div style="text-align: left" id="dvHomepage" class="disPlayStyle"></div></td></tr><tr style="height: 40px" id="trPassword"><td>密码：</td><td><input οnblur='CkValidate(this)' οnfοcus="InitControlHelp('请输入密码。','dvPassword',this.id,'trPassword');"name="Password" id="Password" v_title="必填~|~~|~~|~rep~|~RePassword" type='password' /></td><td align="left"><div style="text-align: left" id="dvPassword" class="disPlayStyle"></div></td></tr><tr style="height: 40px" id="trRePassword"><td>重复密码：</td><td><input οnblur='CkValidate(this)' οnfοcus="InitControlHelp('请再次输入密码。','dvRePassword',this.id,'trRePassword');"name="RePassword" id="RePassword" v_title="必填~|~~|~~|~rep~|~Password" type='password'></td><td align="left"><div style="text-align: left" id="dvRePassword" class="disPlayStyle"></div></td></tr><tr style="height: 40px" id="trEmail"><td>电子邮件：</td><td><input οnblur='CkValidate(this)' οnfοcus="InitControlHelp('请输入电子邮件。','dvEmail',this.id,'trEmail');"name="Email" id="Email" v_title="选填~|~电子邮件格式不正确~|~^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" /></td><td align="left"><div style="text-align: left" id="dvEmail" class="disPlayStyle"></div></td></tr><tr style="height: 40px" id="trage"><td>年龄：</td><td><input οnblur='CkValidate(this)' οnfοcus="InitControlHelp('年龄必需为数字，请输入正确的年龄。','dvage',this.id,'trage');"name="age" id="age" v_title="必填~|~年龄必需为数字!~|~^\d+$~|~mxn~|~16~|~99" /></td><td align="left"><div style="text-align: left" id="dvage" class="disPlayStyle"></div></td></tr><tr style="height: 40px" id="trDesc"><td>自我介绍：</td><td><textarea οnblur='CkValidate(this)' οnfοcus="InitControlHelp('请输入备注信息，字符数应在10--500之间！','dvDesc',this.id,'trDesc');"name="Desc" id="Desc" v_title="必填~|~输入字符数应在10--500之间~|~~|~hlg~|~10~|~500"></textarea></td><td align="left"><div style="text-align: left" id="dvDesc" class="disPlayStyle"></div></td></tr><tr><td colspan="2"><input type="button" name="Submit" value="确定" οnclick="javascript:Test();" /><asp:Button ID="btnOK" runat="server" Text="服务器端控件确定" OnClientClick="return CheckForm(form1)"OnClick="btnOK_Click" /></td></tr></table></div></div></form>
</body>
</html>前台界面我们需要注意一下几点：1、<div style="font-size: 12px" class="Register_Simple_common"><div class="reg-form">这两个div必须得有，主要是对样式的控制;2、每个验证的tr的id和div提示的id规范分别是tr+控件id号、dv+控件id号；3、每个控件都要有v_title而且要符合demo页面的规范；4、另外对于服务器端确定按钮的逻辑要加入OnClientClick="return CheckForm(form1)"事件，这样页面就基本搞定了。另外验证效果样式都已经封装为样式文件FieldVerify.css，代码如下：
.flk13 A:link {COLOR: #005aa0
}
.flk13 A:visited {COLOR: #005aa0
}
A.flk13:link {COLOR: #005aa0
}
A.flk13:visited {COLOR: #005aa0
}
.title.RetrievePassword_Common_one {TEXT-ALIGN: center; LINE-HEIGHT: 40px; MARGIN-TOP: 30px; WIDTH: 600px
}
.RetrievePassword_Common_one .reg-form {LINE-HEIGHT: 40px
}
.Register_Simple_common .regContent {TEXT-ALIGN: center; MARGIN-TOP: 0px; WIDTH: auto; BACKGROUND-REPEAT: repeat-x; FONT-FAMILY: "宋体"; BACKGROUND-POSITION: 50% top; HEIGHT: auto; MARGIN-LEFT: auto; FONT-SIZE: 12px; MARGIN-RIGHT: auto
}
.Register_Simple_common .label {TEXT-ALIGN: right; WIDTH: 100px; PADDING-RIGHT: 10px
}
.Register_Simple_common LABEL.error {COLOR: red; MARGIN-LEFT: 5px
}
.Register_Simple_common INPUT {BORDER-BOTTOM: #dcdcdc 1px solid; BORDER-LEFT: #dcdcdc 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 20px; FONT-SIZE: 12px; BORDER-TOP: #dcdcdc 1px solid; BORDER-RIGHT: #dcdcdc 1px solid; PADDING-TOP: 0px
}
.Register_Simple_common .button {PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; CURSOR: pointer; PADDING-TOP: 0px
}
.Register_Simple_common .initRow {BACKGROUND-COLOR: #f5fcfe
}
.Register_Simple_common .initDiv {BORDER-BOTTOM: #40b3ff 2px solid; BORDER-LEFT: #40b3ff 2px solid; BACKGROUND-COLOR: #e5f5ff; WIDTH: 300px; HEIGHT: 38px; VERTICAL-ALIGN: top; BORDER-TOP: #40b3ff 2px solid; BORDER-RIGHT: #40b3ff 2px solid
}
.Register_Simple_common .error {BORDER-BOTTOM: #ff8080 2px solid; BORDER-LEFT: #ff8080 2px solid; BACKGROUND-COLOR: #fff2f2; WIDTH: 300px; VERTICAL-ALIGN: top; BORDER-TOP: #ff8080 2px solid; BORDER-RIGHT: #ff8080 2px solid
}
.Register_Simple_common .allRight {TEXT-ALIGN: left
}
.Register_Simple_common .flow-steps {MARGIN-TOP: 3px; MARGIN-LEFT: 60px; OVERFLOW: hidden
}
.Register_Simple_common .flow-steps .num3 OL {LIST-STYLE-TYPE: none
}
.Register_Simple_common .flow-steps .num3 LI {LIST-STYLE-TYPE: none; WIDTH: 230px
}
.Register_Simple_common .flow-steps .num4 LI {WIDTH: 222px
}
.Register_Simple_common .flow-steps .num5 LI {WIDTH: 175px
}
.Register_Simple_common .flow-steps .num6 LI {WIDTH: 143px
}
.Register_Simple_common .flow-steps LI {TEXT-ALIGN: center; PADDING-BOTTOM: 0px; LINE-HEIGHT: 23px; PADDING-LEFT: 0px; PADDING-RIGHT: 15px; BACKGROUND: url(/Admin/images/flow_steps_bg.png) #e4e4e4 no-repeat 100% 0px; FLOAT: left; HEIGHT: 23px; COLOR: #404040; FONT-SIZE: 14px; OVERFLOW: hidden; FONT-WEIGHT: bold; PADDING-TOP: 0px
}
.flow-steps LI SPAN {DISPLAY: block
}
.flow-steps LI STRONG {DISPLAY: block
}
.flow-steps LI .first {BACKGROUND: url(/Admin/images/flow_steps_bg.png) #e4e4e4 no-repeat -12px -69px
}
.Register_Simple_common .flow-steps LI.last {BACKGROUND-POSITION: 100% -138px
}
.Register_Simple_common .flow-steps LI.current {BACKGROUND-COLOR: #f60; COLOR: #fff
}
.Register_Simple_common .flow-steps LI.current .first {BACKGROUND-COLOR: #f60; BACKGROUND-POSITION: -12px -92px
}
.Register_Simple_common .flow-steps LI.current-prev {BACKGROUND-POSITION: 100% -23px
}
.Register_Simple_common .flow-steps LI.done {BACKGROUND-COLOR: #ffe6ba; BACKGROUND-POSITION: 100% -46px; COLOR: #f60
}
.Register_Simple_common .flow-steps LI.done .first {BACKGROUND-COLOR: #ffe6ba; BACKGROUND-POSITION: -12px -115px
}
.Register_Simple_common .flow-steps LI.last-current {BACKGROUND-COLOR: #f60; BACKGROUND-POSITION: 100% -161px; COLOR: #fff
}
.Register_Simple_common .reg-email {BORDER-BOTTOM: #94d3fe 1px solid; BORDER-LEFT: #94d3fe 1px solid; PADDING-BOTTOM: 20px; BACKGROUND-COLOR: #f1faff; MARGIN: 30px auto 0px 60px; WIDTH: 735px; BORDER-TOP: #94d3fe 1px solid; BORDER-RIGHT: #94d3fe 1px solid
}
.Register_Simple_common .reg-form {MARGIN-TOP: 30px; WIDTH: 735px; MARGIN-LEFT: 60px
}
.Register_Simple_common .reg-form .button {PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; CURSOR: pointer; PADDING-TOP: 0px
}
.Register_Simple_common .table_form {TEXT-ALIGN: left; LINE-HEIGHT: 30px; WIDTH: 735px; FLOAT: left; MARGIN-LEFT: 40px
}
.Register_Simple_common .formTitle {TEXT-ALIGN: right; WIDTH: 200px; FONT-WEIGHT: bold; MARGIN-RIGHT: 5px
}
.Register_Simple_common .formValue {TEXT-ALIGN: left; MARGIN-LEFT: 10px; VERTICAL-ALIGN: middle
}
.Register_Simple_common .button_style {MARGIN-TOP: 10px; WIDTH: 80px; HEIGHT: 30px; VERTICAL-ALIGN: middle; CURSOR: pointer
}
.Register_Simple_common .disPlayStyle {TEXT-ALIGN: left; FLOAT: left
}总结一下：这个脚本下一步还可以继续完善一下，把它封装为面向对象的脚本会更通用，另外为了方式页面被黑客利用或攻击，开发后台中最好也要对必要控件进行验证，这样双管齐下才是最好的验证！
转载于:https://www.cnblogs.com/limengqiang/archive/2012/07/10/FieldVerify.html
asp.net通用Web2.0仿淘宝脚本验证组件相关推荐
- 使用WEX5移动开发工具制作仿淘宝APP
毕业设计-使用WEX5移动开发工具制作仿淘宝APP 系统设计的意义 本课题来源于对日常逛超市.购物的生活体验和指导老师的提示.本系统是基于 WeX5的仿淘宝App系统,它商家们提供了一个更广阔的商品推 ...
- 仿淘宝商品界面（html div+css)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 视频教程-仿淘宝客户端电商平台android初级速成-Android
仿淘宝客户端电商平台android初级速成 北风网技术总监,在某大型电信设备公司担任架构师,主要从事电信领域的软件开发,经验丰富.对电信计费系统以及核心网软件系统有深入了解,对设计高可靠性,高扩展性的 ...
- [转] JavaScript仿淘宝智能浮动
转载自: http://www.williamlong.info/archives/2864.html 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动 ...
- java B2B2C 仿淘宝电子商城系统-Spring Cloud Feign的文件上传实现
在Spring Cloud封装的Feign中并不直接支持传文件,但可以通过引入Feign的扩展包来实现,本文就来具体说说如何实现.需要JAVA Spring Cloud大型企业分布式微服务云构建的B2 ...
- java B2B2C Springboot仿淘宝电子商城系统-负载均衡之ribbon+feign
一. feign简介 Feign是一个声明式的伪Http客户端,它使得写Http客户端变得更简单.使用Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用Feign注解和JAX-RS注 ...
- java B2B2C 仿淘宝电子商城系统-Spring Cloud Eureka参数配置项详解
Eureka涉及到的参数配置项数量众多,它的很多功能都是通过参数配置来实现的,了解这些参数的含义有助于我们更好的应用Eureka的各种功能,下面对Eureka的配置项做具体介绍,供大家参考. 需要JA ...
- 仿淘宝网站的TabPage导航效果
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- JavaScript仿淘宝智能浮动
JavaScript仿淘宝智能浮动 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. ...
- Ecshop 商品页配送方式添加 实现仿淘宝按地区显示运费
Ecshop实现仿淘宝按地区显示运费 淘宝网(Taobao)购物的宝贝详情页面,可以针对不同地区显示不同运费,运费由后台设定:结算时间,按重量.件数计算运费.Ecshop本身有配送方式插件,已有多家物 ...
最新文章
- 新版信标的信号板调试
- 【CSS】CSS前期回顾（2）
- 推陈出新：网友解锁 source 命令新的姿势，血的教训！已准备跑路
- Java VS Go，微服务究竟谁更快？
- Android TextView drawableLeft 在代码中实现
- windows10误删Administrator用户的家目录之后
- java web 开发需要用到的技术
- 把“友商”装进芯里威联通运行黑群晖最新DSM系统
- 硬件编程-----根据时序图写C语言驱动
- 数字签名与数字加密的区别
- Justinmind教程（3）——管理原型
- oracle数据库闪回详解
- Redis中的Lua脚本怎么玩
- 自旋玻璃（spin glass）、自旋冰（spin ice）和量子自旋液体（quantum spin liquid）（之二）
- 软件测试工作中需要的Linux知识，一篇文章就够了
- Netcat的使用教程
- 笔记：文澜：桥接视觉和语言的大规模多模态预训练 WenLan: Bridging Vision and Language by Large-Scale Multi-Modal Pre-Training
- 股票权证是什么意思？正股和权证是什么意思？
- 简单说 一道JS闭包面试题
- 电脑上复制粘贴同名文件被覆盖了怎么办
热门文章
- Entrez Direct-入门
- ((亲测有效))安卓神器Xposed框架无ROOT使用指南
- 奇异矩阵和非奇异矩阵 行列式矩阵简单理解 代数意义 几何意义 行列式的定义： 二阶行列式的几何意义： 三阶行列式的几何意义： 行列式化为对角形的几何解释： 二阶行列式乘积项的几何意
- 平板电脑也可以学python吗？10 个Python 编辑器，，让编程更贴近生活~
- 人工智能python课程总结1500字_人工智能学习心得
- 嵌入式音视频解决方案 Webrtc vs MetaRTC
- 如何快速发表一篇SCI论文
- Ubuntu 查看系统版本
- 百度杯”CTF比赛（十二月场)
- Pandas数据分析3-统计、可视化、创建数据框、时间序列、删除数据