Django实战教程: 开发餐厅在线点评网站(1)

小编我最喜欢写Django的基础知识，尤其是一个一个细小的知识点。因为我相信无论你是新手还是高手，熟练地掌握基础知识才能在实际Web开发项目中游刃有余。然而我们学习Django的最终目的还是应用，今天小编我就带你用Django开发一个餐厅在线点评的APP，也算应读者的要求。如果你对本文中的代码阅读起来还感觉有点吃力，建议关注我的微信公众号，点击经典原创阅读Django基础(1)到(12)。如果对代码有任何问题或不理解，可以在评论区留言。

 

总体思路

我们要开发一个餐厅点评网站(APP)，具体包括以下几个功能性页面。

• 查看餐厅(restaurants)列表 - 所有用户

• 查看餐厅详情(包括名称，地址，电话，菜品和点评) - 所有用户

• 创建餐厅 - 仅限登录用户

• 修改餐厅 - 仅限登录用户，且每个用户只能修改自己创建的餐厅

• 给餐厅添加菜品(dishes) - 仅限登录用户

• 修改菜品信息 - 每个登录用户只能修改自己创建的菜品

• 查看菜品详情(品名，描述, 图片和价格)

• 给餐厅添加评论(review)和评分(rating)

 

如果匿名用户查看餐厅列表和详情时，它们会被要求先登录后再创建餐厅或给餐厅添加评论。我们预期的效果如下图所示。本教程分2部分，本文仅介绍前4个功能性页面。

 

项目开发环境

Django 2.0 + Python 3.5 + SQLite。因为我们需要上传显示图片，所以请确保你已通过pip安装python的pillow图片库。

 

项目配置settings.py

我们通过python manage.py startapp myrestaurants创建一个叫myrestaurants的APP，把它加到settings.py里INSATLLED_APP里去，如下所示。users是对Django自带AUTH User的扩展应用。如果不清楚，请阅读这里。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.staticfiles',
    'django.contrib.sites',
    'myrestaurants',
    'users',
]

因为我们要用到静态文件如css和图片，我们需要在settings.py里设置STATIC_URL和MEDIA。用户上传的图片会放在/media/文件夹里。

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"), ]

# specify media root for user uploaded files,
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

整个项目的urls.py如下所示。我们把myrestaurants的urls.py也加进去了。别忘了在结尾部分加static配置。

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


