基于ASP.NET的电子产品销售网站的设计与实现
在信息时代，日益普及的Internet不仅带给人们更多及时的资讯信息，而且也在生活的各个方面带给人们更多的便捷,在一定程度上改变着人类的生活方式，例如在线购物。人们只要通过Internet的连接，在个人电脑上登录各种销售网站，就可以进行商品的在线购买。电子产品销售网站是一个网络销售系统，它提供了信息发布、产品展示、在线订购、订单管理等功能，并包含一个会员系统，在功能上已经能满足一个小型电子产品销售企业的在线销售需求。它是以VS.NET 2005作为开发平台，使用C#语言设计操作控件和编写操作程序，同时采用SQL Server 2005数据库来管理数据信息，完成对数据的输入、修改、存储等处理。本文主要阐述了本系统的开发环境、体系结构和运行平台等概念问题，并对数据流、工作流的处理进行了详细介绍，对各个子系统的功能要点、设计思路及设计方法都作了描述。
本文设计并实现了一个电子产品销售网站,其主要功能如下：
（1）让消费者通过网站了解电子产品的最新行业状况和走向。
（2）用户通过在网站上注册，浏览商品信息，下订单进行网上交易。
（3）实现网站的新闻、用户、产品及其信息等信息的管理功能。
- 电子产品销售网站的设计
- 系统体系结构
在线电子产品销售网站系统采用B/S架构，B/S架构的优点在于客户端和服务器通过Intranet进行数据交换，客户端基于统一的WEB浏览器，减少了投资，解决了系统维护升级的问题，另外只有极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端（Server）实现，这也就充分保护了数据的安全。
此外，在线电子产品销售网站系统以IIS为载体，采用SQL Server作数据服务器。由于采用ASP.NET2.0技术平台，所以要求服务器安装有.Net Framework2.0。在系统的设计中考虑到可维护性及可扩展性等要求，采取数据与逻辑分离的原则，将诸如数据库连接信息，数据库操作等与数据相关的功能封装在数据层，而网站页面中尽量不涉及数据操作的代码。
整个网站从面对的对象来分可以分为后台管理员部分与前台用户部分，在管理员部分主要实现网站的管理功能与信息、产品发布功能，在界面方面以简洁为主，不用花费太多精力，而在前台用户部分设计网站用户的体验以及在线产品浏览、购物等处理流程，在界面美观以及易用程度方面会延续简洁的风格但功能不会减少。
- 功能需求分析
在线电子产品销售网站的最终目的是为了实现电子产品销售公司的在线销售需求，从这个角度来说，网站面对的用户分为一般普通用户和管理员用户。对一般普通用户来说，他们的需求主要是在网站上购买到合适的产品，因此产品信息展示的友好性、行业新闻、公司新闻的需求是他们的主要需求，方便的注册、产品浏览、在线订购功能是主要要解决的问题。因此对这类用户，功能上主要划分为会员系统模块，新闻展示模块，产品展示模块、在线订购模块。而另外一类用户则是网站的管理员，这部分用户属于公司的人员，管理网站上的产品、新闻、会员、订单等信息，丰富网站的内容、处理用户的订单以及维护网站的运行，对这部分用户来说，网站内容的管理是主要的需求。因此，对这部分用户功能模块主要划分为新闻管理模块、产品管理模块、用户管理模块和订单管理模块。通过这些功能模块，网站的管理员用户能够方便的添加、修改、删除网站的数据。
- 非功能需求分析
实用性原则：力求最大限度地满足实际工作的需要，充分考虑各业务层次、各管理环节数据处理的实用性，把满足客户生产和管理业务作为第一要素进行考虑。
可扩展性与可维护性原则：为适应将来的发展，系统应该具有良好的可扩展性和可维护性。系统设计尽可能模块化、组件化，使应用系统可灵活配置，适应不同的情况。系统的可扩展性应包括能接纳已有的系统和在今后系统软硬件扩展时，能有效地保护已有的投资。特别是在应用需求变化时(应用与系统的需求往往提不全或者经常会变化)，有一个较好的应用平台，能容易地加以调整。系统易于扩充升级，既能满足当前业务的需求，又为今后的扩充留有空间。
安全可靠性原则：网站系统与数据库系统的设计要做到安全可靠，防止非法用户的入侵。数据库的备份策略恰当，以防灾难性事故发生。
用户界面设计原则：图形化原则：用户界面的设计应做到美观大方。系统的设计需要考虑用户的计算机水平，用户界面应直观、明了、条理清晰，做到简单易用，没有计算机专业背景的用户也可以轻松的使用本系统完成购物操作，实现“傻瓜型”管理——易学、易用、易管理。
- 项目框图
- 电子产品销售网站的实现
- 数据库的设计与实现
在完成具体的数据库系统需求分析后，具体的数据库设计实现如下：
表1 tNews(新闻信息表)
| 列名 |
数据类型 |
长度 |
备注 |
| ID |
bigint |
主键 |
|
| newstitle |
nvarchar |
50 |
新闻标题 |
| tNewsClass |
nvarchar |
50 |
新闻类别 |
| newscontent |
ntext |
新闻内容 |
|
| addtime |
datetime |
添加时间 |
|
| newsclick |
int |
浏览次数 |
表2 tNewsClass(新闻类别表)
| 列名 |
数据类型 |
长度 |
备注 |
| ID |
bigint |
主键 |
|
| classname |
nvarchar |
50 |
类别名称 |
表3 tOrder(订单信息表)
| 列名 |
数据类型 |
长度 |
备注 |
| ID |
bigint |
主键 |
|
| opid |
int |
||
| opnum |
int |
||
| ouser |
nvarchar |
50 |
|
| otime |
datetime |
||
| isdeal |
nvarchar |
50 |
是否处理 |
表4 tProduct(产品信息表)
| 列名 |
数据类型 |
长度 |
备注 |
| ID |
bigint |
主键 |
|
| productname |
nvarchar |
50 |
产品名称 |
| productprice |
int |
产品价格 |
|
| productpic |
nvarchar |
50 |
产品图片名称 |
| productinfo |
ntext |
产品介绍 |
| productclass |
nvarchar |
产品类别 |
| prolibnow |
int |
产品数量 |
表5 tProClass(产品类别表)
| 列名 |
数据类型 |
长度 |
备注 |
| ID |
bigint |
主键 |
|
| classname |
nvarchar |
50 |
类别名称 |
| classpic |
nvarchar |
50 |
类别图片 |
表6 tUser(用户信息表)
| 列名 |
数据类型 |
长度 |
备注 |
| ID |
bigint |
主键 |
|
| username |
nvarchar |
50 |
用户名 |
| userpassword |
nvarchar |
50 |
用户密码 |
| userrname |
nvarchar |
50 |
真实姓名 |
| usertel |
nvarchar |
50 |
用户电话 |
| useraddr |
nvarchar |
50 |
用户地址 |
| userclass |
int |
用户类别 |
- 各个子系统具体实现的功能介绍和代码分析
- 产品发布子系统
1. 产品展示模块
产品展示模块这部分内容面向的对象主要是网站的一般用户，在系统中由ProductList.aspx和ProductDetail.aspx实现。其中ProductList.aspx实现产品的分类列表展示，ProductDetail.aspx实现产品的细节信息查看，包括产品的名称、类别、价格、说明等信息。此外，在Default.aspx中还包含了一个产品类别的列表，提供对产品分类信息的查看。
图1所示代码如下：
public partial class ProductDetail : System.Web.UI.Page
{
protected void Page_Load(object sender, System.EventArgs e)
{
string cproid = Request["proid"].ToString();
string sql = "select * from tProduct where ID=" + cproid;//设置查询产品详细信息的查询语句
DataTable dt = new DataTable();//新建数据表,用来保存查询结果
dt = MyDB.GetDataTable(sql);//查询字符串，将结果保存在数据表dt中
DataGrid2.DataSource = dt;//设置数据显示控件的数据源
DataGrid2.DataBind();//显示数据
}
}
2. 产品管理模块
产品管理模块这部分内容面对的对象是网站的管理员用户，因此依然要求进行了管理员登录操作后才能使用。此模块由Admin/ProductManage.aspx，Admin/ProductClassManage.aspx，Admin/AddProduct.aspx实现，其中Admin/ProductManage.aspx实现产品的列表查看、管理，Admin/ProductClassManage.aspx实现产品分类信息的管理，Admin/AddProduct.aspx实现产品添加功能。在产品的介绍信息上使用fckeditor实现了在线所见即所得的编辑。
图2所示页面代码如下：
public partial class Admin_ProductClassManage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["admin"] == null)
{//判断是否为管理员，如果非管理员，则转到提示页
Response.Redirect("Controler.aspx?cname=noadmin");
}
}
protected void btnAdd_Click(object sender, EventArgs e)
{//点击添加产品按钮的事件处理程序
FileUpload1.SaveAs(Server.MapPath("../images/Product")+"/"+FileUpload1.FileName);
string sql;
sql = "insert into tProClass(classname,classpic) values('{0}','{1}')"; //设置添加产品分类的sql语句
sql = string.Format(sql,TextBox1.Text,FileUpload1.FileName);
MyDB.ExecuteSql(sql); //执行sql语句
Response.Redirect("ProductClassManage.aspx");//跳转到指定页面
}
}
图3所示页面代码如下：
public partial class AddProduct : System.Web.UI.Page
{
protected void Page_Load(object sender, System.EventArgs e)
{
if (Session["admin"] == null)
{//判断是否为管理员，如果非管理员，则转到提示页
Response.Redirect("Controler.aspx?cname=noadmin");
}
}
protected void Button1_Click(object sender, System.EventArgs e)
{//点击添加产品按钮的事件处理程序
FileUpload1.SaveAs(Server.MapPath("../images/Product")+"/"+FileUpload1.FileName);
string sql;
sql="insertintotProduct (productname,productprice,productpic,productClass,productinfo,prolibnow)values('{0}','{1}','{2}','{3}','{4}',{5})";
sql = string.Format(sql, TextBox1.Text, TextBox2.Text, FileUpload1.FileName, DropDownList1.SelectedValue, TextBox5.Text, 0);
//设置添加产品的sql语句
MyDB.ExecuteSql(sql);//执行sql语句,添加新闻
Response.Write("");
//提示成功消息
TextBox1.Text = "";
TextBox2.Text = "";
TextBox5.Text = "";//将页面填的数据清空,方便继续添加产品
}
｝
- 新闻发布子系统
1. 新闻展示模块
新闻展示模块这部分内容面向的对象主要是网站的一般用户，在系统中由NewsList.aspx和NewsDetail.aspx实现。其中NewsList.aspx实现新闻的分类列表展示，NewsDetail.aspx实现新闻的细节查看，包括新闻标题、新闻内容、添加时间、浏览次数等信息。系统中的新闻分为两类——站内新闻和业内新闻。此外，在Default.aspx中包含两个列表分别显示最近更近的几条站内新闻和业内新闻。
图4所示的页面代码实现如下：
public partial class NewsList : System.Web.UI.Page
{
protected void Page_Load(object sender, System.EventArgs e)
{
string sql;
//如果传入参数classid为空，则显示全部产品，否则根据传入的参数显示指定分类的产品，传入页面参数为classid
if (Request.QueryString["classid"] != null)
{//当传入参数不为空，显示指定分类产品
string ctNewsClass = Request.QueryString["classid"].ToString();//获取传入参数，即分类名
sql = "SELECT * FROM tNews WHERE tNewsClass='" + ctNewsClass + "' ORDER BY ID DESC ";//设置显示指定分类的产品的查询字符串
SqlDataSource1.SelectCommand = sql;//设置数据源控件的查询字符串
}
else
{//当传入参数为空,显示全部产品
sql = "SELECT * FROM tNews ORDER BY ID DESC ";//设置查询全部产品的查询字符串
SqlDataSource1.SelectCommand = sql; //设置数据源控件的查询字符串
}
GridView1.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);//为控件添加显示附加的处理函数
}
//显示附加的处理函数, 作用是当标题过长的时候只显示标题的前一部分
void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{//判断行类型是否是需要显示新闻标题的行
HyperLink temp = (HyperLink)e.Row.Cells[1].Controls[0];//获取标题
temp.Text = temp.Text.Length > 22 ? temp.Text.Substring(0, 22) + "..." : temp.Text;//如果标题超出22个字符长度,截断显示
}
}
}
图5所示代码与产品细节页相似。
2. 新闻管理模块
新闻管理模块这部分内容面向的对象是网站的管理员用户，因此要求在进行了管理员登录操作以后才能使用。此模块由Admin/AddNews.aspx、Admin/NewsEdit.aspx、Admin/NewsManage.aspx实现，其中Admin/AddNews.aspx实现新闻的添加功能，Admin/NewsEdit.aspx实现新闻的修改功能，Admin/NewsManage.aspx实现新闻的分页浏览查看管理功能。在新闻管理模块中，为了实现新闻的在线所见即所得的编辑，系统引用了一个在线编辑器——fckeditor。fckeditor是OpenSource的一个开源项目，实现了在线所见即所得的编辑功能。fckeditor的源代码在系统的Admin/fckeditor/目录下。
实现图6所示页面的代码与产品添加页相似。
图7所示页面代码如下：
public partial class NewsManage : System.Web.UI.Page
{
protected void Page_Load(object sender, System.EventArgs e)
{
if (Session["admin"] == null)
{//判断是否为管理员，如果非管理员，则转到提示页
Response.Redirect("Controler.aspx?cname=noadmin");
}
}
}
点击“编辑”按钮，页面将跳转到NewsEdit.aspx，可以在fckeditor内对新闻进行多方面的修改。其代码实现如下：
public partial class Admin_NewsEdit : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["admin"] == null)
{//判断是否为管理员，如果非管理员，则转到提示页
Response.Redirect("Controler.aspx?cname=noadmin");
}
this.FormView1.DefaultMode = FormViewMode.Edit;//设置FomView控件的默认模式为编辑模式,新闻处于可编辑状态
this.FormView1.ItemUpdated += new FormViewUpdatedEventHandler(FormView1_ItemUpdated);//为FormView的数据更新事件添加处理函数,使得当完成编辑及更新操作后能将页面转到新闻管理页面
}
//事件处理函数,当完成新闻更新后将页面定位到新闻管理页面
void FormView1_ItemUpdated(object sender, FormViewUpdatedEventArgs e)
{
Response.Redirect("NewsManage.aspx");
}
}
- 会员子系统
1．会员功能模块
会员功能模块是实现网站在线购买的核心，此模块的功能在网站的很多地方都涉及到，主要完成的功能有用户在线注册、用户的身份认证、用户的个人信息管理、用户密码修改，此外，用户模块跟在线订购功能也有很大的关联。此模块主要由Left.ascx，Reg.aspx，UserInfoEdit.aspx实现。Left.ascx是一个用户自定义控件，实现的功能有用户登录、注销以及用户功能导航，以控件的方式实现可以提高代码的重复利用性，使得在网站在各个地方需要使用这些功能的时候只需要方便的引用该控件即可。Reg.aspx实现用户的注册功能。UserInfoEdit.aspx实现用户对自己信息的管理功能。
Left.ascx的代码实现如下：
public partial class Left : System.Web.UI.UserControl
{
protected void Page_Load(object sender, System.EventArgs e)
{
//将两个panel隐藏
Panel1.Visible = false;
Panel2.Visible = false;
//判断用户是否登录,如果登录,将用户名显示在label1控件中并且显示panel2,如果没登录,显示panel1
if (Session["name"] != null)
{
Label1.Text = Session["name"].ToString();
//设置label1控件的文本为用户名
Panel2.Visible = true;//显示panel2
}
else
Panel1.Visible = true;//如果没登录,显示panel1
}
//点击登录按扭执行的处理函数
protected void Button1_Click(object sender, System.EventArgs e)
{
string sql = "SELECT * FROM tUser WHERE username='" + username.Text+ "' AND userpassword = '" + userpass.Text + "'";//设置查询字符串
DataTable dt = MyDB.GetDataTable(sql);//返回查询结果,如果有查询结果,表示帐号密码正确,否则表示帐号密码错误
if (dt.Rows.Count == 0)//如果查询结果大于行,表示帐号密码正确,如果查询结果为,表示帐号密码错误
{
Response.Write("");//输出错误信息,登录失败
}
else
{//登录成功
Session["name"] = username.Text;
Response.Write("");
Label1.Text = "" + Session["name"].ToString() + "";
Panel1.Visible = false;//隐藏panel1
Panel2.Visible = true;//显示panel2
}
}
//点击注册按钮执行的处理函数
protected void Button2_Click(object sender, System.EventArgs e)
{
Response.Redirect("Reg.aspx");//转向注册页面
}
}
Reg.aspx的关键实现代码如下：
protected void Button1_Click(object sender, System.EventArgs e)
{
Label1.Visible = false;
string errmsg = "";
if (username.Text == "")
{
errmsg += "
用户名不能为空！
";
}
if (password.Text == "")
{
errmsg += "密码不能为空！
";
}
if (password.Text != password2.Text)
{
errmsg += "两次密码不相同，请确认您的密码是否正确！
";
}
if (usertel.Text == "")
{
errmsg += "联系电话必须输入！
";
}
if (useraddr.Text == "")
{
errmsg += "请输入地址！
";
}
if (userrname.Text == "")
{
errmsg += "请输入真实姓名！
";
}
if (errmsg != "")
{
Label1.Text = "" + errmsg + "";
Label1.Visible = true;
}
else
{
string sql;
sql = "select * from tUser where username ='" + username.Text + "'";
DataTable dt = MyDB.GetDataTable(sql);
if (dt.Rows.Count == 0)
{
sql="insertintotUser (username,userpassword,userrname,usertel,useraddr,userclass) values ('" + username.Text + "','" + password.Text + "','" + userrname.Text + "','" + usertel.Text + "','" + useraddr.Text + "',1)";
MyDB.ExecuteSql(sql);
Response.Write("");
}
else
{
username.Text = "";
Response.Write("");
}
}
}
2. 会员管理模块
会员管理模块这部分内容面对的对象是网站的管理员用户，要求进行了管理员操作之后才能使用。此模块主要完成的功能是对网站用户的管理，包括普通用户和管理员用户。主要由Admin/UserManage.aspx实现对用户的列表管理，实现用户信息编辑、用户类型编辑、密码修改等功能。
基于VS.NET 2005强大的拖曳功能,类似这的样的表格已经不再需要繁琐的代码来生成,只需直接使用GridView就可以完成。
- 在线订购子系统
1. 在线订购模块
在线订购模块面向的对象主要是网站的普通用户，此模块主要实现用户在线订购产品以及查看订单信息功能。在功能上跟产品展示模块和会员子系统关系密切。在线订购功能跟产品展示功能结合在一起，在产品查看的同时即可实现产品的订购功能，当然前提是已经进行了身份认证的网站会员，订购的具体细节信息以及最终确定订单操作由OrderDetail.aspx实现，而OrderList.aspx实现订单的分类列表查看，通过OrderList.aspx网站的一般用户能查看到订单的处理状态等信息。
图9所示页面的代码实现为：
public partial class OrderDetail : System.Web.UI.Page
{
protected void Page_Load(object sender, System.EventArgs e)
{
if (Session["name"] == null)
{//判断用户是否登录,如果未登录,转向跳转页面
Response.Redirect("Jump.aspx");
}
string oproid = Request["oproid"].ToString();//获取购买产品的id
DataTable dt;//新建数据表对象,用来保存查询结果
string sql;
sql = "SELECT * FROM tProduct WHERE ID=" + oproid;//根据产品id设置查询语句
dt = MyDB.GetDataTable(sql);//执行查询语句,查询指定id的产品的信息,并将结果保存在数据表中
Label1.Text = dt.Rows[0]["productname"].ToString();//显示产品名称
Label2.Text = dt.Rows[0]["productprice"].ToString();//显示产品价格
sql = "SELECT * FROM tUser WHERE username = '" + Session["name"].ToString() + "'";
dt = MyDB.GetDataTable(sql); //查询用户信息并保存在数据表dt中
DataGrid1.DataSource = dt;//将数据表dt绑定到数据显示控件
DataGrid1.DataBind();//显示用户信息
}
//点击提交订单按钮的事件处理函数,完成提交订单信息保存在数据库中的功能
protected void Button1_Click(object sender, System.EventArgs e)
{
string sql = "INSERT INTO tOrder (opid,opnum,ouser,otime,isdeal) VALUES(" + Request["oproid"].ToString() + "," + TextBox1.Text + ",'" + Session["name"].ToString() + "','" + System.DateTime.Now.ToString() + "','否')";//设置插入订单信息到数据库的sql语句
MyDB.ExecuteSql(sql);//执行sql语句,插入订单信息到数据库中
Response.Redirect("OrderList.aspx");//订单提交完毕,将页面转向到订单列表页
}
}
2. 订单管理模块
订单管理模块面对的对象是网站的管理员用户，需要进行了管理员登录操作后才能够使用，此模块完成的功能主要是网站管理员对网站订购信息的管理，能够查看网站所有的未处理订单和已处理订单以及订单的订购者、订购产品、订购日期等信息，并改变订单的状态。如对某个订单的订购产品发货以后可以更改订单的状态为已处理。在此模块中，已处理订单的管理由Admin/OrderList1.aspx实现，未处理订单的管理由Admin/OrderList2.aspx实现。
管理员点击“编辑”按钮可对用户订购的产品进行处理，处理完毕后“更新”，用户就能在个人信息页中查看到自己已订购产品的所有信息。
- 其他
1. 导航
对于一个成功的网站来说，一个友好的导航系统是必不可少的，如果用户进来以后不知道自己所处的位置，对自己需要的信息也不知道从何去寻找，那这样的网站是不可能成功的。在线电子产品销售网站系统的导航系统有网站导航、会员导航与管理员导航，网站导航由Header.ascx实现，方便网站用户寻找自己个感兴趣的信息，如新闻、产品等。会员导航由Left.ascx实现，方便网站的注册用户使用用户功能，如信息更改、订单查看等功能。管理员导航由Admin/Index_Left.aspx实现，完成管理员功能的导航。
2. 样式控制
考虑到网站的可维护性以及实现更好的控制网站的外观样式，在线电子产品销售网站系统采用了CSS(Cascading Stylesheet）层叠样式表来控制网站的外观。使用CSS可以将网站中多个网页的风格格式同时进行控制、更新，不用再一页一页地更新。当站点上所有的网页风格都使用一个CSS文件进行控制时，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。在本系统中，CSS样式表放在css目录中，整站有两个样式表：Admin_STYLE.CSS和content.css，Admin_STYLE.CSS主要对后台管理模块的样式进行控制，content.css对网站的各项数据内容进行控制。
3. 数据连接
考虑系统的可扩展性和可维护性，系统的数据库连接信息保存在网站的配置文件（Web.config）中。这样，当数 据库连接发生改变的时候，只需要更改配置文件中的数据库连接信息，就可以无缝的切换到新的数据库系统中。下面是配置文件中数据库链接的相关信息：
AttachDbFilename=|DataDirectory|\Database_Data.MDF;IntegratedSecurity=True;
UserInstance=True"providerName="System.Data.SqlClient" />
3. 数据库操作类：
在系统中涉及数据库的操作都统一调用这个类的函数来进行，提高代码的可维护性，代码如下：
public class MyDB
{
private static string ConnectionString;
static MyDB()
{
ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"];//从配置文件中读取数据库链接信息
}
//执行一个sql语句,并返回结果集
public static DataTable GetDataTable(string sql)
{
DataTable dt = new DataTable();
SqlConnection con = new SqlConnection(ConnectionString);//定义一个数据库连接
con.Open();
SqlDataAdapter da = new SqlDataAdapter(sql, con);//定义并初始化数据适配器
da.Fill(dt); //填充数据表
con.Close();
return dt;
}
//执行一个sql语句
public static void ExecuteSql(string sql)
{
SqlConnection con = new SqlConnection(ConnectionString);//定义数据库连接
SqlCommand cmd = new SqlCommand(sql, con);//定义并初始化数据命令对象
con.Open();//打开连接
cmd.ExecuteNonQuery();//执行命令
con.Close();//关闭连接
}
}
未完待续。。。