基于C#开发web网页管理系统模板流程-登录界面

前言，首先介绍一下本项目将要实现的功能

（一）登录界面

实现一个不算特别美观的登录窗口，当然这一步跟开发者本身的设计美学相关，像蒟蒻博主就没啥艺术细胞，勉强能用能看就行……

6b774a92670d4b35be610bf6a429edb9.png

 

（二）管理系统主界面

实现一个不算特别美观的管理系统主界面

e5886a6ba0f045a8b3d547a33a883cf7.png

 

（三）页面链接

通过C#脚本实现登录界面输入正确密码后，能够跳转到管理系统主界面，按下主界面的【退出】按钮后，又回到登录界面

这里所提到的正确密码由本地数据库表中记录决定，本篇也将详细介绍数据库的连接操作

 

一，资源准备

（一）navicat

查看原文链接获取安装包以及安装教程

原文链接->Navicat安装配置（注册码）连接MySQL-CSDN博客

 

（二）VS2019/VS2022

理论上用VS2019~VS2022的版本都能实现，因为博主已经把很多坑踩完了，所以按照本篇的流程走，基本不会出错！本篇以VS2022作演示！

（1）开发包体介绍

开发包体是在开发过程中给开发者提供的大量框架、模板，能够大大提高开发效率！

在安装VS2019或VS2022后，Visual Studio Installer会同步安装，它是用来下载开发包体用的，怎么找到它？在【开始菜单】中很容易找到的！

34fb7e0dd03f4a869e0f505b7557bbb3.png

（2）VS2019安装时需要选择以下开发包体

1203015012824a3b979afa78906b21cf.png

（3）VS2022安装时需要选择以下开发包体

2940cc1820b74fdeb752aad6ee44e48d.png

 

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

（1）mysql配置

博主仅提供5.7版本的mysql，需要其它版本的话自行去官网获取->百度网盘 请输入提取码

测试：【win+R】打开运行窗口->输入【cmd】打开命令行窗口->输入【mysql -u root -p】->输入你的mysql数据库密码，能够出现【mysql>】的提示符证明测试成功，如下图

1be435a2173c4edeab995e153b877674.png

此时你还需要确认自己的mysql版本，在上一步测试的基础上，继续输入sql查询语句【select version();】，例如博主这里的是5.n版本（后面的.17不必关心），此时需要你记住这个版本号

3bae31777f784f3f8f2c6f0e75691b80.png

（2）odbc接口程序

odbc接口程序用于连接数据库，你需要下载与自己版本号相对应的接口程序

如果你跟我一样是5.7版本的mysql，我在这个链接中直接提供给你接口程序供下载（当然你也可以自己去下面我提供的官网链接下载）->百度网盘 请输入提取码

注意，两个安装包都要下载（一个32位、一个64位）并双击运行安装

8d4536d03aea4ab49bf1bb1f82e5d81e.png

安装过程中只有下图这一个处需要做出选择，其它一律保持默认点击下一步

bb83dad065b44c1aa4ecd83d7aad4038.png

 

如果你跟我的版本不一样是其它版本的mysql，需要你自行去mysql官方找到对应版本并下载安装，也是请注意，下载一个32位、一个64位的安装包（当然如果mysql版本过新可能直接抛弃了32位，这时你可以只下载64位的）

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

27516b9c476d43de82f80cf7e86193c2.png

安装好后，开始菜单搜索odbc，打开ODBC数据源（64位）

3e278562dfb0455b918bce9c93718eb3.png

点击【添加】->找到刚下载的对应自己mysql版本号的odbc接口程序，按图片输入相关信息，点【Test】测试连接成功后点OK创建连接

54e2f48b26d24c00ae6161b709fc11a5.png

02c90fd93b4c44eb961d44d6b1b0d8f6.png

 

（3）三张图片

准备三张图片供开发，这一步的要求是最轻松的了，这三张图片起到的作用就是本篇【前言】部分展示的管理系统主界面的背景图

e5886a6ba0f045a8b3d547a33a883cf7.png

二，创建项目

（一）配置新项目

打开vs2022，点击右下角【创建新项目】

