基于C#開發web網頁管理系統模板流程-登錄界面

前言，首先介紹一下本項目將要實現的功能

（一）登錄界面

實現一個不算特別美觀的登錄窗口，當然這一步跟開發者本身的設計美學相關，像蒟蒻博主就沒啥藝術細胞，勉強能用能看就行……

?

（二）管理系統主界面

實現一個不算特別美觀的管理系統主界面

?

（三）頁面鏈接

通過C#腳本實現登錄界面輸入正確密碼后，能夠跳轉到管理系統主界面，按下主界面的【退出】按鈕后，又回到登錄界面

這里所提到的正確密碼由本地數據庫表中記錄決定，本篇也將詳細介紹數據庫的連接操作

一，資源準備

（一）navicat

查看原文鏈接獲取安裝包以及安裝教程

原文鏈接->Navicat安裝配置（注冊碼）連接MySQL-CSDN博客

（二）VS2019/VS2022

理論上用VS2019~VS2022的版本都能實現，因為博主已經把很多坑踩完了，所以按照本篇的流程走，基本不會出錯！本篇以VS2022作演示！

（1）開發包體介紹

開發包體是在開發過程中給開發者提供的大量框架、模板，能夠大大提高開發效率！

在安裝VS2019或VS2022后，Visual Studio Installer會同步安裝，它是用來下載開發包體用的，怎么找到它？在【開始菜單】中很容易找到的！

（2）VS2019安裝時需要選擇以下開發包體

（3）VS2022安裝時需要選擇以下開發包體

（三）mysql接口程序及相關文件

（1）mysql配置

博主僅提供5.7版本的mysql，需要其它版本的話自行去官網獲取->百度網盤請輸入提取碼

測試：【win+R】打開運行窗口->輸入【cmd】打開命令行窗口->輸入【mysql -u root -p】->輸入你的mysql數據庫密碼，能夠出現【mysql>】的提示符證明測試成功，如下圖

此時你還需要確認自己的mysql版本，在上一步測試的基礎上，繼續輸入sql查詢語句【select version();】，例如博主這里的是5.n版本（后面的.17不必關心），此時需要你記住這個版本號

（2）odbc接口程序

odbc接口程序用于連接數據庫，你需要下載與自己版本號相對應的接口程序

如果你跟我一樣是5.7版本的mysql，我在這個鏈接中直接提供給你接口程序供下載（當然你也可以自己去下面我提供的官網鏈接下載）->百度網盤請輸入提取碼

注意，兩個安裝包都要下載（一個32位、一個64位）并雙擊運行安裝

安裝過程中只有下圖這一個處需要做出選擇，其它一律保持默認點擊下一步

如果你跟我的版本不一樣是其它版本的mysql，需要你自行去mysql官方找到對應版本并下載安裝，也是請注意，下載一個32位、一個64位的安裝包（當然如果mysql版本過新可能直接拋棄了32位，這時你可以只下載64位的）

mysql-odbc官網->MySQL :: Download MySQL Connector/ODBC (Archived Versions)

安裝好后，開始菜單搜索odbc，打開ODBC數據源（64位）

點擊【添加】->找到剛下載的對應自己mysql版本號的odbc接口程序，按圖片輸入相關信息，點【Test】測試連接成功后點OK創建連接

（3）三張圖片

準備三張圖片供開發，這一步的要求是最輕松的了，這三張圖片起到的作用就是本篇【前言】部分展示的管理系統主界面的背景圖

二，創建項目

（一）配置新項目

打開vs2022，點擊右下角【創建新項目】

上方搜索框中輸入asp，注意此處選擇第二個下方帶有C#標識的模板（這一步極容易選錯，請仔細對照下圖確認選擇正確！），點擊下一步

項目名稱建議設置為和本地的數據庫同名，位置選擇一個合適的位置方便自己能找到（建議新手直接放桌面，本篇演示直接放桌面了），點擊創建

選擇空項目模板，右邊勾選【Web 窗體(F)】，其余保持默認，點擊創建

（二）在項目中創建相關的資源文件夾并導入相關資源

【右鍵】項目名稱->【添加】->【新建文件夾】，取名為img

