02-CSS&JS

来源:https://www.cnblogs.com/zmy-520131499/archive/2018/12/07/10083576.html
-Advertisement-
Play Games

今日目標 使用CSS完成網站首頁的優化 使用CSS完成網站註冊頁面的優化 使用JS完成簡單的數據校驗 使用JS完成圖片輪播效果 教學目標： - 瞭解CSS的概念 - 瞭解CSS的引入方式 - 瞭解CSS的基本用法和常用的選擇器 - 瞭解CSS的盒子模型，懸浮和定位 - 瞭解JS的概念 - 掌握JS的 ...


今日目標

 使用CSS完成網站首頁的優化

 使用CSS完成網站註冊頁面的優化

 使用JS完成簡單的數據校驗

 使用JS完成圖片輪播效果

 教學目標：

- 瞭解CSS的概念
- 瞭解CSS的引入方式
- 瞭解CSS的基本用法和常用的選擇器
- 瞭解CSS的盒子模型，懸浮和定位
- 瞭解JS的概念
- 掌握JS的基本語法，數據類型，能夠使用JS完成簡單的頁面交互


去年的內容簡單回顧

什麼HTML : 超文本標記語言

p標簽: 段落標簽

br標簽: 簡單換行

h1-h6: 標題標簽

hr標簽: 水平分割線, 華麗的分割線

font標簽: color屬性改變顏色 , size

b標簽: 加粗

i標簽: 斜體



strong標簽: 帶語義的加粗

em標簽: 斜體標簽,帶語義



img標簽: 圖片標簽 顯示圖片

​    src: 指定圖片路徑(相對路徑)

​    width: 寬度

​    height: 高度

​    alt: 圖片載入失敗時的提示

相對路徑:

​    ./  代表當前路徑

​    ../ 代表的是上一級路徑

​    ../../  代表的是上上一級路徑



ul標簽: 無序列表

ol標簽: 有序列表

li標簽: 列表項



a標簽: 超鏈接標簽:

​    target: 打開方式

​    href:  指定要跳轉的鏈接地址



table標簽:  table > tr > td

tr標簽: 行

td標簽: 列

​    合併行: rowspan

​    合併列: colspan



網站註冊案例:

​    form 標簽: 表單標簽,主要是用來向伺服器提交數據

​        method: 提交方式 get  post

​        action : 提交的路徑

​    input 標簽:

​            type: 

​                password: 密碼框

​                text : 文本

​                submit:  提交

​                button:  普通的按鈕

​                reset:  重置按鈕

​                radio: 單選按鈕 設置name屬性讓它們是一組

​                checkbox: 覆選按鈕 

​                email:

​                date:

​                tel:

frameset : 框架標簽

​    rows:

​    cols:

frame:  



 使用CSS完成網站首頁的優化

 需求分析:

​    由於我們昨天使用表格佈局存在缺陷,那麼我們要來考慮使用DIV+CSS來對頁面進行優化

表格佈局的缺陷:

    1. 嵌套層級太多, 一旦出現嵌套順序錯亂, 整個頁面達不到預期效果
    2.  採用表格佈局,頁面不夠靈活, 動其中某一塊,整個表格佈局的結構全都要變

 技術分析

HTML的塊標簽:

​    div標簽: 預設占一行,自動換行

​    span標簽:  內容顯示在同一行

CSS概述:

​    Cascading Style Sheets : 層疊樣式表

​        紅磚, 抹了一層水泥, 白灰

主要用作用:

​    用來美化我們的HTML頁面的

​    HTML 決定網頁的骨架    ,CSS  化妝

​    將頁面的HTML和美化進行分離

CSS的簡單語法:

​    在一個style標簽中,去編寫CSS內容,最好將style標簽寫在這個head標簽中

```html
<style>
  選擇器{
    屬性名稱:屬性的值;
    屬性名稱2: 屬性的值2;
  }
</style>
```

CSS選擇器: 幫助我們找到我們要修飾的標簽或者元素