c2888e8125764ef089f6f84c6e288171.png

上方搜索框中输入asp，注意此处选择第二个下方带有C#标识的模板（这一步极容易选错，请仔细对照下图确认选择正确！），点击下一步

a95d86ed854c40079ba9b881b6eaddda.png

项目名称建议设置为和本地的数据库同名，位置选择一个合适的位置方便自己能找到（建议新手直接放桌面，本篇演示直接放桌面了），点击创建

8ed9cb3838a54ec3b752f88ce068344f.png

选择空项目模板，右边勾选【Web 窗体(F)】，其余保持默认，点击创建

389a2b94e2804aa9a95e6a28f9235a2b.png

 

（二）在项目中创建相关的资源文件夹并导入相关资源

【右键】项目名称->【添加】->【新建文件夹】，取名为img

ad1a936c93eb47ce97b37d6dae9ef07f.png

【右键】刚刚新创建的img文件夹->【添加】->【现有项】，找到本篇标题【一.（三）】准备的图片文件，选中这三张图片，点击添加

7bd704a8b96049d1b3359360f5e8eeb5.png

a70deec73e584dcbb7918ad1a2e013f7.png

3d5d7d9050a3409f882bbc6365126d49.png

【右键】App_Data文件夹->【添加】->【新建项】->选择【文本文件】，修改名称为【DB.cs】（名字很重要，务必跟此处一致！）->最后点击【添加】

9a5bfd9910cb456fa8d4485e7863b712.png

27a3464f41914d5e9c4bf99e22155dd5.png

双击打开【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;}
}

ec79c943cf0f464590aa8c2ce9a87174.png

 

 

三，设计登录界面及主页

（一）设计登录界面

（1）添加设计工作台

【右键】项目名称->【添加】->【新建项】->选择【Web窗体】->底部修改名称为login.aspx，点击添加

372d2ae76ca1463ca9d126556095b14f.png

3a7161d97c6947dfbc9d90952f05fa12.png

点击左下角的设计->点击上方的body框内部，此时【body】提示符变为【div】提示符

d0e2a483ce3f48bab7fe7643b2c3183e.png

 

注：此处一定注意接下来的操作要在提示符为【div】时完成（即内容要在这个框内），输入几个回车键让框变大，方便操作

3d5e962e90704345b8f2074dc107aaa4.png

 

（2）插入与调整表格

顶部点击【表】->插入表格

dfc6c64adefc49b7a2ae36663c130d43.png

设置为4行2列，其余默认不变，点击确定

38594e1d35064ca1ae29940dd3712045.png

表格大小可以调整，差不多调到下面这个样子，在后续设计过程中也能随时调整表格以适应其它配件

a74defaafcea460ab42bcea684efcfa0.png

长按鼠标选中表格的第一行的两列单元格，【右键】->【修改】->【合并单元格】，对第4行的两列单元格进行相同操作！

3c25af53756843279734895cba21306d.png

3e736e78a1a342918e0dd7068276c309.png

 

（3）修改表格背景色

选中表格中的4行然后点一下表头（注意此处的操作要点一下表头才能全选表格，而不是只选中表格中的4行，两者是有区别的！）全选表格，右边下滑找到【style】属性（如果右边没有属性窗口，对表格右键可以找到），点击该属性右边的三个小点，会弹出修改样式窗口

6e3e0f279b9e4670b5d664fe767c7703.png

90e5dcc156b84c94aa7bcff9c88f9787.png

a72a8a5bb88e4736b3c0f36e3c2f659a.png

点击【背景】，在【background-color】中选择想要的背景色，点击确定，表格颜色成功修改

eb67aaf65ca043b5b223ecb140fd4d1c.png

58e9bcead3aa4942ab28cfe1967c7079.png

 

（4）调整登录窗口位置

默认情况下窗口位置被钉死了，需要修改它的布局

在上一步（选中表格）的基础上，在属性窗口中找到【style】属性，点击该属性右边的三个小点，会弹出修改样式窗口，在修改样式窗口中找到【定位】，修改position为absolute之后即可随意拖动登录窗口位置（拖动前要选中表格）

feceb4e9c27a44368fb294c45ec6e1a6.png

