9. 项目实战前台搭建

  • 本节是完成商城网站前台结构搭建,并且将网站首页,商品列表和详情页的界面摆放到web项目中

  • 由于三个网页界面都有公共的页头和页脚,故采用模板继承来实现网页布局:

(1). 开发前的准备工作:

  • 安装项目设计创建对象的文件和目录

  • 将素材下的提前准备好模板目录中的静态资源目录:cssfontsimgjs 复制到项目的static/web/目录下。

(2). 目urls路由信息配置:

from django.conf.urls import url

from web.views import index

urlpatterns = [
    # 前台首页
    url(r'^$', index.index, name="index"),    #商城首页
    url(r'^list$', index.lists, name="list"),# 商品列表
    url(r'^detail/(?P<gid>[0-9]+)$', index.detail, name="detail"),#商品详情
]

(3). 编辑视图文件

from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def index(request):
    '''项目前台首页'''
    return render(request,"web/index.html")

def lists(request,pIndex=1):
    '''商品列表页'''
    return render(request,"web/list.html")

def detail(request,gid):
    '''商品详情页'''
    return render(request,"web/detail.html")

(4). 编写模板文件

  • 使用模板继承套用模板文件:base.htmlindex.htmllist.htmldetail.html 具体参考老师的授课。

  • 静态资源中的正则替换技巧:

"\./public/(.*?)" 换成 "{% static 'web/\1' %}"