lab4Creating a Simple Web Application Using a MySQL Database.docx
《lab4Creating a Simple Web Application Using a MySQL Database.docx》由会员分享，可在线阅读，更多相关《lab4Creating a Simple Web Application Using a MySQL Database.docx（22页珍藏版）》请在冰豆网上搜索。
lab4CreatingaSimpleWebApplicationUsingaMySQLDatabase
CreatingaSimpleWebApplicationUsingaMySQLDatabase
ThisdocumentdescribeshowtocreateasimplewebapplicationthatconnectstoaMySQLdatabaseserver.Italsocoverssomebasicideasandtechnologiesinwebdevelopment,suchasJavaServerPages（JSP）,JavaServerPagesStandardTagLibrary（JSTL）,theJavaDatabaseConnectivity（JDBC）API,andtwo-tier,client-serverarchitecture.ThistutorialisdesignedforbeginnerswhohaveabasicunderstandingofwebdevelopmentandarelookingtoapplytheirknowledgeusingaMySQLdatabase.
MySQLisapopularOpenSourcedatabasemanagementsystemcommonlyusedinwebapplicationsduetoitsspeed,flexibilityandreliability.MySQLemploysSQL,orStructuredQueryLanguage,foraccessingandprocessingdatacontainedindatabases.
ThistutorialcontinuesfromtheConnectingtoaMySQLDatabasetutorialandassumesthatyoualreadyhaveaconnectiontoaMySQLdatabasecreatedandregisteredinNetBeansIDE.Thetabledatathatisincludedinifpwafcad.sql.isalsorequiredforthistutorial.ThisSQLfilecreatestwotables,SubjectandCounselor,thenpopulatesthemwithsampledata.Savethisfiletoalocaldirectory,thenopenitinNetBeansIDEandrunitontheMySQLdatabase.ThedatabaseusedinthistutorialisnamedMyNewDatabase.
Contents
∙PlanningtheStructure
∙CreatingaNewProject
∙PreparingtheInterface
∙SettingupaConnectionPool
oSettingupaJNDIDatasource
oReferencingtheDatasourcefromtheApplication
oAddingtheDatabaseDriver'sJARFiletotheServer
∙AddingDynamicLogic
oAddingtheJSTLLibrarytotheProject'sClasspath
oAddingtaglibDirectivestotheJSPPages
oAddingJSPandJSTLCode
∙DeployingandRunningtheProject
∙SeeAlso
Tofollowthistutorial,youneedthefollowingsoftwareandresources.
SoftwareorResource
VersionRequired
NetBeansIDE
WebandJavaEEinstallation
version6.0
JavaDeveloperKit（JDK）
version6orversion5
MySQLdatabaseserver
version5.x
MySQLConnector/JJDBCDriver
version5.x
GlassFishapplicationserver
or
Tomcatservletcontainer
V2
version6.x
Notes:
∙TheNetBeansIDE6.1withGlassfishandMySQLBundleDownloadprovidesyouwithanall-in-onepackageofsoftwarerequiredforthistutorial.
∙TheWebandJavaEEinstallationenablesyoutooptionallyinstalltheGlassFishV2applicationserverandtheApacheTomcatservletcontainer6.0.x.Youmustinstalloneofthesetoworkthroughthistutorial.
∙TheMySQLConnector/JJDBCDriver,necessaryforcommunicationbetweenJavaplatformsandtheMySQLdatabaseprotocol,isincludedinNetBeansIDE6.x.
∙Ifyouneedtocompareyourprojectwithaworkingsolution,youcandownloadthesampleapplication.
PlanningtheStructure
Simplewebapplicationscanbedesignedusingatwo-tierarchitecture,inwhichtheapplicationcommunicatesdirectlywithadatasourceusingtheJavaDatabaseConnectivityAPI.Auser'srequestsaresenttoadatabase,andtheresultsaresentdirectlybacktotheuser.Two-tierarchitecturescanbeeasilymappedtoaclient-serverconfiguration,whereauser'sbrowserservesastheclient,andaremotedatabasereachableovertheInternetcorrespondstotheserver.
TheapplicationyoubuildinthistutorialinvolvesthecreationoftwoJavaServerPages.Ineachofthesepages,youaddbasicHTMLtoimplementasimpleinterface,followedbySQLtagsprovidedbyJSTLtechnologyinordertoquerythedatabase.Considerthefollowingclient-serverscenario:
Thewelcomepage（index.jsp）presentstheuserwithasimpleHTMLform.Whenaclientrequeststheindex.jsppage,theJSPcodecontainedthereinisparsed,anddatafromtheSubjectdatabasetableisgathered,addedtothepage,andsenttotheclient.TheusermakesaselectionintheprovidedHTMLformandsubmits,whichcausestheclienttomakearequestforresponse.jsp.Whenresponse.jspisparsed,datafromboththeSubjectandCounselortablesisgatheredandinsertedintothepage.Finally,thepageisreturnedtotheclientandtheuserviewsdatabaseduponhisorherselection.
CreatingaNewProject
Inordertoimplementthescenariodescribedabove,youdevelopasimpleapplicationforafictitiousorganizationnamedIFPWAFCAD,orTheInternationalFormerProfessionalWrestlers'AssociationforCounselingandDevelopment.Theapplicationenablesausertochooseacounselingsubjectfromadrop-downlist（index.jsp）,thenretrievesdatafromtheMySQLdatabaseandreturnstheinformationtotheuser（response.jsp）:
index.jsp
response.jsp
CreateanewprojectintheIDE:
1.StartNetBeansIDEandchooseFile>NewProject（Ctrl-Shift-N）fromthemainmenu.UnderCategoriesselectWeb;underProjectsselectWebApplication.ClickNext.
2.InProjectName,enterIFPWAFCAD.FromtheServerdrop-downlist,selecttheserveryouplanworkwith.LeaveallothersettingsattheirdefaultsandclickFinish.
TheIDEcreatesaprojecttemplatefortheentireapplication,andopensanemptyJSPpage（index.jsp）intheSourceEditor.index.jspservesastheentrypointfortheapplication.ThenewprojectisstructuredaccordingtoSunJavaBluePrintsguidelines.
PreparingtheInterface
Beginbypreparingasimpleinterfaceforthetwopages.Bothindex.jspandresponse.jspimplementanHTMLtabletodisplaydatainastructuredfashion.index.jspalsorequiresanHTMLformthatincludesadrop-downlist.
index.jsp
Makesureindex.jspisopenedintheSourceEditor.Ifitisnotalreadyopen,double-clickindex.jspfromIFPWAFCAD>WebPagesintheProjectswindow.
1.IntheSourceEditor,changethetextbetweenthe
tagstoIFPWAFCADHomepage.</p><p>Alsochangethetextbetweenthe<h2>tagstoWelcometoIFPWAFCAD,theInternationalFormerProfessionalWrestlers'AssociationforCounselingandDevelopment!</p><p>.</p><p>Note:</p><p>Forfurthercontent,youcaneitheraddHTMLelementstothepageusingtheIDE'spalette,asdemonstratedbelow,orjustcopyandpastethecodeprovidedinstep8directlyintoyourindex.jsppage.</p><p>2.OpentheIDE'sPalettebychoosingWindow>Palette（Ctrl-Shift-8）fromthemainmenu.HoveryourpointerovertheTableiconfromtheHTMLcategoryandnotethatthedefaultcodefortheitemdisplays:</p><p>Clicktheicon,anddraganddropatableintothepageintheSourceEditor,toapointjustafterthe<h2>tags.IntheInsertTabledialogthatdisplays,specifythefollowingcriteria,thenclickOK:</p><p>oRows:</p><p>2</p><p>oColumns:</p><p>1</p><p>oBorderSize:</p><p>0</p><p>TheHTMLtablecodeisgeneratedandaddedtoyourpage.</p><p>3.Addthefollowingcontenttothetableheadingandthecellofthefirsttablerow（newcontentinbold）:</p><p>4.<tableborder="0"></p><p>5.<thead></p><p>6.<tr></p><p>7.<th>IFPWAFCADoffersexpertcounselinginawiderangeoffields.</th></p><p>8.</tr></p><p>9.</thead></p><p>10.<tbody></p><p>11.<tr></p><p>12.<td>ToviewthecontactdetailsofanIFPWAFCADcertifiedformer</p><p>13.professionalwrestlerinyourarea,selectasubjectbelow:</p><p>14.</td></p><p></tr></p><p>15.Forthebottomrowofthetable,draganddropanHTMLformfromthePaletteintothepage,directlybetweenthesecondpairof<td>tags.IntheActiontextbox,typeinresponse.jsp,thenclickOK.</p><p>16.Typeinthefollowingtextbetweenthe<form>tagsoftheformyoujustcreated:</p><p><strong>Selectasubject:</p><p></strong></p><p>17.Draganddropadrop-downlistfromthePalettetoapointjustbeneaththetextyoujustadded.IntheInsertDrop-downdialogthatdisplays,typeinsubject_idfortheNametextfield,andclickOK.Thenumberofoptionsforthedrop-downiscurrentlynotimportant.LaterinthetutorialyouwilladdJSTLtagsthatdynamicallygenerateoptionsbasedonthedatagatheredfromtheSubjectdatabasetable.ClickOK,andnotethatthecodeforthedrop-downlistisaddedtotheform.</p><p>18.AddasubmitbuttontotheformbydraggingabuttonfromthePalettetoapointjustafterthedrop-downlistyoujustadded.EntersubmitforboththeLabelandNametextfields,thenclickOK.</p><p>19.Toformatyourcode,right-clickintheSourceEditor,andchooseFormat（Alt-Shift-F）.Yourcodeisautomaticallyformatted,andshouldnowlooksimilartothefollowing:</p><p>20.<body></p><p>21.<h2>Welcometo<strong>IFPWAFCAD</strong>,theInternationalFormer</p><p>22.ProfessionalWrestlers'AssociationforCounselingandDevelopment!</p><p>23.</h2></p><p>24.</p><p>25.<tableborder="0"></p><p>26.<thead></p><p>27.<tr></p><p>28.<th>IFPWAFCADoffersexpertcounselinginawiderangeoffields.</th></p><p>29.</tr></p><p>30.</thead></p><p>31.<tbody></p><p>32.<tr></p><p>33.<td>ToviewthecontactdetailsofanIFPWAFCADcertifiedformer</p><p>34.professionalwrestlerinyourarea,selectasubjectbelow:</p><p>35.</td></p><p>36.</tr></p><p>37.<tr></p><p>38.<td></p><p>39.<formaction="response.jsp"></p><p>40.<strong>Selectasubject:</p><p></strong></p><p>41.<selectname="subject_id"></p><p>42.<option></option></p><p>43.</select></p><p>44.<inputtype="submit"value="submit"name="submit"/></p><p>45.</form></p><p>46.</td></p><p>47.</tr></p><p>48.</tbody></p><p>49.</table></p><p></body></p><p>Toviewthispageinabrowser,right-clickintheSourceEditorandchooseRunFile（Shift-F6）.Whenyoudothis,theJSPpageisautomaticallycompiledanddeployedtoyourserver.TheIDEopensyourdefaultbrowsertodisplaythepagefromitsdeployedlocation:</p><p>response.jsp</p><p>Inordertopreparetheinterfaceforresponse.jspyoumustfirstcreatethefileinyourapplication.NotethatmostofthecontentthatdisplaysinthispageisgenerateddynamicallyusingJSPtechnology.Therefore,inthefollowingstepsyouaddplaceholderswhichyouwilllatersubstitutefortheJSPcode.</p><p>1.Right-clicktheIFPWAFCADprojectnodeintheProjectswindowandchooseNew>JSP.TheNewJSPFiledialogopens.</p><p>2.IntheJSPFileNamefiel</p>
</div>
<div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div>
<script>
function showmore()
{
$(".readmore").hide();
$(".detail-article").css({
"height":"auto",
"overflow": "hidden"
});
}
$(document).ready(function() {
var dh = $(".detail-article").height();
if(dh >100)
{
$(".detail-article").css({
"height":"100px",
"overflow": "hidden"
});
}
else
{
$(".readmore").hide();
}
});
</script>
</div>
<script>
var defaultShowPage = parseInt("5");
var id = "6508959";
var total_page = "22";
var mfull = false;
var mshow = false;
function DownLoad() {
window.location.href='https://m.bdocx.com/down/6508959.html';
}
function relate() {
var reltop = $('#relate').offset().top-50;
$("html,body").animate({ scrollTop: reltop }, 500);
}
</script>
<script> var pre = "https://file1.bdocx.com/fileroot1/2023-1/7/9ece20ef-02fb-4443-a2e1-e7a0f30809c4/9ece20ef-02fb-4443-a2e1-e7a0f30809c4";
var freepage = parseInt('20');
var total_c = parseInt('22');
var start = defaultShowPage;
var adcount = 0;
var adindex = 0;
var adType_list = ";0;1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;";
var end = start;
function ShowSvg() {
end = start + defaultShowPage;
if (end > freepage) end = freepage;
for (var i = start; i < end; i++) {
var imgurl = pre + (i + 1) + '.gif';
var html = "<img src='" + imgurl + "' onerror=\"this.src='/images/s.gif'\" alt=\"lab4Creating a Simple Web Application Using a MySQL Database.docx_第" + (i + 1) + "页\" width='100%'/>";
$("#page").append("<div class='page'>" + html + "</div>");
$("#page").append("<div class='pageSize'>第" + (i + 1) + "页 / 共" + total_c + "页</div>");
if(adcount > 0 && adType_list.indexOf(";"+(i+1)+";")>-1)
{
if(adindex > (adcount-1)) adindex = 0;
$("#page").append("<div class='pagead' id='addiv"+(i + 1)+"'></div>");
document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML;
adindex += 1;
}
}
start = end;
if (start > (freepage - 1)) {
if (start < total_c)
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页，到这儿已超出免费预览范围，如果喜欢就下载吧！");
}
else
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页全部预览完了，如果喜欢就下载吧！");
}
}
}
//$(document).ready(function () {
// ShowSvg();
//});
</script>
<div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30820185.html" title="《知识与能力训练生物学》七年级上册参考答案001.docx">《知识与能力训练生物学》七年级上册参考答案001.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/21335000.html" title="世界美术史详细年表Word文件下载.docx">世界美术史详细年表Word文件下载.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939662.html" title="中华经典古诗词文档格式.docx">中华经典古诗词文档格式.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939421.html" title="游戏符号名字Word文档格式.docx">游戏符号名字Word文档格式.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939377.html" title="延世大学韩国语第一册的语法总结Word格式.docx">延世大学韩国语第一册的语法总结Word格式.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939274.html" title="医学临床三基药师分册第一版Word文档下载推荐.docx">医学临床三基药师分册第一版Word文档下载推荐.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939259.html" title="某河道整治工程施工组织设计方案Word文件下载.docx">某河道整治工程施工组织设计方案Word文件下载.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939226.html" title="甘肃省玉门一中届高三语文月考试题文档格式.docx">甘肃省玉门一中届高三语文月考试题文档格式.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939205.html" title="四个字的女生网名精选400个Word格式.docx">四个字的女生网名精选400个Word格式.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20939174.html" title="实用参考office办公软件系列培训手册Word文档格式.docx">实用参考office办公软件系列培训手册Word文档格式.docx</a>
</li>
</ul>
</div>
</div>
<div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/4068422.html" target="_parent" title="届福建省惠安县高三质量检查文科综合试题及答案.docx">届福建省惠安县高三质量检查文科综合试题及答案.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/4068423.html" target="_parent" title="届高三生命科学上学期期末质量调研试题 新版 新人教版 新版 新人教版.docx">届高三生命科学上学期期末质量调研试题 新版 新人教版 新版 新人教版.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/4068424.html" target="_parent" title="届陕西省西安一中高一上学期期末考试01.docx">届陕西省西安一中高一上学期期末考试01.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/4068425.html" target="_parent" title="经典爱情语录0.docx">经典爱情语录0.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/4068426.html" target="_parent" title="三年级奥数 乘除巧算.docx">三年级奥数 乘除巧算.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/4068427.html" target="_parent" title="三年级数学下册脱式计算题288题.docx">三年级数学下册脱式计算题288题.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/4068428.html" target="_parent" title="山东省日照市莒县学年七年级道德与法治下学期期中试题.docx">山东省日照市莒县学年七年级道德与法治下学期期中试题.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/4068429.html" target="_parent" title="机械设计与机械制造专业45道压力容器压力管道设计考试题问答题分析题.docx">机械设计与机械制造专业45道压力容器压力管道设计考试题问答题分析题.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/4068430.html" target="_parent" title="山东中学教育心理学课后习题.docx">山东中学教育心理学课后习题.docx</a></li>
</ul>
</div>
</div>
<div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;">
相关搜索</div>
<div class="widget-box pt0" style="border: none; padding:0px 5px;">
<ul class="taglist--inline multi">
<li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=lab4Creating">lab4Creating</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=Simple">Simple</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=Web">Web</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=Application">Application</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=Using">Using</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=MySQL">MySQL</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=Database">Database</a></li> </ul>
</div>
<br />
<div >
当前位置：<a target="_parent" href="https://m.bdocx.com/">首页</a> >
<a href="https://m.bdocx.com/booklist-00003.html">医药卫生</a>
</div>
<br />
<div class="cssnone">
<iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=lDtf4pXGwks%3d&parto=AeAlFXBnEcbe5P6rKgdm5x8OOLd89DqoyO4DKevVMr%2b6QEuSb5MaOwNGqmryUrHjSdT2YkpB47i9JsqzJEKvBsB67SobKArSpXO8uJXbsguNquhLUjalwiJnWwxcFr7fa9byRm2S3nCPqdgSgc8%2fL2Lw9qE8JfjPsvEyEvwTyolWXrLO3P1QQ07Q01naMvG1VedMVPIfJdPjxM4R5X0IexXXaN3ayU7D" frameborder="0" style="width: 0px; height: 0px">
</iframe>
</div>
<span id="LabelScript"></span>
<script src="https://mstatic.bdocx.com/JS/bootstrap-collapse.js"></script>
</form>
<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">
<div class="siteInner">
<p style="text-align: center;">copyright@ 2008-2022 冰豆网网站版权所有</p><p style="text-align: center;">经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015515号-1</a></p><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?2e77bd3f6fe91b0e21d3f22267249ee3";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script><script>(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?81476e42bf626128cf29544ee216a8ed7deb9487dce7ed62313212129c4244a219d1c501ebd3301f5e2290626f5b53d078c8250527fa0dfd9783a026ff3cf719";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)</script>
</div>
</div>
<div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
<div class="trlogoside" id="navlogo" style="display: none;">
<a href="https://m.bdocx.com/" title="冰豆网"><img src="https://www.bdocx.com/images/logo_bd.png" alt="冰豆网"></a>
<div class="trnavclose" id="navclose">
<span></span>
</div>
</div>
<div class="navcontainer">
<div class="row">
<ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;">
<li><a target="_parent"href="https://m.bdocx.com/login.aspx">登录</a></li>
<li><a target="_parent"href="https://m.bdocx.com/">首页 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/booklist-0.html">资源分类 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bdocx.com/images/s.gif" alt="new" class="hottip1">升级会员 <img src="https://www.bdocx.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new" class="hottip"></a></li>
<li><a target="_parent"href="https://m.bdocx.com/newslist.html">通知公告 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/h-0.html">帮助中心 </a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#navmore").click(function (e) {
$("#navcontent").show();
$("#navlogo").show();
stopPropagation(e);
var navcontentwidth = $("#navcontent").width();
$('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
$("#navcontent").show().animate({ "right": 0 }, 300);
});
$(document).bind('click', function () {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
$("#navcontent").click(function (e) {
stopPropagation(e);
});
$("#navclose").click(function (e) {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
</script>
<script>
function BaseShare(title, desc, imgUrl) {
var link = "https://m.bdocx.com/doc/6508959.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1721461884', // 必填，生成签名的时间戳
nonceStr: '8F53295A73878494E9BC8DD6C3C7104F', // 必填，生成签名的随机串
signature: '1928ed8ca5a6cca8f4d885eae0c6aaa52ae2c0b3',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
function BaseShare(title, desc, imgUrl, link) {
if (link=="")
link = "https://m.bdocx.com/doc/6508959.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1721461884', // 必填，生成签名的时间戳
nonceStr: '8F53295A73878494E9BC8DD6C3C7104F', // 必填，生成签名的随机串
signature: '1928ed8ca5a6cca8f4d885eae0c6aaa52ae2c0b3',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
</script>
<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.bdocx.com/header.aspx";
$.get(url + "?t=" + (new Date()).valueOf(), function (d) {
try {
arr.eq(index).empty().html(d);
} catch (e) { }
try {
arr.html(d);
} catch (e) { }
});
})(i);
}
});
</script>
<script src="https://mstatic.bdocx.com/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>