1.主頁顯示

登陸成功之后傳兩個參數(shù)薯鼠，用戶id和用戶名稱到主頁動態(tài)顯示到主頁右側(cè)择诈，

image

變?yōu)?/h4>

image

views.py中代碼：

 user_id = request.session.get('userid')
 nick_name = request.session.get('nick_name')

index主頁代碼：

  {% if nick_name == None %}
            {#頭部用戶#} <a id="home_user" href="register_page">注冊</a>
            {#頭部退出#} <a id="home_quit" href="login_page">登錄</a>
        {% else %}
            {#頭部用戶#} <a id="home_user" href="user_center">{{ nick_name }}</a>
            {#頭部退出#} <a id="home_quit" href="logout">退出</a>
        {% endif %}

主頁顯示效果

image

views.py部分代碼：

def welcomeToIndex(request):
    user_id = request.session.get('userid')
    nick_name = request.session.get('nick_name')
    if user_id is not None:
        user = User.objects.get(id=user_id)
        goods_list = Goods.objects.filter().exclude(user=user).order_by('-create_time')
    else:
        goods_list = Goods.objects.filter().order_by('-create_time')
    return render(request, 'index.html', {"goods_list": goods_list, "nick_name": nick_name})

主頁部分代碼：循環(huán)goods_list，顯示其中內(nèi)容

{#分頁#}
<div class="fenye_bg">
    {% for foo in goods_list %}
        <div class="l_1">
            <div class="l_1_70">
                <a href="good_detail_page?id={{ foo.id }}"><img class="img_70" src="{{ MEDIA_URL }}{{ foo.img }}"></a>
            </div>
            <div class="l_1_15_txt">
                <a class="list_text" href="/">{{ foo.name }}</a>
            </div>
            <div class="bg_15"><h3 class="l_1_15">￥{{ foo.price }}</h3></div>
        </div>
    {% endfor %}
</div>

2.主頁模糊搜索

1.模糊搜索效果

image

2.views.py部分代碼

__contains是用來模糊搜索的出皇，注意兩個下劃線？源印！恶迈！

def search(request):
    flag = 1
    key = request.GET.get("key")
    print("key" + key)
    nick_name = request.session.get('nick_name')
    goods_list = Goods.objects.filter(name__contains=key).order_by('-create_time')
    return render(request, 'index.html', {"goods_list": goods_list, "nick_name": nick_name})

3.函數(shù)部分

  function search_key() {
         var key = $("#input_pass").val();
         window.location.href = "search?key=" + key;
    }

3.發(fā)布頁面后臺

1.圖片處理

點擊上傳圖片，選中圖片谱醇，頁面上顯示圖片暇仲，并且uuid函數(shù)處理圖片，生成不重復(fù)的圖片名字存到media文件夾

1.效果圖

image.png

2.文件選中圖片改變副渴，顯示在頁面上奈附，部分代碼：

 $(function () {
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form;
            form.render();
        });
        $("#action_show_goods").change(function () {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#img_show");
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src', dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("preview");
                // 兩個坑:
                // 1、在設(shè)置filter屬性時煮剧，元素必須已經(jīng)存在在DOM樹中斥滤，動態(tài)創(chuàng)建的Node将鸵，也需要在設(shè)置屬性前加入到DOM中，先設(shè)置屬性在加入佑颇，無效顶掉；
                // 2、src屬性需要像下面的方式添加挑胸，上面的兩種方式添加痒筒，無效；
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

            }
        });
    });

3.創(chuàng)建media文件和app同等級
在url中加入

   re_path(r'^media/(?P<path>.*)$', serve, {'document_root': MEDIA_ROOT}),

setting.py里面加入：

MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace('\\', '/')  # 設(shè)置靜態(tài)文件路徑為主目錄下的media文件夾
MEDIA_URL = '/media/'  # url映射

views.py中代碼

# 利用UUID生成不重復(fù)的圖片名茬贵，避免上傳相同的名字的圖片被覆蓋
def do_file_name(file_name):
    return str(uuid.uuid1()) + os.path.splitext(file_name)[1]

2.ajiax form提交

views.py部分代碼如下：
用為是ajax提交簿透，加上@csrf_exempt

@csrf_exempt
def issue_form(request):
    flag = 0
    if request.method == "POST":
        # 里面的參數(shù)是name
        goods_name = request.POST.get("goods_name")
        print(goods_name)
        goods_detal = request.POST.get("goods_detal")
        print(goods_detal)
        goods_price = request.POST.get("goods_price")
        print(goods_price)
        categorys = request.POST.get("categorys")
        print(categorys)
        transactionMode = request.POST.get("transactionMode")
        print(transactionMode)
        address = request.POST.get("address")
        print(address)
        pho_num = request.POST.get("pho_num")
        print(pho_num)
        qq_num = request.POST.get("qq_num")
        print(qq_num)
        wechat_num = request.POST.get("wechat_num")
        print(wechat_num)
        file_img = request.FILES.get('file_img')
        print(file_img.name)
        print(file_img.size)
        file_chunks = file_img.chunks()
        # 文件保存的路徑
        # /images/qwyuqguweuq.jpg
        file_name = os.path.join("images", do_file_name(file_img.name)).replace('\\', '/')
        # 完整的路徑
        file_path = os.path.join(settings.MEDIA_ROOT, file_name).replace('\\', '/')
        with open(file_path, "wb")as file:
            for chunk in file_chunks:
                file.write(chunk)
        new_issue = Goods()
        new_issue.name = goods_name
        new_issue.detal = goods_detal
        new_issue.price = goods_price
        new_issue.master_pho = pho_num
        new_issue.master_qqnum = qq_num
        new_issue.master_wechatnum = wechat_num
        new_issue.trading = transactionMode
        userid = request.session.get('userid')
        new_issue.user = User.objects.get(id=userid)
        sort = Sort.objects.get(id=categorys)
        print(sort.__dict__)
        new_issue.sort = sort
        new_issue.img = file_name
        try:
            new_issue.save()
            flag = 1
        except Exception as e:
            print(e)
    return HttpResponse(flag)

發(fā)布頁面ajax函數(shù)部分代碼：

  function issue() {
        var formData = new FormData($("#goods_form")[0]);
        ;
        if ($("goods_name").val() == "") {
            layer.msg("請輸入商品名稱");
            return;
        }
        if ($("#goods_price").val() == "") {
            layer.msg("請輸入價格");
            return;
        }
        if ($("#pho_num").val() == "") {
            layer.msg("請輸入電話");
            return;
        }
        $.ajax({
            type: "POST",
            url: "issue_form",
            {#上傳表單#}
            data: formData,
            dataType: "json",
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data);
                if (data == 1) {
                    layer.msg("發(fā)布成功");
                }
                else if(data == 0) {
                    layer.msg("數(shù)據(jù)儲存失敗");
                }
            },
            error: function () {
                layer.msg("發(fā)生未知錯誤");
            }
        });
    }

4.商品詳情頁動態(tài)顯示

顯示效果圖

image.png

views.py部分代碼如下：

def togood_detail_page(request):
    nick_name = request.session.get('nick_name')
    id = request.GET.get('id')
    print("id: " + id)
    goods_detal = Goods.objects.get(id=id)
    return render(request, "good_detail_page.html", {"goods_detail": goods_detal, "nick_name": nick_name})

顯示代碼，花括號顯示出來即可解藻，注意{{ MEDIA_URL }}文件目錄怎么寫
舉個例子：

 <div class="shang_10 div_in_chuizhi">
                <p>發(fā)布于：{{ goods_detail.create_time }}</p>
            </div>
            <div class="zuo_40">
                <img src="{{ MEDIA_URL }}{{ goods_detail.img }}">
            </div>
            <div class="you_60">
                <div class="basic_class div_in_chuizhi">
                    <h2>{{ goods_detail.name }}</h2>
                </div>

5.登出

views.py部分代碼如下：

def logout(request):
    del request.session["nick_name"]
    del request.session["userid"]
    return HttpResponseRedirect("index")