Ajax+Git 研究ノート

アヤックス
ギット

アヤックス

基本的な考え方

サーバー: インターネットサーフィンの過程で、リソースを外部に保存および提供するコンピューター

クライアント: インターネットサーフィンの過程で、リソースの取得と消費コンピューター

URL アドレス: インターネット上の各リソースの一意の保存場所を識別するために使用される、Uniform Resource Locator。ブラウザは URL アドレスを介してのみ、リソースの保存場所を正確に特定できるため、対応するリソースに正常にアクセスできます。

URL アドレスは通常、次の 3 つの部分で構成されます。
① クライアントとサーバー間の通信プロトコル
② リソースが保存されているサーバーの名前
③ サーバー上のリソースの特定の保存場所

ここに画像の説明を挿入
クライアントとサーバー間の通信プロセス: 要求 - 処理 - 応答

ウェブページリクエストデータ: ウェブページでサーバー上のデータリソースをリクエストしたい場合は、XMLHttpRequest オブジェクトを使用する必要があります用法 var xhrObj = new XMLHttpRequest()

リソースリクエストメソッド: get および post リクエスト用

Ajax : Web ページ内の XMLHttpRequest オブジェクトとサーバー間のデータ相互作用の方法で、Ajax を使用すると、Web ページとサーバー間のデータ相互作用を簡単に実現できます。

jQuery での Ajax

jQuery で Ajax リクエストを開始するために最も一般的に使用される 3 つの方法は次のとおりです。
$.get()，$.post() ，$.ajax()

$.get() 関数の構文

 $.get(url, [data], [callback])
//发起不带参数的请求
 $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
    
    
    console.log(res) // 这里的 res 是服务器返回的数据
})
//发起带参数的请求
$.get('http://www.liulongbin.top:3006/api/getbooks', {
    
     id: 1 }, function(res) {
    
    
    console.log(res)
})

ここに画像の説明を挿入
2. $.post() 関数の構文

//向服务器提交数据
$.post(url, [data], [callback])

$.ajax() 関数の構文

$.ajax({
    
    
   type: '', // 请求的方式，例如 GET 或 POST
   url: '',  // 请求的 URL 地址
   data: {
    
     },// 这次请求要携带的数据
   success: function(res) {
    
     } // 请求成功之后的回调函数
})

インターフェース

Ajax を使用してデータを要求する場合、要求された URL アドレスはデータインターフェイス (略してインターフェイス) と呼ばれます。同時に、各インターフェースにはリクエストメソッドが必要です

インターフェイステストツール Postman : インターフェイスに正常にアクセスできるかどうかを検証するために、多くの場合、インターフェイステストツールを使用してデータインターフェイスを検出する必要があります。インターフェイステストツールを使用すると、コードを記述せずにインターフェイスを呼び出してテストできます。

インターフェイスドキュメントのコンポーネント: インターフェイスを呼び出すための基礎を提供する次の 6 つの項目が含まれています。

インターフェース名：ログインインターフェース、書籍情報取得インターフェースなど、各インターフェースを識別するための簡単な説明。
インターフェース URL: インターフェースの呼び出しアドレス。
呼び出しメソッド: GET や POST などのインターフェイスの呼び出しメソッド。
パラメーター形式: インターフェイスによって渡される必要があるパラメーター。各パラメーターには、パラメーター名、パラメーターの種類、必須かどうか、およびパラメーターの説明の 4 つの項目が含まれている必要があります。
応答形式: インターフェイスの戻り値の詳細な説明。通常、データ名、データ型、および説明が含まれます。
戻り値の例 (オプション): オブジェクトの形式で、サーバーから返されたデータの構造を列挙します。

形状

フォームは、主に Web ページのデータ収集機能を担い、
次の 3 つの基本部分で構成されています。

フォームラベル<form></form>
フォームフィールド
<input type="text" name="email_or_mobile" />
<input type="password" name="password" />
<input type="checkbox" name="remember_me" checked />
フォームボタン<button type="submit">提交</button>

ラベルのプロパティ

action: フォームの送信時にフォームデータの送信先を指定するために使用されます。
action 属性の値は、フォームから送信されたデータの受信を特別に担当するバックエンドによって提供される URL アドレスである必要があります。
target: アクション URL を開く場所を指定するために使用されます.
5 つのオプションの値があります. デフォルトでは, target の値は _self です, これは同じフレームでアクション URL を開くことを意味します
method: フォームデータをアクション URL に送信する方法を指定するために使用されます.
get と post という 2 つのオプションの値があります.
デフォルトでは、メソッドの値は get です。これは、フォームデータが URL アドレスの形式でアクション URL に送信されることを意味します。
get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中，post 提交方式用的最多
enctype: フォームデータを送信する前にデータをエンコードする方法を指定します。
オプションの値は 3 つあります。

知らせ：

ファイルのアップロード操作に関しては、enctype の値を multipart/form-data に設定する必要があります
フォームの送信にファイルのアップロード操作が含まれていない場合は、enctype の値を application/x-www-form-urlencoded に直接設定するだけです。

フォームの同期送信

定義: 送信ボタンをクリックすることにより、フォームの送信がトリガーされ、ページがアクション URL にジャンプするアクションは、フォームの同期送信と呼ばれ
ます。

フォームが同期的に送信されると、ページ全体がアクション URL が指すアドレスにジャンプし、ユーザーエクスペリエンスが非常に悪くなります。
フォームが同期的に送信されると、ページの以前の状態とデータは失われます。

解決策: フォームはデータの収集のみを担当し、Ajax はサーバーへのデータの送信を担当します。

Ajax 経由でフォームデータを送信する

フォーム送信イベントをリッスンする

<body>
  <form action="/login" id="f1">
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
  </form>

  <script>
    $(function () {
      
      
      // 第一种方式
      // $('#f1').submit(function () {
      
      
      //   alert('监听到了表单的提交事件')
      // })

      // 第二种方式
      $('#f1').on('submit', function () {
      
        
        alert('监听到了表单的提交事件2')
      })
    })
  </script>
</body>

フォームのデフォルトの送信動作を防止する

<body>
  <form action="/login" id="f1">
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
  </form>
  <script>
    $(function () {
      
      
      // 第一种方式
      // $('#f1').submit(function (e) {
      
      
      //   alert('监听到了表单的提交事件')
      //   e.preventDefault()
      // })
      // 第二种方式
      $('#f1').on('submit', function (e) {
      
        
        alert('监听到了表单的提交事件2')
        e.preventDefault()
      })
    })
  </script>
</body>

フォーム内のデータをすばやく取得: $(selector).serialize()、フォーム内のすべてのデータを一度に取得できます

