基于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');
});
编辑界面就先写到这里了。
