首先,我们先实现留言板的功能,然后再去实现内容保存的功能。
实现留言板的功能,我们需要一个界面显示。我们先完成留言板在界面的显示功能。
创建项目:
settings.py文件中设置。
1.app的注册。
2.templates的路径。
前面的文章已经讲过多次,此处不再赘述。
因为我们还需要实现留言内容的保存和更新等功能,所以我们也需要用到mysql数据库,来对数据做一个储存功能。
打开mysql,新建一个数据库。然后进入settings.py文件中对databases进行设置:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'message',
'HOST': 'localhost',
'POST': 3306,
'USER': 'root',
'PASSWORD': '123456',
}
}
进入myPro文件夹的__init__.py文件中做设置:
import pymysql
pymysql.install_as_MySQLdb()
接着,在models.py中进行表和字段的创建:
from django.db import models
# Create your models here.
class Message(models.Model):
# 设置一个自动增长的id
m_id = models.AutoField(primary_key=True)
# TextField和CharField都是文本样式,基本上没有太大差别,不过TextField理论上是无限长的,CharField需要指定长度
m_name = models.TextField()
m_email = models.CharField(max_length=50)
m_address = models.CharField(max_length=100)
m_message = models.TextField()
然后迁移文件,查看数据库的创建结果。
python manage.py makemigrations
python manage.py migrate
打开数据库,可以看到如下的界面:
此时,我们的数据库已经创建完毕。
下面,先测试views.py,urls.py和add.html文件的连接。
views.py文件代码如下:
from django.shortcuts import render
# Create your views here.
def add(request):
return render(request,'add.html')
urls.py文件代码如下:
from django.contrib import admin
from django.urls import path
from myApp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('add/',views.add)
]
python manage.py runserver 启动服务器,打开浏览器,输入网址:http://localhost:8000/add/
不报错,说明我们的连接是没有问题的。
我们下面先把留言板的面板显示在界面上。因为我们在写界面的前端代码是,通常需要一个静态文件夹来对界面的一些标签做设置。此处我们也需要这样一个文件夹。
在myPro工程项目文件夹下,新建一个static的文件夹。
在此文件夹下,新建一个message.css文件,这个文件是我们在处理界面的标签样式使用。
同样需要在settings.py文件下设置路径:
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')
]
下面来到base.html文件进行母版界面的设置,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{# 设置根据文件路径来引入指定的文件 #}
<link rel="stylesheet" href="/static/message.css">
<title>留言板</title>
</head>
<body>
<main>
<header>
<h2>留言板</h2>
<h4>请留下你的信息</h4>
</header>
<form action="">
{% csrf_token %}
<label for="">姓名</label>
<br>
<input name="name" type="text" placeholder="请输入姓名">
<br>
<br>
<label for="">邮箱</label>
<br>
<input name="email" type="" placeholder="请输入邮箱地址">
<br>
<br>
<label for="">联系地址</label>
<br>
<input name="address" type="text" placeholder="请输入联系地址">
<br>
<br>
<label for="">留言</label>
<br>
<textarea name="message" id="" placeholder="请输入留言"></textarea>
<br>
</form>
</main>
</body>
</html>
来到message.css文件对界面样式进行设置,代码如下:
html,body{
height:100%;
margin:0;
}
main{
border:1px solid black;
width: 500px;
margin:100px auto;
background-color: #66aabf;
}
header{
color: white;
text-align: center;
background-color: #99d4ff;
height:90px;
padding-top:20px;
}
h2{
font-weight: normal;
margin: 5px;
}
form{
/*border:1px solid red;*/
width:90%;
margin:20px auto;
}
label{
color: gray;
}
input{
width:99%;
height: 25px;
}
textarea{
width:99%;
height: 60px;
resize:none;
}
来到add.html文件,继承母版设置,代码如下:
{% extends 'base.html' %}
此时刷新界面,界面显示如下:
这个时候,我们发现界面上的留言板缺少了一个提交的功能,我们来到base.html文件内加一个插槽,然后在add.html文件内添加上这个按钮即可。
添加插槽的代码如下:
{% block submit %}
{% endblock submit %}
在add.html文件中添加此插槽对应的提交按钮,代码如下:
{% block submit %}
<button type="submit">提交</button>
{% endblock submit %}
注意:插槽一定要加载form表单之内,不然很影响美观,设置过后的界面如下图所示:
此时,我们就完成了留言板的面板设计了,接下来,我们要做的工作是完成提交功能,所需要的数据库我们已经创建好了,需要在views.py文件中完成这个功能。
在这里,我们遇到了一个问题,就是我们在提交之后,是要经过form表单,然后再实现界面的跳转,那么我们要将form表单的action属性,不能直接写死。这样,我们就用到了reverse()函数,这个函数可以对url进行反向映射。
我们在这里同样需要设置form的请求方式,默认情况下,应为get请求,假设第一次是get请求进入界面,此时通过reverse()函数对此时界面的url进行反向映射,给到form,那么form接收之后,通过post请求,对数据进行一番处理,这里的处理是指存到数据库。我们不是就可以完成所需要的功能了吗?
来到views.py文件中,代码如下:
from django.shortcuts import render,reverse
from .models import Message
from django.http import HttpResponse
# Create your views here.
def add(request):
if request.method == 'GET':
# reverse()函数可以对url进行反向映射,之前是通过url地址找到指定的网页,现在是通过reverser()函数根据url名字来找到url地址
url = reverse('add')
return render(request,'add.html',{'url':url})
elif request.method == 'POST':
# 将通过post请求输入的那么值储存到数据库
name = request.POST['name']
email = request.POST['email']
address = request.POST['address']
message = request.POST['message']
# 创建实例化对象
message_model = Message()
message_model.m_name = name
message_model.m_email = email
message_model.m_address = address
message_model.m_message = message
message_model.save()
return HttpResponse('添加成功')
urls.py文件中要给‘add/’路由添加一个name属性。代码如下:
path('add/',views.add,name = 'add')
此时刷新页面,添加数据,然后点击提交按钮,我们会看到,添加成功四个字,如下:
下面我们要实现的就是保存所有的留言数据了。
保存数据的话,我们需要先在数据库中查找出来数据,然后直接展示在另一个界面上即可。
来到views.py文件中,在数据库的查找数据的代码如下,只需把这句查找的代码直接替换掉前面返回‘添加成功’四个字的代码即可。
allInfo = Message.objects.all()
return render(request,'showAll.html',{'allInfo':allInfo})
此时,我们需要新建一个showAll.html文件对这个保存数据的界面做处理。
仍然在templates文件夹之下,来到showAll.html文件,对界面处理的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/message.css">
<title>所有留言</title>
</head>
<body>
<header>
<!--添加两个按钮,一个做修改留言之用,一个做添加留言之用-->
<button onclick="window.location.href='http://localhost:8000/add'">添加留言</button>
<button onclick="window.location.href='http://localhost:8000/update'">修改留言</button>
<button onclick="window.location.href='http://localhost:8000/delete'">删除留言</button>
</header>
{% for message in allInfo %}
<div class="message_item">
留言人:{{message.m_name}}
<br>
留言人邮箱:{{message.m_email}}
<br>
留言人地址:{{message.address}}
<br>
留言内容:{{message.m_message}}
</div>
{% endfor %}
</body>
</html>
我们在上面的界面中也新建了两个按钮,一个是修改留言用的,一个是添加留言用的。
此时,对界面的样式处理,仍然在message.css文件内,代码如下:
.message_item{
border:1px solid black;
width:80%;
margin:10px auto;
}
刷新界面,views.py 文件中,关于showall的设置代码如下:
path('showall/',views.showAll,name='showAll')
视图文件views.py文件中,代码如下:
def showAll(request): allInfo = Message.objects.all() return render(request,'showAll.html',{'allInfo':allInfo})
界面显示如下:
下面我们来修改留言内容。修改留言内容,当我们点击上图的按钮时候,肯定需要另一个界面来进行处理,然后把数据重新提交数据库,就可以完成这个修改的功能了。
我们先新建一个界面文件,update.html
然后,我们需要在母版界面上添加一个插槽,作为我们修改数据时候的查询使用,代码如下:
{% block messageID %}
{% endblock messageID %}
插槽也是在form表单里面。然后来到update.html文件内做界面处理:
{% extends 'base.html' %} {% block messageID %} <label for="">ID</label> <br> <input type="text" name="id" placeholder="请输入数据的id"> <br> {% endblock %} {% block submit %} <button type="submit">更新</button> {% endblock submit %}
接着我们在views.py文件内做数据更新的处理,代码如下:
def update(request):
# 如果通过修改按钮或者通过网址的方式进入的更新页面,那么默认进入页面的请求方式为get
if request.method == 'GET':
url = reverse('update')
return render(request, 'update.html', {'url': url})
elif request.method == 'POST':
# 根据id寻找要更改的数据
_id = request.POST['id']
m_name = request.POST['name']
m_email = request.POST['email']
m_address = request.POST['address']
m_message = request.POST['message']
message_update = Message.objects.get(m_id=_id)
message_update.m_name = m_name
message_update.m_email = m_email
message_update.m_address = m_address
message_update.m_message = m_message
message_update.save()
return HttpResponse('更新成功')
在urls.py中添加update的路由,代码如下:
path('update/',views.update,name='update')
界面如下:
上面ID输入框就是更改的数据id
按着输入框的提示,就可以修改,点击更新按钮之后,就更新成功了。
这就是我们刚才更新过的数据。
下面我们添加一个删除的功能,和修改的功能类似,同样是三个文件的设置,views.py文件,代码如下:
def delete(request):
if request.method == 'GET':
url = reverse('delete')
return render(request, 'delete.html', {'url': url})
elif request.method == 'POST':
# 根据id寻找要更改的数据
_id = request.POST['id']
# 根据id查找数据,
message_delete = Message.objects.get(m_id=_id)
# 删除查找到的数据
message_delete.delete()
message_delete.save()
return HttpResponse('删除成功')
urls.py文件代码如下:
path('update/',views.update,name='update'),
delete.html文件代码如下:
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/message.css"> <title>删除留言</title> </head> <body> <main> <header> <h2>留言板</h2> <h4>请留下你的信息</h4> </header> <form action="{{url}}" method="POST"> {% csrf_token %} <label for="">ID</label> <br> <input type="text" name="id" placeholder="请输入要删除的id"> <br> <button type="submit">删除</button> </form> </main> </body> </html> 点击showall界面的删除按钮即可跳转到删除界面,输入删除的id即可删除对应的数据。
最后我们再在showall界面添加一个查看的按钮:
<button onclick="window.location.href='http://localhost:8000/select'">查看留言</button>
urls.py文件设置路由,代码如下:
path('select/',views.select,name = 'select')
views.py文件中代码如下:
def select(request): allInfo = Message.objects.all() return render(request, 'select.html', {'allInfo': allInfo})
界面处理的select.html文件代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border:1px solid black; } </style> </head> <body> {% for message in allInfo %} <div class="message_item"> 留言人:{{message.m_name}} <br> 留言人邮箱:{{message.m_email}} <br> 留言人地址:{{message.address}} <br> 留言内容:{{message.m_message}} </div> {% endfor %} </body> </html>
此时我们完成了增删改查的功能,来到showall界面,如下:
想要使用哪个功能就可以自主选择了。