项目需求
网上购物商城系统实际上是一个B/S结构的信息系统，本系统为前台用户部分。包括用户在线注册、登录、定购商品、浏览商品、查看订单、查看购物车、删除购物车等。
基于php网上购物商城系统（带毕业论文）
项目设计
用户在线注册、登录、定购商品、浏览商品、查看订单、查看购物车、删除购物车等。
开发工具
- 运行环境：wamp，window，谷歌浏览器
- 编程语言：php
- 开发软件：sublime
项目截图
当进入网站时，首先出现的是本网站的首页，首页包括本网站前台用户的所有功能菜单，界面美观。界面如下图所示：
主要代码：
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link rel="icon" href="favicon.ico" >
<script src="js/jquery-.min.js"></script>
<script src="js/template-native.js"></script>
<script src="js/index.js"></script>
<script src="js/base.js"></script>
<script type="text/template" id="template">
<% for(var i=0;i<souse.length;i++){%>
<div class="myPhone-shop-box">
<a href="javascript:void(0);"><img src="<%=souse[i].url%>"></a>
<a href="javascript:void(0);"><p><%=souse[i].text%></p></a>
<p><%=souse[i].price%></p>
</div>
<%}%>
</script>注册页面
主要代码：
<div class="w">
<div class="content">
<form action="info/register.php" method="POST">
<fieldset>
<legend>注册</legend>
<label>
用户名：<input type="text" placeholder="只能输入3-16个字母、数字、汉字" autofocus pattern="[a-zA-Z0-9\u4e00-\u9fa5]{3,16}" id="text" name="username">
</label>
<label>
设置密码：<input type="password" placeholder="只能输入6-16个字母、数字、下划线" pattern="(\w){6,16}" id="pwd1" name="password">
</label>
<label>
确认密码：<input type="password" placeholder="请再次输入密码" id="pwd2" name="repassword">
</label>
<input type="submit" name="" value="立即注册" id="sub">
</fieldset>
</form>
</div>
</div>登录页
主要代码：
<a href="index.html">返回商城</a>
<a href="register.html">点击注册</a>
<form action="info/login.php" method="POST">
<h3>用户登录</h3>
<input type="text" class="tp" placeholder="请输入用户名" name="username" />
<input type="password" class="tp" placeholder="请输入密码" name="password" />
<input type="submit" class="sr" value="登陆"/>
<input type="reset" class="sr" value="重置"/>
<span class="icon-users"></span>
<span class="icon-lock"></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</form>查看商品
主要代码：
<div class="w">
<div class="container clearfix">
<div class="container-left">
<img src="" alt="" id="img1">
<div class="mask"></div>
</div>
<div class="big">
<img src="" id="img2">
</div>
<div class="container-word">
<h1></h1>
<h2></h2>
<span>
<h3></h3>
</span>
<dl class="phoneColor f1">
<dt>机身颜色</dt>
<dd>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</dd>
</dl>
<dl class="phoneColor f2">
<dt>套餐类型</dt>
<dd>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</dd>
</dl>
<dl class="phoneColor f3">
<dt>存储容量</dt>
<dd>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</dd>
</dl>
<div class="container-word-num clearfix">
<i>数量</i>
<button>-</button>
<button id="num">1</button>
<button>+</button>
</div>
<div class="container-word-buy clearfix">
<button>立即购买</button>
<button>加入购物车</button>
</div>
</div>
<div class="container-img">
<img src="../images/fast.jpg" alt="">
</div>
</div>
</div>查看购物车
主要代码：
<link rel="stylesheet" type="text/css" href="../css/base.css">
<link rel="stylesheet" type="text/css" href="../css/car.css">
<script src="../js/jquery-3.2.0.min.js"></script>
<script src="../js/template-native.js"></script>
<script src="../js/car.js"></script>
<script type="text/template" id="template">
<div class="container-box">
<span class="img1">
<img src="<%=url%>" alt="">
</span>
<span class="text">
<p><%=h1%></p>
</span>
<span class="price">
<p><%=price%></p>
</span>
<span class="delete">
<button>删除</button>
</span>
</div>
</script>购买页面
主要代码：
<div class="w">
<div class="container">
<form action="../info/order.php" method="post">
<fieldset>
<legend>我的订单</legend>
<label>姓名:<input type="text" name="username" placeholder="请输入您的姓名" autofocus required></label>
<label>电话:<input type="text" name="telphone" placeholder="您输入11位手机号码" pattern="^(1)\d{10}$" required></label>
<label>地址:<input type="text" name="adress" placeholder="请填写您的收货地址" required></label>
<label>登录名:<input type="text" name="user" value="" id="lastText"></label>
<!-- <label id="last">您订购的产品为:<p>苹果</p></label> -->
<input type="submit" name="" value="确定提交订单">
</fieldset>
</form>
</div>
</div>查看订单
主要代码：
<link rel="stylesheet" type="text/css" href="../css/base.css">
<link rel="stylesheet" type="text/css" href="../css/car.css">
<script src="../js/jquery-3.2.0.min.js"></script>
<script src="../js/template-native.js"></script>
<script src="../js/myOrder.js"></script>
<script type="text/template" id="template">
<div class="container-box">
<span class="img1">
<img src="<%=url%>" alt="">
</span>
<span class="text">
<p><%=h1%></p>
</span>
<span class="price">
<p>￥<%=price%></p>
</span>
<!-- <span class="delete">
<button>删除</button>
</span> -->
<span class="sty">
<p><%=sty%></p>
</span>
</div>
</script>