博客系统简要

博客园整体上是用Django框架完成的

　　Django的生命周期和主要内容在前面已经讲过，现在来详述该项目的主要内容。

　　建一个Django项目blogCMS1，再创一个APP应用名为blog

　　首先我们要知道，一个网站的数据库是由多张表组成的，而在Django中一张表对应的是一个类，所以我们首先要做的是建立好类，

这就需要我们花时间去弄明白博客园中需要多少张表去存放多少数据。

以下是我设计的表结构（13张表）

  1 #项目下的model.py文件中代码：
  2 from django.db import models
  3 # Create your models here.
  4 from django.contrib.auth.models import AbstractUser
  5 
  6 
  7 class UserInfo(AbstractUser):
  8     """
  9     用户信息，只存放最主要的字段
 10     """
 11     nid = models.BigAutoField(primary_key=True)
 12     nickname = models.CharField(verbose_name='昵称', max_length=32)
 13     telephone = models.CharField(max_length=11, blank=True, null=True, unique=True, verbose_name='手机号码')
 14     avatar = models.FileField(verbose_name='头像', upload_to='avatar', default="/avatar/default.jpeg")
 15     create_time = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)
 16 
 17     def __str__(self):
 18         return self.username
 19 
 20 
 21 class Blog(models.Model):
 22     """
 23     站点信息，每个注册用户有一个自己的个人站点
 24     """
 25     nid = models.BigAutoField(primary_key=True)
 26     title = models.CharField(verbose_name='个人博客标题', max_length=64)
 27     site = models.CharField(verbose_name='个人博客后缀', max_length=32, unique=True)
 28     theme = models.CharField(verbose_name='博客主题', max_length=32)
 29     # 与用户信息表一对一关联，关联字段建在blog表中
 30     user = models.OneToOneField(to='UserInfo', to_field='nid') 
 31 
 32     def __str__(self):
 33         return self.title
 34 
 35 
 36 class Article(models.Model):
 37     """
 38     文章表，存放着所有该用户站点发布的文章
 39     """
 40     nid = models.BigAutoField(primary_key=True)
 41     title = models.CharField(max_length=50, verbose_name='文章标题')
 42     desc = models.CharField(max_length=255, verbose_name='文章描述')
 43     read_count = models.IntegerField(default=0)
 44     comment_count = models.IntegerField(default=0)
 45     up_count = models.IntegerField(default=0)
 46     down_count = models.IntegerField(default=0)
 47     create_time = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)
 48     #一个文章只能属于一个分类，而一个分类下有多个文章，所以外键建在文章表
 49     category = models.ForeignKey(verbose_name='文章类型', to='Category', to_field='nid', null=True)
 50     #一个用户可以发表多篇文章，而一个文章只能由一个用户发表
 51     user = models.ForeignKey(verbose_name='所属用户', to='UserInfo', to_field='nid')
 52     #文章中有关键字，关键字可以看做是标签，文章与标签的关系是多对多
 53     tags = models.ManyToManyField(
 54         to="Tag",
 55         through='Article2Tag',
 56         through_fields=('article', 'tag'),#自己建的多对多关联的第三张表
 57     )
 58     #博客园首页的总的文章大分类下的小分类，与个人站点分类无关，该分类与文章也是一对多关系
 59     site_article_category=models.ForeignKey("SiteArticleCategory",null=True)
 60 
 61     def __str__(self):
 62         return self.title
 63 
 64 
 65 class ArticleDetail(models.Model):
 66     """
 67     文章详细表
 68     """
 69     nid = models.AutoField(primary_key=True)
 70     content = models.TextField(verbose_name='文章内容', )
 71     #若文章表将所有文章内容存入，数据量会很大，所以我们用一个详情表存储，与文章表一对一
 72     article = models.OneToOneField(verbose_name='所属文章', to='Article', to_field='nid')
 73     def __str__(self):
 74         return self.article.title
 75 
 76 
 77 class Category(models.Model):
 78     """
 79     博主个人文章分类表
 80     """
 81     nid = models.AutoField(primary_key=True)
 82     title = models.CharField(verbose_name='分类标题', max_length=32)
 83     #与站点进行多对一关联，外键必须建在多的一方
 84     blog = models.ForeignKey(verbose_name='所属博客', to='Blog', to_field='nid')
 85 
 86     def __str__(self):
 87         return self.title
 88 
 89     class Meta:
 90         verbose_name = 'category'
 91         verbose_name_plural = 'category'
 92         ordering = ['title']
 93 
 94 
 95 class Tag(models.Model):
 96     """
 97     标签表
 98     """
 99     nid = models.AutoField(primary_key=True)
100     title = models.CharField(verbose_name='标签名称', max_length=32)
101     blog = models.ForeignKey(verbose_name='所属博客', to='Blog', to_field='nid')
102 
103 
104 class Article2Tag(models.Model):
105     """
106     文章和标签的多对多关系表，自己创第三张表的好处是可以自定义表的字段
107     """
108     nid = models.AutoField(primary_key=True)
109     article = models.ForeignKey(verbose_name='文章', to="Article", to_field='nid')
110     tag = models.ForeignKey(verbose_name='标签', to="Tag", to_field='nid')
111 
112     class Meta:
113         #文章和标签联合唯一
114         unique_together = [
115             ('article', 'tag'),
116         ]
117 
118 
119 class Comment(models.Model):
120     """
121     评论表
122     """
123     nid = models.BigAutoField(primary_key=True)
124     content = models.CharField(verbose_name='评论内容', max_length=255)
125     create_time = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)
126     up_count = models.IntegerField(default=0)#点赞数
127     
128     user = models.ForeignKey(verbose_name='评论者', to='UserInfo', to_field='nid')
129     article = models.ForeignKey(verbose_name='评论文章', to='Article', to_field='nid')
130     #自关联，用于判断该评论是对文章的评论还是对评论的评论
131     parent_comment = models.ForeignKey('self', blank=True, null=True, verbose_name='父级评论')
132 
133     def __str__(self):
134         return self.content
135 
136 
137 class CommentUp(models.Model):
138     """
139     点评论赞表
140     """
141 
142     nid = models.AutoField(primary_key=True)
143     user = models.ForeignKey('UserInfo', null=True)
144     comment = models.ForeignKey("Comment", null=True)
145 
146 
147 class ArticleUp(models.Model):
148     """
149     点文章赞表
150     """
151     nid = models.AutoField(primary_key=True)
152     user = models.ForeignKey('UserInfo', null=True)
153     article = models.ForeignKey("Article", null=True)
154 
155 
156 class ArticleDown(models.Model):
157     """
158     点down表
159     """
160     nid = models.AutoField(primary_key=True)
161     user = models.ForeignKey('UserInfo', null=True)
162     article = models.ForeignKey("Article", null=True)
163 
164 
165 class SiteCategory(models.Model):
166     """
167     首页的大分类表，与个人站点分类无关,该分类与文章不直接绑定关系，
168     因为该分类下还有小分类，小分类才与文章绑定关系
169     
170     大分类（例如计算机编程语言）——>
171                 小分类（例如python——>文章1
172                                         文章2
173                                         ……
174                             java——>文章（）
175                                         ……
176                             c++——>文章（）
177                                         ……
178                             ……）
179                                 
180     """
181     name=models.CharField(max_length=32)
182 
183 
184     def __str__(self):
185         return self.name
186 
187 class SiteArticleCategory(models.Model):
188     """
189     首页的大分类下的小分类表，与大分类是多对一关系，与个人站点的分类无关
190     """
191     name=models.CharField(max_length=32)
192     site_category=models.ForeignKey('SiteCategory')
193 
194 
195     def __str__(self):
196         return self.name

