基于jQuery的在线商城设计与实现
哔哩哔哩视频视频
#1 网站需求分析
商城
1.1 主体说明
该网页包括了十一个页面,具体如下:
Index.html(首页)、reg.html(注册页面)、login.html(登录页面)、about.html(关于页面)、info.html(提交订单信息)、member.html(个人信息)、message.html(留言页面)、payply.html(付款页面)、shopcar.html(购物车页面)、Product.html(商品列表页)、pwd.html(管理密码页面),
图1.1 网页HTML文件
网站中Css文件夹为网站的所有样式文件:
图1.2 网页样式目录
网站的总体结构如下图:
图1.3 网页目录
网站JS文件:
图1.4 网页javascript文件目录
网站图片文件(imgs、pic):
图1.5 网页图片文件
具体说明:
网页是通过HTML+CSS+jQuery来实现的一个在线购物商城网页,模拟出某宝某东等大型购物系统来实现一个简单的静态购物网页,里面包括了首页、登录、注册、购物车、关于页、留言页、修改密码、个人中心(可查看账户信息)、付款页、商品列表页、填写信息页等十一个模块,里面每个模块通过标签来一一链接,可以实现点击跳转到指定的页面了。
1.2 设计思路
该网页设计,是基于jQuery来实现的一个家乡在线商城购物网页,主要就是通过HTML来布局整个网页,通过CSS文件来渲染整个网页,达到一个视觉效果,加上jQuery的强大功能来模拟出后台效果。主页整体效果如图:
下拉菜单:
图1.6 下拉菜单
导航栏:
图1.7 导航栏
轮播图:
图1.8 轮播图
登录注册按钮:
图1.9 登录注册
产品列表:
图1.10 产品列表
关于页面链接:
图1.11 关于我们
其他功能页面在分页说明部分。
1.3 网站总体结构(流程图)
图1.12 网页总体流程图
2 站点地图说明(画出树形图)
图2.1 站点地图
3 使用技术及运行环境说明
使用技术:HTML+CSS+jQuery框架
集成环境:Visual Studio Code
运行环境:Windows 7 /10 (64位/32位) 或者 Linux系统
浏览器: Google、火狐、QQ浏览器、IE等
4 主页详细说明(含截图、部分代码)
4.1首页中的注册、登录等页面链接实现,通过点击可直接到达指定页面:
代码:
<div class="top">
<div class="w1200">
<div class="left">您好,欢迎光临河池在线<a href="login.html">[登录]</a> <a href="reg.html">[注册]</a></div>
<div class="right"><a href="member.html">我的会员中心</a>|<a href="#">收藏夹</a>|<a href="#">服务中心</a>|<a href="#">在线客服</a>|<a href="#">购物车<b>5</b>件</a></div>
<div class="clear"></div>
</div>
</div>
实现效果:
图4.1 链接效果
4.2 下拉菜单
代码:
<div class="menu">
<div class="w1200">
<div class="item" id="nav"><a href="product.html" class="nav">河池各地特色商品分类</a>
<div class="nav_son">
<ul>
<li class="li01"><a href="#">河池凤山</a></li>
<li class="li02"><a href="#">河池都安</a></li>
<li class="li03"><a href="#">河池大化</a></li>
<li class="li04"><a href="#">河池罗城</a></li>
<li class="li05"><a href="#">河池宜州</a></li>
<li class="li06"><a href="#">河池环江</a></li>
<li class="li07"><a href="#">河池天峨</a></li>
<li class="li08"><a href="#">河池巴马</a></li>
<li class="li09"><a href="#">生活服务</a></li>
<li class="li10"><a href="#">其他</a></li>
</ul>
<div class="hover">
<div id="son">
<dl>
<dt>景点</dt>
<dd><a href="#">全部景点</a><a href="#" class="red">三门海</a><a href="#">猴山</a><a href="#">穿龙岩</a><a href="#">地质博物馆</a><a href="#">烈士陵园</a><a href="#">江州仙人桥</a><a href="#">万寿谷</a><a href="#">鸳鸯湖景区</a><a href="#">鸳鸯洞</a><a href="#">阴阳山</a><a href="#">江州地下长廊</a><a href="#">红军岩</a></dd>
<div class="clear"></div>
</dl>
<dl>
<dt>美食</dt>
<dd><a href="#">全部美食</a><a href="#" class="red">豆腐圆</a><a href="#">活血</a><a href="#">渣豆腐</a><a href="#">南瓜花酿</a><a href="#">凤山核桃</a><a href="#">猪龙碰</a><a href="#">凤山八角</a><a href="#">凤山油茶</a><a href="#">桂西北甜栗</a><a href="#">茄子酿</a></dd>
<div class="clear"></div>
</dl>
<dl>
<dt>美酒</dt>
<dd><a href="#">全部美酒</a><a href="#" class="red">米酒</a><a href="#">葡萄酒</a><a href="#">东兰米酒</a><a href="#">天龙泉</a><a href="#">甜酒</a></dd>
<div class="clear"></div>
</dl>
<dl>
<dt>水果</dt>
<dd><a href="#">全部水果</a><a href="#" class="red">甘蔗</a><a href="#">橙子</a><a href="#">苹果</a><a href="#">梨子</a><a href="#">西红柿</a><a href="#">鸡血李</a><a href="#">雪梨</a><a href="#">葡萄</a></dd>
<div class="clear"></div>
</dl>
</div>
……
效果:
图4.2 下拉菜单
4.3 轮播图
代码:
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 mengjia 070816
var Speed = 10; //速度(毫秒)
var Space = 10; //每次移动(px)
var PageWidth = 404; //翻页宽度
var fill = 0; //整体移位
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = fill;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
AutoPlay();
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval
('document.all.'+objName)}}
function AutoPlay(){ //自动滚动
……
效果:
图4.3 轮播图
图4.4 轮播图
4.4 限时抢购
代码:
<div class="float2">
<ul>
<li><a href="#a01" class="a01 on" id="idx01">限时抢购</a></li>
<li><a href="#a02" class="a02" id="idx02"></a></li>
<li><a href="#a03" class="a03" id="idx03"></a></li>
<li><a href="#a04" class="a04" id="idx04"></a></li>
<li><a href="#a05" class="a05" id="idx05"></a></li>
<li><a href="#a06" class="a06" id="idx06"></a></li>
</ul>
</div>
<script language="javascript" type="text/javascript">
$(function () {
var dv = $(".idx01").offset().top;
var dv2 = $(".idx02").offset().top;
var dv3 = $("#idx03").offset().top;
var dv4 = $("#idx04").offset().top;
var dv5 = $("#idx05").offset().top;
var dv6 = $("#idx06").offset().top;
window.οnscrοll=function(){
if(dv<document.body.scrollTop)
{
$(".float2 a").removeClass("on");
$(".float2 .a01").addClass("on");
效果:
图4.5 自动/手动切换
这里也可以理解成轮播图,只是切换的时间跟偏移量不同。
这里放了六张轮播图照,这里列举靓照效果图,每隔五秒自动切换。
4.5 特色商品
代码:
<div class="idx02">
<dl>
<dt>河池特色</dt>
<dd>
<div class="item big">
<a href="#" class="title">罗城野生毛葡萄酒</a>
<p><font>¥</font>100.<font>00</font></p>
<a href="#" class="buy"></a>
<img src="pic/img4.jpg"/>
</div>
……
效果:
图4.6 河池特色
剩余的新平上市、热销产品、精品推荐的跟上面的特色商品的实现方法是相同的,这里就不一一截图说明了。
4.6 左边的导航框
代码:
<div class="float2">
<ul>
<li><a href="#a01" class="a01 on" id="idx01">限时抢购</a></li>
<li><a href="#a02" class="a02" id="idx02"></a></li>
<li><a href="#a03" class="a03" id="idx03"></a></li>
<li><a href="#a04" class="a04" id="idx04"></a></li>
<li><a href="#a05" class="a05" id="idx05"></a></li>
<li><a href="#a06" class="a06" id="idx06"></a></li>
</ul>
</div>
……
效果:
图4.7 左边导航栏
点击左边的小框即可定位到对应的栏目。
4.6 底部说明
代码:
<div class="footer">
……
<div class="w1200">
<div class="bottom">
<a href="#">关于我们</a>|<a href="#">帮助中心</a>|<a href="#">法律声明</a>|<a href="#">用户协议</a>|<a href="#">联系我们</a>|<a href="#">人才招聘</a>|<a href="#">站点地图</a>
<p>网络工程<br />© 2020 广西桂林理工大学博文管理学院. 网络工程 刘政来 18300218</p>
<p class="p02"><img src="pic/ico25.jpg"/><img src="pic/ico26.jpg"/><img src="pic/ico27.jpg"/><img src="pic/ico36.jpg"/><img src="Picture/ico37.jpg"/></p>
</div>
</div>
……
效果:
图4.8 底部说明
5 分页说明(含截图、部分代码)
5.1 注册界面
核心代码:
function checkUsername(){
var username = document.getElementById("username").value;
var reg_username = /^\w{6,12}$/;
var flag = reg_username.test(username);
var s_username = document.getElementById("s_username");
if(flag){
s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
}else{
s_username.innerHTML = "用户名格式有误";
}
return flag;
}
function checkPassword(){
var password = document.getElementById("password").value;
var reg_password = /^\w{6,12}$/;
var flag = reg_password.test(password);
var s_password = document.getElementById("s_password");
if(flag){
s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
}else{
s_password.innerHTML = "密码格式有误";
}
return flag;
}
……
</script>
效果:
图5.1 注册
这里采用正则表达式来完成账号密码等输入匹配,若不按规定的格式输入则显示如图信息。
5.2 登录页面
代码:
function p1(){
document.getElementById("q1").innerHTML="";
document.getElementById("q2").innerHTML="";
var name = document.getElementById("name").value;
var pw = document.getElementById("pw").value;
if(name==""){
document.getElementById("q1").innerHTML="用户名不能为空";
onover();
return;
}
if(name=="liuzhenglai"){
if(pw=="18300218"){
window.location.href ="shopcar.html";
}else{
document.getElementById("q2").innerHTML="密码错误!";
}
}else{
document.getElementById("q1").innerHTML="用户名错误!";
}
}
……
效果:
图5.2 登录页面
这里规定了账号密码必须是名字的拼音跟学号,否则进不了管理界面。
5.3 购物车
代码:
<div class="cartBox">
<div class="shop_info">
<div class="all_check">
<!--店铺全选-->
<input type="checkbox" id="shop_a" class="shopChoice">
<label for="shop_a" class="shop"></label>
</div>
<div class="shop_name">
店铺:<a href="javascript:;">河池艺术生活</a>
</div>
</div>
……
效果:
图5.3 购物车主要元素
图5.4 删除商品
5.4 关于页面
代码:
<div class="flex ">
<div>
<span class="icon fa-car"></span>
<h3>关于河池</h3>
<a href="https://baike.baidu.com/item/%E6%B2%B3%E6%B1%A0/742924?fr=aladdin" class="button">了解更多!</a>
</div>
<div>
<span class="icon fa-camera"></span>
<h3>留言板</h3>
<a href="message.html" class="button">点击我留言!</a>
</div>
<div>
<span class="icon fa-bug"></span>
<h3>更多产品敬请期待!</h3>
<p><a href="index.html" class="button">回到首页</a></p>
</div>
</div>
……
效果:
图5.5 关于页
这里的会员中心点击会跳转到member.html页面,点击购物车则跳转到购物车,下面的“关于河池”,点击则会跳转到河池的百度首页,留言板对应跳转到留言板,最底下的按钮则可回到首页,效果如下:
图5.6 回到主页
图5.7 点击会员中心
图5.8 点击购物车
图5.9 点击关于河池
图5.10 点击留言
5.5 留言板
代码:
<div class="box">
<span>留言板</span>
<textarea name="" id="" cols="30" rows="10" class="text"></textarea>
<button>发布</button>
<ul></ul>
</div>
<script>
$("button").on("click", function () {
var li = $("<li></li>");
li.html($(".text").val() + "<a href='javascript:;'>删除<a>");
$("ul").prepend(li);
li.slideDown();
$(".text").val("");
})
$("ul").on("click", "a", function () {
$(this).parent().slideUp(function () {
$(this).remove();
})
})
</script>
……
效果:
图5.11 留言板
这里点击留言可以实现发布,删除功能。
5.6 产品列表
代码:
<div class="w1200">
<div class="position"><a href="#">首页</a> > <a href="#">家居家访</a></div>
……
效果:
图5.12 列表页
5.7 个人中心
代码:
<div class="right">
<dl class="dl01">
<dt><img src="pic/ico04.jpg"/></dt>
<dd>
<table width="725" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="416" class="td01">尊敬的,<font>刘政来</font> 您好!<span>(普通会员)</span></td>
<td width="44">余额:</td>
<td width="122"><span>10000000元</span></td>
<td width="56" align="right">可用:</td>
<td width="87"><span>1000000元</span></td>
</tr>
<tr>
<td>还没有上传头像? 点击<a href="#">上传头像</a><a class="save" href="#">保存</a></td>
<td>冻结:</td>
<td><span>0.000元</span></td>
<td align="right">已提现:</td>
<td><span>5000元</span></td>
</tr>
……
效果:
图5.13 个人中心
5.8 修改密码
代码:
<dt>
<span>修改密码</span>
</dt>
<dd>
<div class="item"><span><font>*</font>原密码:</span><input type="tex" class="txt"/></div>
<div class="item"><span><font>*</font>新密码:</span><input type="tex" class="txt"/></div>
<div class="item"><span><font>*</font>确认密码:</span><input type="tex" class="txt"/></div>
<div class="item"><input type="submit" class="sub" value="确认修改"/></div>
</dd>
</dl>
</div>
……
效果:
图5.14 修改密码
5.9 填写订单信息
代码:
<dl class="info">
<dt><span>确认收货地址</span></dt>
<dd>
<div class="item"><span><font>*</font>所在地区:</span><select><option value="广东省">广东省</option></select><select><option value="深圳市">深圳市</option></select><input type="tex" class="txt"/></div>
<div class="item"><span><font>*</font>邮政编码:</span><input type="tex" class="txt"/></div>
<div class="item">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="8%"><span><font>*</font>详细地址:</span></td>
<td width="92%"><textarea></textarea></td>
</tr>
</table>
</div>
<div class="item"><span><font>*</font>收货人姓名:</span><input type="tex" class="txt"/></div>
<div class="item"><span><font>*</font>手机:</span><input type="tex" class="txt"/></div>
<div class="item"><span><font>*</font>电话:</span><input type="tex" class="txt"/></div>
<div class="item"><input type="submit" class="sub" value="保存收货人信息"/></div>
</dd>
</dl>
效果:
图5.15 订单页
6 版权说明
代码:
<div class="bottom">
<a href="#">关于我们</a>|<a href="#">帮助中心</a>|<a href="#">法律声明</a>|<a href="#">用户协议</a>|<a href="#">联系我们</a>|<a href="#">人才招聘</a>|<a href="#">站点地图</a>
<p>网络工程<br />© 2020 网络工程 刘政来 18300218</p>
<p class="p02"><img src="pic/ico25.jpg"/><img src="pic/ico26.jpg"/><img src="pic/ico27.jpg"/><img src="pic/ico36.jpg"/><img src="pic/ico37.jpg"/></p>
</div>
……
效果:
图5.16 版权说明
7 课程总结(不少于300字)
通过本次课程设计,真实体验到了做一个网页的难度有多大,首先从网页布局,之这点就够思考挺久的了,在参考了网上的一些优秀网页后,才追歼做出一点东西出来,如果这个网页不使用jQuery框架来实现的话,工作量跟工作难度会只能加很多很多,jQuery在网页制作中发挥了很大的作用。
jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率。
本次商城制作主要学习如何来使用jQuery操作DOM,其实就是学习jQuery封装好的那些功能方法,这些方法叫做API(Application Programming Interface应用程序编程接口)。这只是其中的一小部分功能,jQuery的功能还有很多,在今后的学习中,会进一步去学习了解,真正去掌握这个框架的精髓。
此项目还存在一些不足,比如对图片的优化,网页布局等等都还存在有很大的改进空间,这部分也会是后期学习需要掌握并用来优化本次课程设计,制作过程中有很多地方需要边学边做,也遇到了很多难题,最后通过询问老师跟同学也得到了解决,在此感谢老师跟同学的帮助.