基于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的功能还有很多，在今后的学习中，会进一步去学习了解，真正去掌握这个框架的精髓。
此项目还存在一些不足，比如对图片的优化，网页布局等等都还存在有很大的改进空间，这部分也会是后期学习需要掌握并用来优化本次课程设计，制作过程中有很多地方需要边学边做，也遇到了很多难题，最后通过询问老师跟同学也得到了解决，在此感谢老师跟同学的帮助.