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> <!--PC和WAP自适应版--> <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"> <!-- 文章页-右侧1 动态广告位 --> <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> <!-- 文章页-右侧2 动态广告位 --> <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> <!-- 文章页-右侧3 动态广告位 --> <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/1891273089291972608.htm" title="nodejs:express + js-mdict 网页查询英汉词典,能显示图片" target="_blank">nodejs:express + js-mdict 网页查询英汉词典,能显示图片</a> <span class="text-muted">belldeep</span> <a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/js-mdict/1.htm">js-mdict</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a> <div>向DeepSeekR1提问:我想写一个Web前端网页,后台用nodejs+js-mdict,实现在线查询英语单词,并能显示图片1.项目结构首先,创建一个项目目录,结构如下:mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉</div> </li> <li><a href="/article/1891260608041512960.htm" title="前端开发:Vue项目报错Unknown custom element:XXX - did you register the component correctly…的解决方法丨蓄力计划" target="_blank">前端开发:Vue项目报错Unknown custom element:XXX - did you register the component correctly…的解决方法丨蓄力计划</a> <span class="text-muted">三掌柜666</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%BF%9B%E9%98%B6/1.htm">前端开发进阶</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>导读Vue项目报错Unknowncustomelement:XXX-didyouregisterthecomponentcorrectly…的解决方法。问题前段时间在做前端项目的时候,遇到了一个关于饿了么框架的报错问题,具体报错信息如下所示:[Vuewarn]:Unknowncustomelement:-didyouregisterthecomponentcorrectly?Forrecursiv</div> </li> <li><a href="/article/1891249758090096640.htm" title="给Kkfileview加请求头鉴权接入" target="_blank">给Kkfileview加请求头鉴权接入</a> <span class="text-muted">qq_41369135</span> <a class="tag" taget="_blank" href="/search/okhttp/1.htm">okhttp</a><a class="tag" taget="_blank" href="/search/kkfileview/1.htm">kkfileview</a> <div>所有接入前端token放localStorage,或者后端cookie中获取鉴权本案例以放localStorage为例一、创建global.js$(document).ready(function(){//设置全局的AJAX请求头$.ajaxSetup({headers:{'Authentication':localStorage.getItem('Authentication')}});});二</div> </li> <li><a href="/article/1891237785856176128.htm" title="AI驱动的可演化架构与前端开发效率" target="_blank">AI驱动的可演化架构与前端开发效率</a> <span class="text-muted">2401_89744464</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%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> <div>1.引言在当今快节奏的数字时代,软件系统需要具备强大的适应能力才能在瞬息万变的市场需求中保持竞争力。软件可演化架构的重要性日益凸显,它能够让软件系统在面对需求变更、技术升级以及市场波动时,能够快速、高效地进行调整和升级,避免因僵化的架构而导致的项目失败和资源浪费。然而,传统的软件架构往往面临着诸多挑战,例如维护成本高昂、迭代速度缓慢、难以适应新的技术和需求等。幸运的是,人工智能(AI)技术的快速发</div> </li> <li><a href="/article/1891215713067134976.htm" title="前端为什么要使用new Promise包裹一个函数" target="_blank">前端为什么要使用new Promise包裹一个函数</a> <span class="text-muted">没资格抱怨</span> <a class="tag" taget="_blank" href="/search/JS%E6%A0%B8%E5%BF%83/1.htm">JS核心</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>在前端开发中,使用newPromise包裹一个函数主要是为了将原本不支持Promise规范的操作转化为支持Promise规范的操作,从而可以更好地处理异步操作,提升代码的可读性和可维护性。下面详细介绍这么做的常见原因和应用场景:1.封装回调风格的异步操作在JavaScript中,早期的异步操作(如setTimeout、XMLHttpRequest等)通常使用回调函数来处理结果。这种方式容易导致回调</div> </li> <li><a href="/article/1891210036970057728.htm" title="Bootstrap4 信息提示框" target="_blank">Bootstrap4 信息提示框</a> <span class="text-muted">lsx202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Bootstrap4信息提示框Bootstrap是一个流行的前端框架,它提供了一系列的工具和组件来帮助开发者快速搭建响应式网站。在Bootstrap4中,信息提示框(Tooltip)是一个非常有用的组件,它可以帮助用户更好地理解页面上的元素。本文将详细介绍Bootstrap4的信息提示框组件,包括其基本用法、配置选项以及与实际应用的结合。一、基本用法1.1HTML结构要使用Bootstrap4的信</div> </li> <li><a href="/article/1891190496898904064.htm" title="「前端+鸿蒙」鸿蒙应用开发-TS-模块化" target="_blank">「前端+鸿蒙」鸿蒙应用开发-TS-模块化</a> <span class="text-muted">吴维炜</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/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/%E9%B8%BF%E8%92%99/1.htm">鸿蒙</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a> <div>在TypeScript中,模块化是一种将代码分割成独立单元的方式,每个单元可以封装特定的功能或数据。模块化有助于保持代码的组织性、可维护性和可重用性。TypeScript支持ES6模块标准,这意味着你可以使用import和export语句来创建模块。TS快速入门-模块化导出模块成员使用export关键字可以将类、接口、类型、函数或变量导出,以便它们可以在其他文件中被导入。//myModule.ts</div> </li> <li><a href="/article/1891189866662785024.htm" title="Pinia入门" target="_blank">Pinia入门</a> <span class="text-muted">qincjun</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E6%8C%87%E5%8D%97/1.htm">前端学习指南</a><a class="tag" taget="_blank" href="/search/pinia/1.htm">pinia</a> <div>一、铺垫pinia官网:https://pinia.vuejs.org/zh/getting-started.html以下的内容全部来自官网;只不过有时候访问官网上不去;只能自己扒下来;pinia的前端使用非常简单;只需要掌握几个步骤就可以二、套路1.用你喜欢的包管理器安装pinia:yarnaddpinia#或者使用npmnpminstallpinia2.创建一个pinia实例(根store)并</div> </li> <li><a href="/article/1891189740397457408.htm" title="前端开发:CSS选择器" target="_blank">前端开发:CSS选择器</a> <span class="text-muted">qincjun</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> <div>一、基础选择器1.1标签选择器通用型,一次将所有的同类型标签设置成相同属性;p{color:red;}div{color:green;}1.2类选择器类名用.(点)开头的.eat{color:red;}.sleep{color:blue;}.play{color:black;font-size:30px;}吃饭//给段落赋予一个class类名;是此类名的是一样的CSS格式睡觉//一个元素可以赋予多</div> </li> <li><a href="/article/1891187221323640832.htm" title="Vue前端框架的使用" target="_blank">Vue前端框架的使用</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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>1.正文vue前端框架1.1什么是Vue1.2如何使用vue$Title${{name}}{{age}}/*创建一个Vue对象*/varapp=newVue({//把该对象挂载到div标签上el属性是必有el:"#app",//data:数据区定义一些数据这些数据得类型可以是任意类型。data:{name:"张三",age:15,hobby:["游泳","看书","玩游戏"],}})总结:(1)导</div> </li> <li><a href="/article/1891184069010583552.htm" title="前端框架Vue内容回顾" target="_blank">前端框架Vue内容回顾</a> <span class="text-muted">GISer_Jinger</span> <a class="tag" taget="_blank" href="/search/Javascript/1.htm">Javascript</a><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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端面试Vue必备内容详解如果你正在准备Vue相关的前端面试,这份详细指南将帮助你掌握Vue核心知识,助你高效备战面试。1.Vue基础知识1.1Vue的核心概念声明式渲染:Vue采用数据驱动视图的方式,通过{{}}语法或v-bind绑定数据,无需手动操作DOM。组件化开发:Vue提供了单文件组件(SFC),支持HTML、CSS、JS组合在.vue文件中,提高代码复用性和可维护性。数据驱动:Vue采</div> </li> <li><a href="/article/1891174864656592896.htm" title="前端三大主流框架:React、Vue、Angular" target="_blank">前端三大主流框架:React、Vue、Angular</a> <span class="text-muted">m0_54851477</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/vue.js/1.htm">vue.js</a> <div>文章目录一、React、Vue、Angular简介二、React初始化案例三、Vue初始化案例四、Angular初始化案例五、相关链接一、React、Vue、Angular简介前端三大主流框架分别是Angular、React和Vue。以下是这三个框架的详细概述:Angular:Angular原名AngularJS,诞生于2009年,由Google开发并维护。它是一个完整的框架,提供了数据绑定、组件</div> </li> <li><a href="/article/1891172463795040256.htm" title="后端使用Spring Boot框架 + 前端VUE 实现滑动模块验证码" target="_blank">后端使用Spring Boot框架 + 前端VUE 实现滑动模块验证码</a> <span class="text-muted">ADFVBM</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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/vue.js/1.htm">vue.js</a> <div>在现在常用的登录验证码方式有很多种,但是都不可避免被攻击,但是有很多方式可以防止被攻击,从而进行维护。现在我就讲解一下滑动块验证码的实现方式:这个是前端代码,我使用的是vue,在使用的时候注意:注意几个关键点:使用Vue的data函数来存储组件的状态,如isDragging、sliderPosition等。使用Vue的mounted生命周期钩子来获取容器和滑块的宽度。使用Vue的ref属性来方便地</div> </li> <li><a href="/article/1891152047177265152.htm" title="高效高并发调度架构" target="_blank">高效高并发调度架构</a> <span class="text-muted">之群害马</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>以下是从架构层面为你提供的适合多核CPU、多GPU环境下API客户端、服务端高级调度,以实现高效并发大规模与用户交互的技术栈:通信协议gRPC:基于HTTP/2协议,具有高性能、低延迟的特点,支持二进制序列化(通常搭配Protobuf),非常适合高并发场景。它提供了流式通信和多路复用功能,可有效减少网络开销。常用于微服务之间的通信,例如机器学习模型服务与前端应用之间的交互。RSocket:是一种基</div> </li> <li><a href="/article/1891090884112478208.htm" title="Java 实现拖拽列表更新排序" target="_blank">Java 实现拖拽列表更新排序</a> <span class="text-muted">架构师成长进阶空间</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/cloud/1.htm">cloud</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/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>拖拽列表更新排序,接口提供给前端这个功能主要是需要的算法逻辑很多图解:如在前端页面上想把id=5拖拽到id=3上拖拽之后的效果:解析图例:代码示例:DevToCoding|Java面试指南、学习笔记/***拖拽数据更新排序*@paramcurrentId当前数据id*@paramtargetId目标数据id*@return*/@RequestMapping("/sort/{currentId}/{</div> </li> <li><a href="/article/1891083574577262592.htm" title="Flux架构及Redux实践" target="_blank">Flux架构及Redux实践</a> <span class="text-muted">GbkMobile</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>随着前端应用的复杂性不断增加,有效管理应用状态和数据流变得至关重要。Flux架构及其最流行的实现之一Redux,为前端开发人员提供了一种可靠且可扩展的解决方案。本文将深入浅出地介绍Flux架构的核心概念,并通过实际的Redux实践示例来帮助读者更好地理解和应用这些概念。什么是Flux架构?Flux是一种前端应用架构模式,旨在解决传统MVC(Model-View-Controller)模式在大型应用</div> </li> <li><a href="/article/1891078912692252672.htm" title="Flux架构:构建可预测的Web应用状态管理体系" target="_blank">Flux架构:构建可预测的Web应用状态管理体系</a> <span class="text-muted">阿珊和她的猫</span> <a class="tag" taget="_blank" href="/search/%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> <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。文章</div> </li> <li><a href="/article/1891054457932804096.htm" title="[失业前端恶补算法]JavaScript leetcode刷题top100(六):字母异位词分组、最长连续序列、找到字符串中所有字母异位词、最大子数组和、除自身以外数组的乘积" target="_blank">[失业前端恶补算法]JavaScript leetcode刷题top100(六):字母异位词分组、最长连续序列、找到字符串中所有字母异位词、最大子数组和、除自身以外数组的乘积</a> <span class="text-muted">摸鱼老萌新</span> <a class="tag" taget="_blank" href="/search/%E5%A4%B1%E4%B8%9A%E5%89%8D%E7%AB%AF%E6%81%B6%E8%A1%A5%E7%AE%97%E6%B3%95/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%8A%A8%E6%80%81%E8%A7%84%E5%88%92/1.htm">动态规划</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C/1.htm">哈希</a> <div>专栏声明:只求用最简单的,容易理解的方法通过,不求优化,不喜勿喷49.字母异位词分组题面给你一个字符串数组,请你将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词是由重新排列源单词的所有字母得到的一个新单词。知识点:哈希表、排序思路这里用了js语言的一个小技巧,我们可以使用split这个api将字符串变成字符的数组,之后我们对得到的数组进行排序,这样字母异位词得到了结果字符串的一致的,</div> </li> <li><a href="/article/1891053702341521408.htm" title="Java面试八股文:Memcached面试题专场(持续更新中......)" target="_blank">Java面试八股文:Memcached面试题专场(持续更新中......)</a> <span class="text-muted">Java凤梨</span> <a class="tag" taget="_blank" href="/search/Java%E9%87%91%E4%B8%89%E9%93%B6%E5%9B%9B%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">Java金三银四面试题</a><a class="tag" taget="_blank" href="/search/memcached/1.htm">memcached</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>全套Java金三银四面试题持续更新可文末自取,建议关注收藏不然下次找不到哟~目录1、Memcached是什么,有什么作用?memcached服务在企业集群架构中有哪些应用场景?一、作为数据库的前端缓存应用二、作业集群的session会话共享存储。2、Memcached服务分布式集群如何实现?3、Memcached服务特点及工作原理是什么?4、简述Memcached内存管理机制原理?SlabAllo</div> </li> <li><a href="/article/1891046889193795584.htm" title="计算机编程中的抽象语法树(AST)在代码分析和转换中的应用与优化" target="_blank">计算机编程中的抽象语法树(AST)在代码分析和转换中的应用与优化</a> <span class="text-muted">借口</span> <a class="tag" taget="_blank" href="/search/%E7%83%AD%E7%82%B9%E8%B5%84%E8%AE%AF/1.htm">热点资讯</a> <div>博客主页:借口的CSDN主页⏩文章专栏:《热点资讯》计算机编程中的抽象语法树(AST)在代码分析和转换中的应用与优化计算机编程中的抽象语法树(AST)在代码分析和转换中的应用与优化计算机编程中的抽象语法树(AST)在代码分析和转换中的应用与优化引言抽象语法树概述定义历史背景核心特性简化复杂度提供统一接口支持多种操作应用场景编译器前端静态代码分析自动化测试框架源码美化工具成功案例分析ESLintRo</div> </li> <li><a href="/article/1891028858396798976.htm" title="前端实现电子签名" target="_blank">前端实现电子签名</a> <span class="text-muted">一个00后前端开发</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>                  Document          *{        margin:0;        padding:0;      }                      取消      保存            constcanvas=document.querySelector('canvas');    canvas.width=500;    canvas</div> </li> <li><a href="/article/1891021921319972864.htm" title="深入理解现代前端框架:Vue.js 的进阶探秘" target="_blank">深入理解现代前端框架:Vue.js 的进阶探秘</a> <span class="text-muted">lozhyf</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><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/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>在当今的web开发领域,前端框架如雨后春笋般涌现,而Vue.js凭借其简洁易用和强大的功能,成为了众多开发者的心头好。本文将带领大家深入探索Vue.js的一些进阶特性,帮助你将Vue应用开发提升到新的高度。一、Vue.js的响应式原理Vue.js最核心的特性之一就是其响应式系统。当数据发生变化时,Vue能够自动更新DOM,这一过程是如何实现的呢?Vue.js使用了Object.defineProp</div> </li> <li><a href="/article/1891014354728448000.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>作为一名前端开发者,我们是一直被两类问题困惑着的:1、技术生态中“轮子迭代”与“原理理解”的矛盾,2、业务开发与技术深度的平衡问题。这些问题本质上是开发者在不同阶段必然面临的挑战。我们可以从以下几个角度进一步探讨:一、为什么“轮子”永远在迭代?1.技术演进的必然性场景细化:早期工具(如Grunt、Gulp)解决的是通用构建问题,但随着前端复杂度提升,出现了更垂直的解决方案(如Vite专攻开发体验、</div> </li> <li><a href="/article/1891014227565539328.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>前端相比较后端而言,由于其发展历史和浏览器的标准不一,导致其看上去简单,但是深入起来又很复杂,在最开始学习的时候,我们往往是了解一下三剑客和vue、react的api就开始上手工作了,但是到后面会发现,每一步就像缺了一根拐杖,而这根拐杖指的就是对前端整个层面的了解。只有我们建立了对整个层面的了解,才能到我们遇到的问题进行分类,才能在遇到困难的时候,能够分门别类的去解决问题。前端技术的分层可以类比为</div> </li> <li><a href="/article/1891001877055729664.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>引言前端开发中,“保存代码后页面自动刷新”早已成为开发者的标配体验。但你是否思考过,为什么某些场景下修改代码后页面无需完全刷新,甚至能保留当前状态(如表单输入、滚动位置)?这背后的核心机制就是热更新(HotModuleReplacement,HMR)。本文将从现象出发,逐步拆解其实现原理,并揭示其中涉及的关键技术。一、热更新的“现象”:开发者眼中的魔法假设你正在开发一个React应用:修改CSS文</div> </li> <li><a href="/article/1891000740210601984.htm" title="【VUE】前端工程化与前端工程化与webpack" target="_blank">【VUE】前端工程化与前端工程化与webpack</a> <span class="text-muted">boy快快长大</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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a> <div>前端工程化与webpack1.前端工程化2.webpack的基本使用2.1创建列表隔行变色项目1.前端工程化2.webpack的基本使用2.1创建列表隔行变色项目初始化项目①新建项目空白目录,并运行npminit–y命令,初始化包管理配置文件package.json②新建src源代码目录③新建src->index.html首页和src->index.js脚本文件④初始化首页基本的结构⑤运行npmi</div> </li> <li><a href="/article/1890991157433921536.htm" title="从零开始:如何用 Vue 3 和 Vite 创建现代前端项目" target="_blank">从零开始:如何用 Vue 3 和 Vite 创建现代前端项目</a> <span class="text-muted">全栈探索者chen</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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/vue.js/1.htm">vue.js</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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/vite/1.htm">vite</a> <div>从零开始:如何用Vue3和Vite创建现代前端项目前言随着现代前端框架的快速发展,开发工具和构建工具也在不断进化。Vue3是目前流行的前端框架之一,凭借其轻量、易用和高效的特性,广泛应用于各种web应用中。而Vite则是一个现代化的构建工具,它通过引入原生ES模块支持和极快的开发模式,成为前端开发的新宠。本文将介绍如何使用Vue3和Vite从零开始搭建一个前端项目,并展示一些常见的项目配置和优化技</div> </li> <li><a href="/article/1890987756713209856.htm" title=".NET 9.0 的 Blazor Web App 项目,进度条 <progress> 组件使用注意事项" target="_blank">.NET 9.0 的 Blazor Web App 项目,进度条 <progress> 组件使用注意事项</a> <span class="text-muted">cqths</span> <a class="tag" taget="_blank" href="/search/Blazor/1.htm">Blazor</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/App/1.htm">App</a><a class="tag" taget="_blank" href="/search/Blazor/1.htm">Blazor</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/app/1.htm">app</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、执行过程中,要刷新进度条的显示,需要延时、释放,否则进度条不实时更新,最后一下到100%//延时,释放给前端:【必须】,否则进度条不实时更新,最后一下到100awaitTask.Delay(1);二、执行过程中,需要通知Blazor更新UI,否则不实时更新//通知Blazor更新UI:【必须】,否则不实时更新StateHasChanged();三、如果是单击执行,执行过程中,应该禁用按钮,防止</div> </li> <li><a href="/article/1890976411477405696.htm" title="后端学习前端-html+css" target="_blank">后端学习前端-html+css</a> <span class="text-muted">想要变瘦的小码头</span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF%E5%AD%A6%E5%89%8D%E7%AB%AF/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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>第一章.HTML与CSSHTML是什么:即HyperTextMarkuplanguage超文本标记语言,咱们熟知的网页就是用它编写的,HTML的作用是定义网页的内容和结构。HyperText是指用超链接的方式组织网页,把网页联系起来Markup是指用的方式赋予内容不同的功能和含义CSS是什么:即CascadingStyleSheets级联(层叠)样式表,它描述了网页的表现与展示效果1.HTML元素</div> </li> <li><a href="/article/1890965177625538560.htm" title="Vue.js 配置 Babel、Webpack 和 ESLint" target="_blank">Vue.js 配置 Babel、Webpack 和 ESLint</a> <span class="text-muted">轻口味</span> <a class="tag" taget="_blank" href="/search/VUE.JS/1.htm">VUE.JS</a><a class="tag" taget="_blank" href="/search/%E5%85%A5%E9%97%A8%E4%B8%8E%E5%AE%9E%E8%B7%B5/1.htm">入门与实践</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Vue.js配置Babel、Webpack和ESLint今天我们来聊聊如何配置Babel、Webpack和ESLint,这三个工具在现代前端开发中扮演着重要角色。它们分别负责代码转译、模块打包和代码质量检测,合理配置它们能大大提高项目的开发效率和质量。下面我将详细介绍它们的作用,并提供具体的配置示例。1.Babel配置Babel主要用于将现代JavaScript(ES6+)代码转译为兼容性更好的版</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进行身份验证【只对用户名和密码进行验证,权限依旧存储在本地数据库中】。   将配置文件中的如下部分删除: <!-- 认证管理器,使用自定义的UserDetailsService,并对密码采用md5加密--> </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. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </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>