Stripe - 支付宝支付（前端）

2、前端代码：

use \Illuminate\Support\Facades\Input;

VIP会员</p> <p> <link rel="stylesheet" type="text/css" href="<?=Config::get('app.cdn01')?>/api_assert/css/index.min.css"></p> <p> <link rel="stylesheet" type="text/css" href="<?=Config::get('app.cdn01')?>/api_assert/css/inviteReg.min.css"></p> <p> <script src="<?=Config::get('app.cdn01')?>/api_assert/script/flexible.min.js"></p> <p> #footers{</p> <p>width:100%;</p> <p> height:6rem;</p> <p> background:#fff;</p> <p> position:fixed;</p> <p> left:0;</p> <p> bottom: -.2rem;</p> <p> margin:auto;</p> <p> }</p> <p>.footers_top{</p> <p>width:100%;</p> <p> height:.9rem;</p> <p> text-align:center;</p> <p> line-height:.9rem;</p> <p> background:#fff;</p> <p> position:relative;</p> <p> display:flex;</p> <p> justify-content:center;</p> <p> align-items:center;</p> <p> }</p> <p>.footers_top span{</p> <p>font-family:"PingFang-SC-Regular";</p> <p> font-size:.34rem;</p> <p> color:#333333;</p> <p> }</p> <p>.footers_top .no_icon{</p> <p>width:.22rem;</p> <p> height:.22rem;</p> <p> position:absolute;</p> <p> right:.3rem;</p> <p> top:0;</p> <p> bottom:0;</p> <p> margin:auto;</p> <p> }</p> <p>.footers_top .no_icon img{</p> <p>display:block;</p> <p> width:100%;</p> <p> }</p> <p>.mark fade{</p> <p>width:100%;</p> <p> height:100%;</p> <p> }</p> <p>.Popup {</p> <p>display:none;</p> <p> width:100%;</p> <p> height:6rem;</p> <p> background:#fff;</p> <p> position:fixed;</p> <p> left:0;</p> <p> right:0;</p> <p> bottom:0;</p> <p> margin:auto;</p> <p> z-index:999;</p> <p> padding:.9rem .3rem 0rem;</p> <p> box-sizing:border-box;</p> <p> }</p> <p>.Popup .footers_top{</p> <p>position:absolute;</p> <p> top:0;</p> <p> left:0;</p> <p> margin:auto;</p> <p> border-bottom:1px solid #e3e3e3;</p> <p> background:#fff;</p> <p> }</p> <p>.Popup .footers_top .no_icon{</p> <p>right:.3rem;</p> <p> }</p> <p>.Popup .StripeElement {</p> <p>background-color:white;</p> <p> height:40px;</p> <p> padding:10px 12px;</p> <p> border-radius:4px;</p> <p> border:1px solid transparent;</p> <p> box-shadow:0 1px 3px 0 #e6ebf1;</p> <p> -webkit-transition:box-shadow 150ms ease;</p> <p> transition:box-shadow 150ms ease;</p> <p> }</p> <p>.Popup .StripeElement--focus {</p> <p>box-shadow:0 1px 3px 0 #cfd7df;</p> <p> }</p> <p>.Popup .StripeElement--invalid {</p> <p>border-color:#fa755a;</p> <p> }</p> <p>.Popup .StripeElement--webkit-autofill {</p> <p>background-color:#fefde5 !important;</p> <p> }</p> <p>.Popup .StripeElement {</p> <p>background-color:white;</p> <p> height:40px;</p> <p> padding:10px 12px;</p> <p> border-radius:4px;</p> <p> border:1px solid transparent;</p> <p> box-shadow:0px 0px 3px 1px #e6ebf1;</p> <p> -webkit-transition:box-shadow 150ms ease;</p> <p> transition:box-shadow 150ms ease;</p> <p> }</p> <p><body class="unheader unfooter"></p> <p><div class="header"></p> <p> <div class="header-btn"></p> <p> <div class="i-arrow" _back></p> <p> <div class="i-close" _close></p> <p> <div class="header-title">邀请注册</p> <p><div class="main" id="btn" data-message="<?=isset($ban_flag)?$ban_flag:''?>"></p> <p> <div class="step"></p> <p> <div>1.选择礼包</p> <p> <div><div class="i-arrow"></p> <p> <div>2.收货信息</p> <p> <div><div class="i-arrow"></p> <p> <div class="on">3.立即支付</p> <p> <form class="step3" action="payment/create"></p> <p> <div class="scroll"></p> <p> <label class="input-group"></p> <p> <div class="group"></p> <p> <div class="group-l nowrap"></p> <p> <button type="button" class="name">邀请人 </p> <p> <div class="group-r"></p> <p> <div class="contant"><?php echo $parent->nick_name?></p> <p> $inviteCode = \App\Models\UserInviteCode::query()->where('user_id',$parent->user_id)->where('state',1)->first();</p> <p> ?> <label class="input-group" <?php echo $inviteCode?'':'style="display:none"'?>></p> <p> <div class="group"></p> <p> <div class="group-l nowrap"></p> <p> <button type="button" class="name">邀请码 </p> <p> <div class="group-r"></p> <p> <div class="contant"></p> <p> <?php echo $inviteCode?$inviteCode->code:''; ?> </p> <p> <label class="input-group"></p> <p> <div class="group"></p> <p> <div class="group-l nowrap"></p> <p> <button type="button" class="name">联系人 </p> <p> <div class="group-r"></p> <p> <div class="contant"></p> <p> <?php echo e(Input::get('name'))?> <?php echo e(Input::get('phone'))?> </p> <p> <label class="input-group"></p> <p> <div class="group top"></p> <p> <div class="group-l nowrap"></p> <p> <button type="button" class="name">地址 </p> <p> <div class="group-r"></p> <p> <div class="contant"></p> <p> 新加坡</p> <p> <?php echo e(Input::get('address'))?> </p> <p> <div class="ware"></p> <p> <div class="group"></p> <p> $gift = \App\Models\UserUpgradeGift::query()</p> <p> ->where('state',1)</p> <p> ->where('id',Input::get('gift'))</p> <p> ->first();</p> <p> if(!$gift)</p> <p> throw new \App\Business\Exceptions\BusinessException('请选择礼包！');</p> <p> ?> <div class="group-l"></p> <p> <div class="logo"><img src="<?=$gift->pic_url?>"></p> <p> <div class="group-r"></p> <p> <div class="group right top"></p> <p> <div class="group-l"></p> <p> <div class="ware-main"></p> <p> <div class="ware-name t-o"></p> <p> <?=e($gift->goods_name)?> </p> <p> <div class="ware-spec"></p> <p> <div class="ware-price"></p> <p> <span class="now">￥<?=$gift->price?></p> <p> <span class="old v-b">￥ <?=$gift->res_price?></p> <p>--></p> <p> <div class="group-r"></p> <p> <div class="ware-count">x1</p> <p> <input type="hidden" name="parentNo" value="<?php echo e(Input::get('parentNo'))?>"></p> <p> <input type="hidden" name="type" value="<?php echo e(Input::get('hasstore'))?>"></p> <p> <input type="hidden" name="giftId" value="<?php echo e(Input::get('gift'))?>"></p> <p> <input type="hidden" name="phone" value="<?php echo e(Input::get('phone'))?>"></p> <p> <input type="hidden" name="authcode" value="<?php echo e(Input::get('authcode'))?>"></p> <p> <input type="hidden" name="name" value="<?php echo e(Input::get('name'))?>"></p> <p> <input type="hidden" name="address" value="<?php echo e(Input::get('address'))?>"></p> <p> <input type="hidden" name="business" value="UserUpgradeOrder"></p> <p> <input type="hidden" name="province" value="2"></p> <p> <input type="hidden" name="city" value="3"></p> <p> <input type="hidden" name="area" value="4"></p> <p> <input type="hidden" name="invitationCode" value="<?=$inviteCode?$inviteCode->code:''?>"></p> <p> <input type="hidden" name="zipcode" value="<?php echo e(Input::get('zipcode'))?>"></p> <p> <div class="foot"></p> <p> <div class="group right"></p> <p> <div class="group-l"></p> <p> <div class="amount"></p> <p> 共 1件商品</p> <p> <div class="f-r"></p> <p> 需支付<span class="price">S$<span id="pay_money"></span></span>元</p> <p> <div class="group-r nowrap"></p> <p> <button type="button" class="confirm">立即支付</p> <p> <div class="mark fade"></p> <p> <div class="pay-mode bounce" id="footers"></p> <p> <div class="footers_top"></p> <p> <span>支付方式</p> <p> <div class="no_icon"></p> <p> <img src="<?=Config::get('app.url')?>/ononononon.png" alt=""></p> <p> <div style="border-bottom:none"></p> <p> <label class="mode" ></p> <p> <div class="i-alipay" style="background-image:url('<?=Config::get('app.url')?>/xinyongka.png')"></p> <p> <span class="pay-name v-t">新加坡信用卡</p> <p> <div class="checkbox f-r"></p> <p> <input type="radio" name="payProvider" value="1" checked=""></p> <p> <label class="mode" ></p> <p> <div class="i-alipay"></p> <p> <span class="pay-name v-t">支付宝支付</p> <p> <div class="checkbox f-r"></p> <p> <input type="radio" name="payProvider" value="2" ></p> <p> <button type="submit" id="submitOrder" class="btn-submit" style="width:6.2rem; height:.8rem; background:#F7A030; position:absolute; left:0; right:0; margin:auto; text-align:center; line-height:.8rem; color:#FFFFFF;font-size:.3rem; font-family:'PingFang-SC-Regular'; position:absolute; bottom:.4rem; left:0; right:0; margin:auto; border-radius:.12rem;">确认支付</p> <p> <div class="Popup"></p> <p> <div class="footers_top"></p> <p> <span>支付方式</p> <p> <div class="no_icon"></p> <p> <img src="<?=Config::get('app.url')?>/ononononon.png" alt=""></p> <p> <form action="/charge" method="post" id="payment-form"></p> <p> <div class="form-row"></p> <p> <div id="card-element" style="margin-bottom:.2rem ;margin-top:.2rem"></p> <p> <label for="card-element" style=" font-family:'PingFang-SC-Regular'; color:#999999;font-size:.26rem;"></p> <p> 填写您的银行卡号确认付款</p> <p> <div id="card-errors" role="alert" style="margin-top:.2rem; font-family:'PingFang-SC-Regular'; color:#999999;font-size:.26rem;"></p> <p> <button class="button" style="width:6.2rem; height:.8rem; background:#F7A030; position:absolute; left:0; right:0; margin:auto; text-align:center; line-height:.8rem; color:#FFFFFF;font-size:.3rem; font-family:'PingFang-SC-Regular'; position:absolute; bottom:.4rem; left:0; right:0; margin:auto; border-radius:.12rem;" ></p> <p> 确认支付</p> <p><script src="<?=Config::get('app.cdn01')?>/api_assert/script/zepto.min.js"></p> <p><script src="<?=Config::get('app.cdn01')?>/api_assert/script/index.min.js"></p> <p><script src="<?=Config::get('app.cdn01')?>/api_assert/script/expand.js"></p> <p><script src="https://js.stripe.com/v3/"></p> <p> var msg =$("#btn").attr('data-message');</p> <p> if(msg){</p> <p>$("#submitOrder").css({'display':'none'});</p> <p> $(".confirm").css({'display':'none'});</p> <p> App.alert(msg);</p> <p> }</p> <p>App.ajaxWait({</p> <p>url:'<?=\Illuminate\Support\Facades\URL::to('app/userUpgrade/Money')?>',</p> <p> data:{},</p> <p> success:function(result){</p> <p>var hasstore ='<?php echo e(Input::get('hasstore'))?>';</p> <p> if(hasstore==1){</p> <p>$("#pay_money").text(result['level_1_money'])</p> <p>}else{</p> <p>$("#pay_money").text(result['level_2_money'])</p> <p>}</p> <p>}</p> <p>})</p> <p>// Create a Stripe client.</p> <p> var stripe = Stripe("<?= env('STRIPE_PUB_KEY') ?>");</p> <p> // Create an instance of Elements.</p> <p> var elements = stripe.elements();</p> <p> // Custom styling can be passed to options when creating an Element.</p> <p>// (Note that this demo uses a wider set of styles than the guide below.)</p> <p> var style = {</p> <p>base: {</p> <p>color:'#32325d',</p> <p> lineHeight:'18px',</p> <p> fontFamily:'"Helvetica Neue", Helvetica, sans-serif',</p> <p> fontSmoothing:'antialiased',</p> <p> fontSize:'16px',</p> <p> '::placeholder': {</p> <p>color:'#aab7c4'</p> <p> }</p> <p>},</p> <p> invalid: {</p> <p>color:'#fa755a',</p> <p> iconColor:'#fa755a'</p> <p> }</p> <p>};</p> <p> // Create an instance of the card Element.</p> <p> var card = elements.create('card', {style: style});</p> <p> // Add an instance of the card Element into the `card-element`</p> <p>.</p> <p> card.mount('#card-element');</p> <p> // Handle real-time validation errors from the card Element.</p> <p> card.addEventListener('change', function(event) {</p> <p>var displayError = document.getElementById('card-errors');</p> <p> if (event.error) {</p> <p>displayError.textContent = event.error.message;</p> <p> }else {</p> <p>displayError.textContent ='';</p> <p> }</p> <p>});</p> <p> // Handle form submission.</p> <p> $("#submitOrder").click((e)=>{</p> <p>e.preventDefault();</p> <p> data =$(".step3").serializeArray();</p> <p> data['pay_provider'] =1;</p> <p> let parentNo='';</p> <p> let type='';</p> <p> let giftId='';</p> <p> let phone='';</p> <p> let authcode='';</p> <p> let name='';</p> <p> let address='';</p> <p> let business='';</p> <p> let province='';</p> <p> let city='';</p> <p> let area='';</p> <p> let invitationCode='';</p> <p> let zipcode='';</p> <p> let payProvider='';</p> <p> data.forEach((val,index)=> {</p> <p>if (val.name =="parentNo") {</p> <p>parentNo = val.value;</p> <p> }</p> <p>else if (val.name =="type") {</p> <p>type = val.value;</p> <p> }</p> <p>else if (val.name =="giftId") {</p> <p>giftId = val.value;</p> <p> }</p> <p>else if (val.name =="phone") {</p> <p>phone = val.value;</p> <p> }</p> <p>else if (val.name =="authcode") {</p> <p>authcode = val.value;</p> <p> }</p> <p>else if (val.name =="name") {</p> <p>name = val.value;</p> <p> }</p> <p>else if (val.name =="address") {</p> <p>address = val.value;</p> <p> }</p> <p>else if (val.name =="business") {</p> <p>business = val.value;</p> <p> }</p> <p>else if (val.name =="province") {</p> <p>province = val.value;</p> <p> }</p> <p>else if (val.name =="city") {</p> <p>city = val.value;</p> <p> }</p> <p>else if (val.name =="area") {</p> <p>area = val.value;</p> <p> }</p> <p>else if (val.name =="invitationCode") {</p> <p>invitationCode = val.value;</p> <p> }</p> <p>else if (val.name =="zipcode") {</p> <p>zipcode = val.value;</p> <p> }</p> <p>else if (val.name =="payProvider") {</p> <p>payProvider = val.value;</p> <p> }</p> <p>})</p> <p>// 表单提交标识</p> <p> let flag =true;</p> <p> if(payProvider==1){</p> <p>$(".Popup").css({"display":"block"});</p> <p> $(".button").click((event) => {</p> <p>$(".pay-mode").hide();</p> <p> event.stopPropagation();</p> <p> event.preventDefault();</p> <p> if(flag) {</p> <p>flag =false;</p> <p> stripe.createToken(card).then((result) => {</p> <p>if (result.error) {</p> <p>// Inform the user if there was an error.</p> <p> var errorElement = document.getElementById('card-errors');</p> <p> errorElement.textContent = result.error.message;</p> <p> }</p> <p>else {</p> <p>let token = result.token.id;</p> <p> setTimeout(()=>{</p> <p>flag =true;</p> <p> }, 3000);</p> <p> App.ajaxWait({</p> <p>url:"<?=\Illuminate\Support\Facades\URL::to('app/stripe/paidGift')?>",</p> <p> type:"POST",</p> <p> data: {</p> <p>'parentNo': parentNo,</p> <p> 'type': type,</p> <p> 'giftId': giftId,</p> <p> 'phone': phone,</p> <p> 'authcode': authcode,</p> <p> 'name': name,</p> <p> 'address': address,</p> <p> 'business': business,</p> <p> 'province': province,</p> <p> 'city': city,</p> <p> 'area': area,</p> <p> 'invitationCode': invitationCode,</p> <p> 'zipcode': zipcode,</p> <p> 'payProvider': payProvider,</p> <p> 'currency':"sgd",</p> <p> 'amount':"398",</p> <p> 'pay_type':2,</p> <p> 'source': token</p> <p>},</p> <p> success:function (res) {</p> <p>App.alert('支付成功！优品质、享购物、趣赚钱，即刻下载app吧！', function () {</p> <p>window.location.href ='/app/download';</p> <p> });</p> <p> flag =true;</p> <p> // if (!res.data) {</p> <p>//</p> <p>// }</p> <p>// else {</p> <p> // App.alert(res && res.err_desc ? res.err_desc : '支付失败');</p> <p>// }</p> <p> }</p> <p>})</p> <p>}</p> <p>});</p> <p> }</p> <p>})</p> <p>}</p> <p>else if(payProvider==2){</p> <p>App.ajaxWait({</p> <p>url:"xxxxxxxxx/app/stripe/createWebOrd",</p> <p> type:"POST",</p> <p> data: {</p> <p>'parentNo': parentNo,</p> <p> 'type': type,</p> <p> 'giftId': giftId,</p> <p> 'phone': phone,</p> <p> 'authcode': authcode,</p> <p> 'name': name,</p> <p> 'address': address,</p> <p> 'business': business,</p> <p> 'province': province,</p> <p> 'city': city,</p> <p> 'area': area,</p> <p> 'invitationCode': invitationCode,</p> <p> 'zipcode': zipcode,</p> <p> 'payProvider': payProvider,</p> <p> 'currency':"sgd",</p> <p> 'amount':"398",</p> <p> 'pay_type':2</p> <p> },</p> <p> success:function (res) {</p> <p>if (res.order_id) {</p> <p>function alipay(amount) {</p> <p>stripe.createSource({</p> <p>type:'alipay',</p> <p> amount:parseInt(amount),</p> <p> currency:'sgd', // usd, eur, ***</p> <p> redirect: {</p> <p>return_url: res['return_url']</p> <p>},</p> <p> metadata: {</p> <p>'order_sn':res['trade_no'],</p> <p> 'order_id':res['order_id'],</p> <p> 'amount':amount,</p> <p> 'business':res['business'],</p> <p> // 'ordered_at':res['created_at']</p> <p> },</p> <p> }).then(function (response) {</p> <p>if (response.error) {</p> <p>alert(response.error.message);</p> <p> }</p> <p>else {</p> <p>console.log(response);</p> <p> processStripeResponse(response.source);</p> <p> }</p> <p>});</p> <p> }</p> <p>function processStripeResponse(source) {</p> <p>window.location.href = source.redirect.url;</p> <p> }</p> <p>alipay(res['amount']);</p> <p> }</p> <p>else {</p> <p>App.alert(res && res.err_desc ? res.err_desc :'支付失败');</p> <p> }</p> <p>}</p> <p>})</p> <p>}</p> <p>});</p> <p> $(".confirm").click(function (e) {</p> <p>e.preventDefault();</p> <p> showPay();</p> <p> });</p> <p> $(".mark").click(function (e) {</p> <p>e.preventDefault();</p> <p> hidePay();</p> <p> });</p> <p> $(".no_icon").click((e)=>{</p> <p>e.preventDefault();</p> <p> hidePay();</p> <p> });</p> <p> function showPay() {</p> <p>// $(".pay-mode").hide();</p> <p> $(".pay-mode").show();</p> <p> $(".mark").show();</p> <p> }</p> <p>function hidePay() {</p> <p>$(".pay-mode").hide();</p> <p> $(".mark").hide();</p> <p> $(".Popup").css({'display':'none'});</p> <p> }</p> </article> </div> </div> </div>  <div id="SOHUCS" sid="1700183199956676608"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Stripe - 支付宝支付（前端）)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1903740317962661888.htm" title="前端请求全面解析：AJAX、Axios 与 Fetch 的使用详解与代码示例" target="_blank">前端请求全面解析：AJAX、Axios 与 Fetch 的使用详解与代码示例</a> <span class="text-muted">jiajia651304</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前端请求全面解析：AJAX、Axios与Fetch的使用详解与代码示例前端请求全面解析：AJAX、Axios与Fetch的使用详解与代码示例1.AJAX——传统的异步请求1.1基本用法示例1.2AJAX特点2.FetchAPI——现代化请求方案2.1基本用法示例2.2Fetch特点3.Axios——第三方HTTP请求库3.1安装Axios3.2基本用法示例3.3Axios特点4.总结前端请求全面解</div> </li> <li><a href="/article/1903734519983304704.htm" title="编程内容简述！" target="_blank">编程内容简述！</a> <span class="text-muted">恶霸不委屈</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E9%9D%92%E5%B0%91%E5%B9%B4%E7%BC%96%E7%A8%8B/1.htm">青少年编程</a><a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96/1.htm">汇编</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>编程是指通过计算机语言来开发软件、程序和应用的过程，通常通过编写一系列的指令，来让计算机完成特定的任务。编程可以涉及多个领域和技术，以下是一些主要的编程内容：1.编程语言编程语言是程序员与计算机进行沟通的桥梁，不同的编程语言适用于不同的任务。常见的编程语言有：Python：简单易学，适用于数据分析、人工智能、网页开发等。JavaScript：网页开发中不可或缺的语言，用于动态网页和前端开发。Jav</div> </li> <li><a href="/article/1903721403350315008.htm" title="Axios 和跨域这两个概念" target="_blank">Axios 和跨域这两个概念</a> <span class="text-muted">PLJJ685</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E7%9A%84%E4%BB%93%E5%BA%93%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/1.htm">前后端分离的仓库管理系统</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.Axios是什么？Axios是一个用于发送网络请求的工具，类似于浏览器自带的fetch，但更强大、更易用。在前端（Vue）中，我们通常用Axios来向后端（SpringBoot）请求数据。举个例子：假设你在一个仓储系统中，前端需要从后端获取商品库存信息。这时，前端就可以用Axios发送一个请求，比如：axios.get('/api/inventory').then(response=>{con</div> </li> <li><a href="/article/1903720643145297920.htm" title="el-table selection 回显选中和禁用" target="_blank">el-table selection 回显选中和禁用</a> <span class="text-muted">wavyhair_</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、回显选中1、type="selection"就是现实选框.2、:row-key="row=>row.id"（必须是唯一的字段，例如：id）和:reserve-selection="true"是必要的，可以记录选中的数据，翻页也支持。row.id":reserve-selection="true"ref="multipleTable"fitstripehighlight-current-rows</div> </li> <li><a href="/article/1903717486902177792.htm" title="麦谷科技-前端面经" target="_blank">麦谷科技-前端面经</a> <span class="text-muted">dancehole</span> <a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>base：车联网，uniapp小程序。面试时间：2025-03月（应届）投递岗位：前端（转正实习）面试流程比较短，可能是因为经历不匹配或者第一题答的不好Tvt时间：上午约一面，下午约二面，隔一天（第三天）约hr面。整体流程还是很快的。HR面去公司线下参观了，整体地理环境也很nice。最后因为个人原因没有入职，也是相当可惜一面自我介绍&BG：两端实习，介绍了一下自己的工作。面试官表示不太感兴趣（问了</div> </li> <li><a href="/article/1903717355742097408.htm" title="Vue3前端开发：组件化设计与状态管理" target="_blank">Vue3前端开发：组件化设计与状态管理</a> <span class="text-muted">caihuayuan4</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a> <div>Vue3前端开发：组件化设计与状态管理一、Vue3组件化设计组件基本概念与特点是一款流行的JavaScript框架，它支持组件化设计，这意味着我们可以将页面分解成多个独立的组件，每个组件负责一部分功能，通过组件的嵌套和复用，可以快速构建复杂的用户界面。组件化设计具有以下特点：组件示例组件选项在上面的代码示例中，我们通过Vue.component方法注册了一个名为my-component的组件，这是</div> </li> <li><a href="/article/1903702429405343744.htm" title="使用 Sa-Token 完成踢人下线功能" target="_blank">使用 Sa-Token 完成踢人下线功能</a> <span class="text-muted"></span> <div>一、需求在企业级项目中，踢人下线是一个很常见的需求，如果要设计比较完善的话，至少需要以下功能点：可以根据用户userId踢出指定会话，对方再次访问系统会被提示：您已被踢下线，请重新登录。可以查询出一个账号共在几个设备端登录，并返回其对应的Token凭证，以便后续操作。可以只踢出一个账号某一个端的会话，其他端不受影响。例如在某电商APP上可以看到当前账号共在几个手机上登录，并注销指定端的会话，当前端</div> </li> <li><a href="/article/1903699821768798208.htm" title="为什么后端路由需要携带 /api 作为前缀？前端如何设置基础路径 /api？" target="_blank">为什么后端路由需要携带 /api 作为前缀？前端如何设置基础路径 /api？</a> <span class="text-muted">z2637305611</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、为什么后端路由需要携带/api作为前缀？1.区分API端点与其他路由在Web应用程序中，后端不仅需要处理API请求，还可能需要处理静态资源（如HTML、CSS、JS文件）或其他服务（如WebSocket）。通过为API路由添加/api前缀，可以清晰地将其与其他请求区分开来，避免路由冲突。例如：API请求：https://example.com/api/users静态资源请求：https://e</div> </li> <li><a href="/article/1903692383581696000.htm" title="开源项目推荐：Mayfly-go" target="_blank">开源项目推荐：Mayfly-go</a> <span class="text-muted">周风队</span> <div>开源项目推荐：Mayfly-gomayfly-goweb版linux(终端文件脚本进程)、数据库(mysqlpgsql高斯达梦)、redis(单机哨兵集群)、mongo统一管理操作平台。项目地址:https://gitcode.com/gh_mirrors/ma/mayfly-goMayfly-go是一个基于浏览器的统一管理操作平台，它支持多种数据库和系统管理功能。该项目主要使用Go语言和前端框架</div> </li> <li><a href="/article/1903692004299173888.htm" title="Flutter App开发，高效解决如何将用户登录手机号部分用星号代替在页面中展示" target="_blank">Flutter App开发，高效解决如何将用户登录手机号部分用星号代替在页面中展示</a> <span class="text-muted">champion_ooO</span> <a class="tag" taget="_blank" href="/search/Flutter/1.htm">Flutter</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>在开发App时，一般都会遇到个人中心的页面，这个时候页面中要展示出来用户当前登录手机号码，但是数据库存的是正常的手机号，需要前端自己来将部分用星号('*')代替。第一步：定义一个变量存储手机号classPersonPageextendsStatefulWidget{constPersonPage({Key?key}):super(key:key);@overrideStatecreateState</div> </li> <li><a href="/article/1903633702395637760.htm" title="前端开发：这就是终点吗？" target="_blank">前端开发：这就是终点吗？</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a> <div>ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读让我们重新回到2021年后远程办公风潮兴起的日子，那时候，程序员岗位炙手可热。机会遍地都是，你甚至只需参加少量培训，通过面试后便能轻松收获年薪超15万的工作，还有余暇拍摄一段《程序员的一天》上传网络。经过短短一年左右的培训，你便踏上了年薪六位数的职业道路——那时候，当程序员似乎是一个人人羡慕的理想职业。然而</div> </li> <li><a href="/article/1903628470756372480.htm" title="SpringBoot接口防抖(防重复提交)，接口幂等性，轻松搞定" target="_blank">SpringBoot接口防抖(防重复提交)，接口幂等性，轻松搞定</a> <span class="text-muted">web18285482512</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>啥是防抖？所谓防抖，一是防用户手抖，二是防网络抖动。在Web系统中，表单提交是一个非常常见的功能，如果不加控制，容易因为用户的误操作或网络延迟导致同一请求被发送多次，进而生成重复的数据记录。要针对用户的误操作，前端通常会实现按钮的loading状态，阻止用户进行多次点击。而对于网络波动造成的请求重发问题，仅靠前端是不行的。为此，后端也应实施相应的防抖逻辑，确保在网络波动的情况下不会接收并处理同一请</div> </li> <li><a href="/article/1903611950290497536.htm" title="春招，作为普通IT实习生的我有哪些想法和准备？" target="_blank">春招，作为普通IT实习生的我有哪些想法和准备？</a> <span class="text-muted">十八朵郁金香</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>想法&随记对即将毕业的大学生来说，秋招和春招是求职的好机会，也是一次尝试向社会进行"自我推销"的机会，体现自己的综合能力，是“意满签Offer”？还是“露出马脚，社死场面”？“准备-天时地利人和-行动”后，我们会有答案。话题回到自己，春招，我有哪些想法？去年，在学校举办校园秋招招聘之前，我已经通过线上投递+线下面试找到实习，在一家人数规模100~200的公司当前端实习生，到现在已有四个多月，没有经</div> </li> <li><a href="/article/1903609934151479296.htm" title="[前端面试场景题]虚拟列表" target="_blank">[前端面试场景题]虚拟列表</a> <span class="text-muted">GISer_Jinger</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>嗯，用户问的是“前端虚拟列表详解”，我需要详细回答这个问题。首先，我得先理解虚拟列表的概念和用途。根据搜索结果，虚拟列表主要用于优化长列表的渲染性能，特别是在处理大量数据时。用户可能想知道它的核心原理、实现方法以及实际应用场景。看网页1提到虚拟列表的定义和关键点，只渲染视口内的数据项，减少DOM节点。网页2和网页4都给出了具体的Vue和原生JS实现案例，比如动态计算起始和结束索引，使用transf</div> </li> <li><a href="/article/1903608290303078400.htm" title="微信小程序的旅游服务助手景点酒店旅游规划的设计与实现" target="_blank">微信小程序的旅游服务助手景点酒店旅游规划的设计与实现</a> <span class="text-muted">QQ1304979694</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>文章目录具体实现截图本项目支持的技术语言研究思路、方法和步骤本系统开发思路主要软件与实现手段系统可行性分析源码获取详细视频演示：文章底部获取博主联系方式！！！！java类核心代码部分展示微信小程序技术现状源码获取/详细视频演示具体实现截图本项目支持的技术语言前端开发框架:vue.js+uniapp数据库mysql版本不限微信开发者工具/hbuiderx数据库工具：Navicat/SQLyog等都可</div> </li> <li><a href="/article/1903576109191065600.htm" title="前端 | debounce 防抖 vs 节流（throttle）" target="_blank">前端 | debounce 防抖 vs 节流（throttle）</a> <span class="text-muted">要加油哦～</span> <a class="tag" taget="_blank" href="/search/vue%E9%A1%B9%E7%9B%AE/1.htm">vue项目</a><a class="tag" taget="_blank" href="/search/vue%E5%AD%A6%E4%B9%A0/1.htm">vue学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>重点知识点：-防抖，最后一次操作后等待执行，用于输入框、缩放等；-节流，每隔一定时间间隔执行，用于页面滚动、鼠标移动、频繁点击。debouncevsthrottle（节流）功能debounce（防抖）throttle（节流）触发时机最后一次操作结束后等待执行每隔一定时间间隔执行一次适用场景输入框、缩放等，操作停止后才执行页面滚动、鼠标移动、频繁点击等目录debouncevsthrottle（节流）</div> </li> <li><a href="/article/1903544435199766528.htm" title="学习记录之游标翻页实现" target="_blank">学习记录之游标翻页实现</a> <span class="text-muted">sjsjsbbsbsn</span> <a class="tag" taget="_blank" href="/search/Java%E5%AD%A6%E4%B9%A0%E4%B9%8B%E8%B7%AF/1.htm">Java学习之路</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98%E6%8A%80%E5%B7%A7/1.htm">项目实战技巧</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>游标翻页本方案参考mallchat实现一.深翻页问题普通翻页前端一般会有个分页条。能够指定一页的条数，以及任意选择查看第几页,假设我们想查询第11页的内容传递过来的参数为:pageNo=11，pageSize=10对应的sql查询为:select*fromtablelimit100,10其中100代表需要跳过的条数，10代表跳过指定条数后，往后需要再取的条数。假设翻页到1w条,那我们要先扫描到这1</div> </li> <li><a href="/article/1903538623685390336.htm" title="Python, C ++开发工厂管理APP" target="_blank">Python, C ++开发工厂管理APP</a> <span class="text-muted">Geeker-2025</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>开发一款通用的**工厂管理App**，结合Python和C++的优势，可以实现高效的后端数据处理、实时的生产监控以及用户友好的前端界面。以下是一个详细的开发方案，涵盖技术选型、功能模块、开发步骤等内容。##技术选型###后端（Python）-**编程语言**：Python-**Web框架**：Django或Flask-**数据库**：PostgreSQL或MySQL-**实时通信**：WebSoc</div> </li> <li><a href="/article/1903536859359801344.htm" title="CEF 控制台添加一函数，枚举注册的供前端使用的CPP交互函数有哪些" target="_blank">CEF 控制台添加一函数，枚举注册的供前端使用的CPP交互函数有哪些</a> <span class="text-muted">清水迎朝阳</span> <a class="tag" taget="_blank" href="/search/CEF%E5%BA%94%E7%94%A8/1.htm">CEF应用</a><a class="tag" taget="_blank" href="/search/CEF/1.htm">CEF</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a><a class="tag" taget="_blank" href="/search/%E6%B3%A8%E5%85%A5%E5%87%BD%E6%95%B0/1.htm">注入函数</a><a class="tag" taget="_blank" href="/search/%E6%B3%A8%E5%86%8C/1.htm">注册</a><a class="tag" taget="_blank" href="/search/CPP/1.htm">CPP</a> <div>一、前序知识1、设置单进程模式，方便调试voidClientApp::OnBeforeCommandLineProcessing(constCefString&process_type,CefRefPtrcommand_line){if(process_type.empty()){//cef在debug模式下有问题#ifdef_DEBUGcommand_line->AppendSwitchWith</div> </li> <li><a href="/article/1903503700064792576.htm" title="「Kubernetes Objects」- Service（学习笔记） @20210227" target="_blank">「Kubernetes Objects」- Service（学习笔记） @20210227</a> <span class="text-muted">k4nzdroid</span> <div>Service，服务，用于暴露Pod以供访问。官方文档及手册KubernetesAPIv1.18/Servicev1coreService?Pod会被创建，并且还会消失，这由ReplicaSets控制。每个Pod都有自己的IP地址，但是这些IP地址不能视为可靠的。那么，如果前端的一部分Pod依赖于后端的Pod，那前端的这些Pod如何找出并追踪后端的Pod？ServiceService是一个抽象，定</div> </li> <li><a href="/article/1903502060016431104.htm" title="JavaScript基础-API 和 Web API" target="_blank">JavaScript基础-API 和 Web API</a> <span class="text-muted">難釋懷</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在现代Web开发中，API（应用程序接口）是连接不同软件组件或系统之间的桥梁。对于前端开发者来说，JavaScript与WebAPI的结合使用尤为重要，它使得我们可以访问浏览器提供的各种功能和服务，从而构建出交互性更强、用户体验更好的网页应用。本文将介绍API的基本概念，重点探讨WebAPI及其在JavaScript中的应用。一、什么是API？API全称为“ApplicationProgrammi</div> </li> <li><a href="/article/1903458696281780224.htm" title=".gitlab-ci.yml 配置文件详解" target="_blank">.gitlab-ci.yml 配置文件详解</a> <span class="text-muted">程序媛夏天</span> <a class="tag" taget="_blank" href="/search/Git/1.htm">Git</a><a class="tag" taget="_blank" href="/search/gitlab/1.htm">gitlab</a><a class="tag" taget="_blank" href="/search/ci%2Fcd/1.htm">ci/cd</a><a class="tag" taget="_blank" href="/search/.gitlab-ci.yml/1.htm">.gitlab-ci.yml</a> <div>个人主页：不爱吃糖的程序媛‍♂️作者简介：前端领域新星创作者、CSDN内容合伙人，专注于前端各领域技术，成长的路上共同学习共同进步，一起加油呀！✨系列专栏：前端面试宝典、JavaScript进阶、vue实战资料领取：前端进阶资料以及文中源码可以在公众号“不爱吃糖的程序媛”领取git工具文档说明：https://docs.gitlab.com/ee/ci/yaml/gitlab_ci_yaml.ht</div> </li> <li><a href="/article/1903422774580408320.htm" title="前端如何实现一个五星评价，鼠标滑动，前边星星颜色的变黄，后边的不变；" target="_blank">前端如何实现一个五星评价，鼠标滑动，前边星星颜色的变黄，后边的不变；</a> <span class="text-muted">修心光</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>直接上代码.star-rating{display:flex;padding:10px0;}.star{position:relative;width:40px;height:40px;}.half{position:absolute;top:0;width:20px;height:40px;overflow:hidden;font-size:40px;color:#e0e0e0;cursor:p</div> </li> <li><a href="/article/1903415088333778944.htm" title="前端如何实现鼠标移上这个元素，另外一个元素变色" target="_blank">前端如何实现鼠标移上这个元素，另外一个元素变色</a> <span class="text-muted">=^_^=银爪</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>1、使用CSS选择器和伪类来实现这个效果具体步骤如下：获取要修改样式的元素使用CSS选择器选中要操作的元素，并使用伪类“:hover”来指定当鼠标悬停在该元素上时应用的样式指定要应用的样式例如，如果您有一个元素ID为“target”，需要将其颜色更改为红色，当鼠标移到ID为“trigger”的元素上时，可以使用以下代码：#trigger:hover#target{color:red;}这段代码指定</div> </li> <li><a href="/article/1903394269893292032.htm" title="推荐开源项目：FastAPI Best Architecture — 极致的后端架构设计" target="_blank">推荐开源项目：FastAPI Best Architecture — 极致的后端架构设计</a> <span class="text-muted">蓬玮剑</span> <div>推荐开源项目：FastAPIBestArchitecture—极致的后端架构设计项目地址:https://gitcode.com/gh_mirrors/fa/fastapi_best_architecture项目简介在寻找一款基于FastAPI构建的强大且灵活的后端解决方案吗？那么，你已经找到了——FastAPIBestArchitecture。这是一个遵循前端与后端分离原则的中间件层解决方案，采</div> </li> <li><a href="/article/1903389604430540800.htm" title="在 Spring Boot 结合 MyBatis 的项目中，实现字段脱敏（如手机号、身份证号、银行卡号等敏感信息的部分隐藏）可以通过以下方案实现" target="_blank">在 Spring Boot 结合 MyBatis 的项目中，实现字段脱敏（如手机号、身份证号、银行卡号等敏感信息的部分隐藏）可以通过以下方案实现</a> <span class="text-muted">冷冷清清中的风风火火</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/springboot/1.htm">springboot</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>在SpringBoot结合MyBatis的项目中，实现字段脱敏（如手机号、身份证号、银行卡号等敏感信息的部分隐藏）可以通过以下方案实现。以下是分步说明和完整代码示例：一、实现方案选择1.方案一：自定义注解+Jackson序列化脱敏适用场景：数据返回给前端时动态脱敏，数据库存储原始数据。优点：无侵入性，通过注解灵活控制脱敏字段，与业务逻辑解耦。核心实现：利用Jackson的JsonSerialize</div> </li> <li><a href="/article/1903383047722561536.htm" title="lrz 源码核心篇剖析：如何实现高效、兼容的图片压缩？" target="_blank">lrz 源码核心篇剖析：如何实现高效、兼容的图片压缩？</a> <span class="text-muted">沐土Arvin</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>写在前面前面是讲解了lrz基础用法,从6开始讲解源码,使用过lrz的可以直接从6开始看,中间也掺杂了一下我自己开发过程中的踩坑和经验分享,欢迎讨论!lrz（LocalResizeIMG）是一个前端图片压缩库，主要用于在浏览器中压缩图片并上传。以下是其主要特点和功能：1.主要功能图片压缩：通过调整图片质量和尺寸来减小文件大小。保持宽高比：压缩时可保持图片原始宽高比。多格式支持：支持常见图片格式如JP</div> </li> <li><a href="/article/1903380900188581888.htm" title="github如何为开源项目作出贡献" target="_blank">github如何为开源项目作出贡献</a> <span class="text-muted">PXM的算法星球</span> <a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a> <div>就在昨天，笔者取得了第一次开源项目贡献，虽然更新的内容很小，但是也算是迈出了第一步1.选择合适的开源项目（1）兴趣优先选择自己感兴趣的项目会更有动力参与，比如你喜欢前端开发，可以关注React、Vue相关的开源项目；如果喜欢后端，可以尝试贡献Django、SpringBoot等项目。（2）关注活跃度一个活跃的开源项目通常意味着更快的反馈和更友好的开发者社区。你可以通过以下方式判断：Issue更新频</div> </li> <li><a href="/article/1903379388280401920.htm" title="HTML5前端第七章节" target="_blank">HTML5前端第七章节</a> <span class="text-muted">NaZiMeKiY</span> <a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a> <div>本章节为前端网页页面实战，包含我们之前所学的全部内容一.创建项目目录1.网站根目录：网站根目录指的是存放网站的第一层文件夹，内部包含当前网站的所有素材，包含HTML，CSS，需要的素材图片等等2.根目录之下的文件夹（1）.images文件夹：存放固定使用的图片素材（2）.uploads文件夹：存放非固定使用的图片素材（3）.CSS文件夹：存放CSS文件（使用link标签引入）在CSS文件夹中又分为</div> </li> <li><a href="/article/1903369809391841280.htm" title="前端面试：[React] scheduler 调度机制原理？" target="_blank">前端面试：[React] scheduler 调度机制原理？</a> <span class="text-muted">returnShitBoy</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>ReactScheduler是React16.8引入的一种调度机制，旨在对高效渲染和复杂应用程序的性能进行优化。它允许React在空闲时间进行渲染，优先处理对用户体验最为重要的任务。以下是Scheduler调度机制的原理，以及它在实际工作中如何帮助管理渲染。1.调度机制的背景React的渲染过程可能会受到多个因素的影响，例如用户输入、网络请求以及其他状态变化。传统的渲染机制在某些情况下可能导致性能</div> </li> <li><a href="/article/77.htm" title="算法单链的创建与删除" target="_blank">算法单链的创建与删除</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div> 先创建结构体 struct student { int data; //int tag;//标记这是第几个 struct student *next; }; // addone 用于将一个数插入已从小到大排好序的链中 struct student *addone(struct student *h,int x){ if(h==NULL) //?????? </div> </li> <li><a href="/article/204.htm" title="《大型网站系统与Java中间件实践》第2章读后感" target="_blank">《大型网站系统与Java中间件实践》第2章读后感</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">java中间件</a> <div> 断断续续花了两天时间试读了《大型网站系统与Java中间件实践》的第2章，这章总述了从一个小型单机构建的网站发展到大型网站的演化过程---整个过程会遇到很多困难，但每一个屏障都会有解决方案，最终就是依靠这些个解决方案汇聚到一起组成了一个健壮稳定高效的大型系统。看完整章内容，</div> </li> <li><a href="/article/331.htm" title="zeus持久层spring事务单元测试" target="_blank">zeus持久层spring事务单元测试</a> <span class="text-muted">deng520159</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div>今天把zeus事务单元测试放出来,让大家指出他的毛病, 1.ZeusTransactionTest.java 单元测试 package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Test; import </div> </li> <li><a href="/article/458.htm" title="Rss 订阅开发" target="_blank">Rss 订阅开发</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E8%AE%A2%E9%98%85/1.htm">订阅</a><a class="tag" taget="_blank" href="/search/rss/1.htm">rss</a><a class="tag" taget="_blank" href="/search/%E8%A7%84%E8%8C%83/1.htm">规范</a> <div> RSS是 Really Simple Syndication的缩写（对rss2.0而言，是这三个词的缩写，对rss1.0而言则是RDF Site Summary的缩写，1.0与2.0走的是两个体系）。 RSS</div> </li> <li><a href="/article/585.htm" title="分页查询实现" target="_blank">分页查询实现</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5%E6%9F%A5%E8%AF%A2/1.htm">分页查询</a> <div>在查询列表时我们常常会用到分页，分页的好处就是减少数据交换，每次查询一定数量减少数据库压力等等。按实现形式分前台分页和服务器分页：前台分页就是一次查询出所有记录，在页面中用js进行虚拟分页，这种形式在数据量较小时优势比较明显，一次加载就不必再访问服务器了，但当数据量较大时会对页面造成压力，传输速度也会大幅下降。服务器分页就是每次请求相同数量记录，按一定规则排序，每次取一定序号直接的数据</div> </li> <li><a href="/article/712.htm" title="spring jms异步消息处理" target="_blank">spring jms异步消息处理</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a> <div>spring JMS对于异步消息处理基本上只需配置下就能进行高效的处理。其核心就是消息侦听器容器，常用的类就是DefaultMessageListenerContainer。该容器可配置侦听器的并发数量，以及配合MessageListenerAdapter使用消息驱动POJO进行消息处理。且消息驱动POJO是放入TaskExecutor中进行处理，进一步提高性能，减少侦听器的阻塞。具体配置如下： </div> </li> <li><a href="/article/839.htm" title="highCharts柱状图" target="_blank">highCharts柱状图</a> <span class="text-muted">布衣凌宇</span> <a class="tag" taget="_blank" href="/search/hightCharts/1.htm">hightCharts</a><a class="tag" taget="_blank" href="/search/%E6%9F%B1%E5%9B%BE/1.htm">柱图</a> <div>第一步：导入 exporting.js,grid.js,highcharts.js;第二步：写controller @Controller@RequestMapping(value="${adminPath}/statistick")public class StatistickController { private UserServi</div> </li> <li><a href="/article/966.htm" title="我的spring学习笔记2-IoC（反向控制依赖注入）" target="_blank">我的spring学习笔记2-IoC（反向控制依赖注入）</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/Spring+%E6%95%99%E7%A8%8B/1.htm">Spring 教程</a><a class="tag" taget="_blank" href="/search/spring3+%E6%95%99%E7%A8%8B/1.htm">spring3 教程</a><a class="tag" taget="_blank" href="/search/Spring+%E5%85%A5%E9%97%A8/1.htm">Spring 入门</a> <div>IoC（反向控制依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明：如：程序中有 Mysql.calss 、Oracle.class 、SqlSe</div> </li> <li><a href="/article/1093.htm" title="TLS java简单实现" target="_blank">TLS java简单实现</a> <span class="text-muted">antlove</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ssl/1.htm">ssl</a><a class="tag" taget="_blank" href="/search/keystore/1.htm">keystore</a><a class="tag" taget="_blank" href="/search/tls/1.htm">tls</a><a class="tag" taget="_blank" href="/search/secure/1.htm">secure</a> <div> 1. SSLServer.java package ssl; import java.io.FileInputStream; import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket; import java.security.KeyStore; import </div> </li> <li><a href="/article/1220.htm" title="Zip解压压缩文件" target="_blank">Zip解压压缩文件</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/Zip%E6%A0%BC%E5%BC%8F%E8%A7%A3%E5%8E%8B/1.htm">Zip格式解压</a><a class="tag" taget="_blank" href="/search/Zip%E6%B5%81%E7%9A%84%E4%BD%BF%E7%94%A8/1.htm">Zip流的使用</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E8%A7%A3%E5%8E%8B/1.htm">文件解压</a> <div> ZIP文件的解压缩实质上就是从输入流中读取数据。Java.util.zip包提供了类ZipInputStream来读取ZIP文件,下面的代码段创建了一个输入流来读取ZIP格式的文件; ZipInputStream in = new ZipInputStream(new FileInputStream(zipFileName)); &n</div> </li> <li><a href="/article/1347.htm" title="underscore.js 学习（一）" target="_blank">underscore.js 学习（一）</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/underscore/1.htm">underscore</a> <div> 工作中需要用到underscore.js，发现这是一个包括了很多基本功能函数的js库，里面有很多实用的函数。而且它没有扩展 javascript的原生对象。主要涉及对Collection、Object、Array、Function的操作。学</div> </li> <li><a href="/article/1474.htm" title="java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon)" target="_blank">java jvm常用命令工具——jstatd命令(Java Statistics Monitoring Daemon)</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jstatd/1.htm">jstatd</a> <div>1.介绍 jstatd是一个基于RMI（Remove Method Invocation）的服务程序，它用于监控基于HotSpot的JVM中资源的创建及销毁，并且提供了一个远程接口允许远程的监控工具连接到本地的JVM执行命令。 jstatd是基于RMI的，所以在运行jstatd的服务</div> </li> <li><a href="/article/1601.htm" title="【Spring框架三】Spring常用注解之Transactional" target="_blank">【Spring框架三】Spring常用注解之Transactional</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/transactional/1.htm">transactional</a> <div>Spring可以通过注解@Transactional来为业务逻辑层的方法(调用DAO完成持久化动作)添加事务能力，如下是@Transactional注解的定义： /* * Copyright 2002-2010 the original author or authors. * * Licensed under the Apache License, Version </div> </li> <li><a href="/article/1728.htm" title="我(程序员)的前进方向" target="_blank">我(程序员)的前进方向</a> <span class="text-muted">bitray</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>作为一个普通的程序员,我一直游走在java语言中,java也确实让我有了很多的体会.不过随着学习的深入,java语言的新技术产生的越来越多,从最初期的javase,我逐渐开始转变到ssh,ssi,这种主流的码农,.过了几天为了解决新问题,webservice的大旗也被我祭出来了,又过了些日子jms架构的activemq也开始必须学习了.再后来开始了一系列技术学习,osgi,restful.....</div> </li> <li><a href="/article/1855.htm" title="nginx lua开发经验总结" target="_blank">nginx lua开发经验总结</a> <span class="text-muted">ronin47</span> <div>使用nginx lua已经两三个月了，项目接开发完毕了，这几天准备上线并且跟高德地图对接。回顾下来lua在项目中占得必中还是比较大的，跟PHP的占比差不多持平了，因此在开发中遇到一些问题备忘一下 1：content_by_lua中代码容量有限制，一般不要写太多代码，正常编写代码一般在100行左右（具体容量没有细心测哈哈，在4kb左右），如果超出了则重启nginx的时候会报 too long pa</div> </li> <li><a href="/article/1982.htm" title="java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶" target="_blank">java-66-用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。颠倒之后的栈为{5,4,3,2,1}，5处在栈顶</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Stack; public class ReverseStackRecursive { /** * Q 66.颠倒栈。 * 题目：用递归颠倒一个栈。例如输入栈{1,2,3,4,5}，1在栈顶。 * 颠倒之后的栈为{5,4,3,2,1}，5处在栈顶。 *1. Pop the top element *2. Revers</div> </li> <li><a href="/article/2109.htm" title="正确理解Linux内存占用过高的问题" target="_blank">正确理解Linux内存占用过高的问题</a> <span class="text-muted">cfyme</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux开机后，使用top命令查看，4G物理内存发现已使用的多大3.2G，占用率高达80%以上： Mem: 3889836k total, 3341868k used, 547968k free, 286044k buffers Swap: 6127608k total,&nb</div> </li> <li><a href="/article/2236.htm" title="[JWFD开源工作流]当前流程引擎设计的一个急需解决的问题" target="_blank">[JWFD开源工作流]当前流程引擎设计的一个急需解决的问题</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a> <div> 当我们的流程引擎进入IRC阶段的时候，当循环反馈模型出现之后，每次循环都会导致一大堆节点内存数据残留在系统内存中，循环的次数越多，这些残留数据将导致系统内存溢出，并使得引擎崩溃。。。。。。而解决办法就是利用汇编语言或者其它系统编程语言，在引擎运行时，把这些残留数据清除掉。</div> </li> <li><a href="/article/2363.htm" title="自定义类的equals函数" target="_blank">自定义类的equals函数</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/equals/1.htm">equals</a> <div>仅作笔记使用 public class VectorQueue { private final Vector<VectorItem> queue; private class VectorItem { private final Object item; private final int quantity; public VectorI</div> </li> <li><a href="/article/2490.htm" title="Linux下安装R语言" target="_blank">Linux下安装R语言</a> <span class="text-muted">datageek</span> <a class="tag" taget="_blank" href="/search/R%E8%AF%AD%E8%A8%80+linux/1.htm">R语言 linux</a> <div>命令如下：sudo gedit /etc/apt/sources.list1、deb http://mirrors.ustc.edu.cn/CRAN/bin/linux/ubuntu/ precise/ 2、deb http://dk.archive.ubuntu.com/ubuntu hardy universesudo apt-key adv --keyserver ke</div> </li> <li><a href="/article/2617.htm" title="如何修改mysql 并发数(连接数)最大值" target="_blank">如何修改mysql 并发数(连接数)最大值</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>MySQL的连接数最大值跟MySQL没关系，主要看系统和业务逻辑了方法一：进入MYSQL安装目录打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100 修改为 max_connections=1000 服务里重起MYSQL即可　　方法二：MySQL的最大连接数默认是100客户端登录：mysql -uusername -ppass</div> </li> <li><a href="/article/2744.htm" title="单一功能原则" target="_blank">单一功能原则</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1/1.htm">面向对象的程序设计</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1/1.htm">软件设计</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%8E%9F%E5%88%99/1.htm">编程原则</a> <div>单一功能原则[ 编辑] SOLID 原则单一功能原则开闭原则 Liskov代换原则接口隔离原则依赖反转原则查论编在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有</div> </li> <li><a href="/article/2871.htm" title="POJO、VO和JavaBean区别和联系" target="_blank">POJO、VO和JavaBean区别和联系</a> <span class="text-muted">fanmingxing</span> <a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/javabean/1.htm">javabean</a> <div>POJO和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Plain Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比POJO复杂很多，JavaBean是一种组件技术，就好像你做了一个扳子，而这个扳子会在很多地方被</div> </li> <li><a href="/article/2998.htm" title="SpringSecurity3.X--LDAP：AD配置" target="_blank">SpringSecurity3.X--LDAP：AD配置</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/SpringSecurity/1.htm">SpringSecurity</a> <div>前面介绍过基于本地数据库验证的方式，参考http://hanqunfeng.iteye.com/blog/1155226，这里说一下如何修改为使用AD进行身份验证【只对用户名和密码进行验证，权限依旧存储在本地数据库中】。将配置文件中的如下部分删除：  </div> </li> <li><a href="/article/3125.htm" title="mac mysql 修改密码" target="_blank">mac mysql 修改密码</a> <span class="text-muted">IXHONG</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>$ sudo /usr/local/mysql/bin/mysqld_safe –user=root & //启动MySQL(也可以通过偏好设置面板来启动)$ sudo /usr/local/mysql/bin/mysqladmin -uroot password yourpassword //设置MySQL密码（注意，这是第一次MySQL密码为空的时候的设置命令，如果是修改密码，还需在-</div> </li> <li><a href="/article/3252.htm" title="设计模式--抽象工厂模式" target="_blank">设计模式--抽象工厂模式</a> <span class="text-muted">kerryg</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>抽象工厂模式：工厂模式有一个问题就是，类的创建依赖于工厂类，也就是说，如果想要拓展程序，必须对工厂类进行修改，这违背了闭包原则。我们采用抽象工厂模式，创建多个工厂类，这样一旦需要增加新的功能，直接增加新的工厂类就可以了，不需要修改之前的代码。总结：这个模式的好处就是，如果想增加一个功能，就需要做一个实现类，</div> </li> <li><a href="/article/3379.htm" title="评"高中女生军训期跳楼”" target="_blank">评"高中女生军训期跳楼”</a> <span class="text-muted">nannan408</span> <div> 首先，先抛出我的观点，各位看官少点砖头。那就是，中国的差异化教育必须做起来。孔圣人有云：有教无类。不同类型的人，都应该有对应的教育方法。目前中国的一体化教育，不知道已经扼杀了多少创造性人才。我们出不了爱迪生，出不了爱因斯坦，很大原因，是我们的培养思路错了，我们是第一要“顺从”。如果不顺从，我们的学校，就会用各种方法，罚站，罚写作业，各种罚。军</div> </li> <li><a href="/article/3506.htm" title="scala如何读取和写入文件内容？" target="_blank">scala如何读取和写入文件内容？</a> <span class="text-muted">qindongliang1922</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>直接看如下代码： package file import java.io.RandomAccessFile import java.nio.charset.Charset import scala.io.Source import scala.reflect.io.{File, Path} /** * Created by qindongliang on 2015/</div> </li> <li><a href="/article/3633.htm" title="C语言算法之百元买百鸡" target="_blank">C语言算法之百元买百鸡</a> <span class="text-muted">qiufeihu</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱买百鸡问题”，鸡翁一，值钱五，鸡母一，值钱三，鸡雏三，值钱一，百钱买百鸡，问翁，母，雏各几何？代码如下： #include <stdio.h> int main() { int cock,hen,chick; /*定义变量为基本整型*/ for(coc</div> </li> <li><a href="/article/3760.htm" title="Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode" target="_blank">Hadoop集群安全性：Hadoop中Namenode单点故障的解决方案及详细介绍AvatarNode</a> <span class="text-muted">wyz2009107220</span> <a class="tag" taget="_blank" href="/search/NameNode/1.htm">NameNode</a> <div>正如大家所知，NameNode在Hadoop系统中存在单点故障问题，这个对于标榜高可用性的Hadoop来说一直是个软肋。本文讨论一下为了解决这个问题而存在的几个solution。 1. Secondary NameNode 原理：Secondary NN会定期的从NN中读取editlog，与自己存储的Image进行合并形成新的metadata image 优点：Hadoop较早的版本都自带，</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>