良仓项目总结

需求分析：
作为一个电商网站，至少要有以下几个页面:主页、商品详情页、商品分类页、个人主页、登录、注册、购物车、结算。而我们这次的项目还有几个特别的页面：杂志、分享、达人。要做这么一个网站，首先，需要html和css进行构架以及美化样式，其次需要java script书写交互效果，最主要的还需要后端给我们数据，所以我们需要一个有数据的服务器。包括对API描述的一个文档。

代码展示：
期间遇到最大的问题就是缓存数据在各个网页之间的传递，以下是解决之后的代码

    //点击登录
    $("#loginbtn").click(function(){
    //请求数据
        //地址
        var url = "http://h6.duchengjiu.top/shop/api_user.php"
        //参数
        var data ={
            status:"login",
            username:$("#phonetext").val(),
            password:$("#password").val()
        }
        //返回结果
        $.post(url,data,function(str){
            if(str.code == 0){
                //保存账号
                $.cookie("name" ,$("#phonetext").val(),{expires: 7, path: "/"})
                    
                //如果勾选了自动登录，保存密码
                if ($("#checkBox").is(":checked")) {
                    $.cookie("word",$("#password").val(),{expires: 7, path: "/"})
                    
                }
                console.log(str)
                location.href = "liangcang/liangcang-shouye-cs-qiushuai.html"
            }else{
                alert(str.message)
            }
        })
    
})

var oPhone = document.getElementById("phonetext")
var oPassword = document.getElementById("password")

$(document).ready(function(){
    
    var name = $.cookie("name")
    var word = $.cookie("word")
    
    if (word == undefined) {
        word = ""
    }
    oPhone.value = name
    oPassword.value = word
    
    var url = "http://h6.duchengjiu.top/shop/api_user.php"
        //参数
        var data ={
            status:"login",
            username:$("#phonetext").val(),
            password:$("#password").val()
        }
    
        //返回结果
        $.post(url,data,function(str){
            if(str.code == 0){
                console.log(str)
                document.location.href = "liangcang/liangcang-shouye-cs-qiushuai.html"
            }
        })
})

点击登录按钮之后，请求数据，登录成功之后保存账号，如果勾选了自动登录，则保存密码。整体还不算完善，还有一点没有完成，勾选自动登录之后下次打开页面无法保存checked。

    $(document).ready(function(){
    
    var name = $.cookie("name")
    
    if ($.cookie("name") != ""||$.cookie("name") != undefined) {
        
        if($.cookie("name") != ""){
            $("#sign-up").get(0).innerHTML = name
            $("#sign-in").get(0).innerHTML = "注销"
        }
    }
})


    $("#sign-up").click(function(){

if ($("#sign-up").get(0).innerHTML != "登录") {
    $("#sign-up").get(0).href = "#"
}else{
    $("#sign-up").get(0).href = "../login.html"
    }
    })

    $("#sign-in").click(function(){

    if ($("#sign-in").get(0).innerHTML != "注册") {
    $("#sign-in").get(0).href = "#"
    return
    }else{
    $("#sign-in").get(0).href = "../register.html"
}

    $.cookie("name","",{expires: 7, path: "/"})
    $.cookie("word","",{expires: 7, path: "/"})

    $("#sign-up").get(0).innerHTML ="登录"
    $("#sign-in").get(0).innerHTML ="注册"

})

设定一个变量来保存cookeie中用户名的值，当这个值不等于null或者undefined的时候，将这个值用来替代主页中用户名所在位置box的innerHTML值

项目总结：
项目历时四天，直到最后我也没有写完全部项目内容，其一是因为时间太赶，其二呢是因为第一次做项目，走了很多的弯路。
比如说，在登录页面和主页之间缓存数据的传递，其实就是一个cookeie传值的问题。却困扰了我半天的时间，不断的调试与修改，就是找不到bug在哪里，最后发现两个bug：1、网页跳转的时候location所面对的对象是window，而不是document。2、在不同网页之间cookie传值最好是在cookeie的参数对象中加上一个地址，将所有的文件缓存数据都放到根目录中。
在这个项目中，我主要负责的是登录注册页面，登录和注册页面的框架很容易，设置一个大的div作为所有内容的父集，居中对齐，然后依次加入各个元素。设置好样式。最后加入动画效果，发送与请求数据。
注册页面相对于登录页面要难一些， 比如说对每个输入框的判断，如果分开来看，是非常容易的，写一个判断就可以了，但是要注重判断的顺序，而且判断当前的输入框。
而登录界面最大的难点就是在于登录之后cookie的传递，前文中已经用代码展示出来，传递中出现了很多bug，也是靠指导老师和同事们一起思考解决的。
还有一个难点在与注销用户的时候，清除cookeie时，会将用户名所在的box的innerHTML改变成undefined，这需要在最清除之后和js的最前端再添加一个判断。
这次项目实训，最大的收获是发现了自己有很多的不足，很多以前学过的知识缺少了练习之后就容易遗忘，练习的谐音也是联系。你不联系知识，知识就不会联系你。其次是缺少了实战经验，需要不断的去尝试和练习，以后一定要加强对基础的联系和页面架构逻辑的思考。最大的难点还是在请求数据这一方面上，请求数据之后的排版和字符串拼接、以及框架的拼接。还是需要不断的联系和巩固。