实践七：美食网

最终效果展示——餐厅列表页

最终效果展示——餐厅详情页(浙菜馆)

网站目录：

代码提示：

cv_project/settings.py代码如下：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'studio', #新增内容
]

import os
STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] #新加内容
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') #新加内容
MEDIA_URL = '/media/' #新加内容

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')], #更新内容
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

studio/models.py代码如下

from django.db import models

# Create your models here.
class studio(models.Model):
    name=models.CharField(max_length=100) #名称
    intro_title=models.CharField(max_length=100)    #广告语
    introduction=models.CharField(max_length=100)   #简介
    menu_title1=models.CharField(max_length=100)    #菜单标题1
    menu_detail=models.CharField(max_length=200)    #菜单详情1
    menu_title2=models.CharField(max_length=100)    #菜单标题2
    menu_detai2=models.CharField(max_length=200)    #菜单详情2
    menu_title3=models.CharField(max_length=100)    #菜单标题3
    menu_detai3=models.CharField(max_length=200)    #菜单详情3
    menu_title4=models.CharField(max_length=100)    #菜单标题4
    menu_detai4=models.CharField(max_length=200)    #菜单详情4
    menu_title5=models.CharField(max_length=100, blank=True)    #菜单标题5
    menu_detai5=models.CharField(max_length=200, blank=True)    #菜单详情5
    contact_info=models.CharField(max_length=100)   #联系我们信息
    address=models.CharField(max_length=100)    #地址
    phone=models.CharField(max_length=20)   #电话
    email=models.EmailField(max_length=100) #email
    phone1=models.ImageField(upload_to='main/') #主照片
    phone2=models.ImageField(upload_to='about/') #about照片
    phone3=models.ImageField(upload_to='menu/') #menu照片

studio/admin.py代码如下

from django.contrib import admin
from . models import studio
# Register your models here.
admin.site.register(studio)

studio/views.py代码如下：

from django.shortcuts import render
from django.views.generic import ListView, DetailView
from . models import studio
# Create your views here.

class studioListView(ListView):
    model=studio
    template_name='studio_list.html'

class studioDetailView(DetailView):
    model=studio
    template_name='studio_detail.html'

studio/urls.py代码如下：

from django.urls import path
from . import views
urlpatterns=[
    path('', views.studioListView.as_view(),name='studio_list'),
    path('<int:pk>/', views.studioDetailView.as_view(), name='studio_detail'), #该url将导航到详情页
]

cv_project/urls.py代码如下：

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('studio.urls')),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

templates/base.html代码如下：

<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<style>
body {font-family: "Times New Roman", Georgia, Serif;}
h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display";
  letter-spacing: 5px;
}
</style>
</head>
<body>

<!-- Navbar (sit on top) -->
<div class="w3-top">
  <div class="w3-bar w3-white w3-padding w3-card" style="letter-spacing:4px;">
    <a href="{% url 'studio_list' %}" class="w3-bar-item w3-button">Gourmet au Catering</a>
    <!-- Right-sided navbar links. Hide them on small screens -->
    <div class="w3-right w3-hide-small">
      <a href="#about" class="w3-bar-item w3-button">About</a>
      <a href="#menu" class="w3-bar-item w3-button">Menu</a>
      <a href="#contact" class="w3-bar-item w3-button">Contact</a>
    </div>
  </div>
</div>

{% block content %}
{% endblock content %}

<!-- Footer -->
<footer class="w3-center w3-light-grey w3-padding-32">
  <p>Created by @Chris Zhang</p>
</footer>

</body>
</html>

templates/studio_list.html代码如下：

{% extends 'base.html' %}
{% block content %}

<div class="w3-container" style="margin-top:80px; margin-bottom:80px;">
    <div class="w3-row-padding">
        {% for studio in object_list %}
        <div class="w3-col s4 w3-center  w3-margin-bottom">
            <div class="w3-card-4">
                <img src="{{studio.phone1.url}}" alt="菜单" width="100%" height="240">
                <div class="w3-container w3-center w3-padding-16">
                    <h4>{{studio.name}}</h4>
                    <a href="{% url 'studio_detail' studio.pk %}" class="w3-button w3-khaki">详情</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock content %}

templates/studio_detail.html代码如下：

{% extends 'base.html' %}
{% block content %}

<!-- Header -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1600px;min-width:500px" id="home">
  <img class="w3-image" src="{{object.phone1.url}}" alt="Hamburger Catering" width="1600" height="800">
  <div class="w3-display-bottomleft w3-padding-large w3-opacity">
    <h1 class="w3-xxlarge">{{object.name}}</h1>
  </div>
</header>

<!-- Page content -->
<div class="w3-content" style="max-width:1100px">

  <!-- About Section -->
  <div class="w3-row w3-padding-64" id="about">
    <div class="w3-col m6 w3-padding-large w3-hide-small">
     <img src="{{object.phone2.url}}" class="w3-round w3-image w3-opacity-min" alt="Table Setting" width="600" height="750">
    </div>

    <div class="w3-col m6 w3-padding-large">
      <h1 class="w3-center">About Catering</h1><br>
      <h5 class="w3-center">{{object.intro_title}}</h5>
      <p class="w3-large">{{object.introduction}}</p>
      <p class="w3-large w3-text-grey w3-hide-medium">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  
  <hr>
  
  <!-- Menu Section -->
  <div class="w3-row w3-padding-64" id="menu">
    <div class="w3-col l6 w3-padding-large">
      <h1 class="w3-center">Our Menu</h1><br>
      <h4>{{object.menu_title1}}</h4>
      <p class="w3-text-grey">{{object.menu_detail}}</p><br>
    
      <h4>{{object.menu_title2}}</h4>
      <p class="w3-text-grey">{{object.menu_detai2}}</p><br>
    
      <h4>{{object.menu_title3}}</h4>
      <p class="w3-text-grey">{{object.menu_detai3}}</p><br>
    
      <h4>{{object.menu_title4}}</h4>
      <p class="w3-text-grey">{{object.menu_detai4}}</p><br>
    
      <h4>{{object.menu_title5}}</h4>
      <p class="w3-text-grey">{{object.menu_detai5}}</p>    
    </div>
    
    <div class="w3-col l6 w3-padding-large">
      <img src="{{object.phone3.url}}" class="w3-round w3-image w3-opacity-min" alt="Menu" style="width:100%">
    </div>
  </div>

  <hr>

  <!-- Contact Section -->
  <div class="w3-container w3-padding-64" id="contact">
    <h1>Contact</h1><br>
    <p>{{object.contact_info}}</p>
    <p class="w3-text-blue-grey w3-large"><b>{{object.address}}</b></p>
    <p>You can also contact us by phone {{object.phone}} or email {{object.email}}, or you can send us a message here:</p>

  </div>
  
<!-- End page content -->
</div>

{% endblock content %}

posted @ 2025-04-27 10:21 天净沙秋思阅读(199) 评论(0) 收藏举报

刷新页面返回顶部

实践七：美食网

公告