元素選擇:

```html
元素的名稱{
  屬性名稱:屬性的值;
  屬性名稱:屬性的值;
}
```

ID選擇器:

```html
以#號開頭  ID在整個頁面中必須是唯一的s
#ID的名稱{
  屬性名稱:屬性的值;
  屬性名稱:屬性的值;
}
```

類選擇器:

```html
以 . 開頭 
.類的名稱{
   屬性名稱:屬性的值;
      屬性名稱:屬性的值;
}
```



CSS的引入方式:

​    外部樣式: 通過link標簽引入一個外部的css文件

​    內部樣式: 直接在style標簽內編寫CSS代碼

​    行內樣式: 直接在標簽中添加一個style屬性, 編寫CSS樣式



CSS浮動 : 浮動的元素會脫離正常的文檔流,在正常的文檔流中不占空間

                float屬性:
                    left
                    right
                
                clear屬性: 清除浮動
                    both : 兩邊都不允許浮動
                    left: 左邊不允許浮動
                    right : 右邊不允許浮動
                流式佈局


 步驟分析:

1. 創一個最外層div
2. 第一部份: LOGO部分: 嵌套三個div
3. 第二部分: 導航欄部分 : 放置5個超鏈接
4. 第三部分: 輪播圖 
5. 第四部分: 
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超鏈接


 代碼實現:

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            
            .logo{
                float: left;
                width: 33%;
                /*border-width: 1px;
                border-style: solid;
                border-color: red;*/
                height: 60px;
                line-height: 60px;
        /*        border: 1px solid red;*/
            }
            
            
            .amenu{
                color: white;
                text-decoration: none;
                height: 50px;
                line-height: 50px;
            }
            
            .product{
                float: left; text-align: center; width: 16%; height: 240px;
            }
            
        </style>
    </head>
    <body>
        <!--
            1. 創一個最外層div
            2. 第一部份: LOGO部分: 嵌套三個div
            3. 第二部分: 導航欄部分 : 放置5個超鏈接
            4. 第三部分: 輪播圖 
            5. 第四部分: 
            6. 第五部分: 直接放一張圖片
            7. 第六部分: 抄第四部分的
            8. 第七部分: 放置一張圖片
            9. 第八部分: 放一堆超鏈接
        -->
        <div>
            <!--2. 第一部份: LOGO部分: 嵌套三個div-->
            <div>
                <div class="logo">
                    <img src="../img/logo2.png"/>
                </div>
                <div class="logo">
                    <img src="../img/header.png"/>
                </div>
                <div class="logo">
                    <a href="#">登錄</a>
                    <a href="#">註冊</a>
                    <a href="#">購物車</a>
                </div>
            </div>
            
                
            <!--清除浮動-->
            <div style="clear: both;"></div>
            
            
            <!--3. 第二部分: 導航欄部分 : 放置5個超鏈接-->
            <div style=" height: 50px;">
                <a href="#" class="amenu">首頁</a>
                <a href="#" class="amenu">手機數位</a>
                <a href="#" class="amenu">電腦辦公</a>
                <a href="#" class="amenu">鞋靴箱包</a>
                <a href="#" class="amenu">香煙酒水</a>
            </div>
            
                
            <!--4. 第三部分: 輪播圖--> 
            <div>
                <img src="../img/1.jpg" width="100%"/>
            </div>
            <!--5. 第四部分:--> 
            <div>
                <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
                
                <!--左側廣告圖-->
                <div style="width: 15%; height: 480px;  float: left;">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%"/>
                </div>
                <!--
                    右側商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                    <div style="height: 240px; width: 50%; float: left;">
                        <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    
                </div>
            </div>
            
            <!--6. 第五部分: 直接放一張圖片-->
            <div>
                <img src="../products/hao/ad.jpg" width="100%"/>
            </div>
            <!--7. 第六部分: 抄第四部分的-->
            <div>
                <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
                
                <!--左側廣告圖-->
                <div style="width: 15%; height: 480px;  float: left;">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%"/>
                </div>
                <!--
                    右側商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                    <div style="height: 240px; width: 50%; float: left;">
                        <img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    <div class="product">
                        <img src="../products/hao/small08.jpg" />
                        <p>高壓鍋</p>
                        <p style="color: red;">$998</p>
                    </div>
                    
                </div>
            </div>
            
            <!--8. 第七部分: 放置一張圖片-->
            <div>
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--9. 第八部分: 放一堆超鏈接-->
            <div style="text-align: center;">
                        
                    <a href="#">關於我們</a>
                    <a href="#">聯繫我們</a>
                    <a href="#">招賢納士</a>
                    <a href="#">法律聲明</a>
                    <a href="#">友情鏈接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服務聲明</a>
                    <a href="#">廣告聲明</a>
                    
                    <br />
                    
                    Copyright © 2005-2016 傳智商城 版權所有
            </div>
        </div>
    </body>