<body>

  <form action="/login" id="f1">
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
  </form>

  <script>
    $(function () {
      
      
      // 第一种方式
      /* $('#f1').submit(function (e) {
        e.preventDefault()
        var data = $(this).serialize()
        console.log(data)
      }) */

      // 第二种方式
      $('#f1').on('submit', function (e) {
      
      
        e.preventDefault()
        var data = $('#f1').serialize()
        console.log(data)
      })
    })
  </script>
</body>

テンプレートエンジン

プログラマーが指定したテンプレート構造とデータに従って、完全な HTML ページを自動的に生成できます。

利点:

文字列連結操作の削減
コード構造をより明確にする
コードを読みやすく、保守しやすくする

art-template テンプレートエンジン

ミニマルで超高速のテンプレートエンジン。
中国の公式サイトのホームページはhttp://aui.github.io/art-template/zh-cn/index.html
ダウンロードリンク：http://aui.github.io/art-template/zh-cn/docs/installation.html
従来のUI構造のレンダリングの問題：複雑な構造、面倒な修正

art-template の使用手順

アートテンプレートのインポート
データを定義する
テンプレートを定義する
テンプレート関数を呼び出す
HTML 構造をレンダリングする

art-template 標準構文

art-template は { { }} 構文形式を提供し、{ { }} 内で変数出力を実行したり、配列やその他の操作をループしたりできます。この { { }} 構文は、art-template では標準構文と呼ばれます。
{ { }} 構文では、変数出力、オブジェクト属性出力、三項式出力、論理または出力、加算、減算、乗算、および除算を出力できます。

元のテキスト出力:
{ {@ value }}
出力する値に HTML タグ構造が含まれている場合、元のテキスト出力構文を使用して、HTML タグが正常にレンダリングされるようにする必要があります。

条件付き出力: { { }}でオンデマンド出力に
使用できます if … else if … /if

<div>
      {
   
   {if flag === 0}}
      flag的值是0
      {
   
   {else if flag === 1}}
      flag的值是1
      {
   
   {/if}}
</div>

ループ出力:
ループ出力を実装する場合は、 each 構文を使用して { { }} 内で配列をループできます。現在のループのインデックスには $index を使用してアクセスし、現在のループ項目には $value を使用してアクセスします。

<div>
      {
   
   {each arr}}
      {
   
   {$index}} {
   
   {$value}}
      {
   
   {/each}}
</div>
<ul>
      {
   
   {each hobby}}
      <li>索引是:{
   
   {$index}}，循环项是:{
   
   {$value}}</li>
      {
   
   {/each}}
    </ul>

標準構文 - フィルター

フィルターの本質は、関数処理関数です.
{ {value | filterName}}
フィルター構文はパイプライン演算子に似ており、前の出力が次の入力として使用されます.
フィルタを定義するための基本的な構文:template.defaults.imports.filterName = function(value){/*return处理的结果*/}

<body>
  <script type="text/html" id="tpl-user">
    <h3>{
      
      {
      
      regTime | dateFormat}}</h3>
  </script>

  <script>
    // 定义处理时间的过滤器
    template.defaults.imports.dateFormat = function (date) {
      
      
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()

      return y + '-' + m + '-' + d
    }
  </script>
</body>

テンプレートエンジンの実装原理

正規および文字列操作
exec() 関数は、文字列内の正規表現の一致を取得するために使用されます文字列
内に一致する値がある場合は一致する値を返し、それ以外の場合は null を返します
RegExpObject.exec(string)

var str = 'hello'
var pattern = /o/
// 输出的结果["o", index: 4, input: "hello", groups: undefined]
console.log(pattern.exec(str))

グルーピング:
正規表現の()で囲まれた内容がグルーピングを表しており、グルーピングすることで必要な内容を抽出することができます

replace 関数は
、文字列内の一部の文字を他の文字に置き換えるために使用されます
var result = '123456'.replace('123', 'abc') // 得到的 result 的值为字符串 'abc456'

シンプルなテンプレートエンジンを実装する

実装手順:

テンプレート構造の定義

<!-- 1.定义模板结构 -->
<script type="text/html" id="tpl-user">
   <div>姓名：{
      
      {
      
      name}}</div>
   <div>年龄：{
      
      {
      
       age }}</div>
   <div>性别：{
      
      {
      
        gender}}</div>
   <div>住址：{
      
      {
      
      address  }}</div>
</script>

事前呼び出しテンプレートエンジン

<script>
   // 定义数据
   var data = {
      
       name: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }
   // 调用模板函数
   var htmlStr = template('tpl-user', data)
   // 渲染HTML结构
   document.getElementById('user-box').innerHTML = htmlStr
</script>

テンプレート関数のカプセル化

function template(id, data) {
    
    
  var str = document.getElementById(id).innerHTML
  var pattern = /{
     
     {\s*([a-zA-Z]+)\s*}}/
  var pattResult = null
  while ((pattResult = pattern.exec(str))) {
    
    
    str = str.replace(pattResult[0], data[pattResult[1]])
  }
  return str
}

カスタムテンプレートエンジンをインポートして使用する

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>自定义模板引擎</title>
    <!-- 导入自定义的模板引擎 -->
    <script src="./js/template.js"></script>
</head>

XMLHttpRequest

XMLHttpRequest (略して xhr) は、ブラウザーによって提供される Javascript オブジェクトであり、サーバー上のデータリソースを要求できます。以前学んだjQueryのAjax関数をxhrオブジェクトを元にカプセル化

xhr を使用して GET 要求を開始する

xhr オブジェクトを作成する
xhr.open() 関数を呼び出す
xhr.send() 関数を呼び出す
xhr.onreadystatechange イベントを聞く

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 请求方式 与 URL地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    
    
// 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
    if (xhr.readyState === 4 && xhr.status === 200) {
    
    
        // 4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

XMLHttpRequest オブジェクトの readyState 属性は、現在の Ajax リクエストの状態を示すために使用されます。
ここに画像の説明を挿入

xhr を使用してパラメーター付きの GET リクエストを開始する

xhr オブジェクトを使用してパラメーター付きの GET 要求を開始する場合、xhr.open の呼び出し中に URL アドレスのパラメーターを指定するだけで済みます。

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
クエリ文字列 (URL パラメーター) は、サーバーに情報を送信するために URL の末尾に追加される文字列 (変数) です。

URL の末尾に英語の ? を置き、パラメーター = 値を追加します。複数のパラメーターを追加する場合は、& 記号を使用してそれらを区切ります。このフォームでは、サーバーに送信するデータを URL に追加できます。
// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

URL エンコーディング

中国語の文字をエンコードし、英語以外の文字を表すために英語の文字を使用します。
ブラウザーは、URL のエンコードおよびデコード API を提供します。これらは、
encodeURI() エンコード関数
decodeURI() とデコード関数です。

xhr を使用して POST 要求を開始する

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    
    
    if (xhr.readyState === 4 && xhr.status === 200) {
    
    
        console.log(xhr.responseText)
    }
}

データ交換フォーマット