urlpatterns = [
    url(r'^myrestaurants/', include('myrestaurants.urls')),
    url(r'^admin/', admin.site.urls),
    url(r'^accounts/', include('users.urls')),

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

模型models.py

对于Django而言，能设计一个良好的models，我们已经成功了一半。在本例中我们创建了Restuarant, Dish和Review的模型。因为我们在视图中会应用Django的通用视图，所以我们的模型里还需要定义get_abosolute_url。Django的CreateView和UpdateView在完成对象的创建或编辑后会自动跳转到这个绝对url。

from django.db import models
from django.contrib.auth.models import User
from datetime import date
from django.urls import reverse

class Restaurant(models.Model):
    name = models.TextField()
    address = models.TextField(blank=True, default='')
    telephone = models.TextField(blank=True,  default='')
    url = models.URLField(blank=True, null=True)
    user = models.ForeignKey(User, default=1, on_delete=models.CASCADE)
    date = models.DateField(default=date.today)

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse('myrestaurants:restaurant_detail', args=[str(self.id)])

class Dish(models.Model):
    name = models.TextField()
    description = models.TextField(blank=True,  default='')
    price = models.DecimalField('USD amount', max_digits=8, decimal_places=2, blank=True, null=True)
    user = models.ForeignKey(User, default=1, on_delete=models.CASCADE)
    date = models.DateField(default=date.today)
    image = models.ImageField(upload_to="myrestaurants", blank=True, null=True)
    restaurant = models.ForeignKey(Restaurant, null=True, related_name='dishes', on_delete=models.CASCADE)

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse('myrestaurants:dish_detail', args=[str(self.restaurant.id), str(self.id)])

# This Abstract Review can be used to create RestaurantReview and DishReview
class Review(models.Model):
    RATING_CHOICES = ((1, 'one'), (2, 'two'), (3, 'three'), (4, 'four'), (5, 'five'))
    rating = models.PositiveSmallIntegerField('Rating (stars)', blank=False, default=3, choices=RATING_CHOICES)
    comment = models.TextField(blank=True, null=True)
    user = models.ForeignKey(User, default=1, on_delete=models.CASCADE)
    date = models.DateField(default=date.today)

    class Meta:
        abstract = True

class RestaurantReview(Review):
    restaurant = models.ForeignKey(Restaurant, on_delete=models.CASCADE, related_name="reviews")
    
    def __str__(self):
        return "{} review".format(self.restaurant.name)

 

URLConf配置urls.py

每个path都对应一个视图，一个命名的url和我们本文刚开始介绍的一个功能性页面。本文中包含了4个urls。我们在查看餐厅详情和编辑餐厅信息的url中传递了pk（餐厅id）作为参数。

from django.urls import path, re_path
from . import views

# namespace
app_name = 'myrestaurants'
urlpatterns = [

# 查看餐厅列表
    path('', views.RestaurantList.as_view(), name='restaurant_list'),

# 查看餐厅详情, 如/myrestaurants/restaurant/1/
    re_path(r'^restaurant/(?P<pk>\d+)/$',
        views.RestaurantDetail.as_view(), name='restaurant_detail'),

# 创建餐厅, 如：/myrestaurants/restaurant/create/
    re_path(r'^restaurant/create/$', views.RestaurantCreate.as_view(), name='restaurant_create'),

# 编辑餐厅详情, 如: /myrestaurants/restaurant/1/edit/
    re_path(r'^restaurant/(?P<pk>\d+)/edit/$',
        views.RestaurantEdit.as_view(), name='restaurant_edit'),

]

 

视图views.py

为了简化开发，本例中使用了Django自带的通用视图。我们使用ListView来显示餐厅列表，使用DetailView来显示餐厅详情，使用CreateView来创建餐厅，使用UpdateView来编辑餐厅信息。如果你对通用视图不了解，请阅读下文:

• 如何使用Django通用视图。你一旦使用它，就会爱上她。

# Create your views here.

from django.http import HttpResponseRedirect
from django.shortcuts import get_object_or_404, render
from django.urls import reverse
from django.views.generic import DetailView, ListView, UpdateView
from django.views.generic.edit import CreateView
from .models import RestaurantReview, Restaurant, Dish
from .forms import RestaurantForm, DishForm


class RestaurantList(ListView):

    queryset = Restaurant.objects.all().order_by('-date')
    context_object_name = 'latest_restaurant_list'
    template_name = 'myrestaurants/restaurant_list.html'


class RestaurantDetail(DetailView):
    model = Restaurant
    template_name = 'myrestaurants/restaurant_detail.html'

    def get_context_data(self, **kwargs):
        context = super(RestaurantDetail, self).get_context_data(**kwargs)
        context['RATING_CHOICES'] = RestaurantReview.RATING_CHOICES
        return context


class RestaurantCreate(CreateView):
    model = Restaurant
    template_name = 'myrestaurants/form.html'
    form_class = RestaurantForm

    # Associate form.instance.user with self.request.user
    def form_valid(self, form):
        form.instance.user = self.request.user
        return super(RestaurantCreate, self).form_valid(form)


class RestaurantEdit(UpdateView):
    model = Restaurant
    template_name = 'myrestaurants/form.html'
    form_class = RestaurantForm

重要知识点：

• 在RestaurantDetail视图里，我们通过get_context_data方法向模板传递了额外的变量RATING_CHOICES。DetailView视图会接受url传递来的pk值，并显示该模型的所有信息。

• 在RestaurantCreate视图里，我们使用了form_valid方法。form_valid方法作用是添加前端表单字段以外的信息。在用户在创建餐厅时，我们不希望用户能更改创建用户，于是在前端表单里把user故意除外了(见forms.py)，而选择在后台添加user信息。

 

表单forms.py

创建和编辑对象时需要用到表单，我们的表单如下所示。我们在前端表单里移除了user，而采用后台添加的方式。我们添加了widget和labels。添加widget的目的时为了定制用户输入控件（比如URLInput)，并给其添加css样式(因为boostrap表单需要form-control这个样式)。