</html>
```



 擴展:

- CSS的優先順序

  按照選擇器搜索精確度來編寫:             行內樣式 > ID選擇器 > 類選擇器  > 元素選擇器

  就近原則: 哪個離得近,就選用哪個的樣式


  CSS: 層疊樣式表

  主要作用:

      1. 美化頁面
      2. 將頁面美化和HTML代碼進行分離,提高代碼的服用型

  - 選擇器:

    - 元素選擇器: 標簽的名稱{}
    - 類選擇器:   以. 開頭  .類的名稱
    - ID選擇器:  以#開頭 ,   #ID的名稱  (ID必須是頁面上面唯一) 

  - CSS浮動:

    - float : left, right  不再占有正常文檔流中的空間 , 流式佈局

    - clear : both  left right

      ​

- CSS中的其它選擇器

  - 選擇器分組: 選擇器1,選擇器2{ 屬性的名稱:屬性的值}

  - 屬性選擇器:

    ```html
    a[title]
    a[titile='aaa']
    a[href][title]
    a[href][title='aaa']
    ```

  - 後代選擇器: 爺爺選擇器  孫子選擇器   找出所有的後代

  - 子元素選擇器:  父選擇器  > 兒子選擇器

  - 偽類選擇器: 通常都是用在A標簽上

  ​

  ​

 使用DIV+CSS完成註冊頁面的優化

 需求分析

由於我們的註冊頁面也是用table佈局的,存在與首頁同樣的問題,所以我們需要使用div+css對我們的註冊頁面進行美化

總共是5部分內容

 技術分析

CSS的盒子模型: 萬物皆盒子

內邊距:  

padding-top:

padding-right:

padding-bottom:

padding-left:

```html
padding:10px;  上下左右都是10px
padding:10px 20px;  上下是10px 左右是20px
padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
padding: 10px 20px 30px 40px;  上右下左, 順時針的方向
```



外邊距:

margin-top:

margin-right:

margin-bottom:

margin-left: 



CSS絕對定位:

​    position: absolute

​    top: 控制距離頂部的位置

​    left: 控制距離左邊的位置

 步驟分析:

1. 總共是5部分
2. 第一部分是LOGO部分
3. 第二部分是導航菜單
4. 第三部分是註冊部分
5. 第四部分是FOOTER圖片
6. 第五部分是一堆超鏈接

 代碼實現:

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
         <link rel="stylesheet" type="text/css" href="../css/main.css"/>
    </head>
    <body>
        <!--
            1. 總共是5部分
            2. 第一部分是LOGO部分
            3. 第二部分是導航菜單
            4. 第三部分是註冊部分
            5. 第四部分是FOOTER圖片
            6. 第五部分是一堆超鏈接
        -->
        <div>
            
            <!--2. 第一部分是LOGO部分-->
            <div>
                <div class="logo">
                    <img src="../img/logo2.png" />
                </div>
                <div class="logo">
                    <img src="../img/header.png" />
                </div>
                <div class="logo">
                    <a href="#">登錄</a>
                    <a href="#">註冊</a>
                    <a href="#">購物車</a>
                </div>
            </div>
            
            <!--清除浮動-->
            <div style="clear: both;"></div>
            <!--3. 第二部分是導航菜單-->
            <div style=" height: 50px;">
                <a href="#" class="amenu">首頁</a>
                <a href="#" class="amenu">手機數位</a>
                <a href="#" class="amenu">電腦辦公</a>
                <a href="#" class="amenu">鞋靴箱包</a>
                <a href="#" class="amenu">香煙酒水</a>
            </div>
            <!--4. 第三部分是註冊部分-->
            <div style="background: url(../image/regist_bg.jpg);height: 500px;">
                
                <div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;">
                    <table width="60%" align="center">
                        <tr>
                            <td colspan="2"><font color="blue" size="6">會員註冊</font>USER REGISTER</td>
                            
                        </tr>
                        <tr>
                            <td>用戶名:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td>密碼:</td>
                            <td><input type="password"/></td>
                        </tr>
                        <tr>
                            <td>確認密碼:</td>
                            <td><input type="password"/></td>
                        </tr>
                        <tr>
                            <td>email:</td>
                            <td><input type="email"/></td>
                        </tr>
                        <tr>
                            <td>姓名:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td>性別:</td>
                            <td><input type="radio" name="sex"/> 男
                            <input type="radio" name="sex"/> 女
                            <input type="radio" name="sex"/> 妖
                            </td>
                        </tr>
                        <tr>
                            <td>出生日期:</td>
                            <td><input type="date"/></td>
                        </tr>
                        <tr>
                            <td>驗證碼:</td>
                            <td><input type="text"/></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="submit" value="註冊"/></td>
                        </tr>
                    </table>
                </div>
                
            </div>
            
            <!--5. 第四部分是FOOTER圖片-->
            <div>
                <img src="../img/footer.jpg" width="100%"/>
            </div>
            <!--9. 第四部分: 放一堆超鏈接-->
            <div style="text-align: center;">
                        
                    <a href="#">關於我們</a>
                    <a href="#">聯繫我們</a>
                    <a href="#">招賢納士</a>
                    <a href="#">法律聲明</a>
                    <a href="#">友情鏈接</a>
                    <a href="#">支付方式</a>
                    <a href="#">配送方式</a>
                    <a href="#">服務聲明</a>
                    <a href="#">廣告聲明</a>
                    
                    <br />
                    
                    Copyright © 2005-2016 傳智商城 版權所有
            </div>
            
        </div>
    </body>
</html>

```



 CSS部分的回顧:

