12. 项目实战之前台大堂点餐搭建

oliver3455

已于 2022-07-05 19:13:12 修改

阅读量263

点赞数

分类专栏：点餐项目开发合集文章标签： django python 后端

于 2022-07-04 21:43:52 首次发布

本文链接：https://blog.csdn.net/oliver3455/article/details/125609258

版权

本文档详细介绍了如何使用Django搭建一个前端大堂点餐系统，包括开发前的准备工作，如安装相关文件和配置静态资源；配置URL路由；编辑视图文件以处理请求；以及编写模板文件，利用模板继承来实现页面布局。通过这个过程，实现了首页和订单列表界面的展示。

摘要由CSDN通过智能技术生成

本节是完成前台大堂点餐系统结构搭建，并且将网站首页(大堂点餐首页)，订单列表界面摆放到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">