from django.forms import ModelForm,  TextInput, URLInput, ClearableFileInput
from .models import Restaurant, Dish


class RestaurantForm(ModelForm):
    class Meta:
        model = Restaurant
        exclude = ('user', 'date',)

        widgets = {
            'name': TextInput(attrs={'class': 'form-control'}),
            'address': TextInput(attrs={'class': 'form-control'}),
            'telephone': TextInput(attrs={'class': 'form-control'}),
            'url': URLInput(attrs={'class': 'form-control'}),
        }

        labels = {
            'name': '名称',
            'address': '地址',
            'telephone': '电话',
            'url': '网站',
        }

 

模板文件

我们在目录中创建templates/myrestaurants/目录，添加如下html模板。

# restaurant_list.html

{% extends "myrestaurants/base.html" %}

{% block content %}
<h3>餐厅列表</h3>

<ul>
  {% for restaurant in latest_restaurant_list %}
    <li><a href="{% url 'myrestaurants:restaurant_detail' restaurant.id %}">
    {{ restaurant.name }}</a></li>
  {% empty %}<li>对不起，没有餐厅点评。</li>
  {% endfor %}
</ul>

 {% if request.user.is_authenticated %}
<p><span class="glyphicon glyphicon-plus"></span> <a href="{% url 'myrestaurants:restaurant_create' %}">添加餐厅</a></p>
 {% else %}

<p>请<a href="{% url 'users:login' %}?next={% url 'myrestaurants:restaurant_create' %}">登录</a>后添加餐厅。</p>
  {% endif %}
{% endblock %}

重要知识点:

• 请观察我们是如何把参数（如餐厅id)传递给命名url的。

• 请观察我们是如何设置next实现匿名用户登录后立即跳转到餐厅创建页面的。

# restaurant_detail.html

{% extends "myrestaurants/base.html" %}

{% block content %}
<h3>
  {{ restaurant.name }}
  {% if request.user == restaurant.user %}
    (<a href="{% url 'myrestaurants:restaurant_edit' restaurant.id %}">修改</a>)
  {% endif %}
</h3>

<h4>地址</h4>

<p>
  {{ restaurant.address }}, <br/>
  {{ restaurant.telephone }}
</p>

<h4>菜单
  {% if request.user.is_authenticated %}
    (<a href="{% url 'myrestaurants:dish_create' restaurant.id %}">添加</a>)
  {% endif %}
</h4>

<ul>
  {% for dish in restaurant.dishes.all %}
    <li><a href="{% url 'myrestaurants:dish_detail' restaurant.id dish.id %}">
    {{ dish.name }}</a> - {{ dish.price }}元</li>
  {% empty %}<li>对不起，该餐厅还没有菜肴。</li>
  {% endfor %}
</ul>

<h4>用户点评</h4>
{% if restaurant.reviews.all %}
  {% for review in restaurant.reviews.all %}

      <p>{{ review.rating}}星, {{ review.user }}点评, {{ review.date | date:"Y-m-d" }}</p>
      <p>{{ review.comment }}</p>

  {% endfor %}

{% else %}
<p>目前还没有用户点评。</p>{% endif %}

<h4>添加点评</h4>
{% if request.user.is_authenticated %}
<form action="{% url 'myrestaurants:review_create' restaurant.id %}" method="post">
  {% csrf_token %}
 <p>评论</p>
  <textarea name="comment" id="comment"></textarea>
  <p>评分</p>
  <p>
    {% for rate in RATING_CHOICES %}
      <input type="radio" name="rating" id="rating{{ forloop.counter }}" value="{{ rate.0 }}" />
      <label for="choice{{ forloop.counter }}">{{ rate.0 }}星</label>
      <br/>
    {% endfor %}
  </p>
  <input type="submit" value="提交" />
</form>
{% else %}
<p>请先<a href="{% url 'users:login' %}?next={% firstof request.path '/' %}">登录</a>再评论。</p>
{% endif %}

{% endblock %}

重要知识点:

• 请观察我们是如何通过 if request.user == restaurant.user 来控制每个用户只能编辑自己创建的餐厅的。

   

