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/1835194426499100672.htm" title="外卖霸王餐返利外卖会员卡小程序开发" target="_blank">外卖霸王餐返利外卖会员卡小程序开发</a> <span class="text-muted">闹小艾</span> <a class="tag" taget="_blank" href="/search/good506070/1.htm">good506070</a><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/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账</div> </li> <li><a href="/article/1835188875916570624.htm" title="终于搞懂TS中的泛型啦! | typescript 入门指南 04" target="_blank">终于搞懂TS中的泛型啦! | typescript 入门指南 04</a> <span class="text-muted">程序员王天</span> <a class="tag" taget="_blank" href="/search/TypeScript%E5%AE%9E%E8%B7%B5%E6%8C%87%E5%8D%97/1.htm">TypeScript实践指南</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><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a> <div>大家好，我是王天~今天分享的是《ts入门指南》系列中第四篇，主要讲解ts中的泛型应用泛型在ts中是比较重要的概念，我花挺长时间才搞明白，整理输出这篇文章，希望能帮助到大家~《ts入门指南》系列，点击下方蓝色字体即可访问TsvsJs谁适合前端开发？|TypeScript入门指南01详解tsconfig.json配置文件|TypeScript入门指南02必学！TypeScript语法类型基础|Type</div> </li> <li><a href="/article/1835186351805394944.htm" title="前端HTML+CSS+JS的入门学习" target="_blank">前端HTML+CSS+JS的入门学习</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一.HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如和，其中是开始标签，表示一个</div> </li> <li><a href="/article/1835162742533746688.htm" title="全面指南：用户行为从前端数据采集到实时处理的最佳实践" target="_blank">全面指南：用户行为从前端数据采集到实时处理的最佳实践</a> <span class="text-muted">数字沉思</span> <a class="tag" taget="_blank" href="/search/%E8%90%A5%E9%94%80/1.htm">营销</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E9%87%8F%E8%BF%90%E8%90%A5/1.htm">流量运营</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</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%86%85%E5%AE%B9%E8%BF%90%E8%90%A5/1.htm">内容运营</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信</div> </li> <li><a href="/article/1835133874892533760.htm" title="前端使用react-intl-universal进行国际化" target="_blank">前端使用react-intl-universal进行国际化</a> <span class="text-muted">Stephy_Yy</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E8%B0%83%E7%A0%94/1.htm">调研</a><a class="tag" taget="_blank" href="/search/reactjs/1.htm">reactjs</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一、国际化/i18n目前国际化，就是开发者写对象，一个key关联若干语种的翻译。相比于浏览器自带的翻译功能，语义更加准确。“国际化”的简称：i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）二、react项目国际化react-intl是业界最受欢迎的软件包之一：React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的</div> </li> <li><a href="/article/1835131605585326080.htm" title="html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示" target="_blank">html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示</a> <span class="text-muted">睿理</span> <div>html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以</div> </li> <li><a href="/article/1835125416487120896.htm" title="Java在Controller生成Excel供前端直接下载" target="_blank">Java在Controller生成Excel供前端直接下载</a> <span class="text-muted">pengjunlee</span> <a class="tag" taget="_blank" href="/search/SpringBoot%E9%87%8D%E7%82%B9%E8%AF%A6%E8%A7%A3/1.htm">SpringBoot重点详解</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E5%87%BA%E6%96%87%E4%BB%B6/1.htm">导出文件</a><a class="tag" taget="_blank" href="/search/POI/1.htm">POI</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/Controller/1.htm">Controller</a> <div>在许多企业办公系统中，经常会有用户要求，需要对数据进行统计并且可以直接下载Excel文件，这样子的话，既然客户提出了要求，我们就应该去满足吖，毕竟客户是上帝嘛，那么我们如何去实现呢？且看我为你一一道来。POI简介JakartaPOI是一套用于访问微软格式文档的JavaAPI。JakartaPOI有很多组件组成，其中有用于操作Excel格式文件的HSSF和用于操作Word的HWPF，在各种组件中目前</div> </li> <li><a href="/article/1835118610398408704.htm" title="解决前端导出excel文件，打开为乱码" target="_blank">解决前端导出excel文件，打开为乱码</a> <span class="text-muted">荔枝，你让我拿什么荔枝！</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>前端开发中，导入和导出文件是比较常见的业务场景，常见的情况是：后端返回一个二进制的流文件，前端将其转化为excel文件即可。但是往往会出现转化后的excel文件内容位乱码的情况，本文中提供了两个解决方案：方案一：用户自定义上传方法添加附件添加附件代码解读：上述代码采用了element-ui的el-upload文件上传的组件。改组件有两种文件上传的方式：1.组件自带的上传方法，只需要给其设置acti</div> </li> <li><a href="/article/1835097184824029184.htm" title="【Java】如何将二进制转换成MultipartFile" target="_blank">【Java】如何将二进制转换成MultipartFile</a> <span class="text-muted">Mxin5</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>业务场景：前端发送请求到后端进行文件上传，后端接收文件并调用第三方接口进行文件处理，响应格式为二进制，然后我们需要将二进制进行转换为MultipartFile进行文件上传。如果你想要将File转换成MultipartFile，可以参考：【Java】如何将File转换成MultipartFile_javafile转multipartfile_MXin5的博客-CSDN博客1.传递二进制respons</div> </li> <li><a href="/article/1835093025827680256.htm" title="【Java将File完美转为MultipartFile】:亲测有效" target="_blank">【Java将File完美转为MultipartFile】:亲测有效</a> <span class="text-muted">阿火~</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>由于multipartFile有很多有用的api,但是有时候我们接收到前台的参数是文件名和文件内容,而不是文件,此时不能使用multipartFile接收,导致处理起来很不方便,比如我用minio上传文件,minio需要multipartFile类型的文件,而我拿到前端传来的文件名和文件内容只能自己通过File类创建文件,所以如果想用multipartFile类型就需要自己转换,然而天不遂人愿,并</div> </li> <li><a href="/article/1835091011232165888.htm" title="基于Google authentic实现的双因子登录认证系统前后台基于SSMP+Vue+Element（解决SecureRandom造成的服务器请求缓慢）" target="_blank">基于Google authentic实现的双因子登录认证系统前后台基于SSMP+Vue+Element（解决SecureRandom造成的服务器请求缓慢）</a> <span class="text-muted">Tate_Brown</span> <a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/JAVA/1.htm">JAVA</a><a class="tag" taget="_blank" href="/search/IDEA/1.htm">IDEA</a><a class="tag" taget="_blank" href="/search/DEBUG/1.htm">DEBUG</a><a class="tag" taget="_blank" href="/search/VUE/1.htm">VUE</a> <div>用md5两次加盐密码，可以灵活更换算法--直接上代码地址：JAVA后台：https://github.com/TateBrownJava/TwoFALogindemoBackendVue前端：https://github.com/TateBrownJava/TwoFALoginDemofrontend-------------------------------------------------</div> </li> <li><a href="/article/1835065671130640384.htm" title="前端基础面试题·第三篇——JavaScript（其二）" target="_blank">前端基础面试题·第三篇——JavaScript（其二）</a> <span class="text-muted">DT——</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.深浅拷贝1.浅拷贝浅拷贝会创建一个新的对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝就是改引用类型的地址。//常见的浅拷贝1.Object.assign({},obj)//对象浅拷贝assign⽅法可以⽤于处理数组，不过会把数组视为对象，⽐如这⾥会把⽬标数组视为是属性为0、1、2的对象，所以源数组的0、1属性的值覆盖了⽬标对</div> </li> <li><a href="/article/1835057978672246784.htm" title="nginx部署前端项目的一些配置【刚入门】" target="_blank">nginx部署前端项目的一些配置【刚入门】</a> <span class="text-muted">weixin_30847271</span> <a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>前期准备：在linux上安装nginx，我用的是腾讯云centos7服务器，具体的安装过程可以到腾讯云的开发者实验室里体验，自己先试试水。修改nginx.conf配置文件，我用到的修改只是以下的部分。1.端口号2.项目的存放位置server{listen8088default_server;#访问的端口号。listen[::]:8088default_server;server_name_;#ro</div> </li> <li><a href="/article/1835022806400724992.htm" title="AJAX异步请求数据" target="_blank">AJAX异步请求数据</a> <span class="text-muted">铸键为犁</span> <a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>文章目录前言一、AJAX是什么？二、使用步骤1.语法格式2.示例2.注意事项总结前言本篇主要介绍怎么使用AJAX向服务器请求数据。一、AJAX是什么？异步请求技术,可以实现页面局部刷新,在不刷新页面的情况下发送请求到后台加载数据,并且展现在前端二、使用步骤1.语法格式代码如下：$.get(url,data,function(data){})发送get请求参数1:url是后台服务器地址参数2:dat</div> </li> <li><a href="/article/1835019650895802368.htm" title="python基于django/flask的NBA球员大数据分析与可视化python+java+node.js" target="_blank">python基于django/flask的NBA球员大数据分析与可视化python+java+node.js</a> <span class="text-muted">QQ_511008285</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</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/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以本文针对NBA球员的大数据进行</div> </li> <li><a href="/article/1835019524521422848.htm" title="Java基于spring boot的国产电影数据分析与可视化python+java+node.js" target="_blank">Java基于spring boot的国产电影数据分析与可视化python+java+node.js</a> <span class="text-muted">QQ_511008285</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</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/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a> <div>前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以该系统使用进行大数据处理和</div> </li> <li><a href="/article/1835010068240756736.htm" title="vue 表格左右拖拽调整列宽_vue中实现拖动调整左右两侧div的宽度的示例代码" target="_blank">vue 表格左右拖拽调整列宽_vue中实现拖动调整左右两侧div的宽度的示例代码</a> <span class="text-muted">weixin_40008969</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E5%B7%A6%E5%8F%B3%E6%8B%96%E6%8B%BD%E8%B0%83%E6%95%B4%E5%88%97%E5%AE%BD/1.htm">表格左右拖拽调整列宽</a> <div>写在最前最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样这是我最终的实现效果还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们提供的代码，加了亿点点自己所需要的细节。实现原理如上图所示，我们需要将要实</div> </li> <li><a href="/article/1835007167686602752.htm" title="rsync exited with code 255.Load key “...“: invalid format Permission denied, please try again." target="_blank">rsync exited with code 255.Load key “...“: invalid format Permission denied, please try again.</a> <span class="text-muted">沧州刺史</span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/actions/1.htm">actions</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a> <div>在配置githubactions自动部署前端项目到服务器上时，登录服务器使用的是秘钥登录。出现报错：[general]GITHUB_WORKSPACE:/home/runner/work/clogin-frontend/clogin-frontend[SSH]Creating/home/runner/.sshdirin/home/runner/work/clogin-frontend/clogin</div> </li> <li><a href="/article/1835005024372092928.htm" title="【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”" target="_blank">【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”</a> <span class="text-muted">coderYYY</span> <a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/bug%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">bug解决方案</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a> <div>作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》自从半月前，通义灵码一运行就会报这个错尝试了以下方法，都无法解决：阿里云官方方法：删除c盘的.lingma卸载重新安装通义灵码以管理员身份运行VSCode防火墙设置准入安装之前的版本最后是在扩展设置里面解决的路径不填也可</div> </li> <li><a href="/article/1835004897926410240.htm" title="微信小程序生成小程序转发链接，携带参数跳转到另外一个页面" target="_blank">微信小程序生成小程序转发链接，携带参数跳转到另外一个页面</a> <span class="text-muted">coderYYY</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E6%95%99%E7%A8%8B%E4%BB%A5%E5%8F%8A%E4%BB%A3%E7%A0%81/1.htm">前端项目教程以及代码</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><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/%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%BE%AE%E4%BF%A1/1.htm">微信</a> <div>作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》✨一、前言需求：在页面A生成分享链接（携带参数），分享到微信聊天后，好友点击链接可跳转到页面B，页面B可获取到参数二、具体实现pageA（生成链接页面）：通过给button组件设置属性</div> </li> <li><a href="/article/1834999618279141376.htm" title="前端性能优化" target="_blank">前端性能优化</a> <span class="text-muted">EdmundChen</span> <div>要做性能优化，首先我们得知道用户从开始访问站点到看结果的这一段时间到底后花在了哪些地方。这就设计到一个经典问题。在游览器输入地址按下回车键之后到用户看到结果经历了哪些过程，这里简单说一下大的几个过程。（假设是输入的一个域名而非IP）1.通过DNS解析获得网址的对应IP地址2.浏览器拿到IP地址与远程web服务器通过TCP三次握手协商来建立一个TCP/IP连接3.浏览器通过HTTP接发送请求4.服务</div> </li> <li><a href="/article/1834998844144840704.htm" title="前端页面实现table可拖动改变列宽" target="_blank">前端页面实现table可拖动改变列宽</a> <span class="text-muted">牧码人</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jQuery/1.htm">jQuery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E6%8B%96%E5%8A%A8/1.htm">表格拖动</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/colResizable/1.htm">colResizable</a> <div>此处实现页面的table表格可以自由拖动列宽，拖动时表格内文字不换行，超出部分以...代替，实现步骤如下：1.首先引入jQuery和colResizable的js文件，colResizable支持表格拖动改变列宽，但基于jQuery，（1）colResizable可以去：http://www.bacubacu.com/colresizable/#rangeSlider下载（2）引入文件：2.编写j</div> </li> <li><a href="/article/1834993298238959616.htm" title="基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板" target="_blank">基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板</a> <span class="text-muted">abments</span> <a class="tag" taget="_blank" href="/search/%E5%AE%9E%E7%94%A8%E5%B0%8F%E5%B7%A5%E5%85%B7/1.htm">实用小工具</a><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/html/1.htm">html</a> <div>效果图基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。源码结构下载地址</div> </li> <li><a href="/article/1834992116988735488.htm" title="前端入门：JavaScript基础介绍" target="_blank">前端入门：JavaScript基础介绍</a> <span class="text-muted">虞锦雯</span> <div>一、JavaScript介绍Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协</div> </li> <li><a href="/article/1834989261632401408.htm" title="Web开发详解" target="_blank">Web开发详解</a> <span class="text-muted">你可以自己看</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>要做Web开发，就好像你在厨房里要做一顿丰盛的晚餐，从准备食材到最后上桌，整个过程得协调得当。Web开发的流程有前端、后端、数据库、API，以及其他的工具和技术来共同组成。别担心，听起来复杂，但我会给你讲得生动有趣，让你感受到Web开发的美妙。1.前端开发（Web开发的颜值担当）前端就是用户能直接看到和互动的部分，给人的第一印象尤为重要，简直就是网站的“面子工程”。1.1HTML-构建页面骨架HT</div> </li> <li><a href="/article/1834974005057122304.htm" title="智能合约系统DAPP开发" target="_blank">智能合约系统DAPP开发</a> <span class="text-muted">I592O929783</span> <a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>智能合约系统DAPP（去中心化应用）的开发是一个复杂且综合性的过程，它结合了区块链技术、智能合约编程、前端开发以及安全性等多方面的知识和技能。以下是对智能合约系统DAPP开发过程的详细概述：一、需求分析明确应用场景：首先，需要明确DAPP的应用场景，如金融、游戏、社交等。功能需求：确定DAPP需要实现的具体功能，包括数据处理、用户交互等。用户群体：了解目标用户群体的需求和习惯，以便更好地设计DAP</div> </li> <li><a href="/article/1834969715856994304.htm" title="【前端】解决element-ui两层dialog嵌套，遮罩层消失的问题。" target="_blank">【前端】解决element-ui两层dialog嵌套，遮罩层消失的问题。</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/ui/1.htm">ui</a> <div>背景总觉得element-uidialog的遮罩层逻辑有点晦涩，当一个dialog内嵌另一个dialog时，它的遮罩层却始终只有一个，也就是下方class="v-modal"的div。可以看到，v-modal的层级总是比dialog低一层。问题当两层dialog为直接父子关系时，我们可以简单的使用其属性append-to-body,modal-append-to-body来解决问题：如，第二层di</div> </li> <li><a href="/article/1834967192169443328.htm" title="论文分享系列（二）——论微服务架构及其应用" target="_blank">论文分享系列（二）——论微服务架构及其应用</a> <span class="text-muted">马斯洛金字塔下的小灵猴儿</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E8%80%83%E9%AB%98%E9%A1%B9%E6%9E%B6%E6%9E%84%E5%B8%88/1.htm">软考高项架构师</a><a class="tag" taget="_blank" href="/search/%E8%AE%BA%E5%BE%AE%E6%9C%8D%E5%8A%A1%E6%9E%B6%E6%9E%84%E5%8F%8A%E5%85%B6%E5%BA%94%E7%94%A8/1.htm">论微服务架构及其应用</a><a class="tag" taget="_blank" href="/search/%E8%AE%BA%E6%96%87/1.htm">论文</a> <div>论微服务架构及其应用摘要2023年5月，我司启动了精彩购电商系统的开发工作，该项目组中我担任系统架构师岗位，主要负责整体架构设计与中间件选型。本文以该电商平台为例，将介绍微服务架构的特点、应用场景以及实现方法。系统以SpringCloud微服务框架开发，分为前端Web服务、平台保障服务、业务服务三部分。前端Web服务由负载均衡与服务器集群结合，实现高并发的前台界面；平台保障服务以Eureka为中心</div> </li> <li><a href="/article/1834963034653683712.htm" title="React 前端应用结合 Nginx 部署指南及常见错误排查" target="_blank">React 前端应用结合 Nginx 部署指南及常见错误排查</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/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>在现代Web开发中，React已成为构建用户界面的流行选择，而Nginx则是一个高性能的Web服务器，广泛用于静态文件的托管和负载均衡。在本篇博客中，我们将详细介绍如何将一个React应用部署到Nginx上，并探讨在部署过程中可能遇到的常见错误及其解决方案。部署步骤1.准备React应用首先，确保你已经创建了一个React应用。如果还没有，可以使用CreateReactApp快速生成一个基础项目：</div> </li> <li><a href="/article/1834926216486940672.htm" title="JS 获取数组对象中某个属性的最大值或最小值" target="_blank">JS 获取数组对象中某个属性的最大值或最小值</a> <span class="text-muted">qq_36437172</span> <a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a><a class="tag" taget="_blank" href="/search/Math.max/1.htm">Math.max</a><a class="tag" taget="_blank" href="/search/Math.min/1.htm">Math.min</a><a class="tag" taget="_blank" href="/search/sort/1.htm">sort</a><a class="tag" taget="_blank" href="/search/apply/1.htm">apply</a> <div>最近的开发中经常会遇到前端自己生成唯一id，然后在数组中增加删除插入对象，这样一来就要的要当前使用的id的最大值。总结一下，有两种比较简便的方法可以做到：1.将属性值通过map生成一个数组，再使用Math.max取最大值2.使用排序sort，先对数组的项排序，再取排序后的对应的项的值数组对象如下,求id的最大值和最小值list=[{id:1,name:'jack'}, {id:2,name:</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>