良倉プロジェクトまとめ

4568 ワード

需要分析:電子商取引のウェブサイトとして、少なくとも以下のページがあります.ホームページ、商品の詳細ページ、商品分類ページ、個人ホームページ、登録、登録、ショッピングカート、決済.今回のプロジェクトにはいくつかの特別なページがあります.雑誌、共有、達人.このようなサイトを作るには、まず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"
            }
        })
})

ログインボタンをクリックして、データを要求し、ログインしてからアカウントを保存します.自動登録をチェックしたらパスワードを保存します.全体はまだ完璧ではないです.まだ完成していないところがあります.自動登録にチェックを入れてから次のページを開けばcheckを保存できません.

    $(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のinnersHTML値に置き換えます.
プロジェクトのまとめ:プロジェクトは四日間かかりました.最後まで全部のプロジェクトの内容を書き終えませんでした.一つは時間があまりにも迫っているからです.二つは初めてプロジェクトをするので、たくさんの回り道をしました.例えば、登録ページとホームページの間にデータの転送がキャッシュされているということは、cookeie送信値の問題です.私は長い間悩んでいましたが、調整と修正を続けています.バグはどこにあるか分かりません.最後に二つのバグを見つけました.2、異なるウェブページの間のcookie伝値は、cookeieのパラメータオブジェクトにアドレスを追加し、すべてのファイルキャッシュデータをルートディレクトリに配置することが望ましい.このプロジェクトの中で、私は主に登録ページを担当しています.登録と登録ページのフレームワークは簡単です.大きなdivをすべてのコンテンツの親セットとして設定し、中央揃えにして、各要素を順次加入します.スタイルを設定します.最後にアニメーション効果を加えて、データの送信と要求を行います.登録ページは登録ページに対して難しいです.例えば、入力枠ごとの判断は、別れてみれば非常に簡単です.判断を書くだけでもいいです.判断の順番を重視し、現在の入力枠を判断します.登録画面の最大の難点は登録後のクッキーの伝達であり、前の文ではコードで展示されています.伝達中に多くのバグが現れました.指導先生と同僚たちが一緒に考えて解決したのです.もう一つの難点があります.ログアウトする時に、cookeieをクリアすると、ユーザー名のあるボックスのinnerHTMLをundefinedに変更します.これは一番クリアした後、jsの一番先にもう一つの判断を追加する必要があります.今回のプロジェクトの実习は、最大の収获は、自分の足りないところを発见したことです.昔习した知识が足りなくなり、练习してから忘れやすくなります.知識を連絡しないと、知識は連絡しません.次は実戦経験が足りないので、絶えずに試して練習しなければなりません.これからは基礎となる連絡とページ構造の論理に対する思考を強化します.最大の難点はやはりデータを要求する面で、データを要求した後のレイアウトと文字列のスティッチング、およびフレームのスティッチングです.やはり絶えない連絡と強固さが必要です.

08_コンテキストを実行