前端筆記知識點整合之伺服器&Ajax(中)MySQL基礎操作&PHP操作資料庫&Ajax

来源:https://www.cnblogs.com/rope/archive/2019/04/15/10696993.html
-Advertisement-
Play Games

一、資料庫基礎 1.1什麼是資料庫? 什麼是資料庫? 答:就是一個很大的一個文件,只不過這個文件可以通過一些‘命令’操作數據; 增、刪、改、查數據; 資料庫等於持久數據和數據操作的一個統稱。 資料庫是按照數據結構來組織、存儲及管理數據的倉庫。 資料庫有哪些? MySQL、SQL server、Ora ...


一、資料庫基礎

1.1什麼是資料庫?

什麼是資料庫?

答:就是一個很大的一個文件,只不過這個文件可以通過一些‘命令’操作數據;

    增、刪、改、查數據

 

資料庫等於持久數據和數據操作的一個統稱。

資料庫是按照數據結構來組織、存儲及管理數據的倉庫。

資料庫有哪些? MySQLSQL serverOracle 都是關係型數據管理系統(RDBMS)。

SQL存儲數據相對較小,最為常用的資料庫就是MySQL(開源、免費)

Orecal大型資料庫(不開源、收錢)

NOSQL

Mongodb

操作資料庫也有自己的語言,這個語言叫結構化查詢語言。結構化查詢語言(Structured Query Language)簡稱SQL。用於存取數據以及查詢、更新和管理關係資料庫系統;同時也是資料庫腳本文件的擴展名。


 

1.2 MySQL 的操作

因為安裝了PHPnow。所以每一個同學的電腦中都有資料庫。

想操作資料庫可以通過php操作,也可以通過可視化的資料庫管理軟體操作。

我們用的可視化的資料庫管理軟體是Sqlyog

SQLyog 是一個快速而簡潔的圖形化管理MYSQL資料庫的工具,它能夠在任何地點有效地管理你的資料庫,由業界著名的Webyog公司出品。

資料庫的結構層次組成:資料庫 > > 欄位(條目),每個資料庫的表中必須有一個主鍵。

 

 

1、連接資料庫,輸入用戶名和密碼

用戶的密碼就是你安裝PHPNOW的時候,也安裝mySQL,密碼123456

 

 

2、認識sqlYog的圖形界面

 

 

3、建立自己的資料庫

 

 

4、創建資料庫名字和設置字元集

 

 

5點擊資料庫的“+”,你會發現資料庫當中有表,在資料庫中創建表。

 

 