データ交換フォーマットは、サーバーとクライアント間のデータ伝送および交換のためのフォーマットです。フロントエンドの分野でよく言及される 2 つのデータ交換形式は、XML と JSON です。

XML: 拡張マークアップ言語、あまり使用されない

XML と HTML はどちらもマークアップ言語ですが、両者の間に関係はありません。

HTML は次のように設計されています。ページの内容を説明する、ウェブコンテンツのキャリア
XML は次のように設計されています。データの転送と保存、データキャリアです

短所：XML形式が肥大化する、データに関係のないコードが多い、容量が大きい、伝送効率が低い

JSON: コンピューターと Web 間でのデータの保存と転送

JSON は Javascript オブジェクトと配列の文字列表現です. テキストを使用して JS オブジェクトまたは配列の情報を表します. したがって, JSON の本質は文字列です. JSON は XML よりも小さい軽量のテキストデータ交換形式です
.そして解析しやすい

JSONには含まれていますオブジェクトと配列2 つの構造体。これら 2 つの構造体を相互に入れ子にすることで、さまざまな複雑なデータ構造を表現できます。

JSON の 2 つの構造

オブジェクト構造と配列構造

オブジェクト構造: オブジェクト構造は、JSON の {} で囲まれた内容として表現されます。

キーは英語の二重引用符で囲まれた文字列である必要があり、値のデータ型は、数値、文字列、ブール値、null、配列、オブジェクトの 6 種類です。

データ構造: {key:value, kay:value, …} のキーと値のペア構造

データ構造は [ "java", "javascript", 30, true ... ] です。配列内のデータの型は、数値、文字列、ブール値、null、配列、オブジェクトの 6 種類です。

JSON 構文に関する注意事項:

属性名は二重引用符で囲む必要があります
文字列型の値は二重引用符で囲む必要があります
JSON では文字列の一重引用符は使用できません
コメントは JSON で記述できません
JSON の最外層は、オブジェクトまたは配列形式である必要があります
未定義または関数を JSON 値として使用することはできません

JSON オブジェクトと JS オブジェクトの関係:

JSON は JS オブジェクトの文字列表現であり、テキストを使用して JS オブジェクトの情報 (本質的には文字列) を表します。

JSON と JS オブジェクト間の変換:

// 从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法
var obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}
// 从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法
var json = JSON.stringify({
    
    a: 'Hello', b: 'World'})
//结果是 '{"a": "Hello", "b": "World"}'

シリアライゼーションとデシリアライゼーション:

データオブジェクトを文字列に変換するプロセスはシリアライゼーションと呼ばれ、たとえば JSON.stringify() 関数を呼び出す操作は JSON シリアライゼーションと呼ばれます。

文字列をデータオブジェクトに変換するプロセスは、逆シリアル化と呼ばれます。たとえば、JSON.parse() 関数を呼び出す操作は、JSON 逆シリアル化と呼ばれます。

独自の Ajax 関数をカプセル化する

<!-- 1. 导入自定义的ajax函数库 -->
<script src="./itheima.js"></script>
<script>
    // 2. 调用自定义的 itheima 函数，发起 Ajax 数据请求
    itheima({
      
      
        method: '请求类型',
        url: '请求地址',
        data: {
      
       /* 请求参数对象 */ },
        success: function(res) {
      
       // 成功的回调函数
            console.log(res)     // 打印数据
        }
    })
</script>

options パラメーター option を定義します。
itheima() この関数は、構成オブジェクトをパラメーターとして受け取るカスタム Ajax 関数であり、次の属性を構成オブジェクトで構成できます。

methodリクエストの種類
url要求された URL アドレス
dataリクエストによって運ばれるデータ
successリクエスト成功後のコールバック関数

データパラメータを処理する

/**
 * 处理 data 参数
 * @param {data} 需要发送到服务器的数据
 * @returns {string} 返回拼接好的查询字符串 name=zs&age=10
 */
function resolveData(data) {
    
    
  var arr = []
  for (var k in data) {
    
    
    arr.push(k + '=' + data[k])
  }
  return arr.join('&')
}

itheima 関数を定義する
itheima() 関数では、xhr オブジェクトを作成し、onreadystatechange イベントをリッスンする必要があります。

function itheima(options) {
    
    
  var xhr = new XMLHttpRequest()
  // 拼接查询字符串
  var qs = resolveData(options.data)

  // 监听请求状态改变的事件
  xhr.onreadystatechange = function() {
    
    
    if (xhr.readyState === 4 && xhr.status === 200) {
    
    
      var result = JSON.parse(xhr.responseText)
      options.success(result)
    }
  }
}

