-
本节是完成前台大堂点餐系统结构搭建,并且将网站首页(大堂点餐首页),订单列表界面摆放到web项目中
-
由于二个网页界面都有公共的页头,故采用模板继承来实现网页布局:
(1). 开发前的准备工作:
-
安装项目设计创建对象的文件和目录
-
将素材下的提前准备好模板目录中的静态资源目录static/下的文件夹:
css
、js
、images
和fonts
复制到项目的static/web/目录下。(需要的可以联系我)
(2). 目urls路由信息配置:
from django.urls import path
from web.views import index
urlpatterns = [
path('', index.index, name="index"), #前台大堂点餐首页
]
(3). 编辑视图文件
from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def index(request):
'''项目前台大堂点餐首页'''
return render(request,"web/index.html")
(4). 编写模板文件
-
使用模板继承套用模板文件:
base.html
(选做,这里没有使用父模板)、index.html
具体如下
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'web/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'web/css/common.css' %}">
<style type="text/css">
body{min-height:2000px;padding-top:70px;}
.navbar-default{background-color:#ff8800;border-color:#e7e7e7;}
.navbar-default .navbar-brand{color:#fff;}
.navbar-default .navbar-nav > li > a,.navbar-default .navbar-nav > li > a:visited {
color: #fff;
width:100px;
font-size:14px;
text-align:center;
}
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:visited,.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-nav > .active > a:hover,.navbar-default .navbar-nav li a:active {
color:#fff;
background-color: #FF4500;
width:100px;
font-size:14px;
text-align:center;
}
table tr td{font-size:11px;}
table tr td.price{color:red;}
table tr td.num span{color:red;padding:0px 5px}
table tr td.num i{border-width:0px;background-color:#ddd;}
div.shoplist div.bn{font-size:12px;line-height:25px;}
div.shoplist div.bn span.price{color:red;}
</style>
</head>
<body>
<!-- 页头导航开始 -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span> <span style="font-weight:bold;">田老师红烧肉</span><span style="font-size:14px;">(朝阳将台路店)</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">堂吃点餐</a></li>
<li><a href="#about">当前订单</a></li>
<li><a href="#contact">历史订单</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">
<span class="glyphicon glyphicon-user" aria-hidden="true"> 张无忌</a></li>
<li><a href="../navbar-static-top/">退出</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- 页头导航结束 -->
<!-- 页面主体开始 -->
<div class="container">
<div class="col-md-4">
<div class="panel panel-warning">