每逢互联网上特定的购物节，各大电商平台都要抢着分一杯羹，除了所谓的电商巨头，有自身特色的小众电商商城跻身购物节的打拼行列中。就像阿里天猫商城双11狂欢购物节，表面上的各大会场上线，其实背后有坚强的程序员队伍做后盾。电商平台的兴起随着电商时代的行进愈演愈烈，如雨后春笋般成长。
近期，小组模仿良仓商城结合后端接口开展了项目。下面的图片基本囊括了本次项目要完成的页面有：1.首页；2.登录页；3.注册页；4.各分类二级页面——商店、杂志、分享、达人；5.商品搜索后的二级页面；6.商品详情页；7.商品结算页。
首页.png
一、项目需求分析和介绍
前端要完成的就是页面的布局和用户想要的功能的实现。需求就用户方面来说“注册登录”、“商品浏览”、“分类检索”、“添加到购物车”、“结算下订单”、“查看订单”、“用户信息查看及修改”、“信息反馈”。就企业即产品方面来说用户的需求及反馈就是产品不断打磨的助推器，既能满足用户的体验又能实现企业的宣传和盈利。
项目介绍：通过小组制定合理的计划，分工协作完成各页面的布局和功能。上面已经提到了此次项目要完成的页面，所用到的前端技术有——html、CSS、javascript、AJAX、jQuery框架。css、js文件建立单独的文件夹，每个页面也有单独的css、js文件。
页面.jpg
二、代码展示
小组中我承担的页面里我觉得有难点的是注册页面的功能实现，具有挑战性，也是自己认为编写的还不错的一部分。
html部分：
<div id="main">
<form id="regform" action="" method="post">
<div class="reg-tab">
<div class="reg-logo">
<a href="">
</a>
</div>
<div class="user do">
<span>用户名</span>
<input id="username" type="text" placeholder="3-20位字母数字下滑线">
<span id="info" style="color:red"></span>
</div>
<div class="authcode do">
<span>验证码</span>
<input id="Txtidcode" class="txtVerification" type="text" maxlength="4" placeholder="输入验证码">
<span id="idcode"></span>
</div>
<div class="passcode do">
<span>创建密码</span>
<input id="passcode" type="password" placeholder="6－20位字符组成，区分大小写">
</div>
<div class="conf-pwd do">
<span>确认密码</span>
<input id="conf-pwd" type="password" placeholder="确认密码">
<span id="info2">两次输入的密码不一致</span>
</div>
<div class="agree">
<input type="checkbox" name="" id="treaty">
<label for="treaty">同意</label>
<a href="">良仓注册条款</a>
</div>
<input type="button" value="立即注册" class="regBtn" onclick="reg()">
<div class="reglogin">
<a href="" class="quick-login icon-qq" title="QQ"></a>
<a href="" class="quick-login icon-sinaweibo" title="新浪微博"></a>
<a href="" class="quick-login icon-douban" title="豆瓣"></a>
<a href="" class="quick-login icon-qqweibo" title="腾讯微博"></a>
<a href="login.html" class="regLC" id="regLC">登录良仓</a>
</div>
</div>
</form>
</div>
css就不列出来了，接下来看下js部分：
function reg(){
if ( !testUser() )
{
$("#info").get(0).innerHTML = "请输入正确的用户名";
return ;
}
// 判断输入的两次输入的密码是否一致
var code1 = $("#passcode").get(0).value;
var code2 = $("#conf-pwd").get(0).value;
if(code1 != code2){
$("#info2").css("display","block");
}
var url = "http://h6.duchengjiu.top/shop/api_user.php";
//检测用户名是否已注册，通过结构，向后台发送请求
$.post(
url,
{
"status":"check",
"username":$("#username").get(0).value
},
function(obj){
if(obj.code == 0){
$("#info").get(0).innerHTML = obj.message;
}
if(obj.code == 2001){
$("#info").get(0).innerHTML = obj.message;
}
}
)
//传入用户名和密码两个参数，向后台发送请求，注册信息
var data = {
"status":"register",
"username":$("#username").get(0).value,
"password":$("#passcode").get(0).value
}
$.post(
url,data,
function(obj){
if(obj.code == 0){
$("#info").get(0).innerHTML = obj.message;
}
}
)
}
//正则表达式判断用户名是否符合要求
function testUser(){
var reg1 = /^[a-zA-Z]\w{2,19}$/
var str1 = username.value
if (reg1.test(str1))
{
return true
}
else
{
return false
}
}
三、项目中遇到的问题及解决方案
刚开始对于后台接口的应用与AJAX请求使用不熟练，获取数据多次不成功。解决办法就是单独地多次写demo，在控制台输出获取的数据，是否成功。再根据获得数据，进行分析排版。
页面图片会有很多，排版起来对于样式是有要求的。刚开始很吃力。其规律可以寻找的，抓住规律，命名号选择器，给具有相同样式的选择器添加样式。
登录注册页面的功能实现，登录成功后头部加载用户信息以及退出登录抹去用户信息。考虑到localStorage本地存储里获取用户的token值，进而判断用户是否处于登录状态。
四、项目心得
- 注意先看下页面排版是否有规律,写前先注意观察理清思路, 不然写在后面前进不得后退不能
- 做项目时把体系理清,分工要明确,文件命名统一
- 代码格式规范，选择器命名规则，避免css等污染
- 这次项目对我们暂时难度及工作量有点大,我们要定时做好知识点的回顾和demo练习
网友评论