model

 

　　建立完表关系后，数据库就有了。接下来我们分配路由。

　　首先我们知道一个网站必须有一个主网页即首页，其次肯定还有其他的网页内容，所以我们需要匹配很多的URL。原则上是有一个网页的需求配一个URL，然后再分配好视图函数view，最后再关联上相应的模板页面html。

　　在这里我将所有URL分为两部分：

　　　　第一部分：网站的主要网址

　　　　第二部分：与个人站点有关的网址

 1 #urls：
 2 from django.conf.urls import url,include
 3 from django.contrib import admin
 4 from django.views.static import serve
 5 from blog import views
 6 from blogCMS1 import settings
 7 
 8 urlpatterns = [
 9     url(r'^admin/', admin.site.urls),#Django自带
10 
11     url(r'^reg/', views.reg),  # 注册功能
12     url(r'^login/', views.log_in),#登录功能
13     url(r'^log_out/', views.log_out),#注销功能
14     url(r'^get_validCode_img/', views.get_validCode_img),  # 验证码功能
15     url(r'^index/', views.index),#首页功能
16     url(r'^$', views.index),#只输入域名的情况下默认进入首页
17     url(r'^cate/(?P.*)/$', views.index),  # 首页的小分类
18                                     #  index(requset,site_article_category=python)
19 
20     # 个人站点首页，将个人站点需要用到的路由下发到blog下的urls中
21     url(r'^blog/', include('blog.urls')),#路由分发
22     
23 
24     #media 配置：我们将网站中上传的文件放置于media文件夹中，
25     #            因为该文件夹是新创建的
26     #            所以我们需要在settings中进行相应配置，稍后会有配置的代码
27 
28     url(r'^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
29     url(r'^uploadFile/$', views.uploadFile),#添加文章时上传图片
30 
31 ]

第一部分urls

 1 #个人应用下的urls（这里应用名为blog）：
 2 from django.conf.urls import url,include
 3 from blogCMS1 import settings
 4 from  blog import views
 5 urlpatterns = [
 6     #用户修改个人资料功能
 7     url(r'^edituser/(\d+)$', views.edituser),
 8     #个人站点首页，需要渲染个人分类、标签和日期的归档，所以需要用到正则
 9     url(r'^(?P.*)/(?Ptag|category|date)/(?P.*)', views.homeSite),
10     #路由反向解析，在模板页面中直接用别名即可
11     url(r'^(?P.*)', views.homeSite,name="aaa"),
12     #文章详情页面
13     url(r'^(?P.*)/article_detail/(?P\d+)', views.article_detail),
14     #文章赞、踩功能
15     url(r'^updown/$', views.updown),
16     url(r'^comment/$', views.comment),    #文章评论功能
17     #显示文章已发表的评论，树状结构
18     url(r'^commentTree/(?P\d+)$', views.commentTree),
19     url(r'^backend/$', views.backendindex),#后台管理首页
20     url(r'^backend/addarticle/$', views.addarticle),#后台管理添加新文章功能
21     url(r'^backend/editarticle/(\d+)$', views.editarticle),#编辑文章
22     url(r'^backend/del/(\d+)', views.delarticle),#删除文章
23 
24 ]

第二部分urls

 

　　上面提到了media配置，这里我们要提一下。media是静态文件，Django中的静态文件有static和media两种，前者用来存放css、js等文件，后者则是用户上传的图片。这两种静态文件都需要我们自己在settings中进行配置后才能使用。

        '''
        静态文件的处理又包括STATIC和MEDIA两类，这往往容易混淆，在Django里面是这样定义的：
        


#static的配置：
STATIC_URL = '/static/'      # 别名
STATICFILES_DIRS = (
            os.path.join(BASE_DIR,"static"),  #实际名 ,即实际文件夹的名字
        )

'''

注意点1:
 django对引用名和实际名进行映射,引用时,只能按照引用名来,不能按实际名去找
        
        ------error－－－－－不能直接用，必须用STATIC_URL = '/static/':
        

注意点2:
 STATICFILES_DIRS = (
    ("app01",os.path.join(BASE_DIR, "app01/statics")),
        )

 

'''

###################################
        MEDIA:指用户上传的文件，比如在Model里面的FileFIeld，ImageField上传的文件。如果你定义
        
        MEDIA_ROOT=c:\temp\media，那么File=models.FileField(upload_to="abc/")＃，上传的文件就会被保存到c:\temp\media\abc

        eg：
            class blog(models.Model):
                   Title=models.charField(max_length=64)
                   Photo=models.ImageField(upload_to="photo")
          上传的图片就上传到c:\temp\media\photo，而在模板中要显示该文件，则在这样写
          在settings里面设置的MEDIA_ROOT必须是本地路径的绝对路径，一般是这样写:
                 BASE_DIR= os.path.abspath(os.path.dirname(__file__))
                 MEDIA_ROOT=os.path.join(BASE_DIR,'media/').replace('\\','/')

        MEDIA_URL是指从浏览器访问时的地址前缀，举个例子：
            MEDIA_ROOT=c:\temp\media\photo
            MEDIA_URL="/data/"
        在开发阶段,media的处理由django处理：

           访问http://localhost/data/abc/a.png就是访问c:\temp\media\photo\abc\a.png

           在模板里面这样写

           在部署阶段最大的不同在于你必须让web服务器来处理media文件，因此你必须在web服务器中配置，
           以便能让web服务器能访问media文件
           以nginx为例，可以在nginx.conf里面这样：

                 location ~/media/{
                       root/temp/
                       break;
                    }

           具体可以参考如何在nginx部署django的资料。
           
           
           '''

 

　　在本项目中，static和media的配置代码如下：

STATIC_URL = '/static/'#别名，引用时的名字
STATICFILES_DIRS=[
    os.path.join(BASE_DIR, 'blog','static'),#别名所指的实际文件夹路径
]

#别名所指的实际文件夹路径
MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media","uploads")
MEDIA_URL="/media/"#别名

#model中userinfo表继承auth模块
AUTH_USER_MODEL = "blog.UserInfo"

 

以上全部创建完毕，进行数据库迁移后的项目目录应该是下面这个样子

 

　　接下来我们要做的就是对视图函数进行编写，视图函数应该对应URL进行编写，并映射到相应的模板中。

注：并不是一条视图函数对应一个模板，根据实际需求，有的视图函数也许是重定向功能。

网站首页：

url(r'^index/', views.index),#首页功能
url(r'^$', views.index),#只输入域名的情况下默认进入首页
url(r'^cate/(?P.*)/$', views.index),  # 首页的小分类

                                #  index(requset,site_article_category=python)

#views中：

from django.shortcuts import render,HttpResponse,redirect

def index(request,*args,**kwargs):
    print('首页首页首页首页首页首页首页首页首页')
    if kwargs:#用户点击超链接，显示指定小分类下的文章
        article_list=models.Article.objects.filter(site_article_category__name=kwargs.get("site_article_category"))
    else:#默认，显示全部文章
        article_list=models.Article.objects.all()
    cate_list=models.SiteCategory.objects.all()#所有大分类
    return render(request,'index.html',{'article_list':article_list,'cate_list':cate_list})

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页title>
    <script src="/static/jquery-3.2.1.min.js">script>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js">script>
    <link rel="stylesheet" href="/static/mycss/index.css">

head>
<body>
{#导航条#}
<nav class="navbar navbar-inverse">
    <div class="container">
        
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigationspan>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
            button>
            <a class="navbar-brand" href="#">博客园a>
        div>

        
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">首页 <span class="sr-only">(current)span>a>li>
                <li><a href="#">Linka>li>
                <li><a href="#">Linka>li>
                <li><a href="#">Linka>li>

            ul>

            <ul class="nav navbar-nav navbar-right">
                {% if request.user.is_authenticated %}
                    {# 用户登录状态，显示用户信息#}
                    <li class="active"><a>欢迎：a>li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">
                            {{ request.user.username }}
                            <span class="caret">span>a>
                        <ul class="dropdown-menu">
                            <li><a href="/blog/{{ request.user.username }}">个人首页a>li>
                            <li><a href="/blog/backend/">文章管理a>li>
                            <li><a href="/blog/edituser/{{ request.user.nid }}">修改资料a>li>
                            <li role="separator" class="divider">li>
                            <li><a href="/log_out/">注销a>li>
                        ul>
                    li>
                {% else %}
                    {#    未登录状态，显示登录、注册按钮#}
                    <li><a href="/login/">登录a>li>
                    <li><a href="/reg/">注册a>li>
                {% endif %}
            ul>
        div>
    div>
nav>
{#内容#}
<div class="container">
    <div class="row">
        <div class="left1 col-md-2">
        {#  左侧菜单#}
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">网站分类h3>
                div>
                <div class="panel-body">
                    {% for cate in cate_list %}
                    {#    文章大分类归档#}
                        <div class="panel panel-info menu">
                            <div class="panel-heading ">
                                <h3 class="panel-title">
                                    {{ cate.name }}
                                h3>
                            div>
                            <div class="panel-body hides">
                                {% for sitearticlecategory in cate.sitearticlecategory_set.all %}
                                {# 文章小分类#}
                                    <p><a href="/cate/{{ sitearticlecategory.name }}">{{ sitearticlecategory.name }}a>
                                    p>
                                {% endfor %}
                            div>
                        div>

                    {% endfor %}
                div>
            div>
        div>
        {#    文章显示部分#}
        <div class="middle1 col-md-8">
            {% for article in article_list %}
                <div class="article">
                    <div class="articlt-head">
                        <a href="/blog/{{ article.user.username }}/article_detail/{{ article.nid }}">{{ article.title }}a>
                    div>
                    <div class="content row">
                        <div class="col-md-2">
                        {#  用户头像#}
                            <a href="{% url 'aaa'  article.user.username %}"><img src="{{ article.user.avatar.url }}"
                                                                                  alt="" width="100" height="100">a>
                        div>
                        <div class="col-md-10">
                            {{ article.desc }}
                        div>
                    div>
                    <div class="pub-info row">{#发布信息#}
                        <a href="/blog/{{ article.user.username }}">
                            {{ article.user.username }}  
                        a>
                        <span>发布于span>
                        {{ article.user.create_time|date:"Y-m-d H:i" }}  
                        <a href="/blog/{{ article.user.username }}/article_detail/{{ article.nid }}"><span
                                class="glyphicon glyphicon-comment">span>评论({{ article.comment_count }})a>
                        <a href="/blog/{{ article.user.username }}/article_detail/{{ article.nid }}"><span
                                class="glyphicon glyphicon-thumbs-up">span>点赞({{ article.up_count }})a>
                    div>
                div>
            {% endfor %}
        div>
    
        <div class="right1 col-md-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel titleh3>
                div>
                <div class="panel-body">
                    Panel content
                div>
            div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel titleh3>
                div>
                <div class="panel-body">
                    Panel content
                div>
            div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel titleh3>
                div>
                <div class="panel-body">
                    Panel content
                div>
            div>


        div>
    div>
div>


<script>
    $('.menu').mouseover(function () {
{#        鼠标移动到大分类上时显示它所属的小分类#}
        $(this).children().slideDown(300)
    }).mouseleave(function () {
{#        鼠标从大分类上移开时隐藏它所属的小分类#}
        $(this).children(".panel-body").slideUp(300)
    })


script>


body>
html>

index.html

.left1 {
    text-align: center;
    font-size: large;
}
.articlt-head{
    font-size: 20px;
    margin-bottom: 10px;
}
.article{
    padding: 10px 10px;
    border-bottom: solid 1px;
}
.hides{
    display: none;
}

mycss下的index.css

 

 注册页面：

url(r'^reg/', views.reg),  # 注册功能

这里我们会用到一个form组件，form组件可以帮我们更方便的处理有关form表单的操作。在blog下新建一个form.py，专门用来写form组件。

#form.py中：

from django import forms
from django.forms import widgets,ValidationError
from blog import models

#注册页面的form组件
class RegForm(forms.Form):#必须继承
    username=forms.CharField(max_length=32,
                             min_length=5,
                             error_messages={'required':'用户名不能为空'},
                             widget=widgets.TextInput(attrs={"class":"form-control","placeholder":"请输入用户名"})
                             )
    password=forms.CharField(max_length=32,
                             min_length=6,
                             widget=widgets.PasswordInput(
                                 attrs={"class": "form-control", "placeholder": "请输入密码"}
                             ))
    repeat_pwd = forms.CharField(min_length=6, widget=widgets.PasswordInput(
        attrs={"class": "form-control", "placeholder": "请再次输入密码"}
    ))

    email = forms.EmailField(widget=widgets.EmailInput(
        attrs={"class": "form-control", "placeholder": "请输入邮箱"}
    ))

    def clean_username(self):
        """
        钩子函数,判断用户名是否已存在
        :return:
        """
        ret = models.UserInfo.objects.filter(username=self.cleaned_data.get("username"))
        if not ret:
            return self.cleaned_data.get("username")
        else:
            raise ValidationError("用户名已注册")

    def clean_password(self):
        """
        钩子函数，规定密码不能是全数字或全字母
        :return: 
        """
        ret = self.cleaned_data.get("password")
        if ret.isdigit():
            raise ValidationError("密码不能全是数字")
        elif ret.isalpha():
            raise ValidationError("密码不能全是字母")
        else:
            return ret

    def clean(self):
        """
        全局钩子函数，判断两次密码是否一致
        :return: 
        """
        if self.cleaned_data.get("password") == self.cleaned_data.get("repeat_pwd"):
            return self.cleaned_data
        else:
            raise ValidationError("两次密码不一致")

注册form组件

#views中：

def reg(request): if request.is_ajax():#ajax提交 form_obj=RegForm(request.POST)#拿到页面提交的form对象 print('................',form_obj) regResponse={"user":None,"errorsList":None} if form_obj.is_valid():#数据正常 username=form_obj.cleaned_data["username"] password=form_obj.cleaned_data["password"] email=form_obj.cleaned_data.get("email") pic=request.FILES.get("pic")#头像 #用户表中添加一条信息，即增加一条表记录 user_obj=models.UserInfo.objects.create_user(username=username,password=password,email=email,avatar=pic,nickname=username) print(user_obj.avatar,"......")#路径 regResponse["user"]=user_obj.username else:#数据异常 regResponse["errorsList"]=form_obj.errors#异常信息 import json #ajax返回的数据必须是json字符串 return HttpResponse(json.dumps(regResponse)) form=RegForm()#实例化组件 return render(request,'reg.html',{'form':form})

"en">

    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1">
    
        "stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
        
        "stylesheet" href="/static/mycss/reg.css">
        


class="container">
    
class="row">
        
class="col-md-6 col-md-offset-3">
            
"">
                {% csrf_token %}{#Django自带的防止攻击的中间件#}
                
class="form-group">
                    for="username">用户名：
                    {{ form.username }}
                
                
class="form-group">
                    for="password">密码：
                    {{ form.password }}
                
                
class="form-group">
                    for="repeat_pwd">确认密码：
                    {{ form.repeat_pwd }}
                
                
class="form-group">
                    for="email">邮箱：
                    {{ form.email }}
                
                
class="form-group picDiv">
                    for="picBtn">头像：
                    "pic" class="pic" src="/static/img/default.png" alt="">
                    "picBtn" type="file" class="picBtn">
                
                
class="sub" style="padding-top: 50px">
                "button" value="submit" class="btn btn-primary" id="subBtn">class="error">
                
            

        
    

reg.html

.container{
    margin-top: 100px;
  }
.picDiv{
    position: relative;
    width: 40px;
    height: 40px;
}


#pic{
    position: absolute;
    top:0;
    left: 50px;
    width: 40px;
    height: 40px;
}

#picBtn{
    opacity: 0;
    position: absolute;
    top:0;
    left: 50px;
    width: 40px;
    height: 40px;
}

.sub{
    padding-top: 100px;
}

mycss下的reg.css

 

 登录页面：

 url(r'^login/', views.log_in),#登录功能

 url(r'^get_validCode_img/', views.get_validCode_img), # 验证码功能

#views中：
def log_in(request):
    if request.is_ajax():
        username=request.POST.get('username')
        password=request.POST.get('password')
        validCode=request.POST.get('validCode')
        login_response={"is_login":False,"error_msg":None}
        if validCode.upper()==request.session.get("keepValidCode").upper():#检验验证码
            user=auth.authenticate(username=username,password=password)#验证码正确时校验用户
            if user:#用户正确
                login_response["is_login"]=True
                auth.login(request,user) #  session   request.session[is_login]=True
            else:#用户名或密码输入错误
                login_response["error_msg"] = "username or password error"
        else:#验证码错误
            login_response["error_msg"]='validCode error'
        import json
        #检验通过
        return HttpResponse(json.dumps(login_response))
    return render(request,"login.html")


##############################
import random
def get_validCode_img(request):
    def random_color():#随机颜色
        the_color = random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)
        return the_color
    def random_int():#随机数字
        x_y=random.randint(0,150)
        return x_y
    from io import BytesIO
    from PIL import Image,ImageDraw,ImageFont
    img=Image.new(mode='RGB',size=(120,40),color=random_color())
    # img = Image.new(mode="RGB", size=(120, 40), color=(random.randint(0,255),random.randint(0,255),random.randint(0,255)))

    draw=ImageDraw.Draw(img,mode='RGB')
    font=ImageFont.truetype("blog/static/font/kumo.ttf",25)
    valid_list=[]
    for i in range(5):
        random_num=str(random.randint(0,9))#数字
        random_lower=chr(random.randint(65,90))#小写字母
        random_upper=chr(random.randint(97,122))#大写字母
        random_char=random.choice([random_num,random_lower,random_upper])#随机选
        draw.text([5+i*24,10],random_char,random_color(),font=font)
                #（坐标，   随机文本 ，     随机颜色，      字体）
        for i in range(100):#画噪点
            draw.point([random_int(), random_int()], fill=random_color())
        for i in range(3):#画线
            draw.line((random_int(), random_int(), random_int(), random_int()), fill=random_color())

        valid_list.append(random_char)
        #写入内存中
    f = BytesIO()
    img.save(f, "png")#以png格式
    data = f.getvalue()
    valid_str = "".join(valid_list)
    request.session["keepValidCode"] = valid_str#将验证码的字符串写入session中，方便以后校验
    return HttpResponse(data)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/static/jquery-3.2.1.min.js">script>
    <link rel="stylesheet" href="/static/mycss/login.css">
    <script src="http://static.geetest.com/static/tools/gt.js">script>
head>
<body>

<div class="container popup">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label for="username">usernamelabel>
                    <input type="text" class="inp form-control" id="username" placeholder="请输入你的用户名">
                div>
                <div class="form-group">
                    <label for="Password">Passwordlabel>
                    <input type="password" class="inp form-control" id="password" placeholder="请输入你的密码">
                div>

                <div class="row validCode">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="validCode">验证码label>
                            <input type="validCode" class="form-control" id="validCode" placeholder="请输入验证码">
                        div>
                    div>
                    <div class="col-md-6">
                        {#验证码图片，路由获得#}
                        <img class="validCode_img" src="/get_validCode_img/" alt="" width="200px" height="50px">
                    div>
                div>

                <input type="btn" value="登录" class="btn btn-primary"><span class="errorMsg">span>
            form>
            <a href="/reg/">暂无账号，点我注册a>
        div>
    div>
div>

<script>

    $('.btn').click(function () {
        $.ajax({
            url: '/login/',
            type: 'POST',
            data: {
                "username": $('#username').val(),
                "password": $('#password').val(),
                "validCode": $('#validCode').val(),
                "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
            },
            success: function (data) {
                var response = JSON.parse(data);
                var prevLink = document.referrer;
                if (response["is_login"]) {
                    alert(prevLink)
                    location.href = prevLink// 登陆后跳转回原页面
                }
                else {
                    $(".errorMsg").html(response["error_msg"]).css("color", "red")
                }
            }
        })
    })
    $('.validCode_img').click(function () {
        $(this)[0].src += '?'// 点击验证码图片时刷新验证码
    })


script>
form>
body>
html>

log_in.html

.container{
    margin-top: 100px;
  }


.validCode .validCode_img{
    margin-top: 20px;
}

mycss下的log_in.css

 

 注销功能：

 url(r'^log_out/', views.log_out),#注销功能

 利用auth模块可以很方便的进行注销，没有对应的模板，重定向到登录页面

def log_out(request):
    auth.logout(request)
    return redirect("/login/")

 

　　 到这里为止，有关首页的功能我们就基本完善好了。接下来要做的都是与个人站点有关的操作，所以之后我们的路径就都映射到blog文件夹下的urls文件中（新建的.py文件）

需在原来的urls.py文件中加一句路由分发：

    url(r'^blog/', include('blog.urls')),#路由分发
#之后的所有以/blog/开头的路由都匹配到blog下的urls.py文件中

 

好，下面我们来做个人站点的主页

from django.conf.urls import url,include
from blogCMS1 import settings
from  blog import views
urlpatterns = [
    url(r'^(?P.*)/(?Ptag|category|date)/(?P.*)', views.homeSite),
    
]

下面来解释一下上段代码：

　　首先是正则表达式有名分组，因为每个人都有自己的站点，所以我们根据所传的用户名不同来确定用户进入的是哪一个用户的主页（每个用户都可以互相查看主页，并不是用户只能看自己的主页）

　　第二个有名分组的作用，我们在主页的左侧会有一个菜单栏，菜单栏上要渲染出每个用户站点各自的文章分类归档、文章标签归档、文章日期归档，所以就需要有一个可供选择的正则表达式来接收参数。

　　最后一个para是指

接下来我们需要在视图函数中处理参数，然后返回给用户一个个人站点的主页

#views中：
def homeSite(request,username,**kwargs):
    # 查询当前用户站点
    current_user=models.UserInfo.objects.filter(username=username).first()
    if not current_user:#如果当前用户异常，返回404页面
        return render(request,'notFound.html')
    # 查询当前用户站点所有文章
    article_list=models.Article.objects.filter(user=current_user)

    # 查询 当前用户的分类归档，格式为：
    '''
            python(3)
            linux(5)
            go(1)
    '''
    from django.db.models import Count, Sum
    '''
     可先在视图函数中利用双下划綫查询的方式取出对象再渲染到模板中，
    本文用的方法是直接在模板中用.的方法进行取对象
    双下划线方式如下：
    current_blog=current_user.blog
    category_list = models.Category.objects.all().filter(blog=current_blog).annotate(
        c=Count("article__nid")).values_list("title", "c")
    print(category_list)  # , ]>

    '''
    # 查询当前用户的标签归档

    '''
        a(3)
        b(5)
        c(1)
    '''
    '''
    双下划线查询方式：
    tag_list = models.Tag.objects.all().filter(blog=current_blog).annotate(c=Count("article__nid")).values_list("title",c)
    print(tag_list)  # 

    '''
    # 查询当前用户的日期归档

    '''
    2016-12（2）
    2017-1（3）
    '''
    #因为时间对象用Django原生api方式取无法做到格式化输出，所以这里必须用到extra（数据库查询语句）
    date_list=models.Article.objects.filter(user=current_user).extra(select={"filter_create_date":"strftime('%%Y/%%m',create_time)"})
　　　　　　　　　　.values_list("filter_create_date").annotate(Count("nid"))
    print(date_list)

    if kwargs:
        if kwargs.get("condition") == "category":
            #分类归档
            article_list = models.Article.objects.filter(user=current_user, category__nid=kwargs.get("para"))
            print(article_list)
        elif kwargs.get("condition") == "tag":
            #标签归档
            article_list = models.Article.objects.filter(user=current_user, tags__nid=kwargs.get("para"))
        elif kwargs.get("condition") == "date":
            #时间归档
            year, month = kwargs.get("para").split("/")
            article_list = models.Article.objects.filter(user=current_user, create_time__year=year,
                                                         create_time__month=month)

    return render(request,"homeSite.html",locals())

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %} 个人首页 {% endblock %}title>
    <script src="/static/jquery-3.2.1.min.js">script>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js">script>
    <link rel="stylesheet" href="/static/mycss/homeSite.css">
    <link rel="stylesheet" href="/static/mycss/article_detail.css">
    <link rel="stylesheet" href="/static/user_home_style/{{ current_user.blog.theme }}">
    <script src="/static/kindeditor/kindeditor-all.js">script>

head>
<body>
<nav class="navbar navbar-inverse" id="nav">
    <div class="container">
        
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigationspan>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
            button>
            <a class="navbar-brand" href="#">博客园a>
        div>

        
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/blog/{{ current_user.username }}">{{ current_user.blog.title }} <span class="sr-only">(current)span>a>
                li>
                <li><a href="#">Linka>li>
            ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="/">首页a>li>
                <li><a href="#">新随笔a>li>
                <li><a href="#">联系a>li>
                <li><a href="#">订阅a>li>
                <li><a href="#">管理a>li>
                {% if request.user.is_authenticated %}
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">

                            {{ request.user.username }}

                        <span class="caret">span>a>
                    <ul class="dropdown-menu">
                        <li><a href="/blog/{{ request.user.username }}">个人首页a>li>
                        <li><a href="/blog/backend/">文章管理a>li>
                        <li><a href="#">Something else herea>li>
                        <li role="separator" class="divider">li>
                        <li><a href="/log_out/">注销a>li>
                    ul>
                li>
                {% else %}
                    <li><a href="/login/">请登录a>li>
                {% endif %}
            ul>
        div>
    div>
nav>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">公告div>
                <div class="panel-body">
                    <p><b>Python开发交流群：255012808b>p>
                    <p><b>Python开发交流群：255012808b>p>
                    <p><b>Python开发交流群：255012808b>p>
                    <p><b>Python技术交流群：557877767b>p>
                    <p><b>开源Tyrion交流群：564068039b>p>
                div>
            div>
            <div class="panel panel-primary">
                <div class="panel-heading">个人信息div>
                <div class="panel-body">
                    <p><img class="img-circle " src="{{ current_user.avatar.url }}" alt="" height="100" width="100">p>

                    <h3>昵称：{{ current_user.username }}h3>
                div>
            div>
            <div class="panel panel-danger">
                <div class="panel-heading">我的标签div>
                <div class="panel-body">
                <ul class="list-group">
                    {% for foo in current_user.blog.tag_set.all %}
                        <li class="list-group-item">
                            <span class="badge">{{ foo.article_set.count }}span>
                            <a href="/blog/{{ current_user.username }}/tag/{{ foo.nid }}">{{ foo.title }}a>
                        li>

                    {% endfor %}
                ul>

                div>
            div>
            <div class="panel panel-info">
                <div class="panel-heading">随笔分类div>
                <div class="panel-body">
                <ul class="list-group">
                    {% for foo in current_user.blog.category_set.all %}
                        <li class="list-group-item">
                            <span class="badge">{{ foo.article_set.count }}span>
                            <a href="/blog/{{ current_user.username }}/category/{{ foo.nid }}">{{ foo.title }}a>
                        li>

                    {% endfor %}
                ul>



                div>
            div>
            <div class="panel panel-success">
                <div class="panel-heading">随笔档案div>
                <div class="panel-body">
                <ul class="list-group">
                    {% for date in date_list %}
                        <li class="list-group-item">
                            <span class="badge">{{ date.1 }}span>
<a href="/blog/{{ current_user.username }}/date/{{ date.0 }}">{{ date.0 }}{{ date.1 }}a>                        li>

                    {% endfor %}
                ul>





                div>
            div>
        div>

            <div class="col-md-9 c1">
        {% block con %}

                {% for foo in article_list %}
                    <div class="article">
                        <div class="head">
                            <h3>
                                <a href="/blog/{{ current_user.username }}/article_detail/{{ foo.nid }}">{{ foo.title }}a>
                            h3>
                        div>
                        <div class="desc">
                            {{ foo.desc }}
                        div>
                        <div class="foot pull-right">
                            posted@ <span>{{ foo.create_time|date:"Y-m-d" }}span> 
                            <span>评论({{ foo.comment_count }})span> 
                            <span>点赞({{ foo.up_count }})span> 
                            <span>阅读({{ foo.read_count }})span>

                        div>
                        <p>p>
                    div>
                {% endfor %}

                {% endblock %}
        div>

    div>
div>

<div>

div>

body>
html>

homeSite.html

        /*body{*/
            /*background-color: #9acfea;*/
        /*}*/
        .article{
            padding-bottom:20px;
            border-bottom: solid;
        }
        .desc{
            text-align: justify ;
            font-size: 16px;
        }
        .foot{
            font-size: 14px;
            color: grey;
        }
        .c1{
            background-color:white;
        }
        #comment_form_container{
            margin-top: 80px;
        }
        .top{
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: whitesmoke;
            position: fixed;
            bottom: 20px;
            right: 20px;
            text-align: center;
        }

mycss下的homeSite.css

上面的homesite.html中用到了一个路由反向解析，所以这里我们要增加一条路由匹配：

url(r'^(?P.*)', views.homeSite,name="aaa")

这里我们用到了404页面，可以用浏览器自带的功能，我么也可以自己写一个提示的HTML页面

    "utf-8">
    
    


"http://www.cnblogs.com/">"//static.cnblogs.com/images/logo_small.gif" alt="cnblogs"/>
404. 抱歉! 您访问的资源不存在!
class="d">请确认您输入的网址是否正确，如果问题持续存在，请发邮件至contact@cnblogs.com与我们联系。
"/">返回网站首页

notFound.html

 

 

接下来我们要做的页面是个人站点中的文章详情页面，因为访问者会在用户的博客站点中任意点击其已发表的文章。

　　因为文章详情页面的布局与个人站点首页的布局相似，只是在右侧的内容区变成了文章的详细内容，所以我们可以将个人站点首页的模板设置成基板，上面的homesite.html中已经设好，所以我们接下来在文章详情页中直接继承就好。

　　文章详情页面是我们重点要做的页面，因为其中包含的知识点最多。主要需实现的功能有：点赞、踩、评论、评论实时更新、评论楼结构与评论树结构（任选一项）。

下面我们会来一一进行实现

文章详情：

具体URL配置：

#文章详情页面
url(r'^(?P.*)/article_detail/(?P\d+)', views.article_detail),
#文章赞、踩功能
url(r'^updown/$', views.updown),
url(r'^comment/$', views.comment), #文章评论功能
#显示文章已发表的评论，树状结构
url(r'^commentTree/(?P\d+)$', views.commentTree),

#views中
########文章详情#########

def article_detail(request,username,article_nid):
    # 查询当前用户
    current_user = models.UserInfo.objects.filter(username=username).first()
    if not current_user:#用户异常时返回404页面
        return render(request, 'notFound.html')
    from django.db.models import Count, Sum
    #前端渲染时间时依然需使用extra
    date_list = models.Article.objects.filter(user=current_user).extra(
        select={"filter_create_date": "strftime('%%Y/%%m',create_time)"}).values_list(
        "filter_create_date").annotate(Count("nid"))
    #得到用户点击的文章标题对应的文章详情
    current_article=models.Article.objects.filter(nid=article_nid).first()
    return render(request,'article_detail.html',locals())

{% extends 'homeSite.html' %}
{% block title %}文章详情{% endblock %}

{% block con %}

    <div class="article_title" id="article_title"><h3>{{ current_article.title }}h3>div>
    <div class="article_con">
        <div class="col-md-offset-1">{{ current_article.articledetail.content|safe }}div>
        <div class="warn">
            <div class="warn_con"><img src="/static/img/warning.png" alt="" width="70" height="70">div>
            <div class="warn_con">
                <p>p>
                <p>p>
                作者：{{ current_user.username }}
                <br>
                本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。
            div>
        div>


        <div class="post-info">
            <img class="img-circle " src="{{ current_user.avatar.url }}" alt="" height="100" width="100">
            作者：{{ current_user.username }}
            <div id="digg">
                <div class="diggit">
                    <span class="diggnum" id="digg_count">{{ current_article.up_count }}span>
                div>
                <div class="buryit">
                    <span class="burynum" id="bury_count">{{ current_article.down_count }}span>
                div>
                <div class="updownerror">
                    <div class="up_error_div pull-left"><span class="up_error">span>div>
                    <div class="down_error_div pull-right"><span class="down_error">span>div>
                div>
            div>
        div>



        <div class="comment-info">
            <h3>已发表评论(评论树):h3>
         <div class="comment_tree_list">
            <div class="content-tree-list">
{#            由js代码从数据库中取得#}
            div>

         div>


        <h2>----------------------------------------------------h2>
            <div class="comment-header"><h3>评论列表h3>div>
            <div class="content-list">
{#            for循环从数据库中取到已发布的评论#}
            {% for comment in current_article.comment_set.all %}
                <div class="comment-time">
                    #{{ forloop.counter }}楼：   
                    <img class="img-circle " src="{{ comment.user.avatar.url}}" alt="" width="30" height="30">
                    <a href="/blog/{{ comment.user.username }}">{{ comment.user.username }}a>
                      {{ comment.create_time|date:'Y-m-d,h:i:s' }}
                    <div class="pull-right">
                        <a class="reply_comment_btn" comment_id="{{ comment.nid }}" conmment_username="{{ comment.user.username }}">回复a>    
                        <a href="">引用a>  
                    div>
                div>
                <div class="comment-detail">
                {% if comment.parent_comment_id %}{#对评论的评论#}
                 <div style="background-color: #c4e3f3">
                          @<a href="">{{ comment.parent_comment.user.username }}a> :   {{ comment.parent_comment.content }}
                 div>
                 {% endif %}
                        {{ comment.content }}{#对文章的评论#}
                div>
            {% endfor %}
            div>
        div>

<div class="top"><a href="#nav">返回顶部a>div>


{#        用户在登录状态才显示评论区，方可进行评论#}
    {% if request.user.is_authenticated %}
        <div class="add-comment">
            <div class="add-icon">
                <img src="/static/img/addcomment.gif" alt="" height="20" width="20">
                <b><span>发表评论span>b>
            div>
            <div class="comment-user">
                昵称：<input type="text" disabled value="{{ request.user.username }}">
            div>
            <div class="comment-text">
                <div>评论内容：div>
{#                <textarea name="textarea" id="textarea" cols="30" rows="10">textarea>#}
                <textarea id="textarea" name="textarea" style="width:500px;height:300px;">textarea>
                <p><button class="btn btn-primary comment-btn">提交评论button>p>
            div>
        div>
    {% else %}{#访客未登录时只显示提示信息，不显示评论框#}
        <div id="comment_form_container">
            <div class="login_tips">
                <img src="/static/img/addcomment.gif" alt="" height="20" width="20">
                注册用户登录后才能发表评论，请 <a href="/login/" >登录a> 或 <a href="/reg/">注册a>，<a href="/">访问a>网站首页。
            div>
        div>
    {% endif %}
    div>
{% endblock %}

article_detail.html

.article_con{
    padding-left: 14px;
}

.article_title{
    text-align: center;
    color: #2b669a;
}
.warn{
    border: #e0e0e0 1px dashed;
    margin: 20px 0;
    font-family: 微软雅黑;
    font-size: 11px;

}
.warn_con{
    display: inline-block;
    margin: 10px;
}

#digg{
    float: right;
    margin-bottom: 10px;
    margin-right: 30px;
    font-size: 12px;
    width: 128px;
    text-align: center;
    margin-top: 10px;
}
.diggit{
    background: url("/static/img/upup.gif") no-repeat;
    float: left;
    width: 46px;
    height: 52px;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
}

.buryit {
    float: right;
    margin-left: 20px;
    width: 46px;
    height: 52px;
    background: url("/static/img/downdown.gif") no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
}
.updownerror{
    margin-top: 60px;
    color: red;
}
.comment-info{
    padding-top: 20px;

}
.comment-header{
    border-bottom: 1px solid #ddd;
}
.comment-time{
    margin-left: -20px;
    padding: 10px;
    font-size: 16px;
}
.comment-detail{
        margin-left: -20px;
    font-size: 14px;
    padding: 0px 20px;
    border-bottom: 1px dotted #ccc;
    text-align: justify;
}

.add-icon{
    padding: 20px 0 0 25px;
}
.add-icon span{
    margin-left: 10px;
}
.comment-user input{
    background-image: url("/static/img/icon_form.gif");
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    padding: 4px 4px 4px 30px;
    width: 300px;
    font-size: 13px;
}

textarea{
    width: 450px;
    height: 300px;
    font-size: 13px;
    border: 1px solid #ccc;
    font-family: 'PingFang SC','Helvetica Neue','Helvetica','Arial',sans-serif;
}


.comment{
    /*float: left;*/
    margin-left: 40px;
}

mycss下的article_detail.css（因为article_detail.html是继承homeSite.html的，所以该css文件应在homeSite.html页面中进行引入）

 

　　　　文章的赞、踩功能：　　　　

因为赞、踩功能都是在文章详情中的局部功能，所以对应的模板页面还是article_detail.html。我们需要做的是在模板下方写js代码

这里我们用ajax的方式提交请求，脚本语言用的是jQuery

#在article_detail.html中：

import json
from django.db.models import F
def updown(request):
    updown_response={'state':True,'is_repeat':None,'is_login':True,'down':None}
    if not request.user.is_authenticated():
        #未登录状态下不可赞和踩
        updown_response['is_login']=False
        return HttpResponse(json.dumps(updown_response))

    user_id=request.user.nid#访客已登录，得到访客id
    article_id=request.POST.get('article_id')#得到访客查看的文章id
    # the_user=models.UserInfo.objects.filter(nid=user_id)
    # the_article=models.Article.objects.filter(nid=article_id)
    if request.POST.get('up')=='up':#判断点的是赞
        if models.ArticleUp.objects.filter(user_id=user_id, article_id=article_id):
            #若用户已点过赞，不允许再点
            updown_response['state']= False
            updown_response['is_repeat']=True
        else:
            try:#将用户的点赞请求录入数据库
                models.ArticleUp.objects.create(user_id=user_id, article_id=article_id)
                models.Article.objects.filter(nid=article_id).update(up_count=F("up_count") + 1)
                print('..........')
            except:#捕捉到异常返回
                updown_response["state"] = False
    elif request.POST.get('down')=='down':#踩请求（同理）
        if models.ArticleDown.objects.filter(user_id=user_id, article_id=article_id):
            updown_response['state']= False
            updown_response['is_repeat']=True
        else:
            try:
                models.ArticleDown.objects.create(user_id=user_id, article_id=article_id)
                models.Article.objects.filter(nid=article_id).update(down_count=F("up_count") + 1)
                print('..........')
            except:
                updown_response["state"] = False
    return HttpResponse(json.dumps(updown_response))

 

　　　　　　评论功能、评论树与评论楼：　　　　　　

　　因为评论功能依旧是在文章详情中的局部功能，所以对应的模板页面还是article_detail.html。我们需要做的仍旧是在模板下方写js代码。这里我们继续用ajax的方式提交请求，脚本语言用的是jQuery

 

　　　　　　最后我们需要实现的是后台管理的页面：　　　　　　

　　在这里我们自己写一个后台管理的页面，主要用于用户对自己站点的博客的增删改查。其实可以用Django框架中的admin会可以轻松实现，不过因为是自己的项目，所以我们可以尝试着自己来做一个具有相同功能的。

　　首先需要的是配置路由，因为是个人站点的功能，所以我们依旧将路由放在blog文件夹下的urls.py中

url(r'^backend/$', views.backendindex),#后台管理首页
url(r'^backend/addarticle/$', views.addarticle),#后台管理添加新文章功能
url(r'^backend/editarticle/(\d+)$', views.editarticle),#编辑文章
url(r'^backend/del/(\d+)', views.delarticle),#删除文章

　　下面我们进行具体的功能实现

首先要得到一个后台管理的首页

url(r'^backend/$', views.backendindex),#后台管理首页

def backendindex(request):
    print('-------------------')
    if not request.user.is_authenticated():
        return redirect("/login/")#未登录不可直接进入
    #在后台管理需要渲染出自己写的博客，所以要拿到所有的文章
    article_list=models.Article.objects.filter(user=request.user).all()
    return  render(request,"backendindex.html",{"article_list":article_list})

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>后台管理title>
    <script src="/static/jquery-3.2.1.min.js">script>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js">script>
    <script src="/static/kindeditor/kindeditor-all.js">script>



head>
<body>



<div class="container c1">
<div class="header">
    <h1>后台管理h1>
div>
    <hr>
    <div class="row">
        <div class="leftMenu col-md-2">
            <ul class="list-group">
              <li class="list-group-item list-group-item-success"><a href="/blog/backend/">文章管理a>li>
              <li class="list-group-item list-group-item-info"><a href="">标签管理a>li>
              <li class="list-group-item list-group-item-warning"><a href="">分类管理a>li>
            ul>
        div>
        <div class="manageCon col-md-8">
{#            因为add页面的排版相似，所以我们要建一个方便继承用的盒子#}
            {% block manageCon %}
                <div class="addbutton">
                       <a href="/blog/backend/addarticle/"><button class="btn btn-primary">添加文章button>a>
                div>

                <table class="table table-border table-hover">
                     <tr>
                         <th>标题th>
                         <th>评论数th>
                         <th>点赞数th>
                         <th>操作th>
                         <th>操作th>
                     tr>

                     {% for article in article_list %}
                       <tr>
                           <td>{{ article.title }}td>
                           <td>{{ article.comment_count }}td>
                           <td>{{ article.up_count }}td>
                           <td><a href="/blog/backend/editarticle/{{ article.nid }}"><button class="btn btn-info">编辑button>a>td>
                           <td><a href="/blog/backend/del/{{ article.nid }}"><button class="btn btn-danger">删除button>a>td>

                       tr>
                     {% endfor %}
                table>

            {% endblock %}
        div>
    div>
div>



body>
html>

backendindex.html

 

　　接下来实现增删改查的功能，首先说最简单的删，删除只要将选中的文章的id发送到后台，后天将指定文章删除然后redirect到后台首页就好了，没有对应的html模板。

          后台管理删除文章                

url(r'^backend/del/(\d+)', views.delarticle),#删除文章

 

def delarticle(request,nid):
    models.Article.objects.filter(nid=nid).delete()
    return redirect('/blog/backend/')

 

 

 

               后台管理添加文章               

　　这里我们需要用到一个编辑器插件，去网上下载kindeditor，然后照理将kindeditor文件夹放到static文件夹下，具体的使用方法可自行百度，这里直接使用。url(r'^backend/addarticle/$', views.addarticle),#后台管理添加新文章功能

 

#在views.py中：

import datetime
def addarticle(request):
    response={'result':None}
    if request.method=="POST":#点击保存按钮
        article_form = ArticleForm(request.POST)#拿到input框中填入的数据
        if article_form.is_valid():#数据没问题
            title=article_form.cleaned_data.get("title")
            content=article_form.cleaned_data.get("content")
            article_obj=models.Article.objects.create(title=title,desc=content[0:30],create_time=datetime.datetime.now(),user=request.user)
            models.ArticleDetail.objects.create(content=content,article=article_obj)
            response['result'] = '添加成功点击返回'
        else:
            response['result']='添加失败'
        #添加成功后弹出添加成功的提示，然后给予一个点击可返回后台管理首页的按钮
        return HttpResponse(response['result'])

    article_form=ArticleForm()#由form组件，生成input框
    return render(request,"addarticle.html",{"article_form":article_form})

 

{% extends "backendindex.html" %}

{#继承后台管理首页#}
{% block manageCon %}
    <div class="container">
        <div class="row">
            <div class="col-md-10">
                {% csrf_token %}
                <div id="Editor_Edit_Header" class="CollapsibleTitle">
                    <span id="Editor_Edit_headerTitle">添加随笔span>
                div>



    <form action="/blog/backend/addarticle/" method="post" novalidate>
         {% csrf_token %}
             <div class="form-group">
                <label for="exampleInputEmail1">标题：label>
                {{ article_form.title }}
             div>

         <div>
             <label for="title">内容：label>
             <p>
                 {{ article_form.content }}

             p>
         div>
        <p><input type="submit" value="      提交      " class="btn btn-info">p>
    form>

            div>
        div>
    div>

    <script>
    // 使用KindEditor必须写
     KindEditor.ready(function(K) {
                window.editor = K.create('#id_content',{
                        width:"950px",//宽，可设定
                        height:"500px",//长，可设定
                        resizeType:0,//参数为0、1、2，指代长款可不可调
                        //还有其他许多可设定的功能，自行百度
                        uploadJson:"/uploadFile/",//传图片时需要用到的路径
                        extraFileUploadParams:{
                           csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                       }
                });
     })
script>
{% endblock %}

addarticle.html（这里用到kindeditor，所以需要在backendindex.html中将其导入）

添加文章时我们肯定会相应的需要上传一些图片，这就需要再写一个url，这里我将url放到全局的urls.py中

url(r'^uploadFile/$', views.uploadFile),#添加文章时上传图片

 

对应的视图函数：

 

#在views.py中：

def uploadFile(request):

    file_obj=request.FILES.get("imgFile")#拿到上传的图片
    file_name=file_obj.name

    from blogCMS1 import settings
    import os
    #将图片文件写入到本地
    path=os.path.join(settings.MEDIA_ROOT,"article_uploads",file_name)
    with open(path,"wb") as f:
        for i in file_obj.chunks():
            f.write(i)

    response={
        "error":0,
        "url":"/media/article_uploads/"+file_name+"/"
    }

    import json
    return HttpResponse(json.dumps(response))

 

 

 

      编辑文章功能      

url(r'^backend/editarticle/(\d+)$', views.editarticle),#编辑文章

 

#在views.py中：

def editarticle(request,nid):
    response={'result':None}
    if request.method=="POST":
        article_form = ArticleForm(request.POST)
        if article_form.is_valid():
            title=article_form.cleaned_data.get("title")
            content=article_form.cleaned_data.get("content")
            article_obj=models.Article.objects.filter(nid=nid).update(
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　title=title,desc=content[0:30],create_time=datetime.datetime.now(),user=request.user)
            models.ArticleDetail.objects.update(content=content)
            response['result'] = '添加成功点击返回'
        else:
            response['result']='添加失败'

        return HttpResponse(response['result'])
    article_obj=models.Article.objects.get(nid=nid)#需要知道被编辑的文章对象
    title=article_obj.title
    content=article_obj.articledetail.content
    article_form=ArticleForm({"title":title,"content":content})#只允许编辑标题和内容
    return render(request,"editarticle.html",{"article_form":article_form,'nid':nid})

 

{% extends "backendindex.html" %}


{% block manageCon %}
    <div class="container">
        <div class="row">
            <div class="col-md-10">
                {% csrf_token %}
                <div id="Editor_Edit_Header" class="CollapsibleTitle">
                    <span id="Editor_Edit_headerTitle">添加随笔span>
                div>



    <form action="/blog/backend/editarticle/{{ nid }}" method="post" novalidate>
         {% csrf_token %}
             <div class="form-group">
                <label for="exampleInputEmail1">标题：label>
                {{ article_form.title }}
             div>

         <div>
             <label for="title">内容：label>
             <p>
                 {{ article_form.content }}

             p>
         div>
        <p><input type="submit" value="      提交      " class="btn btn-info">p>
    form>

            div>
        div>
    div>

    <script>
     KindEditor.ready(function(K) {
                window.editor = K.create('#id_content',{
                        width:"950px",
                        height:"500px",
                        resizeType:0,
                        uploadJson:"/uploadFile/",
                        extraFileUploadParams:{
                           csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                       }
                });
     })
script>
{% endblock %}

editarticle.html

 

基本功能就到这里了，还有一些其他的功能如修改用户名密码、园龄时间的显示、美化的一些插件使用等等可随喜好自行添加。

成品如下：

 

 

转载于:https://www.cnblogs.com/zhuminghui/p/8494638.html