【右鍵】剛剛新創建的img文件夾->【添加】->【現有項】，找到本篇標題【一.（三）】準備的圖片文件，選中這三張圖片，點擊添加

【右鍵】App_Data文件夾->【添加】->【新建項】->選擇【文本文件】，修改名稱為【DB.cs】（名字很重要，務必跟此處一致！）->最后點擊【添加】

雙擊打開【DB.cs】文件，復制如下代碼到該文件中，此處有許多信息需要根據自己的實際情況進行更改，如下圖所示，務必確保和自己的實際信息一致！

修改完畢后使用【Ctrl+S】快捷鍵保存修改

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.OleDb;
using System.Data.Odbc;        //ODBC命名空間public class DB
{public static OdbcConnection Lianjie(){//定義ODBC方式MYSQL數據庫連接string strconn = "dsn=test;Driver={MySQL ODBC 5.1 Driver};Server=127.0.0.1;Database=ckgl;User=root; Password=123456;Option=3;";//string strconn = "dsn=mysql;Driver={MySQL ODBC 8.0 Driver};Server=127.0.0.1;Database=ckgl;User=root; Password=123456;Option=3;";OdbcConnection con = new OdbcConnection(strconn);return con;}
}

三，設計登錄界面及主頁

（一）設計登錄界面

（1）添加設計工作臺

【右鍵】項目名稱->【添加】->【新建項】->選擇【Web窗體】->底部修改名稱為login.aspx，點擊添加

點擊左下角的設計->點擊上方的body框內部，此時【body】提示符變為【div】提示符

注：此處一定注意接下來的操作要在提示符為【div】時完成（即內容要在這個框內），輸入幾個回車鍵讓框變大，方便操作

（2）插入與調整表格

頂部點擊【表】->插入表格

設置為4行2列，其余默認不變，點擊確定

表格大小可以調整，差不多調到下面這個樣子，在后續設計過程中也能隨時調整表格以適應其它配件

長按鼠標選中表格的第一行的兩列單元格，【右鍵】->【修改】->【合并單元格】，對第4行的兩列單元格進行相同操作！

（3）修改表格背景色

選中表格中的4行然后點一下表頭（注意此處的操作要點一下表頭才能全選表格，而不是只選中表格中的4行，兩者是有區別的！）全選表格，右邊下滑找到【style】屬性（如果右邊沒有屬性窗口，對表格右鍵可以找到），點擊該屬性右邊的三個小點，會彈出修改樣式窗口

點擊【背景】，在【background-color】中選擇想要的背景色，點擊確定，表格顏色成功修改

（4）調整登錄窗口位置

默認情況下窗口位置被釘死了，需要修改它的布局

在上一步（選中表格）的基礎上，在屬性窗口中找到【style】屬性，點擊該屬性右邊的三個小點，會彈出修改樣式窗口，在修改樣式窗口中找到【定位】，修改position為absolute之后即可隨意拖動登錄窗口位置（拖動前要選中表格）

（4）設計登錄窗口提示信息

在表格對應位置輸入相關登錄提示信息

選中表格第一行的“登錄窗口”提示，上方修改字體大小并居中，對【用戶名：】和【密碼：】進行同樣的操作（根據自己需要來設計就好了，設計這個東西就是自由發揮的）

?

（5）添加窗口文本框和按鈕

單擊選中【用戶名：】之后的單元格，在頂部找到【視圖】->【工具箱】->選擇【TextBox】，對【密碼：】進行同樣的操作

單擊選中第四行單元格，在頂部找到【視圖】->【工具箱】->選擇【Botton】，在右上角對按鈕的位置進行居中顯示

單擊選中按鈕，在右邊下滑找到【Text】屬性（如果右邊沒有屬性窗口，選中表格按右鍵可以找到），在此處可修改按鈕的文字，例如修改為登錄

（6）最終成果

（蒟蒻博主是沒什么設計天分在的……）

（二）設計主界面

（部分步驟因為和前面雷同，所以省去大量簡易步驟的圖片）

（1）添加設計工作臺

【右鍵】項目名稱->【添加】->【新建文件夾】，取名為admin，這個文件夾用于存放主界面的腳本

【右鍵】剛剛創建的admin文件夾->【添加】->【新建項】->選擇【Web Forms 母版頁】->底部修改名稱可以保持默認也可以改成自己想要的名字，但注意不要修改它的后綴.Master->點擊【添加】

然后和本篇標題【三.（一）】設計登錄界面是基本一樣的操作

點擊左下角的設計，區別是這里我們點擊body框發現它的標識符沒有變成前面【三.（一）】步驟里那樣的div框，因為這里需要按【鍵盤上鍵】才能完成此操作，這步很重要，不可省略！

也是鍵入幾個回車方便我們操作，可以觀察到這里有個紫色的框在下面，如果你跟我不一樣就說明你做錯了

（2）插入與調整表格

接下來也是在div框中插入表格，但這次我們插入一個2行2列的即可

（3）插入背景圖

接著我們在表格中插入主界面的背景圖，也就是在本篇標題【一.（三）.（3）】提及的準備的三張圖片

插入圖片后修改一下表格的尺寸以適應背景

對旁邊兩個單元格進行一樣的操作（把第2行2列的單元格留空）

最后，把下面那個紫色的框拖動（點擊左上角的標識符選中此框后可以拖動）到第2行2列的單元格中，這步不可省略

?（4）插入主菜單

選中第2行1列的單元格，在工具箱中的【導航】中找到【TreeView】，

然后右鍵->【編輯節點...】

根據自己的設計來添加主節點和子節點，在右邊的【Text】屬性修改節點名稱

這里的菜單根據自己的需求進行文本設計，這里修改最后一個節點的文本為退出，實現退出功能

但是僅是修改它的文本可做不到對應的退出功能，我們需要實現的功能是點擊退出后就回到登錄窗口，需要做的是修改【NavigateUrl】的值

（做完修改別忘了點確定）

（5）添加主界面提示信息

在【Web Forms 母版頁】中不能直接輸入相關提示信息例如“歡迎進入管理系統”之類的，需要創建一個包含母版頁的窗體才可以

【右鍵】剛剛創建的admin文件夾->【添加】->【新建項】->選擇【包含母版頁的 Web 窗體】->【添加】

新彈出的窗口選擇剛剛設計的母版頁

也是點擊左下角的設計，這時就可以在紫色的框中輸入相關提示信息了，也是可以修改它的大小和位置居中

（注：如果你直接在原來的母版頁中這樣做的話，最后網頁中不會顯示你的提示信息）

（6）最終成果

（因為不會設計所以放棄設計……）

?（三）為登錄窗口的登錄按鈕添加腳本以實現功能

前面在設計登錄窗口時只是做個了外形出來，要實現真正的登錄功能還需要給它添加C#腳本

我們先回到登錄窗口的設計頁面，雙擊登錄按鈕

將下面的腳本復制到彈出的文件中并【Ctrl+S】快捷鍵保存，腳本的功能已經在注釋中做出了詳細解釋，請仔細查看！

using System;
using System.Collections.Generic;
using System.Data.Odbc;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace ckgl
{public partial class login : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void Button1_Click(object sender, EventArgs e){//判斷用戶名和密碼是否為空if (TextBox1.Text == "" || TextBox2.Text == ""){Response.Write("<script language=javascript> alert('對不起，用戶名或密碼不得為空！');</script>");return;}//鏈接并打開數據庫OdbcConnection con = DB.Lianjie();//這一行就用到了之前在App_Data文件夾中創建的DB.cs腳本con.Open();//定義查詢sql，這里的glyb表是存放用戶名和密碼的表，根據自己實際情況做出修改！string sql = " select * from glyb where gno='" + TextBox1.Text + "' and gpass='" + TextBox2.Text + "'";//將Sql命令放入到執行緩沖區OdbcCommand mycommand = new OdbcCommand(sql, con);//執行SQL命令OdbcDataReader sdr = mycommand.ExecuteReader();//如果sql查詢到的記錄和用戶輸入的用戶名和密碼一致則跳轉到主界面if (sdr.Read()){Response.Redirect("admin/default.aspx");  //調用其他網頁用}else{Response.Write("<script language=javascript> alert('對不起，用戶名或密碼不正確，請重試！');</script>");return;}}}
}