三、设计留言板功能
项目目录结构
自动生成的目录
在项目创建好后，django会自动生成一些必要的目录和文件，正确情况下的目录结构应该如下图：
如果不是这样的结构可能的情况是：django版本不对或这不是django项目。
其中的一些文件和目录的功能如下：
- setting.py：项目全局配置文件
- urls.py：urls的配置入口
- wsgi.py：django启动需要的文件
- templates：放置静态文件如html的目录
- manage.py：启动django的只要文件
创建额外的目录
创建app
django只是一个web框架，其中的功能是通过app来实现的，所以我们需要创建应用目录存放我们的应用程序。
点击菜单栏“工具” –> “Run manage.py Task” 来创建app。这时，在下方会出现一个django的命令行，比如我们创建名为message的app就可以输入命令：
startapp message
创建完成后，在左侧的目录结构中可以看到名为message的app出现了，并且与我们的项目目录同级：
创建static目录
创建static目录存放静态文件：js、css、图片等。
创建log目录
创建log目录存放往网站的日志文件。
创建media目录
创建media目录存放用户上传的资源文件。
创建后的情况
app过多导致的问题及解决
当app随着项目的进行越来越多的时候，我们的项目目录下的app名称的文件夹也就越来越多，显得十分复杂。解决办法如下：
创建一个新的目录apps，将app（message拖入apps目录内），自动生成一个__init__.py的文件，表明这是一个包可以导入。
这样就可以通过下面的代码导入message的views.py文件：
from apps.messages import views运行时的一个警告
在运行的时候会看见下面的一个警告：
这个表示没有进行数据库models的初始化，可移植性下面的命令进行初始化：
python manage.py migrate现在暂时不做，不会有影响，后面使用到数据库后再做不迟。
留言板页面配置
功能分析
一个留言板应当具有如下的功能：
- 明确的提示信息。
- 能够获取用户的名称、邮箱、联系方式、留言内容等信息。
- 有一个提交按钮向后台提交数据。
代码
message_form.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="/static/css/style.css">
<style>
.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;
}
style>
head>
<body>
<form action="/form/" method="post" class="smart-green">
<h1>留言信息
<span>请留下你的信息.span>
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>
<input id="address" type="text" value="" name="address" 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> span>
<input type="submit" class="button" value="提交"/>
label>
<input type='hidden' name='csrfmiddlewaretoken' value='SfHkbL4feo1G00sJQtbO7TtLN4c2BUwa' />
form>
body>
html>说明
上边是一个html的页面，包含了css和js的内容，将其保存到templates中，它的效果如下：
分离css、js和html
目前将html和css、js写在一起，这样不符合一般的项目规范，所以需要把css、js和html代码分开。
首先在static目录下创建css和js两个目录，然后在css目录下创建style.css样式表文件，从message_form.html中将css部分（即中间的部分）复制到style.css中去。复制进去后，删除首位部分的
django连接数据库
设置django连接mysql
在django中默认是连接自己的sqlite3，我们需要修改setting.py来配置连接自己的mysql，原始的配置如下：
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}需要修改成如下的形式：
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'testdjangoz',
'USER': 'root',
'PASSWORD': 'redhat',
'HOST': '127.0.0.1'
}
}NAME填写需要连接的库名，后面依次填写用户名和密码。为了不影响后面额工作，建议先删除之前的测试的表。另外，也需要安装MySQLdb这个模块。
然后点击“工具” –> “Run manage.py Tast”，出现以下显示表示成功:
生成系统默认数据表
接着在上面显示的命令行依次用下面的命令来生成表：
makemigrations
migrate
接着去Navicat中可以看到生成了很多django系统默认的内置数据表：
完成之后点击运行我们的项目，并在浏览器访问我们的项目，出现如下的情况则说明正常：
展示留言页面
配置urls.py文件
之前说过，urls.py文件是路由访问的入口，所以要想显示留言页面必须在这里添加留言页面的url，配置如下：
urlpatterns = [
url(r'^admin/', admin.site.urls), url(r'^form/$', getform)
]这里就是添加了
url(r'^form/$', getform)这一段，表示只要匹配到以form开头，以/结尾的url，就交给getform进行处理。
配置views.py文件
views.py文件是定义视图函数的地方，相当于前端页面后面的逻辑部分。前面的form页面的视图函数是getform，所以要在views.py中创建相应的函数。代码添加下面的部分：
我们把视图函数创建在app message中的views.py中
from django.http import request
def getform(request):
return render(request, 'message_form.html')此外，还需要在urls.py中添加一行代码以导入视图函数：
from apps.message.views import getform现在再访问django项目，会出现如下的情况，发现设置的css没有了：
设置setting.py中的静态文件
在setting.py中，我们只设置了静态文件的存放位置：
STATIC_URL = '/static/'需要添加如下的代码来指明查找路径：
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'DjangoTestProject/static')
]现在在浏览器中访问就可以看见加载了css样式的html页面了。