基于Django开发的SkyNet博客一——创建模型
基于Django开发的SkyNet博客二——base Template
基于Django开发的SkyNet博客三——登录注册界面
代码传送门 这是我这个项目的github代码库，目前项目正在更新，所以代码不是很全。
上一篇博客主要讲了博客的登录注册界面，这一节想先修改一下上一节的登录修改该界面，先来个图吧：
这样修改主要是因为看到很多网站的登录注册都在一个html上，那么我也就改了一下。改动也不多，主要是html和views.py中修改了一丢丢
{% extends 'blog/base.html' %}
{% block title %}
SkyNet登录
{% endblock %}
{% block content %}
{% load static %}
{% if islogin %}
{% else %}
{% endif %}
{% endblock %}
其实改动的并不多，在上一篇的基础上合并了两个html，添加了一个menu
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})
登录注册界面就到这里了。
下面就开始来创建博客编辑界面了。
同样的先上个图
在博客二中的banner上有个写文章的按钮
//base.html
在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\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 %}
{% include 'blog/util/bloglist.html' %}
{% endblock %}
在这里我将主界面分为两栏，一个是菜单栏，剩下的是标题和内容栏，其中内容列表使用的是{% include %}方式引入一个html。include和extends用法相同，include引入的话，可以将页面中的功能独立出去，这样能够保证页面的整体结构。
先来看一下保存按钮功能
$("#save_blog").on("click",function () {
var $save_msg = $("正在保存");
$(".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 %}
//edit.js
$("#blog_list").click(function () {
$(".ui.sidebar")
.sidebar('setting', 'transition', 'overlay')
.sidebar('toggle');
});
编辑界面就先写到这里了。