搜尋
首頁web前端css教學WebMatrix進階教學(5):如何在網頁中使用資料庫

導讀:Microsoft WebMatrix是一個免費的工具,可用於建立、自訂和在Internet上發佈網站。

WebMatrix讓您能夠輕鬆建立網站。您可以從一個開源應用程式(例如WordPress、Joomla、 DotNetNuke或Orchard)開始,WebMatrix會為您處理下載、安裝和設定這些應用程式的任務。或者您可以使用許多內建的模板自行編寫程式碼,這些模板有助於您迅速上手。無論您做何選擇,WebMatrix都提供了您的網站運作所需的一切內容,包括Web伺服器、資料庫和框架。透過在您的開發桌面上使用與您將在Web主機上使用的相同堆疊,將網站上線的過程變得既輕鬆又順利。
您可以從http://web.ms/webmatrix下載它。
現在您只需花幾個小時便可學會使用WebMatrix、CSS、HTML、HTML5、ASP.NET、SQL、資料庫等知識以及如何編寫簡單的Web應用程式。內容如下:
目前為止您了解如何使用WebMatrix建立HTML網頁,如何使用級聯樣式表(CSS)有效設定網頁的樣式,以及如何使用WebMatrix中內建的版面功能和「Razor」語法來將您的注意力集中在網頁的內容上,而不是分散到其他雜事上。

在本章中,我們將介紹如何轉換您已在使用的靜態電影列表,我們將使其動態化。實際上來講,無需使用HTML手動編寫電影列表,我們會將它們放在一個資料庫中,我們也會讓WebMatrix讀取該資料庫並為我們產生HTML。透過這種方式,我們可以輕鬆更改資料庫,以及自動更新網頁。

在WebMatrix中建立資料庫

首先,在WebMatrix中找到「Databases」工作區並開啟它。在視窗中央,您將看到選項「Add a Database to your site」。

WebMatrix進階教學(5):如何在網頁中使用資料庫

選擇此選項,WebMatrix將建立一個名為「Movies.sdf」的新資料庫。如果您的網站有不同的名稱,例如“foo”,WebMatrix將基於該名稱建立資料庫(也即foo.sdf)。

您將在視窗左側的資料庫資源管理器中看到該資料庫:

WebMatrix進階教學(5):如何在網頁中使用資料庫

向資料庫新增表格

在視窗頂部,您將看到一個工具功能區,其中顯示了您可以對資料庫執行的不同操作,包括建立表和查詢,以及遷移到其他資料庫。從此功能區,選擇「New Table」工具。如果選擇它時未發生任何事情,請確保您在資料庫資源管理器中選擇了Movies.sdf。

WebMatrix進階教學(5):如何在網頁中使用資料庫

WebMatrix將為您建立表格並開啟列編輯器。這允許您在資料庫表中建立新列。在資料庫詞彙中,記錄指的是特定實體的所有資料。所以,舉例而言,一個人的資料可能是他的姓名、年齡、地址和電話號碼記錄。列是各個資料部分的值,無論它們位於哪個記錄中。所以,在上面的範例中,Name將是一列,Age也是。

所以,對於我們的電影,我們將創建一個類似於下圖的資料庫:

WebMatrix進階教學(5):如何在網頁中使用資料庫

首先,我們創建ID。 ID是特定記錄的識別碼。您無需擁有ID,尤其是對於這樣的簡單資料庫,但是建立ID是一種很好的做法。當您建立更複雜的資料庫時,您將發現它們對於追蹤和查詢資料非常重要。

在列編輯器中,如下圖所示,填寫詳細資料:

WebMatrix進階教學(5):如何在網頁中使用資料庫


這會為該列提供名稱“id”,並將它指定為一個編號(bigint),該編號必須有一個值(將Allow Nulls設為False)。然後它指定該欄位為一個ID,這表示我們告訴了資料庫我們將此欄位用作ID。這樣做的好處是,只要我們在資料庫中新增記錄,它就會自動更新ID,所以我們無需擔憂如何追蹤最新新增的內容、取得它的ID併計算出新記錄。

