• 欢迎访问金笔头博客,这是一个菜鸟(伪)程序员的自留地,欢迎访问我的github:点击进入

Django2.0笔记(2)-实现简单的留言板功能

python eason 3369次浏览 3个评论 扫描二维码

开发环境

  • PyCharm 2017.3.2 (Professional Edition)
  • Python 3.6.3
  • windows 10
  • Sqlite3

目标

实现在线留言功能,留言信息保存到数据库,可登录后台查看留言信息。

实践

创建项目

使用Pycharm创建项目message_board,自动生成的目录结构如下: Django2.0笔记(2)-实现简单的留言板功能 __init__.py一个空文件,告诉 Python 该目录是一个 Python 包。

settings.py项目的全局配置文件,很重要。

urls.py项目的路由配置文件,这是一个django项目的主入口文件。

wsgi.py Django启动需要的文件。

templates文件夹用来放置HTML文件。

manage.py一个实用的命令行工具,可让你以各种方式与该 Django 项目进行交互。

创建APP

在一个大型的Project中,可以包含很多APP,APP相当于一个相对独立的功能模块,其遵循的设计理念是MVT(类似MVC),而且每个APP可以在不同的Project中复用,这也符合Django的编程理念,即:不要做重复的事情。这里我们通过Pycharm的Tools-->Run manage.py Task创建APP Django2.0笔记(2)-实现简单的留言板功能 可以看到当执行startapp message命令后生成了message目录

新建static目录

使用static目录来存放网站的静态文件如js,css,图片等。

创建表单文件msg.html

templates目录下新建msg.html文件,内容如下:

<!DOCTYPE html>
<html lang="zh">
{% load  staticfiles %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>留言板</title>
    <link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="/form/" method="post" class="smart-green">
    <h1>留言信息</h1>
    <label>
        <span>姓名 :</span>
        <input id="name" type="text" name="name" class="error" placeholder="请输入您的姓名"/>
        <div class="error-msg"></div>
    </label>

    <label>
        <span>邮箱 :</span>
        <input id="email" type="email" value="" name="email" placeholder="请输入您的邮箱地址"/>
        <div class="error-msg"></div>
    </label>
    <label>
        <span>内容 :</span>
        <textarea id="message" name="message"  placeholder="请输入您的建议"></textarea>
        <div class="error-msg"></div>
    </label>
    <div class="success-msg"></div>
    <label>
        <span>&nbsp;</span>
        <input type="submit" class="button" value="提交"/>
    </label>
    {#避免提交表单时出现CSRF验证失败. 请求被中断.的403错误#}
    {% csrf_token %}
</form>
</body>
</html>

新建样式文件style.css

在static目录下新建css目录,保存如下样式到css目录:

.smart-green {
        margin-left: auto;
        margin-right: auto;
        max-width: 500px;
        background: #F8F8F8;
        padding: 30px 30px 20px 30px;
        font: 12px Arial, Helvetica, sans-serif;
        color: #666;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }

    .smart-green h1 {
        font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
        padding: 20px 0px 20px 40px;
        display: block;
        margin: -30px -30px 10px -30px;
        color: #FFF;
        background: #9DC45F;
        text-shadow: 1px 1px 1px #949494;
        border-radius: 5px 5px 0px 0px;
        -webkit-border-radius: 5px 5px 0px 0px;
        -moz-border-radius: 5px 5px 0px 0px;
        border-bottom: 1px solid #89AF4C;
    }

    .smart-green h1 > span {
        display: block;
        font-size: 11px;
        color: #FFF;
    }

    .smart-green label {
        display: block;
        margin: 0px 0px 5px;
    }

    .smart-green label > span {
        float: left;
        margin-top: 10px;
        color: #5E5E5E;
    }

    .smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
        color: #555;
        height: 30px;
        line-height: 15px;
        width: 100%;
        padding: 0px 0px 0px 10px;
        margin-top: 2px;
        border: 1px solid #E5E5E5;
        background: #FBFBFB;
        outline: 0;
        -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
        box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
        font: normal 14px/14px Arial, Helvetica, sans-serif;
    }

    .smart-green textarea {
        height: 100px;
        padding-top: 10px;
    }


    .smart-green .button {
        background-color: #9DC45F;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-border-radius: 5px;
        border: none;
        padding: 10px 25px 10px 25px;
        color: #FFF;
        text-shadow: 1px 1px 1px #949494;
    }

    .smart-green .button:hover {
        background-color: #80A24A;
    }

    .error-msg{
        color: red;
        margin-top: 10px;
    }
    .success-msg{
        color: #80A24A;
        margin-top: 10px;
        margin-bottom: 10px;
    }

settings.py

修改settings.py,改动部分如下:

DEBUG = False
ALLOWED_HOSTS = ['*']
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False
# 确保设置DEBUG为False时样式显示正常
if DEBUG:
    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'static'),
    ]
