党史学习网站
#仅仅只是记录作者的期末大作业
1引言
本网站的主题为党史学习网站，其宗旨是帮助同学们了解党史，学习党史。只有了解了党史，才能更好地磨砺自己、发展自己、了解自己的不足、更好的完善自己。学习历史是为了更好走向未来。开展党史学习教育，就是要以史为镜、以史明志，把苦难辉煌的过去、日新月异的现在、光明宏大的未来贯通起来，在鉴往知来中砥砺前行，在乱云飞渡中把准航向，在凝心聚力中团结奋斗，共同创造新的历史伟业。
本网站主要分为8个模块，登陆模块，注册模块,主页模块，党史模块，党史伟人图片模块，党史资料模块，知识问答模块，党史网站在线情况模块等模块。
2 开发环境
开发环境为visual stdio 2017,使用的数据库为 MySQL
3 功能模块设计与实现
3.1登录模块设计与实现
图 3.1.1：登陆页面展示
本登陆界面如图3.1.1所示，采用了较为简单的技术，运用了table表格的形式，使用了图3.1.2的验证控件进行账号密码的验证。
图 3.1.2：登陆界面控件
登陆按钮与数据库进行连接，逻辑实现是如图3.1.3所示，自己定义一个SQL查询语句，将账号、密码放入SQL查询语句中，用sqlDataReader.HasRows语句进行逐一比较，找出结果，将用户名存入session并调用cookies，如果结果存在就关闭数据库，进行数据跳转，并弹出登陆成功的提示框，并关闭数据库。
图 3.1.3：登陆界面代码原理
若不存在就执行如图3.1.4的代码，跳出提示框，并在label1显示“账号或密码错误，请重新登录”语句，关闭数据库，重定向回本界面。
图 3.1.4：登陆失败代码原理
3.2注册模块设计与实现
使用了如图3.2.2所示的代码，创建了如图3.2.1所示的界面，运用了table表格和验证控件对账号、密码、确认密码、生日、电话号码、身份证号等内容进行验证，并单独创建了一个类如图3.2.3所示，对用户的年龄进行判断，最后使用了数据库将用户信息存入数据库。
图 3.2.1
如3.2.2图所示，对确认密码进行了验证，并用了正则表达式对电话号码进行了验证。
图 3.2.2
如图3.2.3所示，自己定义一个类，将年龄，姓名等内容进行属性定义，并定义了一个DecideAge方法对年龄的大小的判断。
图 3.2.3
如图3.2.4所示，对出生日期进行了验证
图 3.2.4
如图3.2.5和图3.2.6所示，对身份证号进行了身份证的验证
图 3.2.5
图 3.2.6
如图3.2.7和3.2.8所示，如果验证控件成功通过，则连接数据库，使用函数句柄将用户名和密码存入SQL字符串，如果sqlDataReader.HasRows语句找不到结果，则将数据存入数据库，如果账号存在，则弹出消息提示框，显示账号已经存在。
图 3.2.7
图 3.2.8
3.3主页模块设计与实现
界面主要是采用div+CSS和部分JavaScript组成。首页的效果如图3.3.1所示。
图 3.3.1
其首页导航栏的CSS如下所示：
.nav {
width: 100%;
height: 60px;
line-height: 60px;
background-color: #0b487e;
}
.ul_nav {
padding: 0;
width: 95%;/*整个导航栏宽度*/
margin:0 auto;/*居中*/
list-style: none;/*去标签前圆点*/
}
.ul_nav li {
float: left;
width: 20%;/*每个标签宽度*/
text-align: center;
margin-left: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
cursor: pointer;
/* display: inline;
outline: none;
display: inline-block; */
background: #0b487e;
}
a {
/* width: 100%; */
text-decoration: none;
color:white;/*字体颜色*/
font-family: 隶书;
font-size: 20px;
display: block;
}
.ul_nav li:hover{
background:#023258;
}
.ul_nav a:hover{
color:#ffffff;
display:block;
text-decoration:none;
background-color:#023258;
}
.ul_nav li.li_checked {
background-color: #023258;
}
.ul_nav a.a_checked {
color:#ffffff;
display:block;
text-decoration:none;
}
.dropDown {
display: block;
}3.4党史模块设计与实现
界面主要是采用table表格+CSS和部分JavaScript组成。其中使用了如下的javascript语句，定义一个服务器时间显示。效果如图3.4.1所示。
<script>
function startTimer() {
var today = new Date(); //获取客户端当前系统日期
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m); //调用自定义的checkTime()函数，在小于10的数字前加0
s = checkTime(s);
document.getElementById("divTimer").innerHTML = h + ":" + m + ":" + s; //设置divTimer层显示内容
setTimeout("startTimer()", 1000); //过1秒后重复调用自定义的startTimer()函数
}
//checkTime(i)检查i参数值。如果i<10，就在数字前加0
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
</script>
图 3.4.1
其中表格使用的CSS如下：
/* 首页 */
#textTable1 {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background: #ffe4fe;
font-family:"华文新魏";
width: 100%;
height: 100%;
table-layout: fixed;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#textTable1 th {
border-top-left-radius: 20px;
background: #ff8922;
font-family:"华文新魏";
}
#textTable1.td1 {
background-color: #FFC0CB;
}
#textTable1 td {
/*
border: 2px;
border-color: #000000;
font-family: 隶书; */
/* background: rgba(246, 195, 39, 0.8); */
}
#textTable1 a {
font-size: medium;
}并如图3.4.2所示使用了大量的超链接将关键字链接到党史网站上
图 3.4.2
3.5党史伟人图片模块设计与实现
界面主要是采用div+CSS和部分JavaScript组成。其他的大部分与上一个板块类似，其中伟人图片使用了CSS，效果如图3.5.1所示。
图 3.5.1
其中图片使用的CSS如下：
#imgDiv_22 {
width: 400px;
height: 400px;
background-color: #00A4AC;
float: left;
margin-left: 20px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #525455;
}
#imgDiv_22 img {
width: 100%;
height:400px;
border-radius: 10px;
}
#imgDiv_23 {
width: 400px;
height: 400px;
background-color: #00A4AC;
float: right;
margin-left: 20px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #525455;
}
#imgDiv_23 img {
width: 100%;
height:400px;
border-radius: 10px;
}3.6党史资料模块设计与实现
界面主要是采用table表格+CSS和部分JavaScript组成。其他的大部分与上一个板块类似，其中党史当的今天字段全部是由超链接组成，链接到党史学习网上的“党史上的今天”，效果如图3.6.1所示。
图 3.6.1
3.7知识问答模块设计与实现
界面主要是采用div+CSS和部分JavaScript组成。其他的大部分与上一个板块类似，其中答题部分是使用placeholder控件数组组成的，其效果如图3.7.1所示。
图 3.7.1
其中某段placeholder源代码如下：
PlaceHolder[] plh = new PlaceHolder[5];
for (int i = 0; i < 3; i++)
{
plh[i] = new PlaceHolder();
plh[i].ID = "plh" + i.ToString();
}
Label lblQuestion = new Label
{
ID = "lblQuestion",
Text = "1. 1936年10月2日，红一方面军部队攻占会宁城，控制西兰大道一段，这为（ ）创造了条件。"
};
plh[0].Controls.Add(lblQuestion);
RadioButtonList rdoltChoice = new RadioButtonList
{
ID = "rdoltChoice"
};
rdoltChoice.Items.Add(new ListItem("A. 打破围剿", "A"));
rdoltChoice.Items.Add(new ListItem("B. 突破湘江", "B"));
rdoltChoice.Items.Add(new ListItem("C. 大会师", "C"));
rdoltChoice.Items.Add(new ListItem("D. 建立革命根据地", "D"));
plh[0].Controls.Add(rdoltChoice);
plhChoice.Controls.Add(plh[0]);其placeholder的部署代码如图3.7.2所示：
图 3.7.2
答题后效果如图3.7.3所示
图 3.7.3
3.8党史网站在线情况模块设计与实现
界面主要是采用div+CSS和部分JavaScript组成。其他的大部分与上一个板块类似，其中在线情况界面的效果如图3.8.1所示。
图 3.8.1
显示用户在线人数和总访问人数的代码如下所示，定义一个Application：
void Application_Start(object sender, EventArgs e)
{
// 在应用程序启动时运行的代码
ScriptResourceDefinition scriptResDef = new ScriptResourceDefinition();
scriptResDef.Path = "~/scripts/jquery-3.6.0.min.js";
ScriptManager.ScriptResourceMapping.AddDefinition("jquery", scriptResDef);
Application["message"] = "</hr>";
Application["VisitNumber"] = 0;
Application["Visit"] = 0;
}在：session_start启动时++，在session_end启动时，计算在线人数的--，总访问人数的不做运算
void Session_Start(object sender, EventArgs e)
{
if (Application["VisitNumber"] != null)
{
Application.Lock();
Application["VisitNumber"] = (int)Application["VisitNumber"] + 1;
Application.UnLock();
}
if (Application["Visit"] != null)
{
Application.Lock();
Application["Visit"] = (int)Application["Visit"] + 1;
Application.UnLock();
}
Session.Timeout = 1;
}
void Session_End(object sender, EventArgs e)
{
if (Application["VisitNumber"] != null)
{
Application.Lock();
Application["VisitNumber"] = (int)Application["VisitNumber"] - 1;
Application.UnLock();
}
}并用如下代码进行取出人数并显示：
Application.Lock();
Label1.Text = Application["VisitNumber"].ToString(); //显示网站在线人数
Label2.Text = Application["Visit"].ToString();
Application.UnLock();使用cookies的相关代码进行第几次访问网站的显示：
int num = int.Parse(Request.Cookies["Num"].Value);
Request.Cookies["Num"].Value = Convert.ToString(num + 1);
Response.Cookies.Set(Request.Cookies["Num"]);
lblMsg.Text = Session["user"] + "，欢迎您！您是第" + Request.Cookies["Num"].Value + "次光临党史学习网！";其中对IP地址等的显示代码如下：
Label3.Text = "服务器IP地址：" + Request.ServerVariables["LOCAL_ADDR"] + "<br />";
Label3.Text += "客户端IP地址：" + Request.ServerVariables["REMOTE_ADDR"] + "<br />";
Label3.Text += "浏览器类型：" + Request.Browser["Browser"] + "<br />";
Label3.Text += "浏览器版本：" + Request.Browser["Version"] + "<br />";
Label3.Text += "是否支持Cookies：" + Request.Browser["Cookies"];4 网站部署
通过VS 2017上对解决方案选择发布web应用，修改配置文件
图4.1 发布展示
连接选择相应的站点，服务器和目标url。
图4.2 连接展示
设置数据库连接。选择发布。
图4.3 数据库展示
在iis创建对应web，端口12345的网站
图4.4 iis展示
源码已发布：
1000
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