現在我們表明了此欄位是主鍵。再次說明,「主鍵」是一個資料庫詞彙。鍵是資料庫中具有特殊值的列,通常是您在挑選記錄時希望使用的主要內容。資料庫使用它們來簡化資料的查找。例如,您的工作場所可能為您指派了員工編號。此編號使得很容易追蹤您,因為搜尋編號「333102」可能比搜尋員工「Nizhoni Benally」簡單得多,尤其是在您企業中擁有大量員工時。這使您的員工編號成為了用於查找您的按鍵。您可以在資料中使用許多鍵,主鍵應該視為最重要的一個。

所以,當在資料庫中記錄電影時,我們將為每個電影提供一個ID,我們將該ID 設定為主鍵。

使用功能區中的「New Column」按鈕建立另外3列。您將在表中看到3個未命名的空白列。

選擇第一個空白行,將它命名為“Name”,將資料類型設為“ntext”。確保“Is Identity”和“Is Primary Key”為 False。

WebMatrix進階教學(5):如何在網頁中使用資料庫

對於第二個空白行,將它命名為「ReleaseYear」並將它的資料類型保持為「bigint」。

對於第三個空白行,將它命名為「Genre」並將它的資料類型保持為「ntext」。

點選WebMatrix 標題列的儲存按鈕

WebMatrix進階教學(5):如何在網頁中使用資料庫

彈出對話框輸入表名,命名為 Favorites

WebMatrix進階教學(5):如何在網頁中使用資料庫


新增資料WebMatrix進階教學(5):如何在網頁中使用資料庫

雙擊 Favorites 表,開啟空白資料表,沒有資料

       在對應的欄位中輸入資料,idWebMatrix進階教學(5):如何在網頁中使用資料庫       在對應的欄位中輸入資料,id 資料

建立一個網頁,使用資料WebMatrix進階教學(5):如何在網頁中使用資料庫

在前面,你看到你的網站使用一個版面配置包括HTML

,,styling, body 等等.新建一個 CSTHML頁, 命名為 datamovies.cshtml.

WebMatrix進階教學(5):如何在網頁中使用資料庫用一下靜態內容替代datamovies.cshtml內容

<div id="movieslist">  
      <ol>  
        <li><a href="#">It&#39;s a wonderful life</a></li>  
        <li><a href="#">Lord of the Rings</a></li>  
        <li><a href="#">The Fourth World</a></li>  
        <li><a href="#">The Lion King</a></li>  
      </ol>  
    </div>