else:
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

views.py

编辑message目录下的views.py文件,内容如下:

from django.shortcuts import render


def get_message(request):
    return render(request, 'msg.html')

修改urls.py

内容如下:

from django.contrib import admin
from django.urls import path
from message.views import get_message
from django.conf.urls import url
from django.conf import settings
from django.views.static import serve

urlpatterns = [
    path('admin/', admin.site.urls),
    path('message/', get_message),
]
# 确保设置DEBUG为False时样式显示正常
if not settings.DEBUG:
    urlpatterns += [
        url(r'^static/(?P<path>.*)$', serve,
            {'document_root': settings.STATIC_ROOT, 'show_indexes': settings.DEBUG})
    ]

注册应用

修改setting.py文件,找到INSTALLED_APPS列表,在其中注册刚才新建的应用message

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'message',
]

定义模型

Django内置ORM功能允许我们操作数据库像使用类和类属性一样,使我们不用再写冗长的sql语句,这里说的定义模型实际上是定义模型类,这个类和数据库表相对应,且继承自models.Model,类的属性则代表数据库表中的字段。修改message目录下的models.py,定义模型类Message

from django.db import models
from django.utils import timezone


class Message(models.Model):
    name = models.CharField(max_length=20, verbose_name='姓名', null=False, blank=True, default="")
    email = models.EmailField(verbose_name='邮箱', null=False, blank=True, default="")
    text = models.TextField(verbose_name='留言内容', null=False, blank=True, default="")
    create_time = models.DateTimeField(default=timezone.now, verbose_name='创建时间', null=False, blank=False)

    class Meta:
        verbose_name = '留言板内容'
        verbose_name_plural = '留言板列表'  # 指定模型复数名称
        ordering = ['create_time']  # 按 name 字段排序
        db_table = "meassage"

    # 使在后台显示的对象名称更加友好
    def __str__(self):
        return self.name

Meta是Message 这个类中的嵌套类,用来设置一些与特定模型相关的选项。 参数解释:

  • max_length 字段最大长度,CharField必须指明默认最大长度
  • verbose_name 一个易于理解的名称
  • null 字段是否为空
  • blank 字段是否为空
  • default 字段默认值

注册模型

修改message文件夹下的admin.py文件来注册模型

from django.contrib import admin
from .models import Message


admin.site.register(Message)

生成库表

模型定义好之后,我们需要在数据库中生成对应的表,在这之前先介绍两个相关命令:

  • makemigrations 基于当前的model创建新的迁移策略文件
  • migrate 用于执行迁移动作,生成数据库表

需要说明的是migrate命令仅仅创建数据库里还没有的表,它并不对已存在的数据表进行同步修改,也不处理数据模型的删除。 下面执行makemigrations message开始生成策略文件: Django2.0笔记(2)-实现简单的留言板功能 这时候django已经为我们准备好了数据库更新的策略文件message\migrations\0001_initial.py。 下一步是执行migrate message让django帮我们执行这些文件 Django2.0笔记(2)-实现简单的留言板功能 到这里数据库里已经有meassage表了。 Django2.0笔记(2)-实现简单的留言板功能

