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/1943990125864218624.htm" title="JavaScript 树形菜单总结" target="_blank">JavaScript 树形菜单总结</a> <span class="text-muted">Auscy</span> <a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>树形菜单是前端开发中常见的交互组件,用于展示具有层级关系的数据(如文件目录、分类列表、组织架构等)。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构:数据以父子嵌套形式存在,如{id:1,children:[{id:2}]}。节点:树形结构的基本单元,包含自身信息及子节点(若有)。展开/折叠:子节点的显示与隐藏切换,是树形菜单的核心交互。递归渲染:因数据层级不固定,</div> </li> <li><a href="/article/1943987856808669184.htm" title="前端项目架构设计要领" target="_blank">前端项目架构设计要领</a> <span class="text-muted"></span> <div>1.架构设计的核心目标在设计前端项目架构时,核心目标是模块化、可维护、可扩展、可测试,以及开发效率的最大化。这些目标可以通过以下几个方面来实现:组件化:将UI功能封装为可复用的组件。模块化:将业务逻辑分解为独立的模块或服务。自动化构建与部署:实现自动化构建、测试和部署流程,减少人为操作的错误。代码规范化与检查:确保团队协作时,代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目</div> </li> <li><a href="/article/1943979785097113600.htm" title="【前端】jQuery数组合并去重方法总结" target="_blank">【前端】jQuery数组合并去重方法总结</a> <span class="text-muted"></span> <div>在jQuery中合并多个数组并去重,推荐使用原生JavaScript的Set对象(高效简单)或$.unique()(仅适用于DOM元素,不适用于普通数组)。以下是完整解决方案:方法1:使用ES6Set(推荐)//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...</div> </li> <li><a href="/article/1943974618851241984.htm" title="Vue3+Vite+TS+Axios整合详细教程" target="_blank">Vue3+Vite+TS+Axios整合详细教程</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/Vite/1.htm">Vite</a><a class="tag" taget="_blank" href="/search/TS/1.htm">TS</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.Vite简介Vite是新一代的前端构建工具,在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。生产中利用Rollup作为打包工具,号称下一代的前端构建工具。vite是一种新型的前端构建工具,能够显著的提升前端开发者的体验。它主要有俩部分组成:一个</div> </li> <li><a href="/article/1943971211121848320.htm" title="前端 NPM 包的依赖可视化分析工具推荐" target="_blank">前端 NPM 包的依赖可视化分析工具推荐</a> <span class="text-muted">前端视界</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/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/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端NPM包的依赖可视化分析工具推荐关键词:NPM、依赖管理、可视化分析、前端工程、包管理、依赖冲突、性能优化摘要:本文将深入探讨前端开发中NPM包依赖可视化分析的重要性,介绍5款主流工具的使用方法和特点,并通过实际案例展示如何利用这些工具优化项目依赖结构、解决版本冲突问题以及提升构建性能。文章将帮助开发者更好地理解和掌控项目依赖关系,提高开发效率和项目可维护性。背景介绍目的和范围本文旨在为前端开</div> </li> <li><a href="/article/1943961125532004352.htm" title="数字孪生技术为UI前端注入新活力:实现产品设计的沉浸式体验" target="_blank">数字孪生技术为UI前端注入新活力:实现产品设计的沉浸式体验</a> <span class="text-muted">ui设计前端开发老司机</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言:从“平面交互”到“沉浸体验”的UI革命当用户在电商APP中翻看3D家具模型却无法感知其与自家客厅的匹配度,当设计师在2D屏幕上绘制汽车内饰却难以预判实际乘坐体验——传统UI设计的“平面化、静态化、割裂感”</div> </li> <li><a href="/article/1943960369345130496.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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Java三年经验程序员技术栈全景指南:从前端到架构,对标阿里美团全栈要求三年经验是Java程序员的分水岭,技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求,为你绘制可落地的进阶路线。一、Java核心:从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解,大厂面试常考以下能力:JVM与性能调优内存模型(堆外内存、元空间)、GC算法(G1/ZGC适用场</div> </li> <li><a href="/article/1943946255763828736.htm" title="《Java前端开发全栈指南:从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南:从Servlet到现代框架实战》</a> <span class="text-muted"></span> <div>前言在当今Web开发领域,Java依然是后端开发的主力语言,而随着前后端分离架构的普及,Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术,包括传统Servlet/JSP体系、现代前端框架集成方案,以及全栈开发的最佳实践。通过本文,您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet:JavaWeb基础,处</div> </li> <li><a href="/article/1943932016164663296.htm" title="Vue3组件库实战: 打造高复用UI系统" target="_blank">Vue3组件库实战: 打造高复用UI系统</a> <span class="text-muted">武昌库里写JAVA</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/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><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a> <div>Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中,UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合,可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词:Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则,比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用,并且保证</div> </li> <li><a href="/article/1943930502771699712.htm" title="Flutter基础(前端教程⑥-按钮切换)" target="_blank">Flutter基础(前端教程⑥-按钮切换)</a> <span class="text-muted">aaiier</span> <a class="tag" taget="_blank" href="/search/Flutter/1.htm">Flutter</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>1.假设你已有的两个表单组件(示例)//手机号注册表单(示例)classPhoneRegisterFormextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnColumn(children:[TextField(decoration:InputDecoration(labelText:'手机号')),Text</div> </li> <li><a href="/article/1943929870320988160.htm" title="为Layui Table组件添加前端搜索功能" target="_blank">为Layui Table组件添加前端搜索功能</a> <span class="text-muted">caifox菜狐狸</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85%EF%BC%9A%E4%BB%8E%E6%96%B0%E6%89%8B%E5%88%B0%E4%B8%93%E5%AE%B6/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/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/table/1.htm">table</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%90%9C%E7%B4%A2/1.htm">前端搜索</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E6%90%9C%E7%B4%A2/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> <div>在现代Web开发中,数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架,以其简洁的代码、丰富的组件和强大的功能,为开发者提供了极大的便利。其中,Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项,成为了许多项目中不可或缺的部分。然而,在实际应用中,仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息,这就需要为表格添</div> </li> <li><a href="/article/1943919909612351488.htm" title="Vue.js 过渡 & 动画" target="_blank">Vue.js 过渡 & 动画</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>Vue.js过渡&动画引言在Web开发中,过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架,提供了强大的过渡与动画功能,使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画,包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时,会自动触发过渡效果。过渡</div> </li> <li><a href="/article/1943854728903454720.htm" title="对接拉卡拉聚合收银台支付指南" target="_blank">对接拉卡拉聚合收银台支付指南</a> <span class="text-muted">一叶飘零_sweeeet</span> <a class="tag" taget="_blank" href="/search/%E6%9E%9C%E9%85%B1%E7%B4%AB/1.htm">果酱紫</a><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/%E6%94%AF%E4%BB%98/1.htm">支付</a><a class="tag" taget="_blank" href="/search/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%94%AF%E4%BB%98/1.htm">支付宝支付</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98/1.htm">微信支付</a><a class="tag" taget="_blank" href="/search/%E6%8B%89%E5%8D%A1%E6%8B%89%E6%94%AF%E4%BB%98/1.htm">拉卡拉支付</a> <div>今天我将详细介绍如何对接拉卡拉聚合收银台支付,并指出其中应注意的点。我希望这篇文章能够帮助那些正在寻找如何实现这个功能的开发者。一、拉卡拉聚合收银台支付简介拉卡拉聚合收银台支付是一种整合了多种支付方式的支付服务,包括但不限于微信支付、支付宝支付、银联支付等。它为商户提供了一个统一的支付入口,使得商户无需分别接入各种支付方式,从而大大简化了支付过程。二、对接拉卡拉聚合收银台支付的步骤1.注册并配置拉</div> </li> <li><a href="/article/1943853592725221376.htm" title="GPT实操——利用GPT创建一个应用" target="_blank">GPT实操——利用GPT创建一个应用</a> <span class="text-muted">狗木马</span> <a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/gpt-3/1.htm">gpt-3</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a> <div>功能描述信息查询:用户可以询问各种问题,如天气、新闻、股票等,机器人会返回相关信息。任务执行:用户可以要求机器人执行一些简单的任务,如设置提醒、发送邮件等。情感支持:机器人可以与用户进行情感交流,提供安慰和支持。个性化设置:用户可以自定义机器人的回复风格和偏好。技术栈前端:React.js后端:Node.js+Express数据库:MongoDB自然语言处理:OpenAIGPT-3API其他工具:</div> </li> <li><a href="/article/1943847416503529472.htm" title="前端面试题总结——JS篇" target="_blank">前端面试题总结——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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、说说JavaScript中的数据类型?存储上有什么差别?1、数据类型基本类型number:数值类型十进制:letintNum=55八进制(零开头):letnum1=070十六进制(0x开头):lethexNum1=0xANaN:特殊数值,意为“不是数值”string:字符串类型boolean:布尔值,true或falseundefined:表示未定义null:空值symbol:是原始值,且符号</div> </li> <li><a href="/article/1943844765225250816.htm" title="前端面试题——5.AjAX的缺点?" target="_blank">前端面试题——5.AjAX的缺点?</a> <span class="text-muted">浅端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a> <div>①传统的web交互是:用户一个网页动作,就会发送一个http请求到服务器,服务器处理完该请求再返回一个完整的HTML页面,客户端再重新加载,这样极大地浪费了带宽。②AJAX的出现解决了这个问题,它只会向服务器请求用户所需要的数据,并在客户端采用JavaScript处理返回的数据,操作DOM更新页面。③AJXA优点:无刷新更新页面异步服务器通信前端后端负载均衡④AJAX缺点:干掉了Back和Hist</div> </li> <li><a href="/article/1943842998383079424.htm" title="2023高薪前端面试题(二、前端核心——Ajax)" target="_blank">2023高薪前端面试题(二、前端核心——Ajax)</a> <span class="text-muted"></span> <div>原生AjaxAjax简介Ajax全程为AsynchronousJavaScript+XML,就是异步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势是:无刷新获取数据,实现局部刷新Ajax是一种用于创建快速动态网页的技术AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式Ajax的应用场景页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示</div> </li> <li><a href="/article/1943841736426057728.htm" title="前端面试题——手写实现 ajax" target="_blank">前端面试题——手写实现 ajax</a> <span class="text-muted">阿水爱踢中锋</span> <a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>凡是和后台有过数据交互的小伙伴肯定都接触过ajax.我们可以通过ajax来实现页面的无刷新请求数据,这样就能在保证良好用户体验的同时,将更多的内容展示给用户ajax在我们的开发工作中已经司空见惯,几乎所有我们频繁使用的库和框架都提供了经过完善封装后的ajax方法,如jQuery、zepto、angular等等,这使得我们的数据请求变得异常简洁明了但是这也带来了很明显的缺陷,就是我们知道如何去使用封</div> </li> <li><a href="/article/1943826858080530432.htm" title="uniapp 如何封装实现任意页面都能使用的全局弹窗" target="_blank">uniapp 如何封装实现任意页面都能使用的全局弹窗</a> <span class="text-muted">代码简单说</span> <a class="tag" taget="_blank" href="/search/2025%E5%BC%80%E5%8F%91%E5%BF%85%E5%A4%87%28%E9%99%90%E6%97%B6%E7%89%B9%E6%83%A0%29/1.htm">2025开发必备(限时特惠)</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</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/uniapp%E5%85%A8%E5%B1%80%E5%BC%B9%E7%AA%97/1.htm">uniapp全局弹窗</a><a class="tag" taget="_blank" href="/search/uniapp%E5%BC%B9%E7%AA%97%E7%BB%84%E4%BB%B6/1.htm">uniapp弹窗组件</a> <div>【实战干货】uniapp如何封装实现任意页面都能使用的全局弹窗标签:uniapp弹窗组件全局弹窗Vue动态渲染跨页面弹窗✨前端老司机亲授,uniapp无法在所有页面中直接用自定义弹窗?别急,一招动态挂载vue实例,优雅解决!背景故事:一个被“弹窗”搞崩溃的早晨作为一名前端开发工程师,有一天我在给uniapp项目加IM消息功能,需求是:不论当前用户在哪个页面,只要有消息来,就要立即弹出提示窗口。听起</div> </li> <li><a href="/article/1943824842390302720.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.问题描述场景:前端提交数据后,接口回调再次添加参数,但页面跳转/刷新导致之前的console.log数据丢失。影响:无法追踪完整的请求流程,调试困难。2.环境信息项目说明浏览器GoogleChrome120+开发者工具ChromeDevTools技术栈前端:Vue/React/其他接口类型RESTfulAPI/GraphQL3.解决方案3.1保留控制台日志(推荐)步骤:打开Chrome开发者工</div> </li> <li><a href="/article/1943824841912152064.htm" title="【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)" target="_blank">【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)</a> <span class="text-muted"></span> <div>一、背景场景在某类生成任务中,例如用户点击“执行任务”按钮后触发一个较耗时的后端操作(如生成报告、渲染图像、转码视频等),由于其调用了模型、渲染服务或需要较长处理时间,为了防止接口被频繁恶意调用,系统需要加入风控验证机制。此外,因任务处理为异步,前端无法立即获得最终结果,因此需通过轮询方式定期查询任务状态,等待任务完成后展示结果。二、整体流程说明1.用户点击“执行任务”按钮:前端调用风控接口/ap</div> </li> <li><a href="/article/1943823200676802560.htm" title="uniapp对接unipush 1.0 ios/android" target="_blank">uniapp对接unipush 1.0 ios/android</a> <span class="text-muted">车轮滚滚__</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>配置注意需要打包自定义基座之后在手机上运行自定义基座才可以!官方有文档可以根据文档来我这里用的是1.0为什么没有2.0因为2.0要用uinicloud注意每次打包之后cid都会变cid用户的标识iduniapp通过这个id可以把消息推送给指定人前端代码前端要做的很简单直接放到app.vue中onLaunch钩子中即可麻烦的在后端和个推的对接onPushMessage(that){//#ifdefA</div> </li> <li><a href="/article/1943798231427248128.htm" title="在html中加入网址,网页超链接怎么做,添加超链接网址的的详细步骤" target="_blank">在html中加入网址,网页超链接怎么做,添加超链接网址的的详细步骤</a> <span class="text-muted">一只爪子</span> <a class="tag" taget="_blank" href="/search/%E5%9C%A8html%E4%B8%AD%E5%8A%A0%E5%85%A5%E7%BD%91%E5%9D%80/1.htm">在html中加入网址</a> <div>此系列教程主要讲解HTML从基础到精通。自己能够设计一个完整的前端网页项目。程序员写代码在HTML中添加图片其实很简单,就是添加一个img的标签。图片标签的语法一般有src、alt、width、height四种属性就够用了。效果:图片的显示效果图片路径的写法src表示的是图片的路径,这里面的值应该怎么写呢?(1)html文件和图片在相同一个文件夹下。HTML文件和图片文件在相同的目录下,可以直接书</div> </li> <li><a href="/article/1943791672676642816.htm" title="uniapp项目如何优雅处理Token失效自动重试 token无感刷新" target="_blank">uniapp项目如何优雅处理Token失效自动重试 token无感刷新</a> <span class="text-muted">代码简单说</span> <a class="tag" taget="_blank" href="/search/2025%E5%BC%80%E5%8F%91%E5%BF%85%E5%A4%87%28%E9%99%90%E6%97%B6%E7%89%B9%E6%83%A0%29/1.htm">2025开发必备(限时特惠)</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/token%E9%87%8D%E8%AF%95/1.htm">token重试</a><a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/token%E8%8E%B7%E5%8F%96/1.htm">token获取</a><a class="tag" taget="_blank" href="/search/token%E6%97%A0%E6%84%9F%E5%88%B7%E6%96%B0/1.htm">token无感刷新</a><a class="tag" taget="_blank" href="/search/uniapp%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0token/1.htm">uniapp自动刷新token</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%99%BB%E5%BD%95%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/1.htm">前端登录状态管理</a><a class="tag" taget="_blank" href="/search/token%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0/1.htm">token自动刷新</a> <div>uniapp项目如何优雅处理Token失效自动重试token无感刷新标签:uniapp|前端登录状态管理|Token自动刷新|前端重试队列作为一名前端开发,我在重构公司旧项目时,踩到了一个大家经常遇到的坑:Token失效后请求失败,用户体验极差。而更糟糕的是,在一个页面里多个请求同时发出,全部失败并跳转登录,场面就像是“弹窗地狱”。我决定把这个问题解决到底,封装出一个可复用、稳定、自动重试的请求模</div> </li> <li><a href="/article/1943790915952898048.htm" title="前端每周清单第 16 期:JavaScript 模块化现状;Node V8 与V6 真实性能对比" target="_blank">前端每周清单第 16 期:JavaScript 模块化现状;Node V8 与V6 真实性能对比</a> <span class="text-muted"></span> <div>前端每周清单第16期:JavaScript模块化现状;NodeV8与V6真实性能对比;Nuxt.jsSSR与权限验证指南为InfoQ中文站特供稿件,首发地址为这里;如需转载,请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践的前端每周清单系列系列;部分文章需要自备梯子。前端每周清单第16期:JavaScript模块化现状;NodeV8与V6真实性能对比;Nuxt.jsSSR与权限验证指</div> </li> <li><a href="/article/1943786882114580480.htm" title="【译】2018 前端性能优化清单 —— 第一部分" target="_blank">【译】2018 前端性能优化清单 —— 第一部分</a> <span class="text-muted">qq_36320160</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> <div>原文地址:Front-EndPerformanceChecklist2018-Part1原文作者:VitalyFriedman译文出自:掘金翻译计划本文永久链接:https://github.com/xitu/gold-miner/blob/master/TODO/front-end-performance-checklist-2018-1.md译者:tvChan校对者:mysterytonyry</div> </li> <li><a href="/article/1943786755819892736.htm" title="如何做到无感刷新token?" target="_blank">如何做到无感刷新token?</a> <span class="text-muted"></span> <div>如何做到无感刷新token?前言后端刷新Token方案--自动刷新token前端刷新Token方案--token续约疑问及思考前言解决方案:自动刷新tokentoken续约思路如果Token即将过期,你在验证用户权限的同时,为用户生成一个新的Token并返回给客户端,客户端需要更新本地存储的Token,还可以做定时任务来刷新Token,可以不生成新的Token,在快过期的时候,直接给Token增加</div> </li> <li><a href="/article/1943785495385403392.htm" title="uniapp登录成功后跳回原有页面+无感刷新token" target="_blank">uniapp登录成功后跳回原有页面+无感刷新token</a> <span class="text-muted">黑匣子~</span> <a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/token/1.htm">token</a> <div>uniapp登录成功后跳回原有页面引言在C端的页面场景中,我们经常会有几种情况到登录页:区分需要登录和不用登录的页面,点击需要登录才能查看的页面已经登录但是超时,用户凭证失效等原因以上情况可以细分为两种,一种是从未登录过的,需要第一次去登录,还一种是已经登录了,但是cookie失效了,需要重新获取用户凭证,这样的话后端会将两个状态码区分,那我们前端需要根据不同的状态码进行相应的处理。第一次登录时当</div> </li> <li><a href="/article/1943754997023961088.htm" title="前端开发常见问题" target="_blank">前端开发常见问题</a> <span class="text-muted"></span> <div>技术文章大纲性能优化问题页面加载速度慢的常见原因及解决方案渲染阻塞资源的处理方法图片与媒体文件优化策略懒加载与代码分割的实现方式浏览器兼容性问题不同浏览器对CSS特性的支持差异JavaScriptAPI的兼容性处理方案Polyfill的使用场景与实现方法自动化测试工具在兼容性测试中的应用响应式设计挑战移动端与桌面端布局适配问题媒体查询的最佳实践方案视口单位与相对单位的正确使用高DPI屏幕的图像处理</div> </li> <li><a href="/article/1943718821038714880.htm" title="反射+注解实现数据库Map转换成实体Map工具类" target="_blank">反射+注解实现数据库Map转换成实体Map工具类</a> <span class="text-muted">皮卡丘比比比</span> <div>实现场景因为原始的需求是从数据库中查询出来的一个实体字段比如一个Useruser=newUser()的实体类,有userName,userId两个字段。然后我返回一个list给前端,Listlist现在需求变化,我需要添加一个额外的字段,比如userCompany,就没有办法使用刚才那个返回对象的方法现在直接从数据库中多表查询一个Map如下("user_name","curry"),("user_</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>