9. 项目实战前台搭建

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

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

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

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

• 将素材下的提前准备好模板目录中的静态资源目录：css、fonts、img、js 复制到项目的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.html、index.html、list.html、detail.html 具体参考老师的授课。

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

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