6、需要設置表名字(gz0920);設置字元集(UTF8

其餘的設置都為預設

 

 

給(gz0920)表添加欄位;

註意:①int代表的是整數  varchar字元串

      ②一個表當中主鍵只能有一個非空自增

 

 

資料庫表的欄位

 


1.3 SQL語言操作資料庫

資料庫增刪改查操作(CRUD

C 增加(create

R 查找(read

U 更改(update

D 刪除(delete

sql可以通過後臺語言(PHPJSPaps.net)執行操作資料庫。SQL 語句對大小寫不敏感

sql語句手冊:http://www.w3school.com.cn/sql/sql_and_or.asp


 

●查詢

 SELECT 欄位 FROM 表名

 

 SELECT * FROM banji0922

 

 

 SELECT * FROM banji0922 WHERE sex=""

 

 

 SELECT * FROM banji0922 WHERE xingbie = "" AND nianling > 60 ;

 

 

 SELECT * FROM banji0922 WHERE xingbie = "" ORDER BY nianling DESC;

 

DESC是降序;ASC 是升序

 

 

SELECT  欄位 FROM  表名

SELECT xingming FROM gz1125 

 

提示:查詢與語句SELECT  *  FROM gz1125 單詞一般都是大寫,後面添加的是表名稱,因為表中才有數據。

 


 

●增加

INSERT INTO語句插入條目:

 INSERT INTO 表名稱 VALUES (1, 2,....)

 

我們也可以指定所要插入數據的列:

 INSERT INTO table_name (1, 2,...) VALUES (1, 2,....)

 

 INSERT INTO  banji0922 VALUE(11,"王安石",99,"","6543432534");

 

 

不想插入所有的條目,必須羅列響應的欄位:

 INSERT INTO banji0922 (xingming,qqhao) VALUE ("李大釗","3465342");

 

 

下麵的是錯誤演示:

 INSERT INTO banji0922  VALUE ("李大釗","3465342");

 


 

●更改

語法:

SET   表示設置

WHERE 表示條件

 UPDATE 表名稱 SET 列名稱 = 新值 WHERE 列名稱 = 某值

 

更改多個條目,用逗號隔開:

 UPDATE 表名稱 SET 列名稱 = 新值,列名稱 = 新值 WHERE 列名稱 = 某值

 

 UPDATE banji0922 SET nianling = 200 WHERE xingming = "李大釗";

 

 

 UPDATE banji0922 SET xingbie = "" WHERE nianling > 20;

 


 

●刪除

DELETE FROM 表名稱 WHERE 列名稱 =

DELETE FROM banji0922 WHERE xingming = "李大釗";

 

刪除整個表:

 DELETE FROM banji0922;

 



WHERE條件

 

●備份資料庫

 

恢複數據:將我們生產的sql文件拖拽到資料庫中,點擊執行多條sql語句按鈕,再刷新資料庫列表。

 SELECT * FROM banji0922

 SELECT * FROM banji0922 WHERE xingbie = ""

 INSERT INTO banji0922 ( xingming,nianling)VALUE ("王羲之",300)

 UPDATE banji0922 SET nianling = 30  WHERE  xingming = "王羲之"

 DELETE FROM banji0922 WHERE xingming = "王羲之";

 


二、PHP操作資料庫

概述:對於後臺而已,經常做的一件事情就是保存數據,操作資料庫,PHP屬於後端語言,因此也有操作資料庫的方法。

<?php
    // 連接資料庫 參數  : 地址 、 用戶名 、 密碼
    mysql_connect("localhost","root",123456);
    // 選擇操作哪個資料庫
    mysql_select_db("student");
    // 設置編碼
    mysql_query("SET NAMES UTF8");
    // 寫執行的sql語句,快捷鍵  ctrl+k+u
    $sql = "INSERT INTO banji0922 VALUE (13,'海子',20,'男','123465454')";
    // 執行sql語句
    mysql_query($sql);
?>

 

 要從資料庫中所有的條目顯示到頁面上:

<meta charset="UTF-8" />
<?php
    // 連接資料庫 參數  : 地址 、 用戶名 、 密碼
    mysql_connect("localhost","root",123456);
    // 選擇哪個資料庫
    mysql_select_db("student");
    // 識別中文字元
    mysql_query("SET NAMES UTF8");
    // 寫執行的sql語句
    // 快捷鍵  ctrl+k+u
    $sql = "SELECT * FROM banji0922";
    // 執行sql
    $result = mysql_query($sql);
    // 把$result類數組對象變成數組
    $row = mysql_fetch_array($result);
    // 輸出
    print_r($row);
?>

Array ( [0] => 1 [id] => 1 [1] => 諸葛亮 [xingming] => 諸葛亮 [2] => 80 [nianling] => 80 [3] => [xingbie] => [4] => 23456789 [qqhao] => 23456789 )

print_r後只顯示資料庫中第一條信息

 

查詢資料庫:

<?php
    // 連接資料庫 參數  : 地址 、 用戶名 、 密碼
    mysql_connect("localhost","root",123456);
    // 選擇哪個資料庫
    mysql_select_db("student");
    // 識別中文字元
    mysql_query("SET NAMES UTF8");
    // 寫執行的sql語句
    // 快捷鍵  ctrl+k+u
    $sql = "SELECT * FROM banji0922";
    // 執行sql
    $result = mysql_query($sql);
    // 把$result類數組對象變成數組
    $row = mysql_fetch_array($result);
    // 輸出
    print_r($row);
    // 把$result類數組對象變成數組
    $row = mysql_fetch_array($result);
    // 輸出
    print_r($row);
   ……………………
?>

 

<?php
   mysql_connect("localhost","root",123456);
   mysql_select_db("student");
   mysql_query("SET NAMES UTF8");
   //資料庫返回的數據(對象)
   $result = mysql_query("SELECT * FROM gz0920");
   //將結果轉換為數組
   while ($array = mysql_fetch_array($result)) {
       print_r($array["xingming"]);
       echo "<br/>";
   }
?>

提示:

①資料庫返回的結果是一個對象,因此需要用mysql_fetch_array($result)變為數組;

②遍曆數據取到你想要的數據


 

三、複習

概述:對於客戶端而言,當在地址欄輸入網址回車的時候,會向伺服器發起一個上行請求(GETPOST),網頁中幾乎90%都是GET請求,登錄、註冊...可以用POST,它兩者不同的地址:

GET請求是以偽裝URL的形式(?k=v&k=v)向伺服器傳遞一些額外數據;

POST請求是以報文體的形式向伺服器傳遞數據

 

報文:報文頭(客戶端的瀏覽器的信息)+ 報文體(一般為空)

 

get:一般用於信息的獲取使用url傳遞參數。對所送的數據有位元組數限制。(本質上:以少換多)。Get請求是向伺服器獲取消息。

post:一般用於存儲或修改伺服器上的額資源的。對所發送的數據沒有位元組限制。Post請求所有都是通過form表單形式提交的。Post請求可以看成向伺服器推送消息。(信息量大,換回來的少)

 

一個完整的URL包括哪些部分:

http://www.baidu.com:8080/news/2017-12-09/index.php?newsid=344532&pagenum=12#name

l http:// 協議部分

www.baidu.com  功能變數名稱

:8080   埠

/news/2017-12-09/    虛擬目錄,從功能變數名稱的第一個/”到最後一個“/

index.php    文件名

?newsid=344532&pagenum=12  參數部分 從?開始到#”之前結束

l #name  #開始到最後,hash


四、Ajax開發

4.1 Ajax介紹

Ajax Asynchronous Javascript And XML”(非同步 JavaScript XML),是指一種創建互動式網頁應用的網頁開發技術。

 Ajax = 非同步 JavaScript  XML標準通用標記語言的子集)。

 Ajax 是一種用於創建快速動態網頁的技術。

 Ajax 是一種在無需重新載入整個網頁的情況下,能夠更新部分網頁的技術。

通過在後臺與伺服器進行少量數據交換,Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。

傳統的網頁(不使用 Ajax)如果需要更新內容,必須重載整個網頁頁面。

 

 到底什麼是Ajax

它不是一個技術(多門技術的集合),它可以悄悄的向伺服器請求數據,伺服器也可以悄悄的向客戶端響應返回數據,最終實現整個頁面沒有重新載入,而實現頁面中局部刷新數據。

2005 年初,許多事件使得 Ajax 被大眾所接受。Google 在它著名的交互應用程式中使用了非同步通訊,如GoogleGoogle 地圖、Google搜索應用Ajax技術

 


4.2 Ajax效果

概述:對現在的開發人員而言,“遍地”都是Ajax

 

例如163郵箱的註冊,當你在郵箱地址文本輸入框當中輸入完手機號之後,客戶端會向伺服器悄悄的傳遞數據,伺服器也會悄悄的響應,給你返回數據;整體的網頁沒有更新的情況下,實現局部刷新數據;例如微博的點贊等......

 


4.3 Asynchronoussynchronous

概述:耗時間相對長一些的語句,我們稱之為“非同步語句”:AjaxsetInterval()setTimeout()animate()Nodejs都是非同步語句。非同步語句耗時都比較長,所以會先執行後面同步的語句(如果先執行非同步語句,程式就被阻塞了)。

經驗:只要有回調函數的都是非同步語句。

 

遇到非同步語句,會先放一邊,執行後面同步的語句,回頭再執行自己

var f = 0;
setInterval(function(){
   f++
   console.log(f);
},1000)
console.log("哈哈");

 

同步語句一般耗時不長,依次從上往下的順序執行

for(var i = 0; i < 10; i++){
   console.log(i)
}
console.log("哈哈");

4.4進程和線程

概述:什麼是進程,一個應用就是一個進程。

 

什麼是線程?線程就是進程的基本單位,也就說,進程是由多個線程組成的(主線程),JS是單線程。


4.5 jQueryAjax

jQueryget請求語法:

$.get(url, [data], [callback], [type])

 

案例:當單擊按鈕的時候,將伺服器中的數據顯示到標簽中,並且不刷新頁面:

$("button").click(function(){
    //發起一個GET請求
    $.get("data/result.txt", function(data){
        $("p").html(data)
    })
});
//用定時器證明這個頁面沒有重新載入
var i = 0;
setInterval(function(){
    i++;
    $("h1").html(i)
},100)

註意:

 所有的文件都必須在伺服器中。

 必須是http請求過來的。

請求的頁面若不是通過http打開的,會報錯,這個報錯就是著名的跨域報錯。

 

 jQuery中的$.get,幫我們做了什麼事情?

發送了http請求,請求介面中的數據。然後伺服器收到http請求,開始執行http響應,txt中的內容在http的報文體中攜帶到瀏覽器中。被$.get的回調函數接收。回調函數的data就是http響應的報文體中的參數。


4.5.1 Ajax實現註冊功能

註冊業務:客戶端會向伺服器傳遞一些數據,伺服器會保存這個數據,如果用戶名已經被註冊了,提示該用戶名已經被註冊。

註意:別忘記創建資料庫

 

前端html:

<body>
    <p>賬戶:<input type="text" id="user" /><b class="info"></b></p>
    <p>密碼:<input type="password" id="pwd" /></p>
    <button>註冊</button>
</body>
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
    $("button").click(function(){
        $.post("php/reg.php", {
            "name": $('#user').val(),
            "password": $('#pwd').val()
        }, function(data){
            if(data == 1){
                alert("註冊成功");
            }else{
                alert("註冊失敗");
            }
        })
    });

    //文本框輸入內容時,實時查詢用戶名是否存在
    $("#user").on('input',function(){
        $.get("php/search.php?name=" + $(this).val(), function(data){
            if(data == 1){
                $('.info').css('color','green').html("恭喜你可以註冊");
            }else{
                $('.info').css('color','red').html("用戶名已被註冊");
            }
        })
    })

    //失去焦點隱藏info
    $('#user').blur(function(){
        $('.info').hide()
    })
</script>

 

reg.php註冊:

<?php
    //獲取前端傳過來的數據
    $name = $_POST["name"];
    $password = $_POST["password"];

    //連接資料庫,參數:資料庫地址、用戶名、密碼
    mysql_connect('localhost', 'root', '123456');
    //選擇要操作的資料庫
    mysql_select_db("student");
    //設置編碼
    mysql_query("SET NAMES utf8");
    //寫執行插入的SQL語句,保存到資料庫的表中
    $sql = "INSERT INTO stuuser (name, password) VALUES ('$name','$password')";
    //執行SQL語句,會返回成功插入的結果(條數)
    $result = mysql_query($sql);

    if($result){
        echo 1; //插入成功返回1給前端
    }else{
        echo 0; //插入失敗返回0給前端
    }

?>

 

search.php查詢資料庫:

<?php
    //獲取前端傳過來的數據
    $name = $_GET["name"];

    //連接資料庫,參數:資料庫地址、用戶名、密碼
    mysql_connect('localhost', 'root', '123456');
    //選擇要操作的資料庫
    mysql_select_db("student");
    //設置編碼
    mysql_query("SET NAMES utf8");
    //寫執行插入的SQL語句,保存到資料庫的表中
    $sql = "SELECT * FROM stuuser WHERE name='$name'";
    //執行SQL語句,會返回成功查詢的結果
    $result = mysql_query($sql);
    //查詢資料庫條目的個數,並返回
    $count = mysql_num_rows($result);

    //給前端返回一個結果:能不能註冊
    if($count == 0){
        echo 1; //如果資料庫不存在,返回1給客戶端驗證
    }else{
        echo 0;
    }
?>

4.5.2 jQueryget請求方法

語法:

$.get(url, [data], [callback], [type])

 

 jQueryget請求語法:有兩種方法傳遞數據,但最終參數都是以query string的方式傳遞給服務端

示例1:
$.get("介面地址?k=v&k=v",function(data){

});
示例2:
$.get("介面地址",{k:v, k:v},function(data){

});

4.5.3jQuerypost請求方法

 

jQuerypost請求的語法:參數依然是以報文體的形式傳遞到伺服器中

$.post(url, [data], [callback], [type])


4.5.4 $.ajax()方法

$.ajax()方法有以下常用參數:

 url: 要求為string類型的參數,(預設為當前頁面地址)發送請求地址。

 type:要求為string類型的參數,請求方式(getpost),預設為get

 data:要求為objectstring類型的參數,發送到服務端的數據

 success:請求成功的回調函數

 dataType:伺服器返回數據的類型,例如:xmlstringhtmljson

 error:請求失敗後的回調函數

 complete:請求成功或失敗的都會執行的回調函數


五、原生JavaScriptAjax

5.1原生Ajax發起HTTP請求

XMLHttpRequest()對象手冊:

http://www.w3school.com.cn/xmldom/dom_http.asp

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

概述:原生Ajax要使用JavaScript的內置構造函數。

所有現代瀏覽器(IE7+FirefoxChromeSafariOpera)都支持XMLHttpRequest()對象。

var xhr = new XMLHttpRequest();

字面上意思:即XML”通過

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

-Advertisement-
Play Games
更多相關文章
  • 工作的越久,有些基礎知識我們可能就逐漸淡忘了,今天我們來回顧一下css的聖杯佈局和雙飛翼佈局, 這兩個名詞你可能不熟, 那三欄佈局你肯定就非常熟悉了, 就是兩邊定寬, 中間自適應 的 佈局 1 , 聖杯佈局 首先HTML結構是這樣的,因為要保證中間的結構先渲染, 所以 center 要放在 最前面 ...
  • 下麵是五個正則合到一起的一個正則表達式 this.options.formData[8].value = value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').repla ...
  • 1.標簽選擇器 div{} 2.類選擇器 .one class="one" 3.id選擇器(定義+調用) #one{} id="one" 4.通配符選擇器 *{} 5.後代選擇器 .one a {} 6.子代選擇器 .one>a{} 7.交集選擇器 p.one {} 8.並集選擇器 .one,.tw ...
  • 1.變數 var num=10; var num1,num2,num3; num1=10; num2=20; num3=30; var num1=10,num2=20,num3=30; 註意點: console.log(a); //報錯 var b; console.log(b); //undefi ...
  • table 表頭有時候需要加一些小樣式比如 必填項 這是我項目中遇到的需求 比例,產品, 部門為必填項,這個時候就需要在表頭加個紅色小星星。 首先在table中綁定:header-cell-class-name="must"事件 然後methods中寫must事件如下 must(obj) { if ...
  • 瀏覽器F5刷新的時候有一個刷新執行之前的事件,beforeunload 事件,這個事件可以提示用戶在刷新頁面之前有一個提示。 下麵是beforeunload的用法: 首先在methods中定義beforeunload事件 beforeunloadHandler(e) { // e.preventDe ...
  • 最近看了 "Dan Abramov" 的一些 "博客" ,學到了一些React的一些有趣的知識。決定結合自己的理解總結下。這些內容可能對你實際開發並沒有什麼幫助,不過這可以讓你瞭解到更多React底層實現的內容以及為什麼要怎樣實現。可以讓你跟別人有更多的談資,當然,也可以在某些場合裝一下逼。那麼接下 ...
  • 一、請求後端的JSON數據 JSON是前後端通信的交互格式,JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式。 JSON是互聯網各個後臺與前代溝通必備格式,取代了原來的XML。 XML數據格式特別“噁心”,現在市場上99%以上的數據格式都 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...