使用Bootstrap框架仿星巴克網站、附github地址。

来源:https://www.cnblogs.com/nmsghgnv/archive/2020/06/28/13202216.html
-Advertisement-
Play Games

本案例製作一個咖啡銷售網站，通過網站呈現自己的理念和咖啡文化，頁面佈局設計獨特，採用兩欄的佈局形式；頁面風格設計簡潔，為瀏覽者提供一個簡單、時尚的頁面，瀏覽時讓人心情舒暢。 1、網站概述網站的設計思路和設計風格與Bootstrap框架風格完美融合，下麵就來具體地介紹實現的步驟。 2、網站結構 本案例 ...


本案例製作一個咖啡銷售網站，通過網站呈現自己的理念和咖啡文化，頁面佈局設計獨特，採用兩欄的佈局形式；頁面風格設計簡潔，為瀏覽者提供一個簡單、時尚的頁面，瀏覽時讓人心情舒暢。

1、網站概述
網站的設計思路和設計風格與Bootstrap框架風格完美融合，下麵就來具體地介紹實現的步驟。

2、網站結構

本案例目錄文件說明如下。
■　font-awesome-4.7.0：圖標字體庫文件。下載地址：http://www.fontawesome.com.cn/。
■　css：樣式表文件夾。
■　js：JavaScript腳本文件夾，包含index.js文件和jQuery庫文件。
■　index.html：首頁。

 

 

 #圖標字體文件庫在與項目同級文件下，截圖未指出，下方有github鏈接，可下載源文件查看

3、設計效果
本案例是咖啡網站應用，主要設計首頁的展示效果，其他頁面設計可以套用首頁模板。首頁在大屏（≥992px）設備中顯示效果圖所示。

 

 

 

 

 

 在小屏設備（<768px）上時，將顯示底邊欄導航效果，如圖所示。

4、設計準備
應用Bootstrap框架的頁面建議為HTML 5文檔類型。同時在頁面頭部區域導入框架的基本樣式文件、腳本文件、jQuery文件和自定義的CSS樣式及JavaScript文件。本項目的配置文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>仿星巴克網站</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!--    字體圖標文件-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <!--    自定義樣式-->
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!--自定義js文件-->
<script src="js/index.js"></script>
</body>
</html>

5、設計首頁佈局

本案例首頁分為三個部分：左側可切換導航、右側主體內容和底部隱藏導航欄，如圖所示。

 

 

 

左側可切換導航和右側主體內容使用Bootstrap框架的網格系統進行設計，在大屏設備（≥992px）中，左側可切換導航占網格系統的3份，右側主體內容占9份；在中、小屏設備（<992px）中左側可切換導航和右側主體內容各占一行。
底部隱藏導航欄使用無序列表進行設計，添加了d-block d-sm-none類，只在小屏設備上顯示。

<div class="row">
<!--    左側導航-->
    <div class="col-12 col-lg-3 left"></div>
<!--    右側主體內容-->
    <div class="col-12  col-lg-9 right"></div>
</div>
<!--隱藏導航欄-->
<div>
    <ul>
        <li><a href="index.html"></a></li>
    </ul>
</div>

還添加了一些自定義樣式來調整頁面佈局，代碼如下：

@media (max-width: 992px){
/*    在小屏設備中，設置外邊距，上下邊距為1rem，左右為0*/
    .left{
        margin: 1rem 0;
    }
}
@media(min-width: 992px){
/*    在大屏設備中，左側導航設置固定定位，右側主體內容設置左外邊距25%*/
    .left{
        position: fixed;
        top: 0;
        left: 0;
    }
    .right{
        margin-left: 25%;
    }
    .margin1{
        margin-top: 40vh;
    }
}

