基于Html的四季春茶销售网设计与实现

客官°小女子只卖身不卖艺 2024-04-01 09:09 48阅读 0赞

目录  
第一章 设计网站 1  
1.1 四季春茶网的设计依据 1  
1.2 四季春茶网的发展优势 1  
第二章 网站开发过程介绍 2  
2.1 开发软件信息 2  
2.2 网站总体页面结构图 3  
2.3 各个网页功能介绍 4  
2.4 数据库设计 5  
第三章 网页功能设计与实现过程展示 9  
3.1 网站首页功能设计与实现 9  
3.2 注册登录页面功能设计与实现 10  
3.3 最新上架页面功能设计与实现 12  
3.4 热销茶叶页面功能设计与实现 13  
3.5 网站信息页面功能设计与实现 15  
3.6 茶叶搜索页面功能设计与实现 16  
3.7 关于我们界面功能设计与实现 17  
3.8 意见反馈界面功能设计与实现 18  
3.9 后台管理界面功能设计与实现 19  
3.10 茶叶信息管理界面功能设计与实现 20  
3.11 订单信息管理界面功能设计与实现 21  
3.12 用户管理界面功能设计与实现 22  
3.13 新闻信息管理界面功能设计与实现 22  
3.14 系统管理界面功能设计与实现 23  
第四章 特色与总结 25  
附录 26  
第三章 网页功能设计与实现过程展示

3.1 网站首页功能设计与实现

功能：网站首页是一个网站的入口网页，是起到引导用户浏览网站其他部分的内容的作 用。所以，四季春茶网的网站首页的建设尤为重要。  
设计：四季春茶网打算走简洁风格的制作路线，这样设计是为了用户使用更方便，简洁 明了的网站主页才是用户所需要的，主页需要显示四季春茶网的 logo 图，然后有能够进入其 他页面的按钮，然后再显示部分热销茶叶信息，主页设计就完成了。  
实现：网站首页整体使用单色调背景，网站顶端放置四季春茶 logo 图，logo 图下面制 作标题栏，点击即可进入网站其他界面，方便用户快速找到自己想浏览的内容。网站主体部 分左侧制作注册登录界面，放在比较显眼的位置，方便用户使用。注册登录页面之下制作茶 叶分类和茶叶品牌界面，方便用户通过分类来查看本网站的茶叶。网站首页主体部分写上“欢 迎光临四季春茶销售网”，然后放置部分本网站茶叶信息，茶叶信息采用数据绑定的形式， 直接读取数据库内的茶叶信息来显示数个茶叶信息，显示的茶叶信息包括茶叶图片，价格以 及销量茶叶信息添加完成后，网站主体部分不再加入多余内容，不影响用户使用体验。

图 3-1-1 网站首页设计视图

![在这里插入图片描述][eb4819a644a34b599bbdb71d602bf684.png]

图 3-1-2 网站首页效果图

![在这里插入图片描述][6b42ac27f8c148298bba7601564c1ff1.png]

3.2 注册登录页面功能设计与实现

功能：注册登录功能是销售网必备的部分，如果不进行注册登录，就不能购买茶叶。注 册登录是用户想购买茶叶必须经历的流程，需要注册账号绑定信息后，才可购买茶叶。  
设计：注册界面需要有个人信息的相关填写，有些重要信息是必填，小部分信息是选填， 注册完成之后，能让用户进行登录，登录后可以随时修改个人信息，以及选购茶叶。  
实现：注册界面制作，制作登录账号，姓名，性别，收货地址，年龄，电子邮箱，联系 电话，出生年月，登录密码，订单备注这些个人基本信息的输入界面。保证用户在将这些信 息都输入以后，才可以注册成功用户账号，注册成功的账号将会保存在数据库中。  
登录界面在网站左侧功能栏，登录界面制作，制作账号密码输入功能，以及找回密码功 能，让遗失密码的用户可以自助找回密码。本文转载自http://www.biyezuopin.vip/onews.asp?id=12925用户在输入自己的账号密码之后，就可以进入用 户中心，在用户中心，可以修改自己的个人信息和登录密码，还可以浏览购物车，来对自己 选购的茶叶进行付款。