靜態列表只有4條內容,如果我們想要5條內容,那麼我們需要添加一條.當資料庫裡的資料推送到頁面時,頁面不知道有多少筆記錄在資料庫中,那麼,就會產生N個

  • ,所以需要循環去添加


    我們先來告訴頁面關於資料庫的資訊,在datamovies.cshtml最上面,添加以下程式碼:

    @{  
          var db= Database.Open("Movies");  
          var sqlQ = "SELECT * FROM Favorites";  
          var data = db.Query(sqlQ);  
        }

    "@"代表 Razor引擎需要執行的程式碼,其中的語法在java, C++, C, or C#等程式語言中似曾相識,


    這時候,我們的程式碼看起來像這樣:

    @{  
           var db= Database.Open("Movies");  
           var sqlQ = "SELECT * FROM Favorites";  
           var data = db.Query(sqlQ);  
         }  
         <div id="movieslist">  
           <ol>  
             <li><a href="#">It&#39;s a wonderful life</a></li>  
             <li><a href="#">Lord of the Rings</a></li>  
             <li><a href="#">The Fourth World</a></li>  
             <li><a href="#">The Lion King</a></li>  
           </ol>  
         </div>

    我們從資料庫中得到了資料,但是頁面中顯示的還是靜態的內容,首先我們刪除其餘的

  • ,只剩下一條


    <ol>  
           <li><a href="#">It&#39;s a wonderful life</a></li>  
         </ol>

    使用Razor引擎把資料循環加入到頁面上,使用@foreach

    <ol>  
         @foreach(var row in data)  
           {  
             <li><a href="#">It&#39;s a wonderful life</a></li>  
           }  
         </ol>

    現在我們看到代碼,是這樣的效果,數據庫中有4條記錄,一共被循環了4次


    沒有得到資料庫中的內容,需要把程式碼改為:

    <ol>  
           @foreach(var row in data)  
           {  
             <li><a href="#">@row.Name</a></li>  
           }  
         </ol>

    這樣就能得到查詢出來的資料

    WebMatrix進階教學(5):如何在網頁中使用資料庫

    現在我們在資料庫中共添加5條數據

    我們再打開頁面,呈現的是5條數據的列表

    WebMatrix進階教學(5):如何在網頁中使用資料庫

     以上就是WebMatrix進階教學(5):如何在網頁中使用資料庫的內容,更多相關內容請關注PHP中文網(www.php.cn)!



  • 陳述
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    丟失的CSS技巧cohost.org丟失的CSS技巧cohost.orgApr 25, 2025 am 09:51 AM

    在這篇文章中,布萊克·莫里(Blackle Mori)向您展示了一些駭客,同時試圖推動同位HTML支持的極限。如果您敢於使用這些,以免您也被標記為CSS罪犯。

    光標的下一個CSS樣式光標的下一個CSS樣式Apr 23, 2025 am 11:04 AM

    具有CSS的自定義光標很棒,但是我們可以將JavaScript提升到一個新的水平。使用JavaScript,我們可以在光標狀態之間過渡,將動態文本放置在光標中,應用複雜的動畫並應用過濾器。

    世界碰撞:使用樣式查詢的鑰匙幀碰撞檢測世界碰撞:使用樣式查詢的鑰匙幀碰撞檢測Apr 23, 2025 am 10:42 AM

    互動CSS動畫和元素相互啟動的元素在2025年似乎更合理。雖然不需要在CSS中實施乒乓球,但CSS的靈活性和力量的增加,可以懷疑Lee&Aver Lee有一天會成為一種

    使用CSS背景過濾器進行UI效果使用CSS背景過濾器進行UI效果Apr 23, 2025 am 10:20 AM

    有關利用CSS背景濾波器屬性來樣式用戶界面的提示和技巧。您將學習如何在多個元素之間進行背景過濾器,並將它們與其他CSS圖形效果集成在一起以創建精心設計的設計。

    微笑嗎?微笑嗎?Apr 23, 2025 am 09:57 AM

    好吧,事實證明,SVG的內置動畫功能從未按計劃進行棄用。當然,CSS和JavaScript具有承載負載的能力,但是很高興知道Smil並沒有像以前那樣死在水中

    '漂亮”在情人眼中'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

    是的,讓#039;跳上文字包裝:Safari Technology Preview In Pretty Landing!但是請注意,它與在鉻瀏覽器中的工作方式不同。

    CSS-tricks編年史XLIIICSS-tricks編年史XLIIIApr 23, 2025 am 09:35 AM

    此CSS-tricks更新了,重點介紹了年鑑,最近的播客出現,新的CSS計數器指南以及增加了幾位新作者,這些新作者貢獻了有價值的內容。

    tailwind的@Apply功能比聽起來更好tailwind的@Apply功能比聽起來更好Apr 23, 2025 am 09:23 AM

    在大多數情況下,人們展示了@Apply的@Apply功能,其中包括Tailwind的單個property實用程序之一(會改變單個CSS聲明)。當以這種方式展示時,@Apply聽起來似乎很有希望。如此明顯

    See all articles

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

    熱工具

    SecLists

    SecLists

    SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    強大的PHP整合開發環境

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    MinGW - Minimalist GNU for Windows

    MinGW - Minimalist GNU for Windows

    這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

    WebStorm Mac版

    WebStorm Mac版

    好用的JavaScript開發工具