6、設計可切換導航
本案例左側導航設計很複雜，在不同寬度的設備上有3種顯示效果，設計步驟如下。
第1步：設計切換導航的佈局。可切換導航使用網格系統進行設計，在大屏（>992px）設備上占網格系統的3份；在中、小屏設備（<992px）的設備上占滿整行，如圖所示。

 

 

 

 

 

 

 

 

 第2步：設計導航展示內容。導航展示內容包括導航條和登錄註冊兩部分。導航條用網格系統佈局，嵌套Bootstrap導航組件進行設計，使用<ul class="nav">定義；登錄註冊使用了Bootstrap的按鈕組件進行設計，使用<a href="#" class="btn">定義。設計在小屏上隱藏登錄註冊，如圖所示，包裹在<div class="d-none d-sm-block">容器中。

    <!--    左側導航-->
    <div class="col-12 col-lg-3 left">
        <div id="template1">
            <div class="row">
                <div class="col-10">
                    <!--                    導航條-->
                    <ul class="nav">
                        <li class="nav-item">
                            <a href="index.html" class="nav-link active">
                                <img src="http://pic.58pic.com/58pic/12/06/74/07258PICNyX.jpg" width="40"
                                     class="rounded-circle" alt="">
                            </a>
                        </li>
                        <li class="nav-item mt-1">
                            <a href="javascript:void(0);" class="nav-link">賬戶</a>
                        </li>
                        <li class="nav-item mt-1">
                            <a href="javascript:void(0);" class="nav-link">菜單</a>
                        </li>
                    </ul>
                </div>
                <div class="col-2 mt-2 font-menu text-right">
                    <a href="javascript:void(0);" id="a1"><i class="fa fa-bars"></i></a>
                </div>
            </div>
            <div class="margin1">
                <h5 class="ml-3 my-3 d-none d-sm-block text-lg-center">
                    <b>心情愜意、來杯咖啡吧</b>&nbsp;&nbsp;<i class="fa fa-coffee"></i>
                </h5>
                <div class="ml-3 my-3 d-none d-sm-block text-lg-center">
                    <a href="#" class="card-link btn rounded-pill text-success"><i class="fa fa-user-circle"></i>&nbsp;登&nbsp;陸</a>
                    <a href="#" class="card-link btn btn-outline-success rounded-pill text-success">註&nbsp;冊</a>
                </div>
            </div>
        </div>
    </div>

第3步：設計隱藏導航內容。隱藏導航內容包含在id為#template2的容器中，在預設情況下是隱藏的，使用Bootstrap隱藏樣式d-none來設置。內容包括導航條、菜單欄和登錄註冊。
導航條用網格系統佈局，嵌套Bootstrap導航組件進行設計，使用<ul class="nav">定義。菜單欄使用h6標簽和超鏈接進行設計，使用<h6><a href="a.html">定義。登錄註冊使用<a href="#" class="btn">定義。

<!--        隱藏導航欄-->
        <div id="template2" class="d-none">
            <div class="row">
                <div class="col-10">
                    <ul class="nav">
                        <li class="nav-item">
                            <a href="index.html" class="nav-link active">
                                <img src="http://pic.58pic.com/58pic/12/06/74/07258PICNyX.jpg" alt="" width="40"
                                     class="rounded-circle">
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="index.html" class="nav-link mt-2">咖啡俱樂部</a>
                        </li>
                    </ul>
                </div>
                <div class="col-2 mt-2 font-menu text-right">
                    <a href="javascript:void(0);" id="a2"><i class="fa fa-times"></i></a>
                </div>
            </div>
            <div class="margin2">
                <div class="ml-5 mt-5">
                    <h6><a href="javascript:;">門店</a></h6>
                    <h6><a href="javascript:;">俱樂部</a></h6>
                    <h6><a href="javascript:;">菜單</a></h6>
                    <hr>
                    <h6><a href="javascript:;">移動應用</a></h6>
                    <h6><a href="javascript:;">秦選精品</a></h6>
                    <h6><a href="javascript:;">專星送</a></h6>
                    <h6><a href="javascript:;">咖啡講堂</a></h6>
                    <h6><a href="javascript:;">烘焙工廠</a></h6>
                    <h6><a href="javascript:;">幫助中心</a></h6>
                    <hr>
                    <a href="#" class="card-link btn rounded-pill text-success pl-0"><i class="fa fa-user-circle"></i>&nbsp;登&nbsp;陸</a>
                    <a href="#" class="card-link btn btn-outline-success rounded-pill text-success">註&nbsp;冊</a>
                </div>
            </div>
        </div>