（4）设计登录窗口提示信息

在表格对应位置输入相关登录提示信息

8a311726ff6544c48f09e13f661b8445.png

选中表格第一行的“登录窗口”提示，上方修改字体大小并居中，对【用户名：】和【密码：】进行同样的操作（根据自己需要来设计就好了，设计这个东西就是自由发挥的）

3acf2910eaa44a36a1da82cb0a2c0b70.png

 

 

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

单击选中【用户名：】之后的单元格，在顶部找到【视图】->【工具箱】->选择【TextBox】，对【密码：】进行同样的操作

6458f2a2b0df4f1f9fcbb93ebcb473ed.png

24f4106350854de4a736d3688fa52cbf.png

单击选中第四行单元格，在顶部找到【视图】->【工具箱】->选择【Botton】，在右上角对按钮的位置进行居中显示

8ac74b59cf524372a585d3a7a484e822.png

58a4f785a30447f2b68358214bc039b2.png

单击选中按钮，在右边下滑找到【Text】属性（如果右边没有属性窗口，选中表格按右键可以找到），在此处可修改按钮的文字，例如修改为登录

794a8b542b41467590c939a82cf60f01.png

 

（6）最终成果

（蒟蒻博主是没什么设计天分在的……）

f33b8e599803420fa7302e1995ac3aef.png

 

（二）设计主界面

（部分步骤因为和前面雷同，所以省去大量简易步骤的图片）

（1）添加设计工作台

【右键】项目名称->【添加】->【新建文件夹】，取名为admin，这个文件夹用于存放主界面的脚本

285e84835b1b473786d6d49fac6d8c2a.png

【右键】刚刚创建的admin文件夹->【添加】->【新建项】->选择【Web Forms 母版页】->底部修改名称可以保持默认也可以改成自己想要的名字，但注意不要修改它的后缀.Master->点击【添加】

38c1d73933db41b8be9010ffc69d98b1.png

然后和本篇标题【三.（一）】设计登录界面是基本一样的操作

点击左下角的设计，区别是这里我们点击body框发现它的标识符没有变成前面【三.（一）】步骤里那样的div框，因为这里需要按【键盘上键】才能完成此操作，这步很重要，不可省略！

0d7f6fb0474c455098396ab62841ca97.png

也是键入几个回车方便我们操作，可以观察到这里有个紫色的框在下面，如果你跟我不一样就说明你做错了

6dae7aacaf3141d287f44414d8b0b918.png

（2）插入与调整表格

接下来也是在div框中插入表格，但这次我们插入一个2行2列的即可

29df999472c84b9287487ea2faf5c234.png

 

（3）插入背景图

接着我们在表格中插入主界面的背景图，也就是在本篇标题【一.（三）.（3）】提及的准备的三张图片

e9d432790a4a4164adec43947c659b30.png

4eeebe732b1f42908ca36c0310f65645.png

插入图片后修改一下表格的尺寸以适应背景

3a2c1eb8ef0e44b3b9182b13c813c540.png

对旁边两个单元格进行一样的操作（把第2行2列的单元格留空）

2ea84392f25e43e48e3c81bf31e491d0.png

最后，把下面那个紫色的框拖动（点击左上角的标识符选中此框后可以拖动）到第2行2列的单元格中，这步不可省略

80fbc5b0281e44d19a43dc0d9b62f416.png

 （4）插入主菜单

选中第2行1列的单元格，在工具箱中的【导航】中找到【TreeView】，

b0c8354e8bf3478eb83d737dc778b707.png

然后右键->【编辑节点...】

6cc992ff607b481893bc34e08d061b77.png

根据自己的设计来添加主节点和子节点，在右边的【Text】属性修改节点名称

6fce5949aa884a2bbdf7c24b66e55ba9.png

这里的菜单根据自己的需求进行文本设计，这里修改最后一个节点的文本为退出，实现退出功能

2ea8f1c992954d618300ecf1a6f2244f.png

但是仅是修改它的文本可做不到对应的退出功能，我们需要实现的功能是点击退出后就回到登录窗口，需要做的是修改【NavigateUrl】的值

