前言

本章主要讲述 【留言】界面及 【留言】功能的实现

ps：功能这块的话，和之前【文章详情评论】代码差不多，都比较简单，页面这part我觉得算是符合我的审美了，毕竟咱也不是前端 0.0

环境：

Pycharm
python3.6
mysql 5.7
django 2.0.13

一、新功能项目概览

二、User模块具体实现

留言代码部分我统一写在【user】应用下

1、urls.py

添加两路由，一个是【查询留言列表】，另一个是【添加留言】

# 留言列表
path('leave_message', leave_message, name='leave_message'),
# 添加留言
path('add_leave_msg', add_leave_msg, name='add_leave_msg'),

2、views.py

对应添加两视图函数

def leave_message(request):"""返回留言界面:param request::return:"""# 查询所有留言leave_msgs = LeaveMessage.objects.all().order_by('-create_time')return render(request, 'user/leave_message.html', context={'leave_msgs': leave_msgs})def add_leave_msg(request):"""添加留言:param request::return:"""# 拿到前端传的值nickname = request.GET.get('nickname')content = request.GET.get('saytext')# 昵称和内容都不为空时，保存数据库data = {}if nickname is not None and content is not None:leave_msg = LeaveMessage.objects.create(nickname=nickname, content=content)if leave_msg:data = {'status': 1,'msg': '留言成功'}else:data = {'status': 0,'msg': '留言成功'}else:logging.info("添加留言失败，请填写昵称和留言内容再添加噢！")return JsonResponse(data)

3、models.py

新增留言模型，数据库怎么设计你们可以自己优化，我这里直接引用之前的评论表了

class LeaveMessage(models.Model):"""留言表"""# 要添加null=True，不添加的话进行迁移数据库的时候会提示给默认值nickname = models.CharField(verbose_name='昵称', max_length=16, null=True)content = models.CharField(verbose_name='留言内容', max_length=240, null=True)create_time = models.DateTimeField(verbose_name='留言时间', auto_now=True)def __str__(self):return self.nicknameclass Meta:db_table = 'leave_message'verbose_name = "留言"verbose_name_plural = verbose_name

4、迁移数据库

只要models进行了修改，就要记得迁移

python manage.py makemigrations
python manage.py migrate

三、templates模块具体实现

1、在user下新增leave_message.html