第4步：設計自定義樣式，使頁面更加美觀。

@media (max-width: 992px){
/*    在小屏設備中，設置外邊距，上下邊距為1rem，左右為0*/
    .left{
        margin: 1rem 0;
    }
}
@media(min-width: 992px){
/*    在大屏設備中，左側導航設置固定定位，右側主體內容設置左外邊距25%*/
    .left{
        position: fixed;
        top: 0;
        left: 0;
    }
    .right{
        margin-left: 25%;
    }
    .margin1{
        margin-top: 40vh;
    }
}
.margin2 h6{
    margin: 20px 0;
    font-weight: bold;
}
ul{
    list-style-type: none;
}
.left{
    border-right: 2px solid #eeeeee;
}
.left a{
    font-weight: bold;
    color: #000;
}

第5步：添加交互行為。在可切換導航中，為<i class="fa fa-bars">圖標和<i class="fa fa-times">圖標添加單擊事件。在大屏設備中，為了使頁面更友好，設計在大屏設備上切換導航時，顯示右側主體內容，當單擊<i class="fa fa-bars">圖標時，切換隱藏的導航內容；在隱藏的導航內容中，單擊<i class="fa fa-times">圖標時，可切回導航展示內容。在中、小屏設備（<992px）上，隱藏右側主體內容，單擊<i class="fa fa-bars">圖標時，切換隱藏的導航內容；在隱藏的導航內容中，單擊<i class="fa fa-times">圖標時，可切回導航展示內容。

大屏設備切換隱藏的導航內容

 

 

 大屏設備切回導航展示的內容

 

 中屏設備切換隱藏的導航內容

 

 中屏設備切回導航展示的內容

 

 小屏設備切換隱藏的導航內容

 

 小屏設備切回導航展示的內容

 

 實現導航展示內容和隱藏內容交互行為的腳本代碼如下：

$(function () {
    $('#a1').click(function () {
        $('#template1').addClass('d-none');
        $('.right').addClass('d-none d-lg-block');
        $('#template2').removeClass('d-none');
    });
    $('#a2').click(function () {
        $('#template2').addClass('d-none');
        $('.right').removeClass('d-none');
        $('#template1').removeClass('d-none')
    })
});

提示：d-none和d-lg-block類是Bootstrap框架中的樣式。Bootstrap框架中的樣式在JavaScript腳本中可以直接調用。

7、主體內容

使頁面排版具有可讀性，可理解性、清晰明瞭至關重要。好的排版可以讓您的網站感覺清爽而令人眼前一亮，而糟糕的排版令人厭煩。排版是為了使內容更好的呈現，應以不會增加用戶認知負荷的方式來組織內容。
本案例主體內容包括輪播廣告區、產品推薦區、Logo展示、特色展示區和產品生產流程區5個部分，頁面排版如圖所示。

 

 8、設計輪播廣告區

Bootstrap輪播插件結構比較固定，輪播包含框需要指明ID值和carousel、slide類。框內包含三部分組件：標簽框（carousel-indicators）、圖文內容框（carousel-inner）和左右導航按鈕（carousel-control-prev、carousel-control-next）。通過data-target="#carousel"屬性啟動輪播，使用data-slide-to="0"、data-slide ="pre"、data-slide ="next"定義交互按鈕的行為。完整的代碼如下：

