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

前言

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

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.nickname

    class 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 %}
    
    
{% endblock %}

{# 内容部分 #}
{% block content %}
    
        留言板 你，生命中最重要的过客，之所以是过客，因为你未曾为我停留。
        {#   留言板     #}
        
            
                {#  加载条   #}
                
                    
                    
                    
                    
                    
                    
                    
                    
                
                {#  女孩   #}
                
                    


                    你为什么不值得？你永远值得
                
                



                {#  留言展示部分   #}
                
                    留言板
                    
                        {% for leave_msg in leave_msgs %}
                            {#    遍历拿到所有留言            #}
                            
                                
                                    {{ leave_msg.nickname }}
                                    {{ leave_msg.create_time }}
                                
                                {{ leave_msg.content }}
                            
                        {% endfor %}
                    
                    

                

                {# 发表留言部分 #}
                
                    留言
                    
                        
                    
                    
                            
                    
                    
                
            
        
    
{% endblock %}

{# js部分 #}
{% block myjs %}
    
{% endblock %}

2、base.html

留言Saying

3、新增leavemsg.css

.news_pl {
    width: 100%;
    
    
    line-height: 40px;
    font-size: 15px;
    color: #000000;
}





.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-right: 200px;
}


.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
}


#fountainG {
    position: relative;
    width: 240px;
    height: 29px;
    margin-bottom: 30px
}

#fountainG li {
    position: absolute;
    top: 0; 
    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 {
    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)实现留言页面及留言功能

Python相关栏目本月热门文章