基于Django开发的SkyNet博客四——编辑界面

作者: 小奚有话说 | 来源:发表于2017-07-24 14:55 被阅读71次

基于Django开发的SkyNet博客一——创建模型
 基于Django开发的SkyNet博客二——base Template
基于Django开发的SkyNet博客三——登录注册界面
 代码传送门这是我这个项目的github代码库，目前项目正在更新，所以代码不是很全。
上一篇博客主要讲了博客的登录注册界面，这一节想先修改一下上一节的登录修改该界面，先来个图吧：

登录注册界面.png

这样修改主要是因为看到很多网站的登录注册都在一个html上，那么我也就改了一下。改动也不多，主要是html和views.py中修改了一丢丢

{% extends 'blog/base.html' %}
{% block title %}
    SkyNet登录
{% endblock %}
{% block content %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'blog/css/form.css' %}" type="text/css">
    <script type="text/javascript" src="{% static 'blog/js/login.js' %}"></script>
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <div class="ui stacked segment">
                <div class="ui two item menu">
                    <a class="item {% if islogin %} active {% endif %}" href="{% url 'blog:login' %}">登录</a>
                    <a class="item {% if not islogin %} active {% endif %}" href="{% url 'blog:register' %}">注册</a>
                </div>
                {% if islogin %}
                    <div id="login-div">
                        <form class="ui login form segment" method="post">

                            <div class="field">
                                <div class="ui input">
                                    <input type="text" placeholder="邮箱或昵称" name="name">
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui input">
                                    <input type="password" placeholder="密码" name="pwd">
                                </div>
                            </div>
                            <div class="ui fluid large teal submit button">登录</div>
                        </form>
                        </div>
                    {% else %}
                        <div id="register-div">
                            <form class="ui register form segment" method="post">
                                <div class="field">
                                    <div class="ui input">
                                        <input type="text" placeholder="昵称" name="name">
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="ui input">
                                        <input type="text" placeholder="邮箱" name="email">
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="ui input">
                                        <input type="password" placeholder="密码" name="pwd">
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="ui input">
                                        <input type="password" placeholder="再次输入密码" name="pwd2">
                                    </div>
                                </div>

                                <div class="ui fluid large teal submit button">提交</div>
                            </form>
                        </div>
                    {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

其实改动的并不多，在上一篇的基础上合并了两个html，添加了一个menu

<div class="ui two item menu">
    <a class="item {% if islogin %} active {% endif %}" href="{% url 'blog:login' %}">登录</a>
    <a class="item {% if not islogin %} active {% endif %}" href="{% url 'blog:register' %}">注册</a>
</div>

two item menu会将menu分为平分为两个部分，然后通过views.py传过来的islogin，来判断是否该item是否是active，同样也可控制显示登录窗口还是注册窗口。

其他的地方改动都很小，主要是views.py中login和register最后返回的时候返回一个islogin参数即可

@csrf_exempt
def login(request):
    if request.method == 'POST':
       //和上一篇博客中代码一致
       ......
    return render(request, 'blog/login.html',{"islogin":True})

登录注册界面就到这里了。

下面就开始来创建博客编辑界面了。
同样的先上个图

文章编辑.png

在博客二中的banner上有个写文章的按钮

banner-edit.png

//base.html
<div class="item">
    <button id="create_blog" class="ui primary button">写文章</button>
</div>

在js中对该button的click时间进行了监听

//base.js
$("#create_blog").on("click", function () {
    $.ajax({
        type: "get",
        url: "/blog/create_blog/",
        success: function (data) {
            jsonobj = JSON.parse(data);
            if(jsonobj.error == 1) {
                window.location.href = '/blog/login';
            }else {
                window.location.href = '/blog/edit/' + jsonobj.id;
            }
        }
    });
});

这段代码的主要意图是点击写文章按钮后，通过后台传递的error值来判断用户是否登录，重定向到登录界面，若已登录则重定向到编辑界面。
首先来看一下create_blog方法

//blog/urls.py
url(r'^create_blog', create_blog, name='create'),

def create_blog(request):
    if request.user.is_authenticated:
        blog = Blog.objects.create(user=request.user)
        return HttpResponse(simplejson.dumps({'error': 0, 'id': blog.pk}, ensure_ascii=False))
    else:
        return HttpResponse(simplejson.dumps({'error': 1}, ensure_ascii=False))

在这里我将models.py中的blog模型改动了一下，所有的值都有默认值，在创建的时候只需要传递user即可。下面看一下blog models

class Blog(models.Model):
    POST_STATUS = (
        ('P', '已发布'),
        ('D', '已删除'),
        ('E', '正在编辑'),
    )

    title = models.CharField('标题',max_length=150,default="无标题文章")
    body = models.TextField('正文',blank=True,default="")
    create_time = models.DateTimeField('创建时间',auto_now_add=True)
    modify_time = models.DateTimeField('最后一次修改',auto_now=True)
    status = models.CharField('文章状态',max_length=1, choices=POST_STATUS,default='E')
    views = models.PositiveIntegerField('浏览量', default=0)
    likes = models.PositiveIntegerField('喜欢', default=0)
    praises = models.PositiveIntegerField('点赞', default=0)
    category = models.ManyToManyField('Category',symmetrical=False,blank=True)
    user = models.ForeignKey('User',verbose_name='作者')

当页面重定向到编辑界面后，也就是上面第一章图的效果。

//urls.py
url(r'^edit/(?P<blog_id>\d+)', EditBlogView.as_view(), name='edit'),

这里url的定义使用到了TemplateView，也就是封装好的view请求，只是开放一些接口，参数而已。先看一下吧。

class EditBlogView(DetailView):
    model = Blog
    template_name = 'blog/user/edit.html'
    pk_url_kwarg = 'blog_id'
    context_object_name = 'blog'

    def get_context_data(self, **kwargs):
        context = super(EditBlogView, self).get_context_data(**kwargs)
        blogs = self.request.user.blog_set.all()
        context['blogs'] = blogs
        return context

继承DetailView，展示文章详情，一般用来查询单个数据。
model即指定的model，将在该model中进行数据查询，template_name即指定查询结束将数据展示的模板中，pk_url_kwarg指查询的条件，context_object_name指定查询返回的结果。
get_context_data一般用来传递额外的数据，这里我将该用户的所有文章传递给了EditBlogView，用来制作文章列表显示。

来看一下界面结构

{% extends 'blog/base.html' %}
{% block title %}
    文章编辑
{% endblock %}
{% block header %}
{% endblock %}
{% block content %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'blog/css/edit.css' %}" type="text/css">
    <script type="text/javascript" src="{% static 'blog/js/edit.js' %}"></script>
    <i id="blog-id" data-index="{{ blog.pk }}" hidden></i>
    <div id="back-index">
        <a href="{% url 'blog:uindex' request.user.pk %} " class="ui primary button">返回主页</a>
    </div>

    {% include 'blog/util/bloglist.html' %}
    <div class="ui center aligned grid">
        <div class="column">
            <div class="ui menu">
                <a id="blog_list" class="item">文章列表</a>
                <div class="right menu">
                    <a id="save_blog" class="ui item">保存</a>
                    <a class="ui item">发布</a>
                </div>
            </div>
            <form class="ui large form">
                <div class="ui stacked segment">

                    <div class="field">
                        <div class="ui input">
                            <input id="title" type="text" placeholder="标题" name="title" value="{{ blog.title }}">
                        </div>
                    </div>
                    <div class="field">

                    </div>
                    <div class="field">
                        <div class="ui input">
                            <textarea id="body" name="body" rows="15">{{ blog.body }}</textarea>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

在这里我将主界面分为两栏，一个是菜单栏，剩下的是标题和内容栏，其中内容列表使用的是{% include %}方式引入一个html。include和extends用法相同，include引入的话，可以将页面中的功能独立出去，这样能够保证页面的整体结构。

先来看一下保存按钮功能

$("#save_blog").on("click",function () {
    var $save_msg = $("<a class='ui item'>正在保存</a>");
    $(".right.menu").prepend($save_msg)
    var id = $("#blog-id").attr("data-index");
    var title = $("#title").val();
    var body = $("#body").val();
    $.ajax({
        type:"get",
        url:'../save_blog/'+id,
        data:{
            'title':title,
            'body':body
        },
        success:function (data) {
            $save_msg.text("已保存");
            $save_msg.animate({
                opacity:0,
            },2000,function () {
                $(".right.menu").remove($save_msg);
            });
        }
    })
});

在这里我添加了一个正在保存的item，然后想后台请求保存数据，最后保存成功则显示已保存，然后慢慢消失，最后删除item。

def save_blog(request, blog_id):
    blog = Blog.objects.get(pk=blog_id)
    blog.title = request.POST.get('title')
    blog.body = request.POST.get('body')
    print(blog.title,blog.body)
    blog.save()
    return HttpResponse()

由于这里不需要向前台传递数据，直接返回HttpResponse即可。

最后再展示一下sidebar的代码吧

//bloglist.html
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'blog/css/util/bloglist.css' %}">
<div id="left-menu" class="ui sidebar vertical menu">
    <div class="item">
        <a>返回首页</a>
    </div>
    {% for blog in blogs %}
        <div id="menu-item" class="item">
            <a data-index="{{ blog.index }}">{{ blog.title }}</a>
            <i class="trash icon"></i>
        </div>
    {% endfor %}
</div>

//edit.js
$("#blog_list").click(function () {
    $(".ui.sidebar")
        .sidebar('setting', 'transition', 'overlay')
        .sidebar('toggle');
});

编辑界面就先写到这里了。

基于Django开发的SkyNet博客四——编辑界面

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

python学习实践