<!--    右側主體內容-->
    <div class="col-12 col-lg-9 right p-0 clearfix">
        <!--        輪播廣告區-->
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner max-h">
                <div class="carousel-item active">
                    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3764483885,4083168537&fm=26&gp=0.jpg"
                         class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592932077110&di=cd7fb84e36a5c1676a00ab4a23579bc8&imgtype=0&src=http%3A%2F%2Fattachment.jmw.com.cn%2Fuploadfile%2F2015%2F0403%2F20150403013807493.jpg"
                         class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592932114630&di=8016378ca877749b296f64347715841d&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3596133729%2C855335225%26fm%3D214%26gp%3D0.jpg"
                         class="d-block w-100" alt="...">
                </div>
            </div>
            <a href="#carouselExampleControls" class="carousel-control-prev" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a href="#carouselExampleControls" class="carousel-control-next" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
    </div>

為了避免輪播中的圖片過大而影響整體頁面，這裡為輪播區設置一個最大高度max-h類。

.max-h{
    max-height: 300px;
}
.max-h img{
    height: 300px;
}

9、設計產品推薦區
產品推薦區使用Bootstrap中卡片組件進行設計。卡片組件中有3種排版方式，分別為卡片組、卡片陣列和多列卡片浮動排版。本案例使用多列卡片浮動排版，多列卡片浮動排版使用<div class="card-columns">進行定義。

<!--        產品推薦區-->
        <div class="p-4 list">
            <h5 class="text-center my-3">咖啡推薦</h5>
            <h5 class="text-center mb-4 text-secondary">
                <small>在購物旗艦店可以發現更多咖啡心意</small>
            </h5>
            <!--            多列卡片浮動排版-->
            <div class="card-columns">
                <div class="my-4 my-sm-0">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592933913255&di=3cfd49ae1b46e2f9f514532950714019&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201301%2F28%2F20130128141904_5AwPK.jpeg"
                         class="card-img-top" alt="">
                </div>
                <div class="my-4 my-sm-0">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592933801297&di=adf480a55bf0abf7f224be6f21a9ecca&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F08%2F10%2F2157ab2a01b5f6c.jpg"
                         class="card-img-top" alt="">
                </div>
                <div class="my-4 my-sm-0">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592933817124&di=22ba5098fcefd4442a902e8b2ea12b32&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D2793055047%2C2676139222%26fm%3D214%26gp%3D0.jpg"
                         class="card-img-top" alt="">
                </div>
            </div>
        </div>

為推薦區添加自定義樣式，包括顏色和圓角效果。

.list{
    background: #eeeeee;
}
.list-border{
    border: 2px solid #DBDBDB;
    border-top: 1px solid #BDBDBD;
}

瀏覽器中運行，產品推薦區如圖

 

 

10、設計登錄註冊區和Logo
登錄註冊區和Logo使用網格系統佈局，並添加響應式設計。在中、大屏設備（≥768px）中，左側是登錄註冊區，右側是公司Logo；在小屏設備（<768px）中，登錄註冊區和Logo將各占一行顯示，如圖所示。

 

 

 

 對於左側的登錄註冊區，使用卡片組件進行設計，並且添加了響應式的對齊方式text-center和text-sm-left。在小屏設備（<768px）中，內容居中對齊；在中、大屏設備（≥768px）中，內容居左對齊。代碼如下：

<!--        登陸註冊區和logo-->
        <div class="row py-5">
            <div class="col-12 col-sm-6 pt-2">
                <div class="card border-0 text-center text-sm-left">
                    <div class="card-body ml-5">
                        <h4 class="card-title">咖啡俱樂部</h4>
                        <p class="card-text">開啟您的星享之旅，星星越多、會員等級越高、好禮越豐富。</p>
                        <a href="#" class="card-link btn btn-outline-success">註冊</a>
                        <a href="#" class="card-link btn btn-outline-success">登陸</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 text-center mt-5">
                <a href="#">
                    <img src="http://img1.imgtn.bdimg.com/it/u=3393326001,2411887059&fm=214&gp=0.jpg" alt=""
                         class="img-fluid">
                </a>
            </div>
        </div>

11、設計特色展示區

特色展示內容使用網格系統進行設計，並添加響應類。在中、大屏（≥768px）設備顯示為一行四列；在小屏幕（<768px）設備顯示為一行兩列；在超小屏幕（<576px）設備顯示為一行一列，如圖所示。
特色展示區實現代碼如下：