リクエストの種類の判断
リクエストの種類が異なれば、xhr オブジェクトの操作も異なるため、if ... else ... でリクエストの種類を判断する必要があります。

  if (options.method.toUpperCase() === 'GET') {
    
    
    // 发起 GET 请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    
    
    // 发起 POST 请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

XMLHttpRequest Level2 の新機能

古い短所: 无法读取和上传文件;没有进度信息
新機能: 可以设置 HTTP 请求的时限, 可以使用 FormData 对象管理表单数据, 可以上传文件,可以获得数据传输的进度信息

HTTP リクエストの時間制限を設定します: timeout 属性

xhr.timeout = 3000
xhr.ontimeout = function(event){
    
    
     alert('请求超时！')
 }

FormData オブジェクトはフォームデータを管理します

Ajax 操作は、フォームデータの送信によく使用されます。フォーム処理を容易にするために、HTML5 はフォーム操作をシミュレートできる FormData オブジェクトを追加します。

    // 1. 创建 FormData 实例
    var fd = new FormData()
    // 2. 调用 append 函数，向 fd 中追加数据
    fd.append('uname', 'zs')
    fd.append('upwd', '123456')

    var xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
    xhr.send(fd)

    xhr.onreadystatechange = function () {
    
    
      if (xhr.readyState === 4 && xhr.status === 200) {
    
    
        console.log(JSON.parse(xhr.responseText))
      }
    }

FormData オブジェクトを使用して、Web フォームの値を取得することもできます

// 获取表单元素
 var form = document.querySelector('#form1')
 // 监听表单元素的 submit 事件
 form.addEventListener('submit', function(e) {
    
    
    e.preventDefault()
     // 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
     var fd = new FormData(form)
     var xhr = new XMLHttpRequest()
     xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
     xhr.send(fd)
     xhr.onreadystatechange = function() {
    
    }
})

ファイルのアップロード:

実装手順:

UI 構造を定義する

	<!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3. 显示上传到服务器上的图片 -->
    <img src="" alt="" id="img" width="800" />

ファイルが選択されていることを確認します

// 1. 获取上传文件的按钮
 var btnUpload = document.querySelector('#btnUpload')
 // 2. 为按钮添加 click 事件监听
 btnUpload.addEventListener('click', function() {
    
    
     // 3. 获取到选择的文件列表
     var files = document.querySelector('#file1').files
     if (files.length <= 0) {
    
    
         return alert('请选择要上传的文件！')
     }
     // ...后续业务逻辑
 })

ファイルを FormData に追加する

// 1. 创建 FormData 对象
 var fd = new FormData()
 // 2. 向 FormData 中追加文件
 fd.append('avatar', files[0])

xhr を使用してファイルをアップロードするリクエストを開始する

// 1. 创建 xhr 对象
 var xhr = new XMLHttpRequest()
 // 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
 xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
 // 3. 发起请求
 xhr.send(fd)

onreadystatechange イベントを聞く

xhr.onreadystatechange = function() {
    
    
  if (xhr.readyState === 4 && xhr.status === 200) {
    
    
    var data = JSON.parse(xhr.responseText)
    if (data.status === 200) {
    
     // 上传文件成功
      // 将服务器返回的图片地址，设置为 <img> 标签的 src 属性
      document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
    } else {
    
     // 上传文件失败
      console.log(data.message)
    }
  }
}

ファイルのアップロードの進行状況を表示:

必要なライブラリをインポートする

<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>

Bootstrap に基づいてプログレスバーをレンダリングする

 	<!-- 进度条 -->
    <div class="progress" style="width: 500px; margin: 10px 0;">
      <div class="progress-bar progress-bar-info progress-bar-striped active" id="percent" style="width: 0%">
        0%
      </div>
    </div>

アップロードの進行状況イベントを監視する

	xhr.upload.onprogress = function(e) {
    
    
    if (e.lengthComputable) {
    
    
    // 1. 计算出当前上传进度的百分比
    var percentComplete = Math.ceil((e.loaded / e.total) * 100)
    $('#percent')
        // 2. 设置进度条的宽度
        .attr('style', 'width:' + percentComplete + '%')
        // 3. 显示当前的上传进度百分比
        .html(percentComplete + '%')
    }
 }

アップロード完了イベントをリッスンする

	xhr.upload.onload = function() {
    
    
     $('#percent')
         // 移除上传中的类样式
         .removeClass()
         // 添加上传完成的类样式
         .addClass('progress-bar progress-bar-success')
 }

jQueryの高度な使い方

jQuery はファイルのアップロードを実装します

UI 構造を定義する

<!-- 导入 jQuery -->
    <script src="./lib/jquery.js"></script>

    <!-- 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 上传文件按钮 -->
    <button id="btnUpload">上传</button>

ファイルが選択されていることを確認します

$('#btnUpload').on('click', function() {
    
    
     // 1. 将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表
     var files = $('#file1')[0].files
     // 2. 判断是否选择了文件
     if (files.length <= 0) {
    
    
         return alert('请选择图片后再上传！‘)
     }
 })

ファイルを FormData に追加する

// 向 FormData 中追加文件
 var fd = new FormData()
 fd.append('avatar', files[0])

jQuery を使用してファイルをアップロードするリクエストを開始する

 $.ajax({
    
    
     method: 'POST',
     url: 'http://www.liulongbin.top:3006/api/upload/avatar',
     data: fd,
     // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
     contentType: false,
     // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
     processData: false,
     success: function(res) {
    
    
         console.log(res)
     }
 })

jQueryでローディング効果を実現

Ajax リクエストが開始されると、ajaxStart 関数が実行されます。ローディング効果は ajaxStart のコールバックで表示できます

 // 自 jQuery 版本 1.8 起，该方法只能被附加到文档
 $(document).ajaxStart(function() {
    
    
     $('#loading').show()
 })

Ajax リクエストが終了したら、ajaxStop 関数を実行します。ローディング効果はajaxStopのコールバックで隠すことができます

// 自 jQuery 版本 1.8 起，该方法只能被附加到文档
 $(document).ajaxStop(function() {
    
    
     $('#loading').hide()
 })

アクシオス

Axios は、ネットワークデータリクエストに焦点を当てたライブラリです。
ネイティブの XMLHttpRequest オブジェクトと比較すると、axios はシンプルで使いやすいです。
jQuery と比較して、axios はより軽量であり、ネットワークデータリクエストのみに焦点を当てています。

Axios が GET リクエストを開始する

axios.get('url', { params: { /*参数*/ } }).then(callback)

// 请求的 URL 地址
 var url = 'http://www.liulongbin.top:3006/api/get'
 // 请求的参数对象
 var paramsObj = {
    
     name: 'zs', age: 20 }
 // 调用 axios.get() 发起 GET 请求
 axios.get(url, {
    
     params: paramsObj }).then(function(res) {
    
    
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
 })

Axios が POST リクエストを開始する

axios.post('url', { /*参数*/ }).then(callback)

// 请求的 URL 地址
 var url = 'http://www.liulongbin.top:3006/api/post'
 // 要提交到服务器的数据
 var dataObj = {
    
     location: '北京', address: '顺义' }
 // 调用 axios.post() 发起 POST 请求
 axios.post(url, dataObj).then(function(res) {
    
    
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(result)
 })

axios を直接使用してリクエストを開始する

//语法
axios({
    
    
     method: '请求类型',
     url: '请求的URL地址',
     data: {
    
     /* POST数据 */ },
     params: {
    
     /* GET参数 */ }
 }) .then(callback)

//直接使用axios发起GET请求
axios({
    
    
     method: 'GET',
     url: 'http://www.liulongbin.top:3006/api/get',
     params: {
    
     // GET 参数要通过 params 属性提供
         name: 'zs',
         age: 20
     }
 }).then(function(res) {
    
    
     console.log(res.data)
 })

//直接使用axios发起POST请求
axios({
    
    
     method: 'POST',
     url: 'http://www.liulongbin.top:3006/api/post',
     data: {
    
     // POST 数据要通过 data 属性提供
         bookname: '程序员的自我修养',
         price: 666
     }
 }).then(function(res) {
    
    
     console.log(res.data)
 })

同種

プロトコル、ドメイン名、およびポートが同じである場合、2 つのページのオリジンは同じです。

同一オリジンポリシー

同一オリジンポリシーは、ブラウザによって提供されるセキュリティ機能です. Web サイト A の JavaScript は、同一オリジンではない Web サイト C とのリソースの対話を許可しません.

オリジンが同一でないページの Cookie、LocalStorage、および IndexedDB を読み取ることができません
同一オリジンでないページの DOM にアクセスできない
同一オリジン以外のアドレスに Ajax リクエストを送信できません

MDN の公式概念: 同一生成元ポリシーは、同じソースからロードされたドキュメントまたはスクリプトが別のソースのリソースと対話する方法を制限します。これは、潜在的に悪意のあるファイルを隔離するための重要なセキュリティメカニズムです。

クロスドメイン

同じオリジンとは、2 つの URL のプロトコル、ドメイン名、およびポートが同じであることを意味します. 逆に、これは
クロスドメインクロスドメインの根本的な原因です: ブラウザの同一オリジンポリシーはリソースを許可しません同一オリジンでない URL 間の相互作用。

クロスドメインリクエストのブラウザ
インターセプトブラウザはクロスドメインリクエストを許可しますが、クロスドメインリクエストによって返されるデータはブラウザによってインターセプトされ、ページでは取得できません。

クロスドメインデータリクエストの実装方法

クロスドメインデータリクエストを実現するための 2 つの主なソリューションは、JSONP と CORS です。

JSONP：登場が早く、互換性が良い（IEの下位バージョンと互換性がある）。これは、クロスドメインの問題を解決するためにフロントエンドプログラマーが考え出すことを余儀なくされる一時的な解決策です。欠点は、GET 要求のみがサポートされ、POST 要求はサポートされないことです。

CORS: 遅れて登場しました。これは W3C 標準であり、クロスドメイン Ajax リクエストに対する基本的なソリューションです。GET および POST リクエストがサポートされています。欠点は、一部の低バージョンのブラウザと互換性がないことです

JSONP

意味: JSON の「使用モード」であり、主流のブラウザのクロスドメインデータアクセスの問題を解決するために使用できます。

実装原理: ブラウザーの同一生成元ポリシーの制限により、Web ページで Ajax を介して同一生成元以外のインターフェイスデータを要求することはできません。しかし

したがって、JSONP の実現原則は合格することです。

JSONPの実装原理

<!--定义一个 success 回调函数-->
<script>
   function success(data) {
      
      
     console.log('获取到了data数据：')
     console.log(data)
   }
</script>
<!--通过 <script> 标签，请求接口数据-->
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>

JSONP の欠点

JSONPが渡されているので

注:JSONP と Ajax の間には何の関係もありませんJSONP は XMLHttpRequest オブジェクトを使用しないため、データを要求する JSONP のメソッドを Ajax と呼ぶことはできません。

jQuery での JSONP

jQuery が提供する $.ajax() 関数は、実際の Ajax データリクエストを開始できるだけでなく、JSONP データリクエストも開始できます。デフォルトでは、jQuery を使用して JSONP リクエストを開始すると、自動的に callback=jQueryxxx のパラメーターが含まれます。ここで、jQueryxxx はランダムに生成されたコールバック関数名です。

$.ajax({
    
    
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    // 如果要使用 $.ajax() 发起 JSONP 请求，必须指定 datatype 为 jsonp
    dataType: 'jsonp',
    success: function(res) {
    
    
       console.log(res)
    }
 })

カスタムパラメータとコールバック関数名

jQuery を使用して JSONP リクエストを開始する場合、JSONP パラメーターとコールバック関数名をカスタマイズする場合は、次の 2 つのパラメーターを指定できます。

$.ajax({
    
    
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    dataType: 'jsonp',
    // 发送到服务端的参数名称，默认值为 callback
    jsonp: 'callback',
    // 自定义的回调函数名称，默认值为 jQueryxxx 格式
    jsonpCallback: 'abc',
    success: function(res) {
    
    
       console.log(res)
    }
 })

jQuery での JSONP の実装プロセス

jQuery の JSONP も、 <script>タグの src 属性を介してクロスドメインデータアクセスを実装しますが、jQuery は<script>動的にタグを作成および削除する方法を使用して、JSONP データリクエストを開始します。

JSONP リクエストを開始するときに、<header>動的に <script>タグを追加します。

JSONP リクエストが成功した後<header>、<script> 追加されたタグを動的に削除します。

手ぶれ防止*

アンチシェイク戦略: イベントがトリガーされた後、n 秒の遅延後にコールバックが実行されます. n 秒以内にイベントが再度トリガーされると、タイミングが再開されます.

ユーザーが入力ボックスに連続して文字列を入力すると、アンチシェイク戦略を使用して、入力が完了した後にのみクエリ要求を実行できます。これにより、リクエストの数を効果的に減らし、リクエストのリソースを節約できます

入力ボックスの防振：

var timer = null                    // 1. 防抖动的 timer

 function debounceSearch(keywords) {
    
     // 2. 定义防抖的函数
    timer = setTimeout(function() {
    
    
    // 发起 JSONP 请求
    getSuggestList(keywords)
    }, 500)
 }

 $('#ipt').on('keyup', function() {
    
      // 3. 在触发 keyup 事件时，立即清空 timer
    clearTimeout(timer)
    // ...省略其他代码
    debounceSearch(keywords)
 })

キャッシュされた検索の提案のリスト

グローバルキャッシュオブジェクトを定義する

 // 缓存对象
  var cacheObj = {
    
    }

検索結果をキャッシュオブジェクトに保存する

// 渲染建议列表
 function renderSuggestList(res) {
    
    
    // ...省略其他代码
    // 将搜索的结果，添加到缓存对象中
    var k = $('#ipt').val().trim()
    cacheObj[k] = res
 }

キャッシュからの検索候補の取得を優先する

// 监听文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
    
    
    // ...省略其他代码

    // 优先从缓存中获取搜索建议
    if (cacheObj[keywords]) {
    
    
       return renderSuggestList(cacheObj[keywords])
    }
    // 获取搜索建议列表
    debounceSearch(keywords)
  })