{% extends 'base.html' %}
{% load staticfiles %}{#  title部分 #}
{% block title %}Mikasa个人博客 - 一个热爱敲代码的女程序媛的个人博客网站
{% endblock %}{# css样式部分 #}
{% block mycss %}<link href="{% static 'css/book.css' %}" rel="stylesheet"><link href="{% static 'css/leavemsg.css' %}" rel="stylesheet">
{% endblock %}{# 内容部分 #}
{% block content %}<div class="container"><h2 class="ctitle"><b>留言板</b> <span>你，生命中最重要的过客，之所以是过客，因为你未曾为我停留。</span></h2>{#   留言板     #}<div class="gbook"><div class="about">{#  加载条   #}<div id="fountainG"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></div>{#  女孩   #}<div class="about_girl"><span><a href="/"><img src="{% static 'images/girl.jpg' %}"></a></span><p>你为什么不值得？你永远值得</p></div><br><br>{#  留言展示部分   #}<div class="news_pl"><h2>留言板</h2><ul>{% for leave_msg in leave_msgs %}{#    遍历拿到所有留言            #}<li><p><span>{{ leave_msg.nickname }}</span><span>{{ leave_msg.create_time }}</span></p><p>{{ leave_msg.content }}</p></li>{% endfor %}</ul><br></div>{# 发表留言部分 #}<div class='plpost'><h2>留言</h2><p><input type="text" name="uname" id="uname" placeholder="请输入用户昵称"style="height: 30px;" required></p><p><textarea name="saytext" id="saytext" cols="70" rows="8"required placeholder="来说句话吧~"></textarea></p><p><input type="submit" value="留言" id="btncomment" style="height: 30px;width: 80px;"></p></div></div></div></div>
{% endblock %}{# js部分 #}
{% block myjs %}<script>$(function () {// 1、得到按钮对象$('#btncomment').click(function () {// 2、从文本框中取值var nickname = $('#uname').val();var saytext = $('#saytext').val();// 3、发送请求$.getJSON('{% url 'user:add_leave_msg' %}', {nickname: nickname,saytext: saytext,}, function (data) {console.log(data)if (data.status == 1) {window.location.href = '{% url 'user:leave_message' %}'}})});});</script>
{% endblock %}

2、base.html

<a href="{% url 'user:leave_message' %}"><span>留言</span><span class="en">Saying</span></a>

3、新增leavemsg.css

/* 留言板css样式*/
.news_pl {width: 100%;/*background: rgba(248, 248, 248, 0.77);*//*overflow: hidden;*/line-height: 40px;font-size: 15px;color: #000000;
}/*.news_pl ul {*/
/*    border-bottom: #000 2px solid;*/
/*}*/.news_pl li{border-bottom: #000 1px solid;
}.news_pl h2 {border-bottom: #000 2px solid;line-height: 40px;font-size: 18px;padding-left: 30px;color: #000000;
}.news_pl p {padding-left: 15px;padding-top: 10px;padding-bottom: 10px;
}.news_pl span {font-size: 18px;
}.news_pl span:last-child {float: right;/*padding-left: 350px;*/padding-right: 200px;
}/* 添加留言css样式*/
.plpost {width: 100%;background: rgba(248, 248, 248, 0.77);overflow: hidden;line-height: 40px;font-size: 15px;color: #000000;
}.plpost span {padding-left: 8px;
}.plpost h2 {border-bottom: #000 2px solid;line-height: 40px;font-size: 18px;padding-left: 20px;color: #000000;
}.plpost p {padding-left: 15px;padding-top: 10px;padding-bottom: 10px;
}.plpost > p:first-child {height: 30px;line-height: 30px;color: #686868;
}.plpost > p > span:first-child {float: left;font-size: 25px;color: darkgray;
}

4、book.css

这里只是简单调整一下，之前静态资源中已经有该样式

@charset "gb2312";
.gbook {margin: 30px
}/* loading  */
#fountainG {position: relative;width: 240px;height: 29px;margin-bottom: 30px
}#fountainG li {position: absolute;top: 0; /* background: #6dabdc; 默认颜色 */width: 29px;height: 29px;-moz-animation: bounce_fountainG 1.2s linear infinite;-moz-transform: scale(.3);-moz-border-radius: 19px;-webkit-animation: bounce_fountainG 1.2s linear infinite;-webkit-transform: scale(.3);-webkit-border-radius: 19px;-ms-animation: bounce_fountainG 1.2s linear infinite;-ms-transform: scale(.3);-ms-border-radius: 19px;-o-animation: bounce_fountainG 1.2s linear infinite;-o-transform: scale(.3);-o-border-radius: 19px;animation: bounce_fountainG 1.2s linear infinite;transform: scale(.3);border-radius: 19px;
}#fountainG li:first-child {left: 0;-moz-animation-delay: 0.48s;-webkit-animation-delay: 0.48s;-ms-animation-delay: 0.48s;-o-animation-delay: 0.48s;animation-delay: 0.48s;
}#fountainG li:nth-child(2) {left: 30px;-moz-animation-delay: 0.6s;-webkit-animation-delay: 0.6s;-ms-animation-delay: 0.6s;-o-animation-delay: 0.6s;animation-delay: 0.6s;
}#fountainG li:nth-child(3) {left: 60px;-moz-animation-delay: 0.72s;-webkit-animation-delay: 0.72s;-ms-animation-delay: 0.72s;-o-animation-delay: 0.72s;animation-delay: 0.72s;
}#fountainG li:nth-child(4) {left: 90px;-moz-animation-delay: 0.84s;-webkit-animation-delay: 0.84s;-ms-animation-delay: 0.84s;-o-animation-delay: 0.84s;animation-delay: 0.84s;
}#fountainG li:nth-child(5) {left: 120px;-moz-animation-delay: 0.96s;-webkit-animation-delay: 0.96s;-ms-animation-delay: 0.96s;-o-animation-delay: 0.96s;animation-delay: 0.96s;
}#fountainG li:nth-child(6) {left: 150px;-moz-animation-delay: 1.08s;-webkit-animation-delay: 1.08s;-ms-animation-delay: 1.08s;-o-animation-delay: 1.08s;animation-delay: 1.08s;
}#fountainG li:nth-child(7) {left: 180px;-moz-animation-delay: 1.2s;-webkit-animation-delay: 1.2s;-ms-animation-delay: 1.2s;-o-animation-delay: 1.2s;animation-delay: 1.2s;
}#fountainG li:nth-child(8) {left: 210px;-moz-animation-delay: 1.32s;-webkit-animation-delay: 1.32s;-ms-animation-delay: 1.32s;-o-animation-delay: 1.32s;animation-delay: 1.32s;
}@-moz-keyframes bounce_fountainG {0% {-moz-transform: scale(1);background-color: #6dabdc;}100% {-moz-transform: scale(.3);background-color: #FFFFFF;}
}@-webkit-keyframes bounce_fountainG {0% {-webkit-transform: scale(1);background-color: #6dabdc;}100% {-webkit-transform: scale(.3);background-color: #FFFFFF;}
}@-ms-keyframes bounce_fountainG {0% {-ms-transform: scale(1);background-color: #6dabdc;}100% {-ms-transform: scale(.3);background-color: #FFFFFF;}
}@-o-keyframes bounce_fountainG {0% {-o-transform: scale(1);background-color: #6dabdc;}100% {-o-transform: scale(.3);background-color: #FFFFFF;}
}@keyframes bounce_fountainG {0% {transform: scale(1);background-color: #6dabdc;}100% {transform: scale(.3);background-color: #FFFFFF;}
}/* about */
.about {padding: 20px 0;overflow: hidden
}.about ul {width: 1000px;margin: auto;line-height: 24px
}.about_girl span img {width: 130px;height: 130px;border-radius: 100%
}.about_girl {width: 100%;margin: 10px auto 0;overflow: hidden
}.about_girl span {float: left;margin-right: 30px
}.about_girl p {margin: 20px;background: #ececec;color: #444;float: left;padding: 20px;width: 46%;border-radius: 6px;position: relative;box-shadow: inset #999 -1px -1px 1px;;text-shadow: #fff 1px 1px 0px;width: 450px
}.about_girl p::before {content: "";width: 0px;height: 0px;border-style: solid;border-width: 11px 20px 10px 0;border-color: transparent #ececec transparent;position: absolute;left: -20px;top: 24px;
}/* 三角形 */
.gbko {background: rgb(255, 255, 255);padding: 0 30px 30px 30px;margin: 30px;border-radius: 15px;
}

四、项目启动及查看

Django(二)精美博客搭建(13)实现留言页面及留言功能相关推荐

Django(二)精美博客搭建(1)实现登录/注册功能
前言之前我们用Django框架做了一个很简单的个人博客搭建,不论是页面还是功能都很粗糙所以从这篇开始我打算做一个比较完整的[个人博客网站],可能会分好几篇博客来讲述等所有功能完善的差不多后,再考 ...
计算机os五大功能,美博客列Mac OS X Lion系统五大功能
导语:美国科技博客CrunchGear今天刊文,列举了苹果即将正式发布的Mac OS X Lion操作系统的5个优秀功能. 以下为文章全文: 有传闻称,苹果将于7月14日正式发布Mac OS X Li ...
django多个html模板,django二、模板详解（templates）——页面视图
django模板(templates) 在Django框架中,模板是可以帮助开发者快速生成呈现给用户页面的工具模板的设计方式实现了我们MTV中V和T的解耦,VT有着N:M的关系,一个V可以调用任意T ...
博客搭建攻略（二）：工具推荐
回顾:博客搭建攻略(一):平台选择预告:博客搭建攻略(三):创造收益,如果兴趣就关注我吧~ 通过上一篇的教程,根据自己的需求选择一款博客平台,就能完成博客的搭建.在这之后,我们的主要任务就是创作内容 ...
令人愉快的 Nuxt3 教程 (二): 快速轻松地搭建博客
令人愉快的 Nuxt3 教程 (二): 快速轻松地搭建博客继令人愉快的 Nuxt3 教程 (一): 应用的创建与配置后,我们已经成功的创建了一个 Nuxt3 应用,同时已经添加了大量的开发配置. ...
Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件
Django个人博客搭建1-创建Django项目和第一个App Django个人博客搭建2-编写文章Model模型,View视图 Django个人博客搭建3-创建superuser并向数据库中添加数据 ...
Django个人博客搭建8-优化文章模块
Django个人博客搭建1-创建Django项目和第一个App Django个人博客搭建2-编写文章Model模型,View视图 Django个人博客搭建3-创建superuser并向数据库中添加数据 ...
【Hexo博客搭建】将其部署到GitHub Pages（二）：如何初始化并部署？
简介: 本系列文章属于半笔记半教程的零基础小白入门文,教你将 Hexo 部署到 GitHub Pages 应该怎么做,跟着此系列文章最终可以获得自己的静态博客网站.流程很长,分成不同的篇幅,此为本系列 ...
博客搭建攻略（三）：创造收益
在前两篇博客搭建攻略中,主要介绍了博客平台的选择以及写博的常用工具.作为本系列的最后一篇,可能也是大家最感兴趣的一篇,我将给大家介绍一下在博客编写过程中,是如何创造收益的. 下面,以我个人为例,总结一 ...

Django(二)精美博客搭建(13)实现留言页面及留言功能

前言

一、新功能项目概览

二、User模块具体实现

1、urls.py

2、views.py

3、models.py

4、迁移数据库

三、templates模块具体实现

1、在user下新增leave_message.html

2、base.html

3、新增leavemsg.css

4、book.css

四、项目启动及查看

Django(二)精美博客搭建(13)实现留言页面及留言功能相关推荐

最新文章

热门文章