Web简易二手网购网页
一、开发背景
随着Internet 国际互联网的发展，越来越多的企业开始建造自己的网站。基于Internet的信息服务、商务服务已经成为现代企业一项不可缺少的内容。很多企业都已不满足于建立一个简单的仅仅能够发布信息的静态网站。现代企业需要的是一个功能强大的，能提供完善的电子商务服务的动态商务网站。同时人们的生活方式也在随着发生改变，传统的购物方式已不能满足人们的需求。本网页用Visual Studio 2010为开发工具，应用css文件和 js文件，构建了一个能实现基本的电子商务的小型动态商务网站――黑工业二手交易平台。该平台能实现用户的注册、登录功能;能够实现商品的查询，购买等功能。该系统基本上具备一个网上商品销售系统应该具备的常用功能。
二、开发目的
随着互联网时代的兴起，我们可以在网上购买自己的各种生活用品，但是如果我们买的东西不适合自己，或者是一时的喜欢，又或者看上了更新换代的新产品，那我们手里的东西丢点可能有点浪费了，或许你不想要的东西别人觉得还有用，为了能够充分利用物品,免得当垃圾扔掉,节能环保,可以促进人员的就业和经济的发展,对人类的可持续发展作用巨大，也可以让人们可以珍惜用过的物品,不会随便破坏掉。于是就开发了黑工业二手交易平台，方便大家把闲置不用的东西以低价交换的形式处理给其他需要这些东西的人们，发展循环经济，各取所需，为建设节约型社会尽一份力。促进资源循环利用和综合利用，为社会节约财富。
三、整体构架
四、流程及功能
1、创建项目目录
首先创建一个总目录，然后在此目录中创建images、css、js三个目录，三个目录中分别放图片、css文件以及js文件。
2、集图
提前下载好本网页所需要的全部图片及视频，并把它们命名为有意义的名字，方便在使用过程中更快捷，所使用图片需要是带图层的JPG、PNG格式。
3、新建html文件，新建css文件和Java脚本js文件。
4、根据自己想要的风格，编写html和css代码。
4.1建立一个index.html网页，这是一个网页的首页，
①设计顶部，其顶部包含了名称、登录、注册、消息，主要应用了href超文本引用；
写一个登录login.html网页：收集正确输入的用户名/邮箱/电话号和密码，同时该界面也提供修改密码和注册功能，当点击注册时会自动跳到注册界面进行注册。
登录功能。这是为老顾客而设的，其目的是为顾客创造一个友好的环境，并且让他知道自己上次离站的时间等信息，是一个简单用于登录、判断用户填写正确与否的程序。如果登录成功，则再把这次信息写入数据库，重新更新数据库信息，并启动其他线程以便于用户购物。
写一个注册register.html网页：收集正确的手机号、两次相同的密码、图形验证码、手机号验证码并勾选服务协议来进行注册，当注册成功后自动跳到登录的网页进行登录。
注册功能。这是用于第一次进入网站，并有兴趣在本网站购买东西的顾客而设的，具有提醒第一次进入本站的用户注册的功能。另外用户注册页面应有一个介绍和解释本站详细功能的说明，并附上同意与否的按钮和一个用于提示用户填写详细资料的表，并划分出是否为必填或其他。同时还需要有基本的判断功能，对用户填写的资料的正确与否进行判断，然后返回相应的信息，还能够把用户提供的信息返回，建立一个数据库，并把这些信息写入数据库。
②设计导航，大量应用了js文件中的触碰显示，当点击了带有链接的按钮时，会自动跳转到下一个网页，对商品进行进一步的详情，如手机、华为mate40Pro；然后设计搜索，用action规定当提交表单时,向何处发送表单数据，用placeholder 提供可描述输入字段预期值的提示信息；
③设计轮播导航，总共有五张图片，设置两个prev按钮来进行左右切换；
④设计内容区，用一系列的box来装各种商品的图片、名称、成色和价格。
4.2建立一个sousuo.html搜索网页，可以通过index.html网页中点击“手机”进入。它是一个全是手机商品的网页，可以对手机详细的观看。也包括了index.html网页中的顶部设计，导航设计，这里多了一个面包屑导航，抓住你点击的路径，利用::.before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。:.before需要使用content属性来指定内容的值。在这个界面点击有链接的商品会自动跳到相关的商品详情页，例如，华为mate40Pro。
4.3建立一个xiangqing.html详情网页，可以通过sousuo.html中点击“华为mate40Pro”商品进入。也包括了index.html网页中的顶部设计，导航设计，同时也用了轮播设计来展示该手机的不同方位的视觉、不同手机颜色。也用相关的box来装手机的名字、颜色、价格等。
a、写一个支付pay.html网页，设计订单号、支付金额、选择支付方式（微信、支付宝、银行卡）并附商家收款二维码，当在手机详情xiangqing.html网页点击了立即购买后，会自动跳到该支付pay.html网页进行支付。
四、总结
在开发过程中也深刻的认识到了自己的不足，看到了自己与诸多同学之间的差距。在专业知识方面，对于js获取前端的数据的部分知识的掌握还有欠缺。在使用java代码处理数据库的时候很多的代码是类似的，但是没有对其进行代码的抽象与多次调用。在系统代码的冗余上有较大的的进步空间。其次，在开发中由于自己的审美不是那么的好，虽然前端的页面和后端的连接已经数据的处理都已经基本完后了。但是，界面的美观度和使用舒适度还有很大的进步空间。同时，设计的过程不单单是一个检验学习成果的过程，更是一个利用两周的时间对于相应课程的知识查漏补缺，以及知识的深化升华的过程。课设查阅资料的时候也更加全面广泛的了解了java web的诸多的知识。之前的课本知识总是给人一种碎片化的感觉，诸多的知识都是学了基础，但是又没有将其升华起来。但是课程设计正好弥补了这个问题。将所有知识进行了串接。在查询资料的同时也深感计算机java web知识的更新换代速度之快。很多的知识在一出现的一段时间内可能很火，但是在经过一段不长的时间之后就立马会有更加新的，前沿的知识出现。因此，在计算机前端的学习中我们不仅仅是要学习基本知识，更要懂得时刻追溯技术的前沿，时刻学习，不能止步。在掌握java web基础的知识之后，更多的尝试学习前沿的知识。注重开发的实践。总体来说本次的java web程设计从整体上独立完成了一个系统的开发。为之后多项专业课的学习打下了坚实的基础，也是一个检验自己前端HTML、CSS、javasvript 后台的java与数据库知识掌握程度的机会，在此次设计中收获颇丰，希望自己能够在之后的更多的设计中吸取本次课设的经验和教训。珍惜每一次课设的机会。
部分源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>黑工业二手交易平台</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="js/index.js"></script>
<!-- 默认样式表 -->
<link rel="stylesheet" href="css/reset.css" />
<!-- 公共的CSS -->
<link rel="stylesheet" href="css/style.css" />
<!-- 首页的CSS -->
<link rel="stylesheet" href="css/index.css" />
<!-- 引入网页图标 -->
<link rel="stylesheet" href="font/iconfont.css" />
<link rel="icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon" />
</head>
<body>
<!-- 顶部 -->
<div class="page-top">
<div class="container">
<div class="top-lt">
<a href="">黑工业二手交易平台</a>
<span>｜</span>
</div>
<div class="top-gt">
<div class="car-box">
<div class="tit">
<a href="" class="tit">
</div>
</div>
<div class="login">
<a href="login.html">登陆</a>
<span>｜</span>
<a href="register.html">注册</a>
<span>｜</span>
<a href="">消息</a>
</div>
</div>
</div>
</div>
<!-- 导航 -->
<div class="page-nav">
<div class="container">
<a href="" class="logo">
<ul>
<li><img src="img/hgy.png"></li>
<li><img src="img/hgy.png"></li>
</ul>
</a>
<div class="nav">
<ul class="nav">
<li class="nav-item" id="page-all-nav">
<a href="" class="tit">全部商品</a>
<!-- 全部分类下拉菜单 -->
<div class="slider-nav">
<ul class="slider-ul">
<li class="slider-li">
<a href="sousuo.html" class="name">
<span>手机</span>
<i class="iconfont icon-weibiaoti34"></i>
<div class="slider-pop">
<a href="" class="pop-li">
<img src="img/images/iphonex.jpg" alt="">
<p>iphonex</p>
</a>
<a href="sousuo.html" class="pop-li">
<img src="img/images/hw.png" alt="">
<p>华为mate40pro</p>
</a>
</div>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>手表</span>
<i class="iconfont icon-weibiaoti34"></i>
<div class="slider-pop">
<a href="" class="pop-li">
<img src="img/images/dw.png" alt="">
<p>dw</p>
</a>
<a href="" class="pop-li">
<img src="img/images/dw1.png" alt="">
<p>dw</p>
</a>
</div>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>笔记本</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>鞋服</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>摄像机</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>智能</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>电源</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>无人机</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="sousuo.html" class="name">
<span>耳机</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="" class="tit">手机</a>
<div class="pop">
<ul class="down-ul container">
<li class="down-li">
<a href="" class="pic">
<img src="img/images/aa.jpg" />
</a>
<h3 class="name">小米9</h3>
<p class="price">2999元</p>
<i></i>
</li>
<li class="down-li">
<a href="xiangqing.html" class="pic">
<img src="img/images/hw.png" />
</a>
<h3 class="name">华为mate40</h3>
<p class="price">5999元</p>
<i></i>
</li>
<li class="down-li">
<a href="" class="pic">
<img src="img/images/iphone12.png" />
</a>
<h3 class="name">iphone12</h3>
<p class="price">6999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="" class="tit">手表</a>
<div class="pop">
<ul class="down-ul container">
<li class="down-li">
<a href="" class="pic">
<img src="img/images/dw1.png" />
</a>
<h3 class="name">dw</h3>
<p class="price">999元</p>
<i></i>
</li>
<li class="down-li">
<a href="" class="pic">
<img src="img/images/11.png" />
</a>
<h3 class="name">绿水鬼</h3>
<p class="price">2999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="" class="tit">摄像机</a>
<div class="pop">
<ul class="down-ul container">
<li class="down-li">
<a href="" class="pic">
<img src="img/images/22.png" />
</a>
<h3 class="name">相机</h3>
<p class="price">999元</p>
<i></i>
</li>
<li class="down-li">
<a href="" class="pic">
<img src="img/images/23.png" />
</a>
<h3 class="name">相机</h3>
<p class="price">999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="" class="tit">笔记本</a>
</li>
<li class="nav-item">
<a href="" class="tit">化妆品</a>
</li>
<li class="nav-item">
<a href="" class="tit">路由器</a>
</li>
<li class="nav-item">
<a href="" class="tit">智能硬件</a>
</li>
</ul>
</div>
<!-- <div class="search active"> -->
<!-- 搜索 -->
<div class="search">
<form action="" method="post">
<input type="text" class="q" placeholder="手机"/>
<input type="submit" value="" class="btn" />
</form>
</div>
</div>
</div>
<!-- 轮播导航 -->
<div class="idx-banner container">
<ul class="banner-list">
<li class="on"><img src="img/images/x.png" alt="" /><a href=""></a></li>
<li><img src="img/images/dw.png" alt="" /><a href=""></a></li>
<li><img src="img/images/iphone12.png" alt="" /><a href=""></a></li>
<li><img src="img/images/4.png" alt="" /><a href=""></a></li>
<li><img src="img/images/5.png" alt="" /><a href=""></a></li>
</ul>
<a class="btn prev"></a>
<a class="btn next"></a>
<div class="page">
<a class="on"><span>1</span></a>
<a><span>2</span></a>
<a><span>3</span></a>
<a><span>4</span></a>
<a><span>5</span></a>
</div>
</div>
<!-- 大内容区 -->
<div class="idx-container">
<!-- 广告图 -->
<div class="idx-adv container">
<a href=""><img src="img/images/00.png"></a>
</div>
<div class="container">
<!-- 手机 -->
<div class="idx-title">
<span class="tit">二手宝贝</span>
<a class="see-all" href="">查看全部<i class="iconfont icon-xiangyou3fill"></i></a>
</div>
<div class="idx-box">
<div class="adv-box col-5">
<a href="" class="single"><img src="img/images/aa.jpg"></a>
</div>
<div class="good-box">
<div class="col-5 good-item">
<a href="" class="pic"><img src="img/images/good1.png" /></a>
<h3 class="name"><a href="">Note 9 Pro</a></h3>
<h4 class="desc">95新</h4>
<p class="price"><span>1599元</span></p>
</div>
<div class="col-5 good-item">
<a href="" class="pic"><img src="img/images/good2.jpg" /></a>
<h3 class="name"><a href="">oppor9</a></h3>
<h4 class="desc">9成新</h4>
<p class="price"><span>599元</span></p>
</div>
<div class="col-5 good-item">
<a href="" class="pic"><img src="img/images/good3.jpg" /></a>
<h3 class="name"><a href="">索尼</a></h3>
<h4 class="desc">9成新</h4>
<p class="price"><span>899元</span></p>
</div>
<div class="col-5 good-item">
<a href="" class="pic"><img src="img/images/good4.jpg" /></a>
<h3 class="name"><a href="">iwc</a></h3>
<h4 class="desc">8成新</h4>
<p class="price"><span>1299元</span></p>
</div>
<div class="col-5 good-item">
<a href="" class="pic"><img src="img/images/good5.jpg" /></a>
<h3 class="name"><a href="">华为笔记本</a></h3>
<h4 class="desc">85新</h4>
<p class="price"><span>2099元起</span></p>
</div>
<div class="col-5 good-item">
<a href="" class="pic"><img src="img/images/good6.jpg" /></a>
<h3 class="name"><a href="">无人机</a></h3>
<h4 class="desc">9成新</h4>
<p class="price"><span>699元起</span></p>
</div>
<div class="col-5 good-item">
<a href="" class="pic"><img src="img/images/good7.jpg" /></a>
<h3 class="name"><a href="">NIKE鞋子</a></h3>
<h4 class="desc">5成新</h4>
<p class="price"><span>59</span></p>
</div>
<div class="col-5 good-item">
<a href="" class="pic"><img src="img/images/good8.jpg" /></a>
<h3 class="name"><a href="">耳机</a></h3>
<h4 class="desc">8成新</h4>
<p class="price"><span>49元</span></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
``
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>黑龙江工业学院二手交易平台</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script src="js/sousuo.js"></script>
<!-- 默认样式表 -->
<link rel="stylesheet" href="css/reset.css" />
<!-- 公共的CSS -->
<link rel="stylesheet" href="css/sousuo.css" />
<!-- 引入网页图标 -->
<link rel="stylesheet" href="font/iconfont.css" />
<link rel="icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon" />
</head>
<body>
<!-- 顶部 -->
<div class="page-top">
<div class="container">
<div class="top-lt">
<a href="">黑工业二手交易平台</a>
<span>｜</span>
</div>
<div class="top-gt">
<div class="car-box">
</div>
<div class="login">
<a href="login.html">登陆</a>
<span>｜</span>
<a href="register.html">注册</a>
<span>｜</span>
<a href="">消息</a>
</div>
</div>
</div>
</div>
<!-- 导航 -->
<div class="page-nav">
<div class="container">
<a href="" class="logo">
<ul>
<li><img src="img/hgy.png"></li>
<li><img src="img/hgy.png" ></li>
</ul>
</a>
<div class="nav">
<ul class="nav">
<li class="nav-item" id="page-all-nav">
<a href="" class="tit">全部商品</a>
<!-- 全部分类下拉菜单 -->
<div class="slider-nav">
<ul class="slider-ul">
<li class="slider-li">
<a href="" class="name">
<span>手机</span>
<i class="iconfont icon-weibiaoti34"></i>
<div class="slider-pop">
<a href="" class="pop-li">
<img src="img/images/iPhone12.png" alt="">
<p>iPhone12</p>
</a>
<a href="" class="pop-li">
<img src="img/images/sm.png" alt="">
<p>小米10 青春版</p>
</a>
</div>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>手表</span>
<i class="iconfont icon-weibiaoti34"></i>
<div class="slider-pop">
<a href="" class="pop-li">
<img src="img/images/11.png" alt="">
<p>绿水鬼手表</p>
</a>
<a href="" class="pop-li">
<img src="img/images/dw1.png" alt="">
<p>dw手表</p>
</a>
</div>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>笔记本</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>鞋服</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>摄像机</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>路由器</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>智能</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>电源</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>无人机</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>耳机</span>
<i class="iconfont icon-weibiaoti34"></i>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="" class="tit">手机</a>
<div class="pop">
<ul class="down-ul container">
<li class="down-li">
<a href="" class="pic">
<img src="img/images/aa.jpg" />
</a>
<h3 class="name">小米9</h3>
<p class="price">2999元</p>
<i></i>
</li>
<li class="down-li">
<a href="" class="pic">
<img src="img/images/hw.png" />
</a>
<h3 class="name">华为mate40Pro</h3>
<p class="price">4999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="" class="tit">手表</a>
<div class="pop">
<ul class="down-ul container">
<li class="down-li">
<a href="" class="pic">
<img src="img/images/11.png" />
</a>
<h3 class="name">绿水鬼</h3>
<p class="price">1999元</p>
<i></i>
</li>
<li class="down-li">
<a href="" class="pic">
<img src="img/images/dw.png" />
</a>
<h3 class="name">dw手表</h3>
<p class="price">999元</p>
<i></i>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="" class="tit">摄像机</a>
</li>
<li class="nav-item">
<a href="" class="tit">笔记本</a>
</li>
<li class="nav-item">
<a href="" class="tit">化妆品</a>
</li>
<li class="nav-item">
<a href="" class="tit">路由器</a>
</li>
<li class="nav-item">
<a href="" class="tit">智能硬件</a>
</li>
</ul>
</div>
<!-- <div class="search active"> -->
<!-- 搜索 -->
<div class="search">
<form action="" method="post">
<input type="text" class="q" placeholder="" />
<input type="submit" value="" class="btn" />
</form>
</div>
</div>
</div>
<!-- 面包屑导航 -->
<div class="breadcrumbs">
<div class=" container">
<a href="">首页</a>
<i class="iconfont icon-right"></i>
<a href="">全部结果</a>
<i class="iconfont icon-right"></i>
<span>手机</span>
</div>
</div>
<!-- 商品区 -->
<div class="main-container">
<div class="container">
<div class="gooditem">
<div class="singleitem">
<a href="xiangqing.html" class="pic"><img src="img/images/hw.png" /></a>
<h3 class="name"><a href="">华为mate40Pro</a></h3>
<p class="price"><span>4999元</span></p>
</div>
<div class="singleitem">
<a href="" class="pic"><img src="img/images/s2.jpg" /></a>
<h3 class="name"><a href="">iPhone</a></h3>
<p class="price"><span>899</span></p>
</div>
<div class="singleitem">
<a href="" class="pic"><img src="img/images/s3.jpg" /></a>
<h3 class="name"><a href="">三星</a></h3>
<p class="price"><span>600元</span></p>
</div>
<div class="singleitem">
<a href="" class="pic"><img src="img/images/s4.jpg" /></a>
<h3 class="name"><a href="">iPhone</a></h3>
<p class="price"><span>500元</span></p>
</div>
<div class="singleitem">
<a href="" class="pic"><img src="img/images/s5.jpg" /></a>
<h3 class="name"><a href="">小米</a></h3>
<p class="price"><span>700</span></p>
</div>
<div class="singleitem">
<a href="" class="pic"><img src="img/images/s6.jpg" /></a>
<h3 class="name"><a href="">iPhone</a></h3>
<p class="price"><span>650元</span></p>
</div>
<div class="singleitem">
<a href="" class="pic"><img src="img/images/s7.jpg" /></a>
<h3 class="name"><a href="">金立</a></h3>
<p class="price"><span>629元</span></p>
</div>
<div class="singleitem">
<a href="" class="pic"><img src="img/images/s8.jpg" /></a>
<h3 class="name"><a href="">iPhone</a></h3>
<p class="price"><span>825元</span></p>
</div>
<div class="singleitem">
<a href="" class="pic"><img src="img/images/s9.jpg" /></a>
<h3 class="name"><a href="">iPhone</a></h3>
<p class="price"><span>699元</span></p>
</div>
<div class="singleitem">
<a href="" class="pic"><img src="img/images/s10.jpg" /></a>
<h3 class="name"><a href="">iPhone</a></h3>
<p class="price"><span>599元</span></p>
</div>
<div class="singleitem">
<a href="" class="pic"><img src="img/images/s11.jpg" /></a>
<h3 class="name"><a href="">VIVO</a></h3>
<p class="price"><span>499元</span></p>
</div>
<div class="singleitem">
<a href="" class="pic"><img src="img/images/s12.jpg" /></a>
<h3 class="name"><a href="">iPhone</a></h3>
<p class="price"><span>699元</span></p>
</div>
</div>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