页面表单数据保存

再次修改message目录下的views.py文件,添加表单提交时后台对应的处理方法get_content,修改后的代码如下:

from django.shortcuts import render
from .models import Message
from django.http import HttpResponse


def get_message(request):
    return render(request, 'msg.html')


def get_content(request):
    if request.method == 'POST':
        name = request.POST.get('name', '')
        email = request.POST.get('email', '')
        message = request.POST.get('message', '')
        # 实例化对象
        o_message = Message()
        o_message.name = name
        o_message.email = email
        o_message.text = message
        # 调用save方法保存数据
        o_message.save()
        return HttpResponse('<h2>保存成功!</h2>')
    else:
        return render(request, 'msg.html')

接着修改urls.py文件,添加表单提交时对应的路由,修改后的代码如下:

from django.contrib import admin
from django.urls import path
from message.views import get_message
from message.views import get_content
from django.conf.urls import url
from django.conf import settings
from django.views.static import serve

urlpatterns = [
    path('admin/', admin.site.urls),
    path('message/', get_message),
    path('form/', get_content),
]
# 确保设置DEBUG为False时样式显示正常
if not settings.DEBUG:
    urlpatterns += [
        url(r'^static/(?P<path>.*)$', serve,
            {'document_root': settings.STATIC_ROOT, 'show_indexes': settings.DEBUG})
    ]

测试提交留言

Django2.0笔记(2)-实现简单的留言板功能 看图可知数据已经保存成功,下面讲解登录Django默认后台查看数据。

登录后台查看数据

到目前为止我们还没有建立后台用户,是无法登录Django默认后台的,下面我们来创建超级用户,使用命令migrate先初始化数据库 Django2.0笔记(2)-实现简单的留言板功能 然后使用命令createsuperuser创建超级用户 Django2.0笔记(2)-实现简单的留言板功能 由于Django的安全策略,常见的123456和1qaz2wsx等简单密码会被自动拒绝。下面打开http://127.0.0.1:8000/admin/, 发现后台样式不见了,好气哦! Django2.0笔记(2)-实现简单的留言板功能 别急,出现这种原因是因为admin所需的js ,css等静态文件虽然都在django的安装目录内,但是我们指定的静态文件夹却是当前项目路径下的static文件夹,解决办法是先通过collectstatic命令将后台页面所需的静态文件copy到当前项目路径下的static文件夹,再执行runserver命令启动服务器 Django2.0笔记(2)-实现简单的留言板功能 再次打开http://127.0.0.1:8000/admin/ ,一切正常 Django2.0笔记(2)-实现简单的留言板功能 下面演示登录Django默认后台查看留言内容 Django2.0笔记(2)-实现简单的留言板功能 至此,简易留言板功能已经全部完成,Done!

Github仓库地址:https://github.com/leeyis/message_board

有账户的不妨star一下啦~


金笔头博客, 版权所有丨如未注明 , 均为原创, 转载请注明Django2.0笔记(2)-实现简单的留言板功能
喜欢 (4)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 原版复制您的代码,结果首页无法显示,后台admin没有问题,麻烦问一下什么原因?
    如天之平2018-05-21 17:11 Reply Android 7.1.1 | Chrome 57.0.2987.132
    • 这篇文章中因为没有配置首页的路由,所以你直接进入首页会报错,你网址中应该加上/message
      eason2018-05-21 17:19 Reply Windows 10 | Chrome 66.0.3359.181
  2. 原版复制您的代码,结果出现404,找不到网页,您觉得是什么原因?
    如天之平2018-05-21 17:09 Reply Android 7.1.1 | Chrome 57.0.2987.132