スロットリング*

スロットリング戦略 (throttle) は、一定期間、イベントの発生頻度を減らすことができます。

適用シナリオ：

マウスはイベント (クリックなど) を継続的にトリガーし、単位時間に 1 回だけトリガーします。
遅延読み込み時にはスクロールバーの位置を監視して計算する必要がありますが、スライドするたびにトリガーする必要がないため、CPU リソースを浪費することなく計算の頻度を減らすことができます。

スロットリングケース - マウスフォロー効果

UI 構造をレンダリングし、スタイルを美しくする

<!-- UI 结构 -->
<img src="./assets/angel.gif" alt="" id="angel" />
<style>
	/* CSS 样式 */
	html, body {
      
      
  		margin: 0;
  		padding: 0;
  		overflow: hidden;
	}
	#angel {
      
      
  		position: absolute;
	}
	</style>

スロットリングを使用しない場合のマウスフォロー効果の実装

$(function() {
    
    
   // 获取图片元素
   var angel = $('#angel')
   // 监听文档的 mousemove 事件
   $(document).on('mousemove', function(e) {
    
      // 设置图片的位置
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
   })
})

スロットルコンセプト

スロットルバルブが空であれば次の運転が可能であり、空でなければ次の運転ができないことを意味します。
現在の操作が完了したら、次の操作を実行できることを示すために、スロットルバルブを空にリセットする必要があります。
各操作の前に、スロットルバルブが空かどうかを判断する必要があります。

スロットリングによるマウス追従効果の最適化：