​    CSS: 層疊樣式表.

​    CSS作用: 美化頁面,提高代碼的復用性

​    選擇器:

​        需要掌握的:

​            元素選擇器: 標簽的名稱

​            類選擇器:  以 . 開頭

​            ID選擇器: 以#開頭,  #ID的名稱  ID必須是唯一的

​        優先順序: 按照選擇精確度: 行內樣式  > ID選擇器 > 類選擇器 > 元素選擇器

​                就近原則

​        擴展選擇器:

​            選擇器分組:  選擇器1,選擇器2   以逗號隔開

​            後代選擇器:  爺爺 孫子   中間以空格隔開

​            子元素選擇器:  爸爸 > 兒子 

​            屬性選擇器:   選擇器[屬性的名稱='']

​            偽類選擇器:  超鏈接標簽上使用  

​     浮動: float屬性  left right

​     清除浮動: clear: both left right

​    

​    盒子模型:  順時針 : 上右下左

​        padding : 內邊距 ,控制的是盒子內容的距離

​        margin : 外邊距 控制盒子與盒子之間的距離

​    絕對定位:

​        position: absolute

​        top:

​        left:



 使用JS完成簡單的數據校驗

 需求分析

使用JS完成對註冊頁面的簡單數據校驗,不允許出現用戶名或密碼為空的情況



 技術分析

 JavaScript概述