9fbd5959da9a4174968603f1b06415b1.png

67cce86ee524481eb5825060d88de445.png

（做完修改别忘了点确定）

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

在【Web Forms 母版页】中不能直接输入相关提示信息例如“欢迎进入管理系统”之类的，需要创建一个包含母版页的窗体才可以

【右键】刚刚创建的admin文件夹->【添加】->【新建项】->选择【包含母版页的 Web 窗体】->【添加】

da0089d33e0940838303a00de0f13731.png

新弹出的窗口选择刚刚设计的母版页

a5c2a7601a02414c97aa86f91b40ba4b.png

也是点击左下角的设计，这时就可以在紫色的框中输入相关提示信息了，也是可以修改它的大小和位置居中

（注：如果你直接在原来的母版页中这样做的话，最后网页中不会显示你的提示信息）

b707e92d2d83488282a44f2221c35e24.png

（6）最终成果

（因为不会设计所以放弃设计……）

e01e7148a0be45848e8add5804ebfb56.png

 

 （三）为登录窗口的登录按钮添加脚本以实现功能

前面在设计登录窗口时只是做个了外形出来，要实现真正的登录功能还需要给它添加C#脚本

我们先回到登录窗口的设计页面，双击登录按钮

0b41427ae0184b379635bebb774200d1.png

将下面的脚本复制到弹出的文件中并【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;}}}
}

 

四，测试

终于算是勉强设计了个大致框架，接下来测试一下功能行不行，打开login.aspx.cs这个脚本，将右上角的运行浏览器修改为Chrome浏览器（edge可能会拦截访问），然后【Ctrl+F5】快捷键运行

112df39ea8a341469773558774a86167.png

成功打开登录窗口

3e55b7ee95c841e2860b49ec93ed829a.png

不输入用户名或密码

7b3efc697e924b4cb1f2d475315a4333.png

 

故意错输用户名或密码

e045afda88094c17a15fb384aed97682.png

输入本地数据库中正确的密码，如果忘了就用navicat去查一下

ece96dfccfe44b749bb44d5a4d2004fb.png

5d7b8221ba1a459eb08d2c7fa4fe998d.png

此时再按菜单栏中的退出按钮，成功退回到登录窗口

5e8ca3b0a3444f7fabee9f0bbe2a6707.png

0dc295661b4047f1a9a198850587c17d.png

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/697999.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mikefile函数与实用模板

mikefile函数与实用模板

文章目录 0.概述1.函数调用语法2.字符串处理函数2.1 subst&#xff08;字符串替换函数&#xff09;2.2 patsubst&#xff08;模式字符串替换函数&#xff09;2.3 strip&#xff08;去空格函数&#xff09;2.4 findstring&#xff08;查找字符串函数&#xff09;2.5 filter&…
阅读更多...
企业网站HTTP网站业务被慢连接攻击了该怎么办

企业网站HTTP网站业务被慢连接攻击了该怎么办

企业的网站建设中遇到网络攻击会出现哪些问题&#xff1f;一些中小型企业对于网络安全的认知不足&#xff0c;网站建设种类众多&#xff0c;电子商城类&#xff0c;小型游戏&#xff0c;支付类型&#xff0c;H5页面的网站&#xff0c;开发等等&#xff0c;如遇见网络攻击造成的…
阅读更多...
vue3专栏项目 -- 四、前后端结合（下）

vue3专栏项目 -- 四、前后端结合（下）

一、async 和 await 1、使用async 和 await 改造异步请求 在接触后端API以后就遇到了越来越多的异步请求&#xff0c;现在我们就使用async 和 await 改造异步请求。 async function是把返回内容包裹成个Promise返回Promise await 它在async function里面才起作用&#xff0…
阅读更多...
大厂常见算法50题-两数相加

大厂常见算法50题-两数相加

专栏持续更新50道算法题&#xff0c;都是大厂高频算法题&#xff0c;建议关注, 一起巧‘背’算法! 文章目录 题目解法总结 题目 解法 定义一个节点pre&#xff0c;用于初始化结果链表的头部&#xff0c;cur指向pre&#xff0c;它将在遍历过程中用于构建新的链表。初始化进位变…
阅读更多...
Linux实验 Shell编程

