Django3商城專案從0到1 【四】資料渲染與展示-有解無憂

文章目錄

- 基礎模板設計
- 首頁模板設計
- - commodity和shopper的urls.py
- views.py定義相應的視圖函式
- 配置媒體資源的路由資訊

基礎模板設計

在專案babys的templates檔案夾新建檔案base.html
該檔案用于存放每個網頁頂部的HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
	{% load static %}
	<title>{{title}}</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'layui/css/layui.css' %}">
	<script type="text/javascript" src="{% static 'layui/layui.js' %}"></script>
</head>
<body>
  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="{% url 'index:index' %}" title="母嬰商城">
            <img src="{% static 'img/logo.png' %}">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="{% url 'commodity:commodity' %}" method="get" class="layui-form" novalidate>
            <input type="text" name="n" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="請輸入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="content content-nav-base {{classContent}}">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="{% url 'index:index' %}" {% if classContent == ''%}class="active"{% endif %}>首頁</a>
			<a href="{% url 'commodity:commodity' %}" {% if classContent == 'commoditys'%}class="active"{% endif %}>所有商品</a>
			<a href="{% url 'shopper:shopcart' %}" {% if classContent == 'shopcarts'%}class="active"{% endif %}>購物車</a>
            <a href="{% url 'shopper:shopper' %}" {% if classContent == 'informations'%}class="active"{% endif %}>個人中心</a>
          </div>
        </div>
      </div>
    </div>
	{% block content %}{% endblock content %}
  </div>

{% block footer %}{% endblock footer %}
<script type="text/javascript">{% block script %}{% endblock script %}</script>
</body>
</html>

首頁模板設計

模板檔案index.html的代碼

