php+mysql+cookie+模組化開發

PHP

PHP的輸出

<?php

	echo "你好";
	echo("你好");
	print("你好");
	print "hello";
	
	var_dump("接觸PHP");//程式碼除錯使用這個

定義變數

php是弱引用語言，所以用起來比較隨意。

資料型別

陣列

1、索引陣列 下標是數字叫做索引陣列
2、關聯陣列 下標是字串叫關聯陣列 （類似於ECMA6的map型別）
3、全域性陣列
$_GET 接收通過get提交過來的所有的資料
_POST 接收通過post提交過來的所有的資料

陣列中的索引陣列和關聯陣列可以相互結合，結合成多維陣列。

陣列的長度 count($cars) 返回陣列的長度

ajax

ajax 非同步的 javascript和 xml(資料傳輸格式)
非同步的 javascript 和 資料傳輸

【注】ajax是前後端資料互動的搬運工，都可以非同步執行。

xml資料傳輸格式（

大型的入口網站 新浪、網易、鳳凰網）
優點：
1、種類豐富
2、傳輸量非常大
缺點：
1、解析麻煩
2、不太適合輕量級資料

json資料傳輸格式(字串)

95%移動端應用。
優點：
1、輕量級資料
2、解析比較輕鬆
缺點：
1、資料種類比較少
2、傳輸資料量比較小

JSON.parse()
JSON.stringify()

​ 【注】任何一個程式都是由很多個小程式組成的。
​ 【注】用來描述一個程式執行狀態。
​ 同步 阻塞，當前程式執行，必須等前一個程式執行完畢以後，才能執行。
​ 非同步 非阻塞，當前程式執行，和前面程式的執行沒有任何關係。

ajax非同步載入資料

					//1、建立ajax物件
                    var xhr = new XMLHttpRequest();
                    //2、呼叫open
                    /* 
                        第一個引數： 請求方式  get post
                        第二個引數：url
                        第三個引數： 是否非同步  
                             true 非同步
                             false同步
                     */
                    xhr.open("get", "1.txt", true);

                    //3、呼叫send
                    xhr.send();

                    //4、等待資料響應
						/* 
                        readystatechange 事件型別
                        xhr.readyState  發生變化的時候呼叫
                        0  呼叫open方法之前
                        1  呼叫你send方法之後，傳送請求
                        2  send方法完成，已經接受到所有的響應內容
                        3  正在解析下載到的資料
                        4  解析完成
                     */
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState == 4){
                            //判斷本次下載的狀態碼都是多少
                            if(xhr.status == 200){
                                alert(xhr.responseText);
                            }else{
                                alert("Error:" + xhr.status);
                            }
                        }
                    }

ajax物件相容：（if else）

					//ajax物件相容
                    var xhr = null;
                    if(window.XMLHttpRequest){
                        xhr = new XMLHttpRequest();
                    }else{
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }

ajax物件相容:（try）

					//1、建立ajax物件
                    var xhr = null;
                    try{
                        xhr = new XMLHttpRequest();
                    }catch(error){
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }

封裝ajax:

狀態碼：

200——交易成功

404——沒有發現檔案、查詢或URl

401——請求授權失敗

mysql

PHP連線資料庫

<?php 
	header("Content-type:text/html;charset=utf-8");
	/*
		連結資料庫  天龍八部
	*/
	//1、連結資料庫
	/*
		第一個引數：連結資料庫的IP/域名
		第二個引數：使用者名稱
		第三個引數：密碼
	*/
	$link = mysql_connect("localhost", "root", "123456");
	//2、判斷是否連線成功
	if(!$link){
		echo "連結失敗";
		exit; //終止後續所有的程式碼
	}
	//3、設定字符集
	mysql_set_charset("utf8");
	//4、選擇資料庫
	mysql_select_db("yyy");
	//5、準備sql語句
	$sql = "SELECT * FROM student";
	//6、傳送sql語句
	$res = mysql_query($sql);
	//設定表頭
	echo "<table border = '1'>";
	echo "<tr><th>學生學號</th><th>學生姓名</th><th>英語成績</th><th>數學成績</th><th>語文成績<th></tr>";
	//7、處理結果
	while($row = mysql_fetch_assoc($res)){
		echo "<tr><td>{$row['id']}</td><td>{$row['name']}</td><td>{$row['english']}</td><td>{$row['math']}</td><td>{$row['chinese']}</td></tr>";
	}
	echo "</table>";
	//8、關閉資料庫
	mysql_close($link);
 ?>