什麼是javascript: JavaScript一種直譯式腳本語言，

什麼是腳本語言?

​    java源代碼 ----> 編譯成.class文件 -----> java虛擬機中才能執行

​    腳本語言:   源碼  -------- > 解釋執行

​    js由我們的瀏覽器來解釋執行

HTML: 決定了頁面的框架  

CSS: 用來美化我們的頁面

JS:    提供用戶的交互的

 JS的組成:

ECMAScript : 核心部分 ,定義js的語法規範

DOM: document Object Model 文檔對象模型 , 主要是用來管理頁面的

BOM : Browser Object Model  瀏覽器對象模型, 前進,後退,頁面刷新, 地址欄, 歷史記錄, 屏幕寬高

 JS的語法:

變數弱類型: var i = true

區分大小寫

語句結束之後的分號 ,可以有,也可以沒有

寫在script標簽


 JS的數據類型:

- 基本類型
  - string
  - number
  - boolean 
  - undefine
  - null
- 引用類型
  - 對象, 內置對象
- 類型轉換
  - js內部自動轉換 

 JS的運算

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端入門21-JavaScript的ES6新特性
    聲明 本篇內容全部摘自阮一峰的： "ECMAScript 6 入門" 阮一峰的這本書，我個人覺得寫得挺好的，不管是描述方面，還是例子，都講得挺通俗易懂，每個新特性基本都還會跟 ES5 舊標準做比較，說明為什麼會有這個新特性，這更於理解。 所以，後續不會再寫個關於 ES6 系列的文章了，就在這篇里大概 ...
  • 解析React事件處理的機制及原理
    本文主要介紹了React事件處理的機制及原理，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。 React中的事件處理在React元素中綁定事件有兩點需要註意： （1）在React中，事件命名採用駝峰命名方式，而不是DOM元素中的小寫字母命名方式。例如onclick要 ...
  • 深入解析Vue.js中v-bind v-model的使用和區別
    v-model 指令在表單控制項元素上創建雙向數據綁定,所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的數據 最基礎的就是實現一個聯動的效果 checkbox v-bind 有些指令可以在其名稱後面帶一個“參 ...
  • 解析vue項目每30秒刷新1次介面的實現方式
    在vue.js項目中，經常需要對數據實時更新——每隔xx秒需要刷新一次介面——即需要用到定時器相關原理。這篇文章主要介紹了vue項目每30秒刷新1次介面的實現方法，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。 在vue.js項目中，經常需要對數據實時更新——每隔x ...
  • JavaScript之原型 Prototype
    1、我們所創建的每一個函數，解析器都會向函數中添加一個屬性prototype。這個屬性對應著一個對象，這個對象就是我們所謂的原型對象。如果函索作為普通函數調用prototype沒有任何作用。 當函數以構造函數的形式調用時，它所創建的對象中都會有一個隱含的屬性 指向該構造函數的原型對象，我們可以通過_ ...
  • 05-BootStrap
    今日任務 使用JQuery發送請求局部刷新頁面 使用BootStrap製作一個響應式的頁面 使用BootStrap製作網站的首頁 教學目標 掌握什麼是響應式及響應式的原理 掌握BootStrap的柵格系統 瞭解BootStrap的其他組件及JS控制項 上次課內容: 什麼JQ : write less ...
  • 04-JQuery
    今日任務 使用JQuery完成頁面定時彈出廣告 定時器: ​ setInterval clearInterval ​ setTimeout clearTimeout 顯示: img.style.display = "block" 隱藏: img.style.display = "none" img ...
  • 03-JavaScript
    今日任務 使用JS完成頁面定時彈出廣告 使用JS完成表單的校驗 使用JS完成表格的隔行換色 使用JS完成覆選框的全選效果 使用JS完成省市的聯動效果 JS控制下拉列表左右選擇 教學導航 1. 掌握JS中的BOM對象 2. 掌握JS中的常用事件 3. 掌握JS中的常用DOM操作 4. 瞭解JS中的內置 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類