1、一、 实验目的和要求1) 熟悉 Web 站点的信息交互模型和结构2) 熟悉 Web 界面设计的基本思想和原则3) 掌握 Web 界面设计的工具和技术二、实验内容与原理(一) 实验内容:要求根据 Web 界面设计的原则(简洁、一致性、对比度)，进行 Web 界面规划、概要设计和设计要素的选择，利用一种界面设计工具(Dreamweaver / Frontpage)完成网页设计。(二)实验步骤：1)选择一种界面设计工具，并熟悉它；2）针对一个具体的网站（学校、个人、公司）设计应用，进行 Web 界面规划和概要设计；3）选择 WEB 界面设计要素，设计出网页3、设计方案1） 使用的数据库是 MySQL
2、，数据库表如图所示：news 表:news_user 表 :2)该网站为新闻发布系统，该网站有浏览新闻、添加新闻、修改新闻、删除新闻功能。用户权限分为管理员、普通用户权限。a) 网站主页b）单击标题，检测如果未登陆，进入登陆页面c)如果没有登陆账号，则进行注册d)如果登陆成功则进入新闻浏览界面。如果是普通用户，浏览界面如图所示：如果是权限用户，浏览界面如图所示：e)详细内容：f) 如果是管理员用户，则有更新新闻权限,如下图所示：f) 如果是管理员用户，则有添加新闻权限,如下图所示：我使用的开发工具是 VS2012,工程类型为 Asp.NET Web Forms Application.VS20
3、12 集成了 ASP.NET MVC 4，全面支持移动和 HTML5，WF 4.5相比 WF 4，更加成熟。该版本中包含了新的 Metro 应用程序模板，增加了JavaScript 功能、一个新的动画库，并提升了使用 XAML 的 Metro 应用程序的性能。3）网站业务流图登陆进入系统用户是否合法FT普通用户管理员新闻浏览新闻添加新闻删除新闻浏览新闻删除网站使用三层架构。分为 DAL,BLL，UI 层。a)DAL 层，需要下载 ADO.NET for MySQL,然后需要引进动态链接库。即可通过简单设置连接 MySQL 数据库。在该层我设计了一个 MySqlDataCommand 类，通过该
4、类对 ADO.NET 进行封装，提供了完整的连接 MySQL 数据库，进行增、删、改、查等操作的方法。1.public MySqlDataCommand(string _commandText);该函数为MySqlDataCommand 的构造函数，_commandText指定SQL语句，可通过构造函数构造MySqlDataCommand的对象，进行对数据库相关表数据增删改查等操作。2.public void AddParameters(string aParametersName, object value);该函数为MySqlDataCommand对象的成员mCommand（MySqlCo
5、mmand）添加参数，进行对数据库的相关操作，可有效避免SQL注入。3.public void ClearParameters()清除mCommand的参数。4.public MySqlDataReader ExecuteSqlDataReader()执行SQL语句，并返回MySqlDataReader对象，通过该对象可获取查询出的数据。5.public int ExecuteNonQuery()执行SQL语句，并返回影响行数（例如你删除一条数据，影响函数就为1）6. public object ExecuteScalar()执行SQL语句，返回查询到的第一行第一列数据。7. protecte
6、d void TransactionBegin()打开数据库并开启事务,当对数据库相关操作出现问题时可回滚到之前的状态。8.protected void TransactionCommit()提交事务并关闭数据库。9.public static string GetConnectionStr()获取数据库连接字符串，存储在web.config的连接字符串是已经加密后的，这里进行了解密操作，来获取解密后的连接字符串。b)BLL 层即为业务逻辑层，调用 DAL 层函数，并进行一些逻辑判断，返回实体类等数据。下面为新闻查看逻辑类具体举例。1.public List Resource()通过调用 DA
7、L 层函数，可获取所有新闻，并以 List的形式返回所有数据。方便进行相关数据的绑定。News 为实体类，与数据库中 News 表匹配，方便操纵返回数据。2. public int count()返回新闻总数。3.public bool DeleteNews(int NewsID)删除指定主键所对应的新闻。如果删除失败返回 false，否则返回 true4.public bool UpdateNews(int aId,string atitle, string acontentcue, string acontent)修改指定主键所对应的新闻，可修改内容包括标题、新闻概要、新闻内容。如果修改失
8、败则 返回 false，否则返回 true。c)UI 层。包括界面（aspx)与界面后台代码（aspx.cs)，调用 BLL 层代码，对网站用户的请求进行响应。前台页面用 JavaScript 验证，提高与用户交互性。例如在注册时没有填写用户名，不提交数据，直接提示用户输入用户名。后台也进行了有关用户信息、用户权限的判断，保证系统安全性以及与用户交互性。1.JavaScript 代码 $(“#i_pwd“).blur(function () );检测密码输入是否符合格式，如果小于长度小于 6，或有非法字符等问题则提示用户，注册不能成功。$(“#i_identify_pwd“).blur(fun
9、ction () );检测确认密码是否与密码相符，如果不符合则提示用户，注册不能成功。$(#SelectText).bind();点击搜索按钮时判断输入内容是否符合相应要求。如不符合则提示用户，不 予查询。2.界面后台代码News.aspx.cs Page_Loadprotected void Page_Load(object sender, EventArgs e)/判断用户是否登录，如果未登录则页面转到登陆页面if (Session“news_user_sign“ = null)Response.Redirect(“Login.aspx“, false);elseBinder();News
10、.aspx.cs Repeter ItemCommandprotected void viewdan_ItemCommand(object source, RepeaterCommandEventArgs e)/如果点击查看具体内容按钮则转到NewsContent界面if (e.CommandName = “seeContent“)int _sId = Convert.ToInt32(e.CommandArgument);var _result = from news _sNew in lnewswhere _sNew.Id = _sIdselect _sNew;_selectNews = _
11、result.ToList()0;Server.Transfer(“NewsContent.aspx“);/如果点击更新新闻则转到NewsAdd界面else if (e.CommandName = “updateNews“)/获取特定新闻主键Session“news_Id“ = e.CommandArgument;Response.Redirect(“NewsAdd.aspx“);/删除新闻else if (e.CommandName = “deleteNews“)int _news_Id = Convert.ToInt32(e.CommandArgument);MySqlDataComman
12、d mycmd = new MySqlDataCommand(“delete from news where Id=“ + _news_Id);mycmd.ExecuteNonQuery();Response.Redirect(“News.aspx“);News.aspx.cs Repeter ItemDataBoundprotected void viewdan_ItemDataBound(object sender, RepeaterItemEventArgs e)if (e.Item.ItemIndex != -1)/判断用户登录权限，如果是普通用户则不可进行删除新闻和修改新闻操作if
13、(byte)Session“news_user_sign“ = 0)LinkButton lbUpdate = e.Item.FindControl(“lbUpdate“) as LinkButton;LinkButton lbDelete = e.Item.FindControl(“lbDelete“) as LinkButton;lbUpdate.Visible = false;lbDelete.Visible = false;News.aspx.cs Page_Loadprotected void Page_Load(object sender, EventArgs e)/如果是更新新闻
14、if (Session“news_Id“ != null)if (!IsPostBack)MySqlDataCommand mycmd = new MySqlDataCommand(“select * from news where Id=“ + Session“news_Id“);MySqlDataReader dReader = mycmd.ExecuteSqlDataReader();while (dReader.Read()ReflectionFunction.ReaderToObject(dReader, _anews);txtTitle.Text = _anews.title;tx
15、tContentcue.Text = _anews.contentCue;txtContent.Text = _anews.content;else/如果是添加新闻if (Session“news_user_sign“ != null lbSign.Visible = false;if (!IsPostBack)if (Request.QueryString“Success“ != null)lbSign.Visible = true;d)实体类与数据库中表进行匹配，方便后台数据使用，是代码结构清晰。/用户实体类，包含一个用户相关数据，如用户名，权限，爱好等。class news_userpu
16、blic int Idset;get;public string nameset;get;public byte genderset;get;public byte signset;get;public string pwdset;get;public byte professionset;get;public string hobbyset;get;/新闻实体类，包含一条新闻相关数据class newspublic int Idset;get;public int Orderset;get;public string titleset;get;public string contentCue
17、set;get;public string contentset;get;四、核心源代码/* * 版本：V1.0* * 类名：SqlDataCommand* * 文件名：SqlDataCommand.cs* * 日期：2014-5-22* * 描述：对MySql数据库执行存储过程的功能进行封装.* 功能：1:向存储过程添加参数，* 清空存储过程参数。 * 2:执行存储过程返回DataTable,Dataset。* 3:执行存储过程返回第一行第一列，受影响行数。* 4:事务处理* * * * * */ / SqlServer数据库实现访问接口/ public class MySqlDataCom
18、mand #region 成员/ / MySqlCommand 对象/ private MySqlCommand mCommand;#endregion/ / 获取或设置数据库连接/ public MySqlConnection SqlConnectionget return mCommand.Connection; set this.mCommand.Connection = value; #endregion#region 构造函数/ / 构造函数/ 具体SQL代码/ public MySqlDataCommand(string _commandText)this.mCommand = n
19、ew MySqlCommand();/数据库连接对象this.SqlConnection=new MySqlConnection(GetConnection.GetConnectionStr();/设置命令类型 this.mCommand.CommandText = _commandText;#endregion#region 公有方法/ / 向存储过程添加参数/ / 参数名/ 参数对应数据public void AddParameters(string aParametersName, object value)this.mCommand.Parameters.Add(new MySqlPa
20、rameter(aParametersName,value);/ / 清空存储过程/ public void ClearParameters()this.mCommand.Parameters.Clear();/ / 执行SQL语句返回MySqlDataReader/ / SqlDataReaderpublic MySqlDataReader ExecuteSqlDataReader()MySqlDataReader mSqlDataReader = null;try/与数据库相连接Open();/返回MySqlDataReadermSqlDataReader = mCommand.Execu
21、teReader();catchthrow;finallyreturn mSqlDataReader;/ / 执行SQL语句 返回影响行数/ / 影响行数public int ExecuteNonQuery()int Number = 0;try/打开数据库并开启事务TransactionBegin();Number = mCommand.ExecuteNonQuery();catch /如果出错进行回滚TransactionRollBack();throw;finallyTransactionCommit();return Number;/ / 执行存储过程 返回第一行第一列/ / 第一行第
22、一列public object ExecuteScalar()object aResult = null;tryOpen();aResult = mCommand.ExecuteScalar();catchthrow;finallyClose();return aResult;#endregion#region 私有方法/ / 打开数据库连接/ / protected void Open()if (this.SqlConnection.State != ConnectionState.Open)this.SqlConnection.Open();/ / Sql事务对象/ private MyS
23、qlTransaction mSqlTrans;/ / 打开数据库并开启事务/ protected void TransactionBegin()try/如果数据库关闭则重新打开if (SqlConnection.State = ConnectionState.Closed)SqlConnection.Open();/私有成员赋值mSqlTrans = this.SqlConnection.BeginTransaction();this.mCommand.Transaction = mSqlTrans;catchthrow;/ / 回滚事务并关闭数据库/ protected void Tran
24、sactionRollBack()tryif (SqlConnection.State = ConnectionState.Open)/回滚mSqlTrans.Rollback();if (SqlConnection.State != ConnectionState.Closed)SqlConnection.Close();mSqlTrans.Dispose();catchthrow;/ / 提交事务并关闭数据库/ protected void TransactionCommit()trymSqlTrans.Commit();if (SqlConnection.State != Connect
25、ionState.Closed)this.SqlConnection.Close();mSqlTrans.Dispose();catchthrow;#endregion/* * 版 本： Ver 1.0* 类 名： GetConnection * 文 件 名： GetConnection.cs * * 日 期： 2014.05.20.* * 描 述： GetConnection，实现数据源的管理.* * 实现数据源的管理操作，在程序运行时该类被初始化成全 * 象，其中使用静态成员. * */public class GetConnection#region 数据连接public static
26、string GetConnectionStr()string l_str = “;l_str = “ Server =“+HostAddress +“; Database = “+DataBaseName+ “; Uid = “+UserName + “; Pwd = “+ PassWord return l_str;#endregion#region 数据连接信息public static string EncryptionKey = “news“;#region 配置文件中加密后的字符串/加密后的数据库名public static string mDataBaseName = Confi
27、gurationSettings.AppSettings“DataBaseName“.ToString();/加密后的用户名public static string mUserName = ConfigurationSettings.AppSettings“UserID“.ToString();/加密后的用户密码public static string mPassWord = ConfigurationSettings.AppSettings“Password“.ToString();/加密后的数据库地址public static string mHostAddress = Configura
28、tionSettings.AppSettings“Data Source“.ToString();#endregion#region 解密后的字符串/解密后的数据库名public static string DataBaseName = DataEncryption.DecryptString(mDataBaseName, EncryptionKey);/解密后的用户名public static string UserName = DataEncryption.DecryptString(mUserName, EncryptionKey);/解密后的密码public static string
29、 PassWord = DataEncryption.DecryptString(mPassWord, EncryptionKey);/解密后的数据库地址public static string HostAddress = DataEncryption.DecryptString(mHostAddress, EncryptionKey);#endregion#endregion/* 创建者：* 日期：2014/05/20* * 功能描述：反射方法，用于转换为实体对象与给批量添加参数* 修改者：* 修改时间：* 修改项目*/ / 反射方法类/ public class ReflectionFun
30、ction/ / 用反射将DataReader对象转换为实体/ / IDataReader对象/ 转换成的实体public static void ReaderToObject(IDataReader reader, object targetObj)tryfor (int i = 0; i / 为SqlCommand添加参数/ / 实体对象/ SqlCommand对象public static void AddqEntityParameters(object aEntityObj, SqlCommand aSqlCommand)tryif (aEntityObj != null)/获取对象的
31、所有共有属性PropertyInfopropertyInfo= aEntityObj.GetType().GetProperties();if (propertyInfo != null)foreach (PropertyInfo aPro in propertyInfo)/ 遍历每个属性/获取属性的名string propertyInfoName = aPro.Name;/获取对象该属性的值object propertyInfoValue = aPro.GetValue(aEntityObj, null);if (propertyInfoValue != null)/排除时间是空的情况if(
32、propertyInfoValue.GetType() = typeof(DateTime)aSqlCommand.Parameters.AddWithValue(propertyInfoName, propertyInfoValue);/添加到参数catchthrow;/* * 版 本：V1.0.* * 类 名：NewsSeeBLL.cs.* * * 日 期：2014-5-23.* * 描 述：新闻查看逻辑类* 修改日期：* * 修 改 人：* * 修改原因：* * * */namespace BLL.ModuleBLpublic class NewsSeeBLL/ / 找到所有新闻 / p
33、ublic List Resource()INewsDAL INews = new NewsDAL();return NewsDAL.GetNewsList(aNews);/ / 返回新闻条数数/ / public int count()INewsDAL NewsDAL = new NewsDAL();News aNews = new News();return NewsDAL.GetCount(aNews);/ / 删除新闻/ / 新闻主键/ public bool DeleteNews(int NewsID)INewsDAL NewsDAL = new NewsDAL();News aNe
34、ws = new News();aNews.NewsID = NewsID;return NewsDAL.DeleteNews(aNews);/ / 修改新闻/ / 标题/ 新闻概要/ 新闻内容/ 如果消息发送成功则返回 true 否则返回/falsepublic bool UpdateNews(int aId,string atitle, string acontentcue, string acontent)INewsDAL NewsDAL = new NewsDAL();News aNews = new News();aNews.Id= aId;aNews.title= atitle;a
35、News.contentcue= acontentcue;aNews.contendt=acontent;return NewsDAL.update(aNews);/* * 版 本：V1.0.* * 类 名：News.cs.* * * 日 期：2014-5-23.* * 描 述：新闻查看 UI* 修改日期：* * 修 改 人：* * 修改原因：* * * */public partial class News : System.Web.UI.Page, IQueryNewsprivate List lnews = new List();private news _selectNews;publ
36、ic news SelectNewsgetreturn _selectNews;/ / 页面加载/ protected void Page_Load(object sender, EventArgs e)/如果用户权限为普通用户if (Session“news_user_sign“ = null)Response.Redirect(“Login.aspx“, false);elseBinder();protected void viewdan_ItemCommand(object source, RepeaterCommandEventArgs e)if (e.CommandName = “s
37、eeContent“)int _sId = Convert.ToInt32(e.CommandArgument);/Linq 进行查询var _result = from news _sNew in lnewswhere _sNew.Id = _sIdselect _sNew;/转化为 List_selectNews = _result.ToList()0;/转到 NewsContent 页面Server.Transfer(“NewsContent.aspx“);/ Response.Redirect(“News.aspx“);else if (e.CommandName = “updateN
38、ews“)Session“news_Id“ = e.CommandArgument;Response.Redirect(“NewsAdd.aspx“);else if (e.CommandName = “deleteNews“)/获取新闻主键int _news_Id = Convert.ToInt32(e.CommandArgument);MySqlDataCommand mycmd = new MySqlDataCommand(“delete from news where Id=“ + _news_Id);/执行 SQL 语句mycmd.ExecuteNonQuery();Response
39、.Redirect(“News.aspx“);/ / 从数据中查找数据，并进行页面数据绑定/ / / / / private void Binder()MySqlDataCommand mycmd = new MySqlDataCommand(“select * from news“);MySqlDataReader dReader = mycmd.ExecuteSqlDataReader();int _Order = 1;while (dReader.Read()news anew = new news();/反射方法，用于转换为实体对象与给批量添加参数ReflectionFunction.ReaderToObject(dReader, anew);anew.Order = _Order;_Order+;lnews.Add(anew);dReader.Close();/关闭 MyDataReaderviewdan.DataSource = lnews;/指定数据源this.viewdan.DataBind();/进行数据绑定