$(function() {
    
    
  var angel = $('#angel')
  var timer = null // 1.预定义一个 timer 节流阀
  $(document).on('mousemove', function(e) {
    
    
    if (timer) {
    
     return } // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒
    timer = setTimeout(function() {
    
    
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
      timer = null // 2.当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器
    }, 16)
  })
})

防振と絞りの違い

アンチシェイク: イベントが頻繁にトリガーされる場合、アンチシェイクは == 最後のトリガーのみが有効になることを保証できます! == 前の N 回のトリガーは無視されます!
スロットリング: イベントが頻繁に発生する場合、スロットリングはイベントトリガーの頻度を減らす、したがって、スロットリングは選択的にイベントの一部を実行してください！

HTTP プロトコルの強化

HTTP プロトコルの紹介

通信：情報の転送と交換。

通信三要素：

コミュニケーションの対象
通信的内容
コミュニケーションの方法

インターネットでの通信の
場合: サーバーは応答として川芝大学のプロフィールをクライアントのブラウザーに送信します。
その中でも
コミュニケーションはプリンシパルはサーバーとクライアントブラウザーです。
通信的内容は川治学院の紹介です；
通信的方法は応答することです；

==通信プロトコル（Communication Protocol）== 通信を完了するために両者が遵守しなければならない規則と合意を指します。(封筒など)
一般的な理解: 通信の両当事者は、合意された形式を使用してメッセージを送受信します. この事前に合意された通信形式は、通信プロトコルと呼ばれます

インターネットの通信プロトコルは、
クライアントとサーバーの間で実装する必要がありますWebコンテンツ送信、通信の両当事者は、Web コンテンツの伝送プロトコル.
Web コンテンツ別名ハイパーテキスト、そのため、Web コンテンツの伝送プロトコルも呼ばれます。ハイパーテキスト転送プロトコル (HyperText Transfer Protocol)、略して HTTP プロトコル

HTTP プロトコル
HTTP プロトコルは Hypertext Transfer Protocol (HyperText Transfer Protocol) であり、クライアントとサーバー間で Web ページのコンテンツを送信する際に従う必要がある送信形式を指定します。

クライアントは、HTTP プロトコルで要求される形式でサーバーにデータを送信します。
サーバーは、HTTP プロトコルで要求される形式のコンテンツでクライアントに応答する必要があります。

HTTP プロトコルの相互作用モデル:

HTTP プロトコルは、== 要求/応答 == の相互作用モデルを採用しています。

HTTP リクエスト

HTTP プロトコルは、クライアントブラウザとサーバー間の通信プロトコルに属しているためです。したがって、クライアントが開始したリクエスト呼び出された == HTTP リクエスト ==,クライアントからサーバーに送信されるメッセージ、と呼ばれるHTTP 要求メッセージ。

注: HTTP 要求メッセージは、HTTP 要求メッセージとも呼ばれます。

HTTP 要求メッセージは、要求行、要求ヘッダー、空白行、および要求本文の 4 つの部分で構成されます。

ここに画像の説明を挿入

リクエストライン

リクエスト行は、スペースで区切られたリクエストメソッド、URL、および HTTP プロトコルバージョンの 3 つの部分で構成されます。
ここに画像の説明を挿入

2. リクエストヘッダー

リクエストヘッダーは説明に使用されますクライアントの関連情報をサーバーに通知するための、クライアントの基本情報。

例: User-Agent は現在のブラウザのタイプを記述するために使用されます; Content-Type はサーバーに送信されるデータ形式を記述するために使用されます; Accept はクライアントが受け取ることができる返されたコンテンツのタイプを記述するために使用されます; Accept-Language はクライアントを説明するために使用されるクライアントが受信することを期待している人間の言語のテキストコンテンツ。

リクエストヘッダーは複数の行==キー/値のペア==で構成され、各行のキーと値はコロンで区切られています。

ここに画像の説明を挿入

空行

最後のリクエストヘッダーフィールドの後には空白行が続き、リクエストヘッダーが終了したことをサーバーに通知します。
リクエストメッセージの空白行は、リクエストヘッダーとリクエストボディを区切るために使用されます。
ここに画像の説明を挿入

リクエストボディ
リクエストボディには、POST を通じてサーバーに送信されるデータが格納されます。

注: POST リクエストのみがリクエストボディを持ち、GET リクエストにはリクエストボディがありません!

HTTP レスポンス

応答メッセージは、サーバーがクライアントに応答するメッセージの内容であり、応答メッセージとも呼ばれます。

HTTP 応答メッセージ状态行、响应头部、空行の响应体4 つのパーツで構成されています。

状态行3 つの部分で構成されます: HTTP プロトコルバージョン、ステータスコード、およびステータスコードの説明テキスト (スペースで区切られたもの)
响应头部サーバーの基本情報を説明するために使用されます。応答ヘッダーはキーと値のペアの複数行で構成され、各行のキーと値は英語でコロンで区切られます
空行最後の応答ヘッダーフィールドの終了後、応答ヘッダーが終了したことをクライアントに通知する空白行があります。応答メッセージの空白行は、応答ヘッダーと応答本文を区切るために使用されます。
响应体格納されるのは、サーバーがクライアントに応答するリソースコンテンツです。

ここに画像の説明を挿入

HTTP リクエストメソッド

HTTP リクエストメソッドは、HTTP プロトコルの一部です。リクエストメソッドの機能は、サーバー上のリソースに対して実行される操作を示すことです。最も一般的なリクエストメソッドは GET と POST です。

ここに画像の説明を挿入

HTTP 応答ステータスコード

HTTP 応答ステータスコード(HTTP ステータスコード)、これも HTTP プロトコルの一部です。応答のステータスを識別するために使用されます.
応答ステータスコードは、応答メッセージと共にクライアントブラウザに送信されます。ブラウザは、サーバーから返された応答ステータスコードに基づいて、HTTP 要求が成功したか失敗したかを知ることができます。

HTTP ステータスコードは 3 つの 10 進数で構成されます。最初の 10 進数はステータスコードの種類を定義し、最後の 2 つの数字はステータスコードを細分化するために使用されます。
HTTPステータスコードには5種類あります
ここに画像の説明を挿入

2** 成功関連の応答ステータスコード

2** ステータスコードの範囲。サーバーはリクエストを正常に受信して処理しました. 一般的な 2** 種類のステータスコードは次のとおりです。
ここに画像の説明を挿入

3** リダイレクト関連の応答ステータスコード

3** の範囲のステータスコードは、サーバーはクライアントにリダイレクトを要求します、リソース要求を完了するには、クライアントによるさらなる操作が必要です。一般的な 3** 種類のステータスコードは次のとおりです。
ここに画像の説明を挿入

4** クライアントエラーに関連する応答ステータスコード

4** の範囲のステータスコード。クライアントのリクエストに違法なコンテンツが含まれています、リクエストが失敗する原因となります。一般的な 4** 種類のステータスコードは次のとおりです。
ここに画像の説明を挿入

.5** サーバーエラーに関連する応答ステータスコード

5** の範囲のステータスコード。サーバーがクライアントのリクエストを正常に処理できず、予期しないエラーが発生しました. 一般的な 5** 種類のステータスコードは次のとおりです。
ここに画像の説明を挿入

ギット

手動保守版には次の問題があります:
操作麻烦、命名不规范、容易丢失、协作困难

バージョン管理ソフトウェア:
特定のバージョンの将来のリビジョンを表示できるように、ドキュメントへの変更を記録するために使用されるシステム

バージョン管理ソフトウェアの利点:

操作が簡単: 簡単な端末コマンドを数セット覚えるだけでよく、一般的なバージョン管理ソフトウェアをすぐに使い始めることができます。
比較しやすい：バージョン管理ソフトが提供する機能をもとに、ファイルの変更内容を比較し、原因究明に便利です。
簡単なバックトラック: 選択したファイルを前の状態にロールバックでき、プロジェクト全体を過去のある時点にロールバックすることもできます
紛失しにくい: バージョン管理ソフトウェアでは、ユーザーが誤って削除したファイルを簡単に復元できます
便利なコラボレーション：バージョン管理ソフトウェアが提供する分岐機能に基づいて、複数人での共同開発におけるコードのマージ操作を簡単に実現できます。

カテゴリ:

ローカルバージョン管理システム: 1 台のマシンで実行され、ファイルバージョンを維持する操作がツールになり、複数人による共同開発はサポートされません

機能:

ソフトウェアを使用して異なるバージョンのファイルを記録し、作業効率を向上させ、
手動保守バージョンのエラー率を削減

欠点:

スタンドアロン操作、複数人での共同開発には対応していません
バージョンデータベースに障害が発生すると、すべての履歴更新記録が失われます

集中バージョン管理システム: 典型的な代表的な SVN

特徴：

サーバーベースおよびクライアント側の動作モード
サーバーは、ファイルに対するすべての更新の記録を保持します
クライアントは最新のファイルバージョンのみを保持します

利点: ネットワーク操作、複数人での共同開発のサポート

欠点:

バージョン更新のオフライン送信はサポートされていません
中央サーバーがクラッシュした後、全員が機能していませんでした
バージョンデータベースに障害が発生すると、すべての履歴更新記録が失われます

分散バージョン管理システム：典型的な代表的なGit

機能: サーバーおよびクライアントの動作モードに基づく

サーバーはファイルの更新されたすべてのバージョンを保存します
クライアントは、ファイルの最新バージョンだけでなく、サーバーの完全なバックアップです

アドバンテージ：

ネットワーク運用、多人数共同開発支援
クライアントがネットワークから切断された後、バージョン更新のオフラインローカル送信をサポートします。
サーバーの障害または破損後に、任意のクライアントからのバックアップを使用してリカバリできます

Git: 現在最も人気のあるバージョン管理システム

オープンソース、効率的な管理プロジェクトのバージョン管理、高性能、高可用性

Git が高速で効率的である理由は、主に次の 2 つの機能によるものです。
差分比較ではなくスナップショットを直接記録する
ほとんどすべての操作がローカルで実行される

SVN差分比較

SVN などの従来のバージョン管理システムは、差分ベースバージョン管理、彼らファイルの基本セットと各ファイルの経時的な累積差分を保存します、ディスク容量を節約できますが、時間がかかり、非効率的であるという欠点があります。

Git のレコードスナップショット

Git スナップショットは、バックアップと同様に、元のファイルバージョンに基づいて新しいファイルを再生成することです。効率化のため、ファイルが変更されていない場合、Git はファイルを復元せず、以前に保存されたファイルへのリンクのみを保持します。

デメリット: 大量のディスク容量を占有する
メリット: 各バージョンは完全なファイルスナップショットであり、バージョンを切り替えるときにターゲットバージョンのスナップショットを直接復元できるため、バージョンの切り替えが非常に高速です。
特徴: 時間のための空間

Git でのほとんどの操作ローカルファイルとリソースにアクセスするだけでよい、通常、ネットワーク上の他のコンピューターからの情報は必要ありません。

特徴:
ネットワーク切断後もプロジェクトのバージョン管理はローカルで実行でき、
ネットワーク接続後はローカルで変更された記録をクラウドサーバーに同期できます。

Git の 3 つの領域

Git によって管理されるプロジェクトには、、工作区、暂存区Git 仓库

Modified : ファイルが変更されたが、変更の結果が一時ストレージ領域に置かれていないことを示します.
Staged : 変更されたファイルの現在のバージョンが、次の送信リストに含めるようにマークされていることを示します.
コミット済み: ファイルがローカルの Git リポジトリに安全に保存されたことを示します

基本的な Git ワークフロー

ワークスペースでファイルを変更する
次回コミットする変更をステージングする
更新を送信し、ステージング領域でファイルを見つけて、スナップショットを Git リポジトリに永続的に保存します

Git の基本

ダウンロードリンク：https://git-scm.com/downloads

一般的なコマンド:

# 设置用户名
git config --global user.name "用户名"

# 设置邮件地址
git config --global user.email "邮件地址"

# 查看全局的配置信息
git config --list --global

# 查看指定的全局配置项
git config user.name
git config user.email

# 打开git config 命令的帮助手册
git help config

# 获取git config 命令的快速参考
git config -h

Git リポジトリを取得する 2 つの方法

バージョン管理されていないローカルディレクトリを Git リポジトリに変換する
別のサーバーから既存の Git リポジトリを複製する

既存のディレクトリでリポジトリを初期化する

バージョン管理されていないプロジェクトディレクトリがあり、Git を使用してそれを管理する場合は、次の 2 つの手順を実行する必要があります。

プロジェクトディレクトリで、マウスの右ボタンで「Git Bash」を開きます
git init コマンドを実行して、現在のディレクトリを Git ウェアハウスに変換します

git init コマンドは、.git という名前の隠しディレクトリを作成します. この .git ディレクトリは、現在のプロジェクトの Git リポジトリであり、Git リポジトリの必要な部分である初期の必要なファイルが含まれています.

git status: ファイルのステータスを表示するコマンド

git status -s: ファイルの状態をコンパクトに表示

git add index.html: 新しいファイルを追跡します (一時保存領域に新しく追加されたファイルには、緑色の A マークが付いています
)

git commit -m "提交消息": 一時ストレージエリア内のファイルは、保存のために Git ウェアハウスに送信されるのを待機しています

ここに画像の説明を挿入

提出されたファイルに変更を加える