1. About.aspx
    
    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="About.aspx.cs" Inherits="About" Title="四季春茶销售网" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <table id="Table1" align="center" border="0" bordercolordark="#ffffff" bordercolorlight="#ffcf00"
    cellpadding="0" cellspacing="0" style="width: 100%">
    <tbody>
    <tr>
    <td align="center"	class="tabTitle" colspan="1"
    
    height="22"
    
    
    style="width: 931px">
    <b>
    
    <asp:Label ID="Label2" runat="server" Width="654px"></asp:Label></b></td>
    </tr>
    <tr>
    <td colspan="1" style="width: 931px; height: auto; text-align: left">
    <strong>
    <div id="DIV1" runat="server" style="width:
    722px; height: auto">
    </div>
    </strong>
    </td>
    </tr>
    </tbody>
    </table>
    </asp:Content>
    
    About.aspx.cs
    
    using System; using System.Data;
    using System.Configuration; using System.Collections; using System.Web;
    using System.Web.Security; using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    
    using System.Web.UI.HtmlControls; using System.Data.SqlClient;
    
    public partial class About : System.Web.UI.Page
    {
        
    public string sql, dID;
    
    SqlHelper data = new SqlHelper();
    protected void Page_Load(object sender, EventArgs e)
    {
        
    if (!IsPostBack)
    {
        
    Label2.Text = Request.QueryString["Type"].ToString(); sql = "select top 1	* from AboutInfo	where Type='" +
    Request.QueryString["Type"].ToString() + "'"; getdata(sql);
    }
    }
    private void getdata(string sql)
    {
        
    SqlDataReader dr = data.GetDataReader(sql); if (dr.Read())
    {
        
    this.DIV1.InnerHtml = dr["AboutInfo"].ToString();
    }
    
    }
    
    }

![在这里插入图片描述][d9d666a4272c4bceb73d14e0013efc6f.png_pic_center]  
![在这里插入图片描述][00661ff6c0894487ae0ff99ce5eb3101.png_pic_center]  
![在这里插入图片描述][5f2d6e4587e24f699a8a8807794ddf0f.png_pic_center]  
![在这里插入图片描述][d2780bb697e8434e8ab595539a69e6e3.png_pic_center]  
![在这里插入图片描述][43c5f6fc3a0444639697a1db4a6caff3.png_pic_center]  
![在这里插入图片描述][1983d66a036d4a7ba9541df6b8b1b5e1.png_pic_center]  
![在这里插入图片描述][97305ca68f074aae88f3d624066985d9.png_pic_center]  
![在这里插入图片描述][bd1a033282fc4dca8ebea44ce6c07e1c.png_pic_center]  
![在这里插入图片描述][9288a83d866742ce921b0a9bc28ae38d.png_pic_center]  
![在这里插入图片描述][d4079f838f254f7a94f3ebe3c94e642f.png_pic_center]  
![在这里插入图片描述][0db701c036264d569857468676857350.png_pic_center]  
![在这里插入图片描述][8163f188043c47a0ba898c15f1c11eed.png_pic_center]

[eb4819a644a34b599bbdb71d602bf684.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ec11f7eea6644c7289b07ae4526f27b8.png
[6b42ac27f8c148298bba7601564c1ff1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/878349d5ab864e06875e55aca4ae0249.png
[d9d666a4272c4bceb73d14e0013efc6f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/681533aa85fc4772a6fa4e957d95ca65.png
[00661ff6c0894487ae0ff99ce5eb3101.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/70b8dbc4aece4a3a9688660ebc7c40a4.png
[5f2d6e4587e24f699a8a8807794ddf0f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a5f1e7a8b0b24a429288ed6fa50a4125.png
[d2780bb697e8434e8ab595539a69e6e3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2e6bc5bf0d5e4b0795b39793c1fd5718.png
[43c5f6fc3a0444639697a1db4a6caff3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/efcf2431e61e44fea5a9f2c8259141f4.png
[1983d66a036d4a7ba9541df6b8b1b5e1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b58ec5d3bee5474a94a6b0a601edb0fa.png
[97305ca68f074aae88f3d624066985d9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/66113acf413044a28949955a9c14500d.png
[bd1a033282fc4dca8ebea44ce6c07e1c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/20d52179d8c44c54b3158d44fe08faa8.png
[9288a83d866742ce921b0a9bc28ae38d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5cf5bde30b8341c4ae69987e98aca0d2.png
[d4079f838f254f7a94f3ebe3c94e642f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4da93a84a2864e5abc1bdef1af695aa6.png
[0db701c036264d569857468676857350.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0c40115e0bc94e70877d3aa311bafd97.png
[8163f188043c47a0ba898c15f1c11eed.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fa27f0e4933a4288aa826a303e6c244f.png