Linux实验 Shell编程

实验目的&#xff1a; 熟练掌握Shell程序的建立与执行&#xff1b;掌握Shell变量的两种类型&#xff08;Shell环境变量和用户自定义变量&#xff09;及其用法&#xff1b;掌握Shell中的特殊字符、算术与逻辑运算&#xff1b;掌握Shell中输入输出命令&#xff1b;掌握Shell程序…
阅读更多...
学术共振 美妙发声 | 2024美沃斯大会完美收官，米兰柏羽倾力承办

学术共振 美妙发声 | 2024美沃斯大会完美收官，米兰柏羽倾力承办

5月10日-5月12日&#xff0c;为期3天的第十七届美沃斯医疗美容大会在杭州国际博览中心盛大举办&#xff0c;作为行业顶级学术交流平台&#xff0c;本届美沃斯大会不仅是医美行业的一次学术交流盛会&#xff0c;更是一次深度探讨行业未来的远眺之窗。 5月9日&#xff0c;即美沃…
阅读更多...
Docker 安装 MySQL（Mac电脑M芯片）

Docker 安装 MySQL（Mac电脑M芯片）

Docker 安装 MySQL&#xff08;Mac电脑M芯片&#xff09; 1. 下载MySQL镜像文件2. 创建容器实例2.1 命令参数介绍 3. 容器实例内连接MySQL3.1 进入容器实例后台3.2 连接MySQL 4. DBeaver连接MySQL4.1 连接异常 1. 下载MySQL镜像文件 # 默认下载laster版本 docker pull mysql# …
阅读更多...
MPEG-4 AVC/H.264高清编码器 JR3211P

MPEG-4 AVC/H.264高清编码器 JR3211P

概述 JR3211P MPEG-4 AVC/H.264高清编码器是一款专业的高清音/视频编码产品。该产品支持几乎所有模拟及数字音/视频输入接口&#xff0c;包括CVBS、YPbPr、S-video、SD/HD-SDI、HDMI视频输入接口、平衡模拟音频&#xff08;XLR&#xff09;、非平衡模拟音频&#xff08;RCA&am…
阅读更多...
百度云内容审核

百度云内容审核

百度云内容审核介绍 百度智能云内容审核平台&#xff1a;是一款针对多媒体内容进行智能审核的服务平台。支持对图像、文本、音频、视频、直播等内容进行安全审核&#xff0c;具有精准的审核模型、丰富的审核维度、灵活的规则配置等特点。通过可视化界面选择审核维度、个性化调整…
阅读更多...
LabVIEW开发RS422通信

LabVIEW开发RS422通信

LabVIEW开发RS422通信 项目围绕LabVIEW软件开发的程序在RS422通信技术检测方面的应用进行展开&#xff0c;通过软件编程将上位计算机虚拟化为检测设备&#xff0c;控制其通信端口与被测产品进行RS422通信&#xff0c;以此检验产品的性能优劣。该虚拟检测仪器在实际测试中表现出…
阅读更多...
Adobe Media Encoder ME v24.3.0 解锁版 (视频和音频编码渲染工具)

Adobe Media Encoder ME v24.3.0 解锁版 (视频和音频编码渲染工具)

Adobe系列软件安装目录 一、Adobe Photoshop PS 25.6.0 解锁版 (最流行的图像设计软件) 二、Adobe Media Encoder ME v24.3.0 解锁版 (视频和音频编码渲染工具) 三、Adobe Premiere Pro v24.3.0 解锁版 (领先的视频编辑软件) 四、Adobe After Effects AE v24.3.0 解锁版 (视…
阅读更多...
Go框架三件套：Gorm的基本操作

Go框架三件套：Gorm的基本操作

1.概述 这里的Go框架三件套是指 Web、RPC、ORM框架&#xff0c;具体如下: Gorm框架 gorm框架是一个已经迭代了10年的功能强大的ORM框架&#xff0c;在字节内部被广泛使用并且拥有非常丰富的开源扩展。 Kitex框架 Kitex是字节内部的Golang微服务RPC框架&#xff0c;具有高性能…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023