{% extends 'base.html' %}
{% load static %}
{% block content %}
    <div class="category-con">
      <div class="category-banner">
        <div class="w1200">
          <img src="{% static 'img/banner1.jpg' %}">
        </div>
      </div>
    </div>
    <div class="floors">
      <div class="sk">
        <div class="sk_inner w1200">
          <div class="sk_hd">
            <a href="javascript:;">
              <img src="{% static 'img/s_img1.jpg' %}">
            </a>
          </div>
          <div class="sk_bd">
            <div class="layui-carousel" id="test1">
              <div carousel-item>
              <div class="item-box">
              {% for c in commodityInfos %}
                  {% if forloop.counter < 5 %}
                    <div class="item">
                    <a href="{% url 'commodity:detail' c.id %}">
                        <img src="{{ c.img.url }}"></a>
                    <div class="title">{{ c.name }}</div>
                    <div class="price">
                      <span>￥{{ c.discount|floatformat:'2' }}</span>
                      <del>￥{{ c.price|floatformat:'2' }}</del>
                    </div>
                    </div>
                  {% endif %}
                {% endfor %}
                </div>

              <div class="item-box">
              {% for c in commodityInfos %}
                  {% if forloop.counter > 4 %}
                    <div class="item">
                    <a href="{% url 'commodity:detail' c.id %}">
                        <img src="{{ c.img.url }}"></a>
                    <div class="title">{{ c.name }}</div>
                    <div class="price">
                      <span>￥{{ c.discount|floatformat:'2' }}</span>
                      <del>￥{{ c.price|floatformat:'2' }}</del>
                    </div>
                    </div>
                  {% endif %}
                {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="product-cont w1200" id="product-cont">
      <div class="product-item product-item1 layui-clear">
        <div class="left-title">
          <h4><i>1F</i></h4>
          <img src="{% static 'img/icon_gou.png' %}">
          <h5>寶寶服飾</h5>
        </div>
        <div class="right-cont">
          <a href="javascript:;" class="top-img"><img src="{% static 'img/img12.jpg' %}" alt=""></a>
          <div class="img-box">
            {% for c in clothes %}
              <a href="{% url 'commodity:detail' c.id %}"><img src="{{ c.img.url }}"></a>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="product-item product-item2 layui-clear">
        <div class="left-title">
          <h4><i>2F</i></h4>
          <img src="{% static 'img/icon_gou.png' %}">
          <h5>奶粉輔食</h5>
        </div>
        <div class="right-cont">
          <a href="javascript:;" class="top-img"><img src="{% static 'img/img12.jpg' %}" alt=""></a>
          <div class="img-box">
            {% for f in food %}
            <a href="{% url 'commodity:detail' f.id %}"><img src="{{ f.img.url }}"></a>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="product-item product-item3 layui-clear">
        <div class="left-title">
          <h4><i>3F</i></h4>
          <img src="{% static 'img/icon_gou.png' %}">
          <h5>寶寶用品</h5>
        </div>
        <div class="right-cont">
          <a href="javascript:;" class="top-img"><img src="{% static 'img/img12.jpg' %}"></a>
          <div class="img-box">
            {% for g in goods %}
            <a href="{% url 'commodity:detail' g.id %}"><img src="{{ g.img.url }}"></a>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
{% endblock content %}

{% block footer %}
  <div class="footer">
    <div class="ng-promise-box">
      <div class="ng-promise w1200">
        <p class="text">
          <a class="icon1" href="javascript:;">7天無理由退換貨</a>
          <a class="icon2" href="javascript:;">滿99元全場免郵</a>
          <a class="icon3" style="margin-right: 0" href="javascript:;">100%品質保證</a>
        </p>
      </div>
    </div>
    <div class="mod_help w1200">
      <p>
        <a href="javascript:;">關于我們</a>
        <span>|</span>
        <a href="javascript:;">幫助中心</a>
        <span>|</span>
        <a href="javascript:;">售后服務</a>
        <span>|</span>
        <a href="javascript:;">母嬰資訊</a>
        <span>|</span>
        <a href="javascript:;">關于貨源</a>
      </p>
    </div>
  </div>
{% endblock footer %}

{% block script %}
layui.config({
    base: '{% static 'js/' %}'
  }).use(['mm','carousel'],function(){
      var carousel = layui.carousel,
     mm = layui.mm;
     var option = {
        elem: '#test1'
        ,width: '100%'
        ,arrow: 'always'
        ,height:'298'
        ,indicator:'none'
      }
      carousel.render(option);
});
{% endblock script %}

使用{%load static %}讀取靜態資源
重寫base.html定義的介面content
實作“今日必搶”的商品熱銷功能，該功能共分為2頁，每頁自動進行輪播展示
{% url ‘commodity:detail’ c.id %}是使用商品的主鍵欄位id生成對應的商品詳細頁的路由地址，當單擊商品即可查看商品詳細頁，
{{ c.img.url }}代表當前遍歷物件的欄位img
{{ c.name }}獲取當前遍歷物件的欄位name
{{ c.discount|floatformat:‘2’ }}獲取當前遍歷物件的欄位discount
{{ c.price|floatformat:‘2’ }}獲取當前遍歷物件的欄位price
實作某分類的商品熱銷功能，分別為“寶寶服飾”、“奶粉輔食”和“寶寶用品”
重寫base.html定義的介面footer和script

commodity和shopper的urls.py

commodity-urls.py

from django.urls import path
from .views import *

urlpatterns = [
    path('.html',commodityView,name='commodity'),
    path('/detail.<int:id>.html',detailView,name='detail'),
]

shopper-urls.py

from django.urls import path
from .views import *

urlpatterns = [
    path('.html',shopperView,name='shopper'),
    path('/login.html',loginView,name='login'),
    path('/logout.html',logoutView,name='logout'),
    path('/shopcart.html',shopcartView,name='shopcart'),
]

views.py定義相應的視圖函式

commodity-views.py

from django.http import HttpResponse

def commodityView(request):
    return HttpResponse('Hello World')

def detailView(request, id):
    return HttpResponse('Hello World')

shopper-views.py

from django.http import HttpResponse

def shopperView(request):
    return HttpResponse('Hello World')

def loginView(request):
    return HttpResponse('Hello World')

def logoutView(request):
    return HttpResponse('Hello World')

def shopcartView(request):
    return HttpResponse('Hello World')

配置媒體資源的路由資訊

bay小的url.py

from django.contrib import admin
from django.urls import path, include, re_path
from django.views.static import serve
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include(('index.urls','index'),namespace='index')),
    path('commodity', include(('commodity.urls','commodity'),namespace='commodity')),
    path('shopper', include(('shopper.urls','shopper'),namespace='shopper')),
    re_path('media/(?P<path>.*)', serve, {'document_root':settings.MEDIA_ROOT}, name='media'),
]

re_path('media/(?P<path>.*)', serve, {'document_root':settings.MEDIA_ROOT}, name='media'),
配置媒體資源的路由資訊
一定要配置否則無法加載媒體資源

運行Django 服務器
瀏覽器打開 http://127.0.0.1:8000/
在這里插入圖片描述

參考資料：《精通Django 3 Web開發》
素材：https://github.com/xyjw/Django3-Web

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/297150.html

標籤：python

上一篇：有什么行為習慣昭示著你是個編程大佬？

下一篇：Mac提升作業效率從Alfred神器開始(上)