# form.html

注意: 创建餐厅和编辑餐厅，我们使用了同样一个模板。

{% extends "myrestaurants/base.html" %}

{% block content %}

<form action="" method="post" enctype="multipart/form-data" >
  {% csrf_token %}

  {% for hidden_field in form.hidden_fields %}
  {{ hidden_field }}
{% endfor %}

{% if form.non_field_errors %}
  <div class="alert alert-danger" role="alert">
    {% for error in form.non_field_errors %}
      {{ error }}
    {% endfor %}
  </div>
{% endif %}

{% for field in form.visible_fields %}
  <div class="form-group">
    {{ field.label_tag }}
    {{ field }}
    {% if field.help_text %}
      <small class="form-text text-muted">{{ field.help_text }}</small>
    {% endif %}
  </div>
{% endfor %}
  <input type="submit" value="提交"/>
</form>

{% endblock %}

# base.html

这个文件基本上只包括样式，不包括逻辑，可以不看。

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %} Django餐厅点评系统{% endblock %} </title>
<meta charset="utf-8">
<meta name="keywords" content="{% block keywords %} some keywords{% endblock %} ">
<meta name="description" content="{% block description %} Django web application example.{% endblock %}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'myrestaurants/custom.css' %}">


</head>

<body class="bs-docs-home">
<nav class="navbar navbar-inverse navbar-static-top bs-docs-nav">
  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
        <a class="navbar-brand" href="#"><strong>Django餐厅点评APP</strong></a>
     </div>

      <div class="collapse navbar-collapse" id="myNavbar">

       <ul class="nav navbar-nav navbar-right">
       {% if user.is_authenticated %}

          <li class="dropdown">
              <a class="dropdown-toggle btn-green" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span>  {{ user.username }} <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a  href="{% url 'users:profile' user.id %}">我的账户</a></li>
              <li><a  href="{% url 'users:logout' %}">退出登录</a></li>
            </ul>
          </li>  
         {% else %}         
            <li class="dropdown"><a class="dropdown-toggle btn-green" href="{% url 'users:register' %}"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
         <li class="dropdown"><a class="dropdown-toggle" href="{% url 'users:login' %}" ><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
       {% endif %}
       </ul>

    </div>

  </div>
</nav>    

 <!-- Page content of course! -->
<main id="section1" class="container-fluid">
<div class="container">
  <div class="row">
 <div class="col-sm-12">
   <div class="wrapper">
        <div class="newsbox">
             <div class="container1">       

 {% block content %}
  {% if error_message %}<p><strong>{{ error_message}}</strong></p>{% endif %}
  {% endblock %}

        </div>
      </div>
   </div>
</div>
</div>
    
</div> 
</main>
<footer class="footer">
  {% block footer %}{% endblock %}
</footer>
<!--End of Footer-->

<!-- Bootstrap core JavaScript
================================================== -->

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

 

查看效果

连续运行python manage.py makemigrations, python manage.py migrate和python manage.py runserver,  打开http://127.0.0.1:8000/myrestaurants/就可以看到以下效果了。

 

餐厅列表（用户登录后跳转到添加餐厅页面）

创建餐厅(用户创建餐厅后跳转到餐厅详情)

餐厅详情页面(用户登录后才能点评)

用户登录后可以修改餐厅信息或提交点评

修改餐厅详情(每个登录用户只能修改自己创建的餐厅)

 

小结

我们利用Django开发了一个简单的餐厅点评网站，实现了以下4个标黄的功能性页面。下篇教程中，我们将开发剩余4个功能性页面，欢迎关注我的微信公众号获取更多更新。

• 查看餐厅(restaurants)列表

• 查看餐厅详情(包括名称，地址，电话，菜品和点评)

• 创建餐厅 - 仅限登录用户

• 修改餐厅 - 每个登录用户只能修改自己创建的餐厅

• 给餐厅添加菜品(dishes) - 仅限登录用户

• 修改菜品信息 - 每个登录用户只能修改自己创建的菜品

• 查看菜品详情(品名，描述, 图片和价格)

• 给餐厅添加评论(review)和评分(rating)