上线展示作业
- 简书博客
PC电商项目的展示地址、需求分析、代码展示、项目总结（遇到最难的问题，以及如何解决的）
1地址：
上线展示地址：http://qxu1141770290.my3w.com/cs-wzy/liangcang/index.html
2：PC电商项目（良仓）需求分析
先看一下什么是 需求分析：需求分析也称为软件需求分析、系统需求分析或需求分析工程等，是开发人员经过深入细致的调研和分析，准确理解用户和项目的功能、性能、可靠性等具体要求，将用户非形式的需求表述转化为完整的需求定义，从而确定系统必须做什么的过程。
需求分析：需求分析的目标是把用户对待开发软件提出的“要求”或“需要”进行分析与整理，确认后形成描述完整、清晰与规范的文档，确定软件需要实现哪些功能，完成哪些工作。
需求分析阶段的工作,可以分为四个方面：问题识别、分析与综合、制订规格说明、评审。
电商项目需求分析：网上购物主要包括：用户的登录、用户的注册、用户个人信息维护、商品浏览、网上购买。
用户登录，对用户登录输入的用户名密码进行验证。 用户注册，要求提供用户的详细资料。
用户个人信息维护，对用户个人资料及个人密码进行维护。
3 代码展示
1获取焦点：
$("#phone1").focus(function(){
if ($(this).val()=="请输入手机号") {
$(this).val("");
}
})
//失去密码
var phoneNum =document.getElementById("phone1")
var numStr=phoneNum.value;
$("#phone1").blur(function(){
if($(this).val()==""){
$(this).val("请输入手机号")
}else if($(this).val()==numStr){
$(this).val(numStr)
}
})
2 获取焦点时，input为空，失去焦点如果此时为空那就为默认值，如果输入值，那就为输入的值。就算再次获取焦点也没事。增加用户交互体验。
验证码插件：
$.idcode.setCode();
//修改位置 11-02
$("#gxCode").click(function(){
$.idcode.setCode();
})
$(function(){
$.idcode.setCode();
$("#Txtidcode").change(function(){
var isBy = $.idcode.validateCode()
console.log(isBy);
if(!isBy){
alert("验证码不正确")
}
})
})
3 验证码插件：首先要引入验证码的插件，在修改HTML里的id和class,
var isBy = $.idcode.validateCode()
返回的是true或false。这样就可以验证输入的值和验证码显示的值是否一致，从而增加if.
4 轮播图
// 轮播图
var i = 0;
var timer;
function autoPlay(){
timer = setInterval(function(){
i++;
if(i > 4){
i = 0;
}
$('.lunbotu ul li').eq(i).fadeIn().siblings('li').fadeOut();
$('.actinput span').eq(i).addClass('crrent').siblings().removeClass('crrent')
}, 3000)
}
autoPlay();
$(".lunbotu").hover(
function (){
clearInterval(timer);
},
function (){
autoPlay();
}
)
$(".btn-l").click(function (){
i--;
if(i < 0){
i = 4;
}
$('.lunbotu ul li').eq(i).fadeIn().siblings('li').fadeOut();
$('.actinput span').eq(i).addClass('crrent').siblings().removeClass('crrent');
})
$(".btn-r").click(function (){
i++;
if(i > 4){
i = 0;
}
$('.lunbotu ul li').eq(i).fadeIn().siblings('li').fadeOut();
$('.actinput span').eq(i).addClass('crrent').siblings().removeClass('crrent')
})
$(".actinput span").each(function(index) {
$(this).click(function() {
i = index;
$('.lunbotu ul li').eq(i).fadeIn().siblings('li').fadeOut();
$('.actinput span').eq(i).addClass('crrent').siblings().removeClass('crrent')
})
})
先保留i的值是全局变量，这样img/ btn/ 小圆点 就可以同步切换。
5：ajax 请求数据
// ajax 请求数据
var url = "http://h6.duchengjiu.top/shop/api_goods.php";
$.get(url, function (obj){
var arr = obj.data;
var img = "";
for(var i = 0; i < arr.length - 1; i++){
var item = arr[i];
if(i%3 == 0){
img += '<li class="li-first">'
img += '<a class="a-first" href="#"><img src="'
img += item.goods_thumb;
img += '" /><div><span>￥'
img += item.price;
img += '</span><h1>'
img += item.goods_name;
img += '</h1><p>'
img += item.goods_desc;
img += '</p></div></a></li>'
}else{
img += '<li>'
img += '<a class="a-first" href="#"><img src="'
img += item.goods_thumb;
img += '" /><div><span>￥'
img += item.price;
img += '</span><h1>'
img += item.goods_name;
img += '</h1><p>'
img += item.goods_desc;
img += '</p></div></a></li>'
}
}
$('.main02 ul').html(img);
})
讲真！ ajax杰哥讲的时候，感觉没有多难，课堂练习也都写出来了。但是！但是！ 真真动手做的时候，哇~ ajax 是啥啊！
不过在此次项目结束后，对ajax一系列流程，使用方法使用还是有进步的。
就拿登录注册页面的获取数据为例：
var url ="http://h6.duchengjiu.top/shop/api_user.php";
var data ={
status:"register",
username:numStr,
password:numStr1
}
console.log(data)
$.post(url,data,function(obj){
console.log(obj)
if (obj.code==0) {
alert("注册成功")
window.location.href="http://127.0.0.1:8020/liangcang/moreLogin.html";
}
})
1：引用封装好的js,
2: 注意对象的格式要求。赋值用：冒号，用逗号， 结束。
var url=" xxxxxx"
data={
A:a,
B:b,
C:c
}
3: 选择ajax的方法。 $.ajax()/$.get()/$.post()/.
ajax， 获取数据后拼接在指定 地方。这地方对我来说还是一个难点。做的少就这样，脑子里明白一点，实际操作起来那就成小白了，
拼接：定义一个模板，把变量拼接进去（注意是拼接变量不是字符串）。再遍历全部，就出来了。
<script>
for (var i = 23668; i < 23689; i++) {
var str =' '
document.write( str)
}
</script>
比如这个，把img的
4 项目总结
1：首先 分析项目的需求，规定，（多久时间完成，需求的效果能不能做出来，）
2：计划，不管咋样要有一个大体的计划，在每天花几分钟分析一计划再继续根据完成的情况再次制定计划，没有计划，执行起来很乱，心态也不是好。
3：和队友好好配合，多沟通，因为不是一个人在战斗，项目是一个团体完成的。
4： 基础知识，静态的HTML，CSS ,JS，AJAX,多多熟练，提高速度。
网友评论