現在、index.html ファイルは Git によって追跡されており、ワークスペースと Git リポジトリ内の index.html ファイルの内容は一致しています。ワークスペースで index.html の内容を変更したら、再度 git status および git status -s コマンドを実行します。ファイル index.html が [Changes not staged for commit] 行の下に表示され、追跡対象のファイルのコンテンツが変更されたが、一時ストレージ領域には配置されていないことが示されます。

注: 一時保存領域に配置されていない変更済みファイルの前に赤い M マークがあります。

変更されたファイルのステージング

ワークスペース内の index.html ファイルが変更されました. この変更を一時的に保存する場合は, git add コマンドを再度実行する必要があります. このコマンドは多機能なコマンドであり, 主に次の 3 つの機能があります.

新しいファイルの追跡を開始するには
追跡および変更されたファイルを一時ストレージ領域に配置します
競合するファイルを解決済みとしてマークする

ここに画像の説明を挿入

ステージングされたファイルをコミットする

再度 git commit -m "commit message" コマンドを実行して、一時保存領域に記録された index.html のスナップショットを Git ウェアハウスに送信して保存します
ここに画像の説明を挿入

ファイルへの変更を元に戻す

ファイルへの変更を元に戻すとは、ワークスペース内の対応するファイルへの変更を、Git リポジトリに保存されているバージョンに復元することを指します。
操作の結果: すべての変更が失われ、元に戻すことはできません! リスクは比較的高いので、慎重に操作してください！
元に戻す操作の本質: ワークスペース内の指定されたファイルを Git リポジトリに保存されたファイルで上書きする
ここに画像の説明を挿入

ステージング領域に複数のファイルを一度に追加する

一時的に保存する必要があるファイルが多数ある場合は、コマンドを使用して、git add新しく追加および変更されたすべてのファイルを一度に一時保存領域に追加できます。

ステージングされていないファイル

ステージング領域から対応するファイルを削除します。git reset HEAD 要移除的文件名称

ステージング領域の使用をスキップ

標準の Git ワークフローは工作区 → 暂存区 → Git 仓库単純化されており工作区 → Git 仓库、ワークスペースの変更を Git リポジトリに直接送信します。

Git は、一時ストレージ領域の使用をスキップする方法を提供します. 送信時に git commit に -a オプションを追加する限り、Git は追跡されたすべてのファイルを自動的に保存し、それらをまとめて送信するため、 git add 手順をスキップします:git commit -a -m "描述消息"

ファイルを削除

Git リポジトリからファイルを削除するには、次の 2 つの方法があります。

対応するファイルを Git リポジトリとワークスペースから同時に削除するgit rm -f index.js
指定されたファイルのみを Git リポジトリから削除しますが、対応するファイルはワークスペースに保持しますgit rm -cached index.css

ここに画像の説明を挿入

ファイルを無視

一部のファイルは Git で管理する必要がなく、追跡されていないファイルのリストに常に表示したくない場合があります。この場合、無視するファイルの一致パターンをリストする .gitignore という名前の構成ファイルを作成できます。
ファイル .gitignore の形式仕様は次のとおりです。

# で始まるコメント
/ で終わるディレクトリ
再帰を防ぐために / で始める
で始まる ! は否定を意味します
glob パターンを使用してファイルとフォルダーを一致させることができます (glob は簡略化された正規表現を指します)

グロブパターン

いわゆる glob パターンは、簡略化された正規表現を指します。

アスタリスク * が一致0 個以上の任意の文字
[abc] 一致角括弧内にリストされている文字のいずれか(このケースは a または b または c に一致します)
クエスチョンマーク？1文字のみに一致
角括弧で使用ダッシュ2 つの文字を区切ります。これは、これら 2 つの文字の範囲内のすべてが一致することを意味します (たとえば、[0-9] は 0 から 9 までのすべての数字と一致することを意味します)。
2 つのアスタリスク ** は、任意の中間ディレクトリに一致することを意味します (たとえば、a/**/z は a/z、a/b/z、a/b/c/z などに一致します)。

ここに画像の説明を挿入

コミット履歴を表示

ここに画像の説明を挿入

指定されたバージョンにフォールバックする

ここに画像の説明を挿入

まとめ

Git ウェアハウスを初期化するgit init
コマンドファイルの状態を表示するgit status 或 git status -s
コマンドファイルを一時保存領域に一度に追加するコマンドgit add
一時保存領域内のファイルを Git ウェアハウスに送信するコマンドgit commit -m "提交消息"

Ajax+Git 研究ノート

Ajax+Git 研究ノート

アヤックス

基本的な考え方

jQuery での Ajax

インターフェース

形状

ラベルのプロパティ

フォームの同期送信

Ajax 経由でフォーム データを送信する

テンプレートエンジン

art-template テンプレートエンジン

art-template の使用手順

art-template 標準構文

標準構文 - フィルター

テンプレートエンジンの実装原理

XMLHttpRequest

xhr を使用して GET 要求を開始する

xhr を使用してパラメーター付きの GET リクエストを開始する

URL エンコーディング

xhr を使用して POST 要求を開始する

データ交換フォーマット

XML: 拡張マークアップ言語、あまり使用されない

JSON: コンピューターと Web 間でのデータの保存と転送

独自の Ajax 関数をカプセル化する

XMLHttpRequest Level2 の新機能

jQueryの高度な使い方

jQuery はファイルのアップロードを実装します

jQueryでローディング効果を実現

アクシオス

Axios が GET リクエストを開始する

Axios が POST リクエストを開始する

axios を直接使用してリクエストを開始する

同種

同一オリジン ポリシー

クロスドメイン

JSONP

JSONPの実装原理

JSONP の欠点

jQuery での JSONP

カスタム パラメータとコールバック関数名

jQuery での JSONP の実装プロセス

手ぶれ防止*

スロットリング*

スロットリング ケース - マウス フォロー効果

防振と絞りの違い

HTTP プロトコルの強化

HTTP プロトコルの紹介

HTTP リクエスト

HTTP レスポンス

HTTP リクエスト メソッド

HTTP 応答ステータス コード

ギット

Git: 現在最も人気のあるバージョン管理システム

SVN差分比較

Git のレコード スナップショット

Git の 3 つの領域

基本的な Git ワークフロー

Git の基本

Git リポジトリを取得する 2 つの方法

既存のディレクトリでリポジトリを初期化する

提出されたファイルに変更を加える

変更されたファイルのステージング

ステージングされたファイルをコミットする

ファイルへの変更を元に戻す

ステージング領域に複数のファイルを一度に追加する

ステージングされていないファイル

ステージング領域の使用をスキップ

ファイルを削除

ファイルを無視

グロブパターン

コミット履歴を表示

指定されたバージョンにフォールバックする

まとめ

おすすめ

Ajax 経由でフォームデータを送信する

同一オリジンポリシー

カスタムパラメータとコールバック関数名

スロットリングケース - マウスフォロー効果

HTTP リクエストメソッド

HTTP 応答ステータスコード

Git のレコードスナップショット