<!--        特色展示區-->
        <div class="p-4 list">
            <h5 class="text-center my-3">咖啡精選</h5>
            <h5 class="text-center mb-4 text-secondary">
                <small>在購物旗艦店可以發現更多咖啡心意</small>
            </h5>
            <div class="row">
                <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="bg-light p-4 list-border rounded">
                        <img src="http://www.qbaobei.com/UploadFiles/ysjk/2013/3/201303141718412131.jpg"
                             class="img-fluid" alt="">
                        <h6 class="text-secondary text-center mt-3">套餐一</h6>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="bg-white p-4 list-border rounded">
                        <img src="http://img1.imgtn.bdimg.com/it/u=1889104524,1865000713&fm=26&gp=0.jpg"
                             class="img-fluid"
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • webpack的入門實踐，看這篇就夠了
    webpack的入門實踐 我會將所有的讀者概括為初學者，即使你可能有基礎，學習本節之前我希望你具有一定的JavaScript和node基礎 文中的 ... ...代表省略掉部分代碼，和上面的代碼相同 文中的文件夾如果沒有說創建，並且項目預設沒有的是需要你手動增加的 不會特別細緻，但是足夠入門 資源 ...
  • 前端學習之路，前端開發人員如何在團隊中規範git commit提交記錄
    摘要 近期在review團隊的部分代碼，對比個人初期與如今的git提交記錄，發現初期的提交記錄簡直是五花八門，言不由衷，讓人一打眼看去就覺得這寫的什麼東西。一個好的git提交記錄既方便個人快速的瞭解自我的工作進度、快速的回退版本等，又便於團隊之間的協同開發。故分享一下當前最為規範、流行的git co ...
  • vue2.0以上版本安裝sass(scss) 、vue項目啟動出現cannot GET /服務錯誤
    vue項目啟動出現cannot GET /服務錯誤 查看控制台 是一些sass相關庫沒安裝成功 進行下麵操作進行安裝，再次啟動，完美解決！ 一、首先說明sass和scss的區別。 1、異同：1）簡言之可以理解scss是sass的一個升級版本，完全相容sass之前的功能，又有了些新增能力。語法形式上有 ...
  • js將樹形結構的數組扁平化（按順序）
    var newArr = []新建一個數據，用於存儲扁平化化後的數組 flatData(arr) { arr.forEach(item => { this.res.push(item) item.children && item.children.length > 0 ? this.flatData ...
  • js獲取cookie值
    getCookie(cookie_name) { var allcookies = document.cookie; //索引長度，開始索引的位置 var cookie_pos = allcookies.indexOf(cookie_name); // 如果找到了索引，就代表cookie存在,否則不 ...
  • TypeScript學習——靜態類型(1)
    一：定義 1.TypeScript無法直接在瀏覽器上運行(node也無法去運行)，會被編譯成JavaScript語法再去運行 2.是JavaScript的超集，是靜態類型，一旦定義成某類型，將無法改變 //靜態類型 let c: number=123; c='123';//報錯 c=123; 二：優 ...
  • 要為了興趣轉行去做程式員嗎？
    1、年齡的問題。年齡確實是一個必須考慮的重要問題，30歲大多已成家，可能已經有了小孩，分給家庭的時間會越來越多，能夠投入的時間和精力必然比不上20出頭的小伙子。但我認為精力反而不是最大的問題，最大的問題是越來越輸不起。到了30歲的人應該都有體會，你做的每一個決策都有很高的機會成本，是牽一發而動全身的 ...
  • 那個炒雞有趣的HTML5標簽 —— <dataList>
    因為所出標簽太多，所以我們很難都用得上或者意識到需要用。 但其實也有許多有趣但是我們未曾發掘的標簽，本文所要介紹的 便是一個。 <dataList>是什麼？ 標簽一個類似於 標簽一樣可以通過包裹 來表示控制項可選值的，唯一不同的就是 需要配合 來使用，而且 不表示任何內容，僅作展示。 我們康個慄子： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類