合集下载
- 下载提示
- 文本预览
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Web应用网站设计报告
学院：计算机学院
姓名:
学号：
专业：
目录
1、网站设计背景 (3)
1．1开发环境： (3)
2、设计题目 (3)
3、总体设计方案 (3)
3.1功能设计 (4)
4、处理流程 (4)
5、功能的实现 (5)
5.1首页设计效果 (5)
5.2图书界面设计效果 (10)
5.3登录功能设计效果 (14)
5.4注册功能设计效果 (15)
5.5清仓、优惠设计效果 (17)
5.6加入购物车继续购买、付款设计效果 (19)
5.7购物车及收银台 (20)
6、数据库设计 (21)
6.1数据库设计方案 (21)
6.2 部分截图 (22)
6.2.1数据库建表 (22)
6.2.2保存用户信息的表 (22)
6.2.3保存商品信息的表 (22)
6.2.4保存购物车信息的表 (23)
7、总结 (23)
1、网站设计背景
随着计算机技术和网络技术的迅速崛起，计算机日渐深刻的在改变着人们的生产生活方式。
人们已经对去固定的场所、购买(出售)固定的物品的交易方式所带来的不便越来越感到不满，交易的时间长、效率低。
高额的运费、销售场地的凭租费等繁多的额外开支也给商家带来沉重的成本支出。
为了适应市场、适应经济前进的步伐，买家和商家都在努力积极地寻找一种能够带来高效率、低成本销售模式。
开发网上商城、研究网上商城的推广方式，不仅能为其带来新的盈利模式，也可以实现整个产业的共赢，而且对于我国电子商务在整个经济领域中的发展也有着非常深远而重要的意义。
本系统是采用JspS+Mysql+RPC构建的一个动态的网上书店网站在以轻量级数据库Mysql为开发平台，Tomcat为应用服务器，采用JSP技术开发的网上商城购物系统。
本系统分为前台部分，和后台部分，前台主要由用户使用，主要包括用户注册、登录、浏览商品、购物车等功能。
1．1开发环境：
windows 7 vs2013
Sql server2014
2、设计题目
电子商务是指在企业互联网、增值网和内部网上以电子交易方式进行交易活动和相关服务的活动，是传统商业活动各环节的、电子化。
随着计算机和网络的日趋普及，越来越多的商家建立了自己的B2C网站。
比如淘宝网、苏宁易购、亚马逊、三星商城、以及各大团购网站等。
要求用本学期所学 WEB应用开发技术以及参考、查找相关书籍，设计编程实现一个类似淘宝的购物网站，要求有以下功能：
（1）注册；
（2）登录；
（3）购物，在购物时有物品编号、图片、名称、简介以及购买；
（4）选中需要的物品时加入购物车点击购买。
3、总体设计方案
网站设计使用单机作业，由手动输入有关信息，可以选购图书，上传图书，进行用户注册等。
前端开发语言使用HTML服务器采用使用SQL数据库管理系统以及
.
3.1功能设计
作为一个网上购物系统，首先必须保证用户的方便性，因此系统应具有商品排行、清仓优惠、以及最重要的“购物车”的功能，以便用户可以方便的购买物品同时完成支付。
在系统中应列举出商家的各种优惠举措和促销信息。
在系统的后台，管理员能够管理商品，用户信息，产品信息，友情链接以及最重要的订单处理模块。
在设计过程中，要处理好各部分的关系，并由此设计相关的数据库。
本网站应具有的功能有：用户注册、登录功能；商品浏览功能、购物车等功能；后台部分主要有管理员操作，包括商品管理、公告管理、图书优惠管理等功能。
(1)用户注册、登录：购买本网站必须是本网站的会员，即必须先注册会员，只有注册核对信息登录后，用户才能正常进行购物操作。
(2)购物车管理：会员选定一种商品后，就可以直接把图书放到购物车中，提交订单，完成支付；在未提交前可以随意取消这件商品，继续购买其他商品。
(3)购买：选中图书加入购物车点击购买、付款；
(4)商品信息简介：对网上商城的商品进行管理，包括商品上下架库，商品信息、价格的制定等。
（5）后台管理：包括用户信息的保存、图书信息的更新、优惠、清仓活动的信息更新等。
4、处理流程
（1）用户注册：购买者进入网站页面后，首先要填写注册资料，在判断无误的情况下完成成功注册，登陆网站首页。
（2）商品购买：用户通过登录后，浏览商品，选择图书后，可以将图书放入购物车，确认继续购物，在购物车页面，可以对购物车里的图书进行购买。
（3）管理员管理：管理员通过后台登陆后，可以对商品信息、公告信息、优惠、清仓信息等功能进行操作。
（4）用户可以看到商品的简介以及特价商品，查看商品信息后，可以选择购买。
5、功能的实现
5.1首页设计效果
部分代码如下：
<%@Page Language="C#"AutoEventWireup="true"CodeFile="detail.aspx.cs"
Inherits="detail" %>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">
<html xmlns="">
<head runat="server">
<title>Detail</title>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"/> <link href='http///css?family=Open+Sans:400,600'rel='stylesheet' type='text/css'>
<link href="style.css"rel="stylesheet"type="text/css"media="all"/>
<script src="jquery.min.js"></script>
<!---start-login-script--->
<script src="login.js"></script>
<!---//End-login-script--->
<!-----768px-menu----->
<link type="text/css"rel="stylesheet"href="jquery.mmenu.all.css"/>
<script type="text/javascript"src="jquery.mmenu.js"></script>
<script type="text/javascript">
// The menu on the left
$(function () {
$('nav#menu-left').mmenu();
});
</script>
<!-----//768px-menu----->
</head>
<body>
<form id="form1"runat="server">
<div class="content">
<!------start-768px-menu---->
<div id="page">
<nav id="menu-left">
<ul>
<li><a href="Default.aspx">Home</a></li>
<li><a href="login.aspx">Login</a></li>
<li><a href="register.aspx">Register</a></li>
<div class="clear"></div>
</ul>
</nav>
</div>
<!------end-768px-menu---->
<!---start-header---->
<div class="header">
<!---start-wrap---->
<div class="wrap">
<div class="header-left">
<div class="logo">
<a href="Default.aspx"><img alt="log"src="logo.jpg"/></a></div>
</div>
<div class="header-right">
<div class="top-nav">
<ul>
<li><a href="Index.aspx">Home</a></li>
<li><a href="login.aspx">Login</a></li>
<li><a href="register.aspx">Register</a></li>
</ul>
</div>
<div class="sign-ligin-btns">
<ul>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="section-title">
<h3>图书购买请来这里</h3>
</div><!--section-title-->
</div>
</div>
<!-- start main -->
<div class="mid_bg">
<p class="about-title">欢迎进入兰兰图书首页</p>
<div class="wrap">
<div class="details">
<div class="det_pic">
<img src="images/pic.jpg"alt=""/>
</div>
<div class="det_text">
<p class="para">详细信息：</p>
<asp:Panel ID="Panel1"runat="server"Height="230px">
<asp:FormView ID="FormView1"runat="server"
DataSourceID="SqlDataSource1">
<EditItemTemplate>
ID:
<asp:TextBox ID="IDTextBox"runat="server"Text='<%# Bind("ID") %>'/>
<br/>
NAME:
<asp:TextBox ID="NAMETextBox"runat="server"
Text='<%# Bind("NAME") %>'/>
<br/>
SUGGEST:
<asp:TextBox ID="SUGGESTTextBox"runat="server" Text='<%# Bind("SUGGEST") %>'/>
<br/>
PRICE:
<asp:TextBox ID="PRICETextBox"runat="server"
Text='<%# Bind("PRICE") %>'/>
<br/>
AUTHOR:
<asp:TextBox ID="AUTHORTextBox"runat="server"
Text='<%# Bind("AUTHOR") %>'/>
<br/>
COUNTRY:
<asp:TextBox ID="COUNTRYTextBox"runat="server" Text='<%# Bind("COUNTRY") %>'/>
<br/>
PRESS:
<asp:TextBox ID="PRESSTextBox"runat="server"
Text='<%# Bind("PRESS") %>'/>
<br/>
ISBN:
<asp:TextBox ID="ISBNTextBox"runat="server"
Text='<%# Bind("ISBN") %>'/>
<br/>
<asp:LinkButton ID="UpdateButton"runat="server" CausesValidation="True"
CommandName="Update"Text="更新"/>
<asp:LinkButton ID="UpdateCancelButton"
runat="server"
CausesValidation="False"CommandName="Cancel" Text="取消"/>
</EditItemTemplate>
<InsertItemTemplate>
ID:
<asp:TextBox ID="IDTextBox"runat="server"Text='<%# Bind("ID") %>'/>
<br/>
NAME:
<asp:TextBox ID="NAMETextBox"runat="server"
Text='<%# Bind("NAME") %>'/>
<br/>
SUGGEST:
<asp:TextBox ID="SUGGESTTextBox"runat="server" Text='<%# Bind("SUGGEST") %>'/>
<br/>
PRICE:
<asp:TextBox ID="PRICETextBox"runat="server"
Text='<%# Bind("PRICE") %>'/>
<br/>
AUTHOR:
<asp:TextBox ID="AUTHORTextBox"runat="server"
Text='<%# Bind("AUTHOR") %>'/>
<br/>
COUNTRY:
<asp:TextBox ID="COUNTRYTextBox"runat="server" Text='<%# Bind("COUNTRY") %>'/>
<br/>
PRESS:
<asp:TextBox ID="PRESSTextBox"runat="server"
Text='<%#
ISBN:
<asp:Label ID="ISBNLabel"runat="server"Text='<%# Bind("ISBN") %>'/>
<br/>
</ItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID="SqlDataSource1"runat="server"
ConnectionString="<%$ ConnectionStrings:masterConnectionString %>"
SelectCommand="SELECT * FROM [detail] WHERE ([ID] = @ID)">
<SelectParameters>
<asp:QueryStringParameter DefaultValue="0"Name="ID" QueryStringField="id"
Type="String"/>
</SelectParameters>
</asp:SqlDataSource>
</asp:Panel>
<p>
</p>
<div class="sign_up sign_up1 ">
<a href="Default.aspx">Read More</a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="footer">
<div class="wrap">
<div class="footer-left">
<div class="copy">
<p>University of Jiangsu Bookshop </p>
<div style="display:none"><script
src='http///stat.php?id=155540&web_id=155540'language='JavaScript'
charset='gb2312'></script></div>
</form>
</body>
</html>
5.2图书界面设计效果
代码：@Page Language="C#"Debug="true" %>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">
<script runat="server">
protected void buttton1_Click(object sender, EventArgs e)
{
Session["list"] = Session["list"] +"你若盛开清风自来:"; //list记录书名列表的session变量，书名间以：分隔
Session["check"]=Session["check"]+ "15.00:"; //check记录价格列表的session变量，价格间以：分隔
Session["account"] = Convert.ToInt32(Session["account"]) + 1; //account记录购书数量的session变量
Response.Redirect("2.aspx");
}
protected void button2_Click(object sender, EventArgs e)
{
Session["list"] = Session["list"] + "从你的全世界路过:"; //list记录书名列表的session变量，书名间以：分隔
Session["check"] = Session["check"] + "17.00:"; //check记录价格
Session["account"] = Convert.ToInt32(Session["account"]) + 1; //account记录购书数量的session变量
Response.Redirect("2.aspx");
}
protected void button3_Click(object sender, EventArgs e)
{
Session["list"] = Session["list"] + "四大名著:"; //list记录书名列表的session变量，书名间以：分隔
Session["check"] = Session["check"] + "13.00:"; //check记录价格列表的session变量，价格间以：分隔
Session["account"] = Convert.ToInt32(Session["account"]) + 1; //account记录购书数量的session变量
Response.Redirect("2.aspx");
}
protected void button4_Click(object sender, EventArgs e)
{
Session["list"] = Session["list"] + "皮囊:"; //list记录书名列表的session
变量，书名间以：分隔
Session["check"] = Session["check"] + "18.50:"; //check记录价格列表的session变量，价格间以：分隔
Session["account"] = Convert.ToInt32(Session["account"]) + 1; //account记录购书数量的session变量
Response.Redirect("2.aspx");
}
protected void button5_Click(object sender, EventArgs e)
{
Session["list"] = Session["list"] + "将来的你:"; //list记录书名列表的session变量，书名间以：分隔
Session["check"] = Session["check"] + "19.00:"; //check记录价格列表的session变量，价格间以：分隔
Session["account"] = Convert.ToInt32(Session["account"]) + 1; //account记录购书数量的session变量
Response.Redirect("2.aspx");
}
protected void button6_Click(object sender, EventArgs e)
{
Session["list"] = Session["list"] + "励志书籍:"; //list记录书名列表的session变量，书名间以：分隔
Session["check"] = Session["check"] + "11.20:"; //check记录价格
Session["account"] = Convert.ToInt32(Session["account"]) + 1; //account记录购书数量的session变量
Response.Redirect("2.aspx");
}
protected void Button7_Click(object sender, EventArgs e)
{
Response.Redirect("Default.aspx");
}
</script>
<html xmlns="">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
<table style="width: 552px; height: 200px">
<tr>
<td colspan="3"align="center"><asp:Label ID="Label1"runat="server"
Font-Names="华文新魏"Font-Size="XX-Large"
Text="网上书店"></asp:Label>
</td>
</tr>
<tr>
<td style="text-align: center">
<asp:Image ID="Image1"runat="server"ImageUrl="pictures/1.jpg"
Width="150px"/></td>
<td style="text-align: center">
<asp:Image ID="Image2"runat="server"ImageUrl="pictures/2.jpg"
Width="150px"/></td>
<td style="text-align: center">
<asp:Image ID="Image3"runat="server"ImageUrl="pictures/3.jpg"
Width="150px"/></td>
</tr>
<tr>
<td style="text-align: center"class="auto-style1">
<strong>你若盛开清风自来</strong></td>
<td style="text-align: center"class="auto-style1">
<strong>从你的全世界路过</strong></td>
<td style="text-align: center"class="auto-style1">
<strong>四大名著</strong></td>
</tr>
<tr>
<td style="text-align: center">
<asp:Button ID="buttton1"runat="server"Text="购买"
onclick="buttton1_Click"/>15.00元</td>
<td style="text-align: center">
<asp:Button ID="button2"runat="server"Text="购买"
onclick="button2_Click"/>17.00元</td>
<td style="text-align: center">
<asp:Button ID="button3"runat="server"Text="购买"
onclick="button3_Click"/>
13.00元</td>
<td style="text-align: center">
<strong>皮囊</strong></td>
<td style="text-align: center">
<strong>将来的你</strong></td>
<td style="text-align: center">
<strong>励志书籍</strong></td>
</tr>
<tr>
<td style="text-align: center">
<asp:Button ID="button4"runat="server"Text="购买"
onclick="button4_Click"
style="height: 26px"/>18.50元</td>
<td style="text-align: center">
<asp:Button ID="button5"runat="server"Text="购买"
onclick="button5_Click"/>19.00元</td>
<td style="text-align: center">
<asp:Button ID="button6"runat="server"Text="购买"
onclick="button6_Click"/>11.20元</td>
</tr>
<tr>
<td colspan="3"style="height: 53px; text-align: center">
<asp:HyperLink ID="HyperLink1"runat="server"NavigateUrl="2.aspx">去购物车</asp:HyperLink>
<asp:Button ID="Button7"runat="server"OnClick="Button7_Click" Text="一元书城"/>
</td>
</tr>
</table>
<br/>
</div>
</form>
</body>
</html>
5.3登录功能设计效果
部分代码：
using System;
using System.Text;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
public partial class login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
string connstr = "Data Source=ZHAO-PC;Initial Catalog=master;Integrated Security=True";
StringBuilder sb = new StringBuilder();
sb.Append("select count (");
sb.Append(TextBox1.Text);
sb.Append(") from Username where password=");
sb.Append(TextBox2.Text);
// Response.Write(sb.ToString()); 调试语句
using (SqlConnection conn = new SqlConnection(connstr)) {
SqlCommand cmd = conn.CreateCommand();
mandText = sb.ToString();
conn.Open();
int num = (int)cmd.ExecuteScalar();
if (num > 0)
{
Response.Redirect("Default.aspx");
}
else
{
Response.Write("账号密码错误");
}
}
}
protected void Button2_Click(object sender, EventArgs e)
{
Response.Redirect("register.aspx");
}
}
5.4注册功能设计效果
代码：using System;
using System.Text;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
public partial class register : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
string connstr = "Data Source=ZHAO-PC;Initial Catalog=master;Integrated Security=True"; //连接数据库
StringBuilder sb = new StringBuilder();
sb.Append("insert into Username(id,name,password,tel,age)values(");
sb.Append(TextBox1.Text);
sb.Append(",'");
sb.Append(TextBox2.Text);
sb.Append("',");
sb.Append(TextBox2.Text);
sb.Append(",");
sb.Append(TextBox3.Text);
sb.Append(",");
sb.Append(TextBox4.Text);
sb.Append(")");
Response.Write(sb.ToString());
using (SqlConnection conn = new SqlConnection(connstr))
{
//连接的命令插入数据
conn.Open();
SqlCommand cmd = conn.CreateCommand();
mandText = sb.ToString();
int count = 0;
count = cmd.ExecuteNonQuery();
if (count > 0)
{
Response.Write("注册成功");
// Response.Redirect("Default.aspx");
}
else
{
Response.Write("注册失败");
}
}
}
}
5.5清仓、优惠设计效果
代码：using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e) {
Session["bk1"] = Convert.ToInt32(Session["bk1"]) + 1; Response.Redirect("Default2.aspx");
}
protected void Button2_Click(object sender, EventArgs e)
{
Session["bk2"] = Convert.ToInt32(Session["bk2"]) + 1; Response.Redirect("Default2.aspx");
}
protected void Button3_Click(object sender, EventArgs e) {
Session["bk3"] = Convert.ToInt32(Session["bk3"]) + 1; Response.Redirect("Default2.aspx");
}
protected void Button5_Click(object sender, EventArgs e) {
Session["bk5"] = Convert.ToInt32(Session["bk5"]) + 1; Response.Redirect("Default2.aspx");
}
protected void Button6_Click(object sender, EventArgs e) {
Session["bk6"] = Convert.ToInt32(Session["bk6"]) + 1; Response.Redirect("Default2.aspx");
}
protected void Button7_Click(object sender, EventArgs e) {
Session["bk7"] = Convert.ToInt32(Session["bk7"]) + 1; Response.Redirect("Default2.aspx");
}
protected void Button8_Click(object sender, EventArgs e) {
Session["bk8"] = Convert.ToInt32(Session["bk8"]) + 1; Response.Redirect("Default2.aspx");
}
protected void Button9_Click(object sender, EventArgs e) {
Session["bk9"] = Convert.ToInt32(Session["bk9"]) + 1; Response.Redirect("Default2.aspx");
}
protected void Button4_Click(object sender, EventArgs e) {
Session["bk4"] = Convert.ToInt32(Session["bk4"]) + 1; Response.Redirect("Default2.aspx");
}
}
5.6加入购物车继续购买、付款设计效果
代码：@Page Language="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""">
<html xmlns="">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1"runat="server">
<div>
<br/>
<br/>
<asp:Button ID="Button1"runat="server"onclick="Button1_Click"Text="继续购买" />
<asp:Button ID="Button2"runat="server"onclick="Button2_Click"Text="重买"/>
<asp:Button ID="Button3"runat="server"OnClick="Button3_Click"Text="付款" Width="77px"/>
</div>
</form>
</body>
</html>
5.7购物车及收银台
部分代码：
<script runat="server">
protected void Page_Load(object sender, EventArgs e) {
Table1.GridLines = GridLines.Both;
string lis, lis1, lis2 ;
string che, che1, che2;
int i, acc, x,sum=0;
lis =Session["list"].ToString() ;
lis1 = lis;
lis2 = lis;
Response.Write(lis);
che = Session["check"].ToString();
che1 = che;
che2 = che;
Response.Write(che);
acc = (int)Session["account"];
for(i = 0;i<acc;i++)
{
x = lis.IndexOf( ":");
lis1=lis.Substring(0,x);
lis2 = lis.Substring(x+1,lis.Length-x-1);
lis = lis2;
x = che.IndexOf(":");
che1 = che.Substring(0,x);
che2 = che.Substring(x+1,che.Length-x-1);
che = che2;
TableRow r=new TableRow();
TableCell c=new TableCell();
c.Text=lis1;
r.Cells.Add(c);
TableCell d = new TableCell();
d.Text = che1 + "元"; //将价格写入表格第一列单元格
r.Cells.Add(d);
Table1.Rows.Add(r);
}
}
6、数据库设计
6.1数据库设计方案
数据库是存放在计算机内可共享的数据资源，数据库中的数据按照规定好的模型组织进行存储，有较高的数据独立性和扩展性，有较小的冗余度。
在关系数据库中，数据是保存在表中的，在关系数据库中，通过设定表中的关键字段（有叫做键或码）来确定表中记录的唯一性。
键能唯一确定表中的一个记录，用于分辨记录、建立索引以及保证引用的完整性。
（1）用户信息表：存放注册用户名、密码和电话等信息。
（2）图书信息表：记录系统中图书的名称，价格，数量等信息。
（3）购物车信息表：存放用户所购买的图书的基本信息。
6.2 部分截图
6.2.1数据库建表
6.2.2保存用户信息的表
6.2.3保存商品信息的表
6.2.4保存购物车信息的表
7、总结
网上购物系统采用的是ASP和SQL技术编程。
从网站中还涉及到使用网上支付平台。
由于时间和技术上的原因，有些功能模块的功能可能不够完善。
总体来说只能算是基本完成网站需求设计时的功能。
经过这次网站设计和对相关资料的收集，让我清楚的感到随着网络科技的不断发展和网络的广泛应用，使我们的生活离不开它了。
网络它以自己的独特的优点征服了我们。
在教育越来越受重视的21世纪，随着商务类型的不断增加和商务管理要求的不断提高，管理方面的工作量将会越来越大，并且其工作将是一件十分烦琐和非常容易出错的事情。
在这样的情况下有一个实用网上购物是有其必然性的，如果能做出一个完善的网上购物系统就使管理方面的工作量减少很多。
在这次的毕业设计中，我学会了很多，也感到自身知识的贫乏，希望在日后的努力中能做出更完善的设计。