【注】保證id不重複，設定id為這個表的主鍵(PrimaryKey) 選擇id為AI（自動增加）

網路協議

計算機網路
ISO 7層的網路分層
通用 5層的網路分層

網路資料在網際網路進行傳輸，遵從傳輸規則，叫做網路傳輸協議。

TCP：面向連結協議。

TCP是一種面向連線的、可靠的、基於位元組流的傳輸層通訊協議。（快遞，外賣）

【注】如果需要傳輸，就先建立連結，開始傳輸資料，當資料傳輸結束，就直接斷開連結。如果再要進行傳輸，重新建立連結。

三次握手建立連線，四次揮手斷開連線

優點： 缺點：
1、安全 1、傳輸效率低
2、準確度非常高 2、耗資源

UDP：無連線協議

UDP 是User Datagram Protocol的簡稱， 參考模型中一種無連線的傳輸層協議，提供面向事務的簡單不可靠資訊傳送服務。 （適用於對於及時性要求高，但是對於資料準確度要求不高）
傳輸資料：直接傳，根本不管是否收到資料。

缺點： 優點：
1、不安全 1、及時性非常高
2、準確度非常低 2、消耗資源少
3、經常丟包 【注】視訊聊天。

HTTP（無狀態的協議）

cookie

cookie概念

回話跟蹤技術： 在一次會話從開始到結束的整個過程，全程跟蹤記錄客戶端的狀態（例如：是否登入、購物車資訊、是否已下載、是否 已點贊、視訊播放進度等等）

cookie的語法

格式： name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]，
name 鍵
value 值 都是自定義
【注】後續中括號的內容（中括號是我加的），都是可選項。
【注】火狐支援本地載入的檔案快取cookie，谷歌只支援伺服器載入檔案快取cookie

cookie特點

​ 1、可以設定過期時間
​ 2、最大可以儲存4KB，每一個域名下最多可以儲存50條資料(不同的瀏覽器，有偏差)
【注】只能字串。一般只儲存一些重要的資訊。登入，購物車資訊，是否點贊，視訊播放進度等。

			/* 
                encodeURIComponent  將中文編譯成對應的字元
                decodeURIComponent  將對應的字元編譯成中文
             */
              //設定cookie
              document.cookie = 'username=' + encodeURIComponent("鋼鐵俠");
              //獲取cookie
              alert(decodeURIComponent(document.cookie));

expires：過期時間，如果沒有宣告，則為瀏覽器關閉後即失效。宣告瞭失效時間， 那麼時間到期後方能失效。
必須填寫，日期物件
【注】系統會自動清除過期的cookie。

path 限制訪問路徑
如果不去設定，預設是載入當前.html檔案的路徑
【注】我們設定的cookie的路徑，和載入當前檔案的路徑，必須一致，如果不一致，cookie訪問失敗。

domain 限制訪問域名
如果不去設定，預設是載入當前.html檔案的伺服器域名/ip
【注】如果載入當前檔案域名和設定的域名不一致，設定cookie失敗。

secure
如果不設定，設定cookie，可以通過http協議載入檔案設定
也可以通過https協議載入檔案設定

【注】設定這個欄位以後，只能設定https協議載入cookie.

https 證照認證協議
http

閉包

閉包的特點：

1、函式巢狀函式
2、內部函式引用外部函式到的變數或者形參
3、被引用的變數或者形參就不會被垃圾回收機制所回收，常駐記憶體。

好處:

1、希望一個變數常駐在記憶體當中
2、避免全域性變數汙染
3、可以宣告私有成員

可以從一個域中取出原本訪問不到的變數去使用

模組化開發

1.模組化的寫法-原始寫法

模組就是實現特定功能的一組方法。
只要把不同的函式（以及記錄狀態的變數）簡單地放在一起，就算是一個模組。
比如:tool.js

缺點："汙染"了全域性變數，無法保證不與其他模組發生變數名衝突，而且模組成員之間看不出直接關係。

2.Javascript模組化的寫法-物件寫法

把模組寫成一個物件，所有的模組成員都放到這個物件裡面。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-ho7uJOhP-1605075741267)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1604630197591.png)]

3.Javascript模組化的寫法-立即執行函式寫法(閉包)

使用"立即執行函式"（IIFE），可以達到不暴露私有成員的目的。

外部程式碼不能訪問內部變數

4.Javascript模組化的寫法-放大模式

如果一個模組很大，必須分成幾個部分，或者一個模組需要繼承另一個模組，這時就有必要採用"放大模式"（augmentation）。

5.Javascript模組化的寫法-寬放大模式

在瀏覽器環境中，模組的各個部分通常都是從網上獲取的，有時無法知道哪個部分會先載入。如果採用上一節的寫法，第一個執行的部分有可能載入一個不存在空物件，這時就要採用"寬放大模式"。

AMD

AMD是"Asynchronous Module Definition"的縮寫，意思就是"非同步模組定義"。它採用非同步方式載入模組，模組的載入不影響它後面語句的執行。所有依賴這個模組的語句，都定義在一個回撥函式中，等到載入完成之後，這個回撥函式才會執行。

require.js

（1）實現js的非同步載入，避免網頁失去響應

（2）管理模組之間的依賴性，便於程式碼的編寫和維護

<script src = 'js/require.js' defer async = 'true' data-main = 'js/main.js' charset="big5">//defer IE下的非同步載入 async = 'true' 火狐和谷歌瀏覽器下的非同步  入口檔案

data-main屬性的作用是，指定網頁程式的主模組。在上例中，就是js目錄下面的main.js，這個檔案會第一個被require.js載入。由於require.js預設的檔案字尾名是js，所以可以把main.js簡寫成main。

主模組的寫法

主模組依賴於其他模組，這時就要使用AMD規範定義的的require()函式。

require(["nav","slide","data"],function(nav,slide,data){}

require()函式接受兩個引數。第一個引數是一個陣列，表示所依賴的模組，上例就是[“nav”,“slide”,“data”]，即主模組依賴這三個模組；第二個引數是一個回撥函式，當前面指定的模組都載入成功後，它將被呼叫。載入的模組會以引數形式傳入該函式，從而在回撥函式內部就可以使用這些模組。
require()非同步載入nav,slide,data，瀏覽器不會失去響應；它指定的回撥函式，只有前面的模組都載入成功後，才會執行，解決了依賴性的問題。

模組化載入

require.config({
    paths:{
        "jquery": "jquery-1.11.3",
        "jquery-cookie": "jquery.cookie",//設定依賴關係 jquery-cookie是通過jQuery開發的
        "nav":  "nav",
        "slide":"slide",
        "data":"data"
    }
    )}

使用require.config()方法，我們可以對模組的載入行為進行自定義。require.config()就寫在主模組（main.js）的頭部。引數就是一個物件，這個物件的paths屬性指定各個模組的載入路徑。

require.js要求，每個模組是一個單獨的js檔案。這樣的話，如果載入多個模組，就會發出多次HTTP請求，會影響網頁的載入速度。因此，require.js提供了一個優化工具，當模組部署完畢以後，可以用這個工具將多個模組合併在一個檔案中，減少HTTP請求數。

AMD模組的寫法

模組必須採用特定的define()函式來定義。如果一個模組不依賴其他模組，那麼可以直接定義在define()函式之中。 如果這個模組還依賴其他模組，那麼define()函式的第一個引數，必須是一個陣列，指明該模組的依賴性。

define(["jquery"],function($){})

AMD規範

 AMD規範：（客戶端/瀏覽器）
                宣告：
                    define(function(){
                        //程式碼
                        return {
                            outA: showA,
                            outB: showB
                        }
                    })
                引入：（非同步執行）
                    require("moduleA.js", function(moduleA){

                        //這裡的程式碼。模組引入之後執行。
                        moduleA.putA();
                        moduleA.outB();
                    })

                    alert("hello world");

CommonJS規範（伺服器）編寫程式碼

​

				宣告:
                    module.exports = {
                        outA: showA,
                        outB: showB
                    }
                引入：（同步執行）
                    var moduleA = require('moduleA.js');
                    moduleA.outA();
                    moduleA.outB();