36·Python项目-博客(前后不分离)

-首页(显示文章)
-文章详情
-点赞,点踩
-文章评论
    -字评论
    -评论的展示
-登录功能(图片验证码)
-注册功能(基于form验证,ajax)
-个人站点(不同人不同样式,文章过滤)
-后台管理:
    -文章展示
-新增文章
    -富文本编辑器

      User
            -nid
            -name
            -password
            -email
            -phone
            -avatar   用户头像
            -create_date    用户注册时间
            -blog
        Blog
            -nid
            -title
            -site_name
            -theme
        category:
            -nid
            -title
            -blog   跟blog一对多
            
        tag:(文章关键字)
            -nid
            -title
            -blog    跟blog一对多
            
        article
            -nid
            -title
            -desc    摘要
            -create_time    auto_add_now:当该条记录创建时,自动添加当前时间
            -content   文章内容
            
            -category    一对多
            -tag         多对多
            -blog        一对多
            
        commit
            -nid
            -user     哪个用户
            -article  对哪篇文章
            -content   评论了什么内容
            -commit_time  时间
            
            -parent_id
            如何实现根评论与子评论?
                -有同学分析,要再建一张表,跟commit是一对多的关系(不好)
                
                -如何用这一个表,表示出根评论和子评论?
                    -再加一个字段,标志,给那条评论,评论的


nid user    article   content    parent_id
        
    1    1        1         111         null
    2   2        1         222         null
    3   3          1         333          1
    4   4           1         444          3
    5   3        1         反弹          4
        UpandDown
            -nid
            -user     哪个用户
            -article  对哪篇文章
            -is_up   点赞还是点踩

# 创建数据库
mysql> create database bbs;

# 创建用户
mysql> grant all on *.* to root@'%' identified by '123';

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'bbs',
        'HOST': '10.0.0.51',
        'PORT': 3306,
        'USER': 'root',
        'PASSWORD': '123',
    }
}

import pymysql
pymysql.install_as_MySQLdb()

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static')
]

from django.db import models
from django.contrib.auth.models import AbstractUser


# Create your models here.

## UserInfo这个表 要继承AbstractUser，因为要用auth组件
class UserInfo(AbstractUser):
    nid = models.AutoField(primary_key=True)
    phone = models.CharField(max_length=32, null=True)
    ## 这个需要传一个路径
    avatar = models.FileField(upload_to='avatar/', default='/static/img/default.png')
    blog = models.OneToOneField(to='Blog', to_field='nid',null=True)


class Blog(models.Model):
    nid = models.AutoField(primary_key=True)
    title = models.CharField(max_length=64)
    sit_name = models.CharField(max_length=32)
    theme = models.CharField(max_length=64)


class Category(models.Model):
    nid = models.AutoField(primary_key=True)
    title = models.CharField(max_length=64)
    blog = models.ForeignKey(to='Blog', to_field='nid', null=True)


class Tag(models.Model):
    nid = models.AutoField(primary_key=True)
    title = models.CharField(max_length=64)
    blog = models.ForeignKey(to='Blog', to_field='nid', null=True)


class Article(models.Model):
    nid = models.AutoField(primary_key=True)
    title = models.CharField(max_length=64)
    desc = models.CharField(max_length=255)
    content = models.TextField()
    create_time = models.DateTimeField(auto_now_add=True)
    blog = models.ForeignKey(to='Blog', to_field='nid', null=True)
    category = models.ForeignKey(to='Category', to_field='nid', null=True)
    tag = models.ManyToManyField(to='Tag', through='ArticleToTag', through_fields=('article', 'tag'))


## 手动创建第三张表
class ArticleToTag(models.Model):
    nid = models.AutoField(primary_key=True)
    article = models.ForeignKey(to='Article', to_field='nid')
    tag = models.ForeignKey(to='Tag', to_field='nid')


class Commit(models.Model):
    nid = models.AutoField(primary_key=True)
    user = models.ForeignKey(to='UserInfo', to_field='nid')
    article = models.ForeignKey(to='Article', to_field='nid')
    content = models.CharField(max_length=255)
    create_time = models.DateTimeField(auto_now_add=True)
    ## 自己关联自己：方法一
    parent_id = models.ForeignKey(to='self', to_field='nid')
    ## 自己关联自己：方法二
    # parent_id = models.ForeignKey(to='Commit',to_field='nid')


class UpAndDown(models.Model):
    nid = models.AutoField(primary_key=True)
    user = models.ForeignKey(to='UserInfo', to_field='nid')
    article = models.ForeignKey(to='Article', to_field='nid')
    is_up = models.BooleanField()

    ## user和 article不允许一个作者，给一个文章点多个赞,做联合唯一。

    class Meta:
        ## 做这个只是为了不写脏数据，但是效率低，工作中不写也OK
        unique_together = (('user', 'article'),)

AUTH_USER_MODEL = 'blog.UserInfo'

MacBook-pro:bbs driverzeng$ python3 manage.py makemigrations
MacBook-pro:bbs driverzeng$ python3 manage.py migrate

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form>
                <div class="form-group">
                    <label for="">用户名</label>
                    <input type="text" id="name">
                </div>
                <div class="form-group">
                    <label for="">密码</label>
                    <input type="password" id="pwd">
                </div>
                <div class="form-group">
                    <label for="">验证码</label>
                    <input type="password" id="valid_code">
                </div>
                <input type="button" value="登录" class="btn btn-primary">
            </form>
        </div>
    </div>
</div>
</body>
</html>

from django.conf.urls import url
from django.contrib import admin
from blog import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
]

from django.shortcuts import render,HttpResponse,redirect

# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request,'login.html')
    else:
        return HttpResponse('OK')

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登录</h1>
            <form>
                <div class="form-group">
                    <label for="name">用户名</label>
                    <input type="text" id="name" class="form-control">
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input type="password" id="pwd" class="form-control">
                </div>
                <div class="form-group">
                    <label for="valid_code">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" id="valid_code" class="form-control">
                        </div>
                        <img width="350" height="45"
                             src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2142985517,724352710&fm=26&gp=0.jpg"
                             alt="">
                    </div>
                </div>
                <input type="button" value="登录" class="btn btn-primary pull-right">
            </form>
        </div>
    </div>
</div>
</body>
</html>

from django.conf.urls import url
from django.contrib import admin
from blog import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
]

def get_valid_code(request):
    with open('static/img/1.jpg','rb') as f:
        data = f.read()
    return HttpResponse(data)

MacBook-pro:bbs driverzeng$ pip3 install pillow -i https://mirrors.aliyun.com/pypi/simple/

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image


# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        return HttpResponse('OK')


def get_valid_code(request):
    # with open('static/img/1.jpg','rb') as f:
    #     data = f.read()
    # return HttpResponse(data)
    ## 生成一张图片,mode:'RGB'模式 (320,35)图片大小,color颜色
    img = Image.new('RGB', (320, 35), color='green')

    ## 保存到本地
    with open('valid_code.png', 'wb') as f:
        # 使用save方法，第一个参数是空文件，第二个参数是格式
        img.save(f, 'png')

    ## 打开文件，再返回
    with open('valid_code.png', 'rb') as f:
        data = f.read()
    return HttpResponse(data)

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image
import random


# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        return HttpResponse('OK')


def get_random_color():
    return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))


def get_valid_code(request):
    # with open('static/img/1.jpg','rb') as f:
    #     data = f.read()
    # return HttpResponse(data)
    ## 生成一张图片,mode:'RGB'模式 (320,35)图片大小,color颜色
    img = Image.new('RGB', (320, 35), color=get_random_color())

    ## 保存到本地
    with open('valid_code.png', 'wb') as f:
        # 使用save方法，第一个参数是空文件，第二个参数是格式
        img.save(f, 'png')

    ## 打开文件，再返回
    with open('valid_code.png', 'rb') as f:
        data = f.read()
    return HttpResponse(data)

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image
import random
from io import BytesIO

# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        return HttpResponse('OK')


def get_random_color():
    return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))


def get_valid_code(request):
    img = Image.new('RGB', (320, 35), color=get_random_color())
    ## 在内存中生成一个空文件
    f = BytesIO()
    ## 把图片保存到f中
    img.save(f, 'png')
    ## 取出图片
    data = f.getvalue()
    return HttpResponse(data)

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image,ImageDraw,ImageFont
import random
from io import BytesIO

# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        return HttpResponse('OK')


def get_random_color():
    return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))


def get_valid_code(request):
    img = Image.new('RGB', (320, 35), color=get_random_color())
    # 拿到画笔，在图片上画画
    img_draw = ImageDraw.Draw(img)

    # 生成一个字体对象 ，第一个参数是字体文件路径，第二个参数，是字体大小
    font = ImageFont.truetype('static/font/ss.TTF',size=26)

    ## 第一个参数，xy的坐标，第二个参数，文字，第三个参数，颜色，第四个参数，字体。
    img_draw.text((120,0),'python',get_random_color(),font=font)

    ## 在内存中生成一个空文件
    f = BytesIO()
    ## 把图片保存到f中
    img.save(f, 'png')
    ## 取出图片
    data = f.getvalue()
    return HttpResponse(data)

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image,ImageDraw,ImageFont
import random
from io import BytesIO

# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        return HttpResponse('OK')


def get_random_color():
    return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))


def get_valid_code(request):
    img = Image.new('RGB', (320, 35), color=get_random_color())
    # 拿到画笔，在图片上画画
    img_draw = ImageDraw.Draw(img)

    # 生成一个字体对象 ，第一个参数是字体文件路径，第二个参数，是字体大小
    font = ImageFont.truetype('static/font/ss.TTF',size=26)

    ## 写一个循环，循环5次，每次随机写一个(数字，大写，小写字母)
    for i in range(5):
        char_num = random.randint(0,9)
        # 生成97 ~ 122的数字,生成字母
        char_lower = chr(random.randint(97,122))
        char_upper = chr(random.randint(65,90))
        char_str = str(random.choice([char_num,char_lower,char_upper]))

        ## 第一个参数，xy的坐标，第二个参数，文字，第三个参数，颜色，第四个参数，字体。
        img_draw.text((i*60+20, 0), char_str, get_random_color(), font=font)

    ## 在内存中生成一个空文件
    f = BytesIO()
    ## 把图片保存到f中
    img.save(f, 'png')
    ## 取出图片
    data = f.getvalue()
    return HttpResponse(data)

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image,ImageDraw,ImageFont
import random
from io import BytesIO

# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        return HttpResponse('OK')


def get_random_color_light():
    return (random.randint(0, 100), random.randint(0, 100), random.randint(0, 100))

def get_random_color_dark():
    return (random.randint(150, 255), random.randint(150, 255), random.randint(150, 255))


def get_valid_code(request):
    img = Image.new('RGB', (320, 35), color=get_random_color_light())
    # 拿到画笔，在图片上画画
    img_draw = ImageDraw.Draw(img)

    # 生成一个字体对象 ，第一个参数是字体文件路径，第二个参数，是字体大小
    font = ImageFont.truetype('static/font/ss.TTF',size=26)

    ## 写一个循环，循环5次，每次随机写一个(数字，大写，小写字母)
    for i in range(5):
        char_num = random.randint(0,9)
        # 生成97 ~ 122的数字,生成字母
        char_lower = chr(random.randint(97,122))
        char_upper = chr(random.randint(65,90))
        char_str = str(random.choice([char_num,char_lower,char_upper]))

        ## 第一个参数，xy的坐标，第二个参数，文字，第三个参数，颜色，第四个参数，字体。
        img_draw.text((i*60+20, 0), char_str, get_random_color_dark(), font=font)

    width = 350
    height = 45
    for i in range(10):
        x1 = random.randint(0,width)
        x2 = random.randint(0,width)
        y1 = random.randint(0,height)
        y2 = random.randint(0,height)

        #在图片上画线
        img_draw.line((x1,y1,x2,y2),fill=get_random_color_light())

    for i in range(50):
        img_draw.point([random.randint(0,width),random.randint(0,height)],fill=get_random_color_light())
        x = random.randint(0,width)
        y = random.randint(0,height)
        img_draw.arc((x,y,x+4,y+4),0,90,fill=get_random_color_light())


    ## 在内存中生成一个空文件
    f = BytesIO()
    ## 把图片保存到f中
    img.save(f, 'png')
    ## 取出图片
    data = f.getvalue()
    return HttpResponse(data)

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登录</h1>
            <form>
                <div class="form-group">
                    <label for="name">用户名</label>
                    <input type="text" id="name" class="form-control">
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input type="password" id="pwd" class="form-control">
                </div>
                <div class="form-group">
                    <label for="valid_code">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" id="valid_code" class="form-control">
                        </div>
                        <img width="350" height="45"
                             src="/get_valid_code/"
                             alt="" id="img_code">
                    </div>
                </div>
                <input type="button" value="登录" class="btn btn-primary pull-right">
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $('#img_code').click(function () {
        // 每次点击图片都在图片路径后面加一个 问号.
        $('#img_code')[0].src+='?'
    })
</script>
</html>

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse


# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    ## 判断前台发的请求是不是ajax的请求
    elif request.is_ajax():
        response = {'user': None, 'msg': None}
        name = request.POST.get('name')
        pwd = request.POST.get('pwd')
        valid_code = request.POST.get('valid_code')

        if valid_code.upper() == request.session.get('valid_code').upper():
            user = auth.authenticate(request, username=name, password=pwd)
            if user:
                ## ajax请求，不能再返回render页面或者redirect页面，只能返回字符串或者json
                ## 校验通过，一定要登录
                auth.login(request, user)
                response['user'] = name
                response['msg'] = '登录成功'
            else:
                response['msg'] = '用户名密码错误'
        else:
            response['msg'] = '验证码错误'

    return JsonResponse(response)


def get_random_color_light():
    return (random.randint(0, 100), random.randint(0, 100), random.randint(0, 100))


def get_random_color_dark():
    return (random.randint(150, 255), random.randint(150, 255), random.randint(150, 255))


def get_valid_code(request):
    img = Image.new('RGB', (320, 35), color=get_random_color_light())
    # 拿到画笔，在图片上画画
    img_draw = ImageDraw.Draw(img)

    # 生成一个字体对象 ，第一个参数是字体文件路径，第二个参数，是字体大小
    font = ImageFont.truetype('static/font/ss.TTF', size=26)

    ## 保存验证码
    random_code = ''
    ## 写一个循环，循环5次，每次随机写一个(数字，大写，小写字母)
    for i in range(5):
        char_num = random.randint(0, 9)
        # 生成97 ~ 122的数字,生成字母
        char_lower = chr(random.randint(97, 122))
        char_upper = chr(random.randint(65, 90))
        char_str = str(random.choice([char_num, char_lower, char_upper]))

        ## 第一个参数，xy的坐标，第二个参数，文字，第三个参数，颜色，第四个参数，字体。
        img_draw.text((i * 60 + 20, 0), char_str, get_random_color_dark(), font=font)
        random_code += char_str

    ## 把验证码 保存到session中
    request.session['valid_code'] = random_code

    width = 350
    height = 45
    for i in range(10):
        x1 = random.randint(0, width)
        x2 = random.randint(0, width)
        y1 = random.randint(0, height)
        y2 = random.randint(0, height)

        # 在图片上画线
        img_draw.line((x1, y1, x2, y2), fill=get_random_color_light())

    for i in range(100):
        img_draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color_light())
        x = random.randint(0, width)
        y = random.randint(0, height)
        img_draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color_light())

    ## 在内存中生成一个空文件
    f = BytesIO()
    ## 把图片保存到f中
    img.save(f, 'png')
    ## 取出图片
    data = f.getvalue()
    return HttpResponse(data)

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登录</h1>
            <form>
                {% csrf_token %}
                <div class="form-group">
                    <label for="name">用户名</label>
                    <input type="text" id="name" class="form-control">
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input type="password" id="pwd" class="form-control">
                </div>
                <div class="form-group">
                    <label for="valid_code">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" id="valid_code" class="form-control">
                        </div>
                        <img width="350" height="45"
                             src="/get_valid_code/"
                             alt="" id="img_code">
                    </div>
                </div>
                <input type="button" value="登录" class="btn btn-primary pull-right" id="btn">
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $('#img_code').click(function () {
        // 每次点击图片都在图片路径后面加一个 问号.
        $('#img_code')[0].src += '?'
    })
    $('#btn').click(function () {
        $.ajax({
            url: '/login/',
            type: 'post',
            // 一定要 记住 传CSRF
            data: {
                'name': $('#name').val(),
                'pwd': $('#pwd').val(),
                'valid_code': $('#valid_code').val(),
                // 使用属性选择器，选择
                'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()
                //使用变量
                //'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>
</html>

MacBook-pro:bbs driverzeng$ python3 manage.py createsuperuser
Username: zls
Email address: 133@qq.com
Password: zls12345
Password (again): zls12345
Superuser created successfully.

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .error{
            color: red;
            margin-left: 20px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登录</h1>
            <form>
                {% csrf_token %}
                <div class="form-group">
                    <label for="name">用户名</label>
                    <input type="text" id="name" class="form-control">
                </div>
                <div class="form-group">
                    <label for="pwd">密码</label>
                    <input type="password" id="pwd" class="form-control">
                </div>
                <div class="form-group">
                    <label for="valid_code">验证码</label>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" id="valid_code" class="form-control">
                        </div>
                        <img width="350" height="45"
                             src="/get_valid_code/"
                             alt="" id="img_code">
                    </div>
                </div>
                <input type="button" value="登录" class="btn btn-primary" id="btn"><span class="error"></span>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $('#img_code').click(function () {
        // 每次点击图片都在图片路径后面加一个 问号.
        $('#img_code')[0].src += '?'
    })
    $('#btn').click(function () {
        $.ajax({
            url: '/login/',
            type: 'post',
            // 一定要 记住 传CSRF
            data: {
                'name': $('#name').val(),
                'pwd': $('#pwd').val(),
                'valid_code': $('#valid_code').val(),
                // 使用属性选择器，选择
                'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val()
                //使用变量
                //'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success:function (data) {
                console.log(data)
                if(data.user){
                    // 登录成功跳转到index页面
                    location.href = '/index/'
                }else {
                    $('.error').html(data.msg)
                }
            }
        })
    })
</script>
</html>

from django import forms

class RegForm(forms.Form):
    name = forms.CharField(max_length=18,min_length=2)
    pwd = forms.CharField(max_length=18,min_length=2)
    re_pwd = forms.CharField(max_length=18,min_length=2)
    emai = forms.EmailField()

from django.conf.urls import url
from django.contrib import admin
from blog import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
]

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse
from blog import myforms


# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    ## 判断前台发的请求是不是ajax的请求
    elif request.is_ajax():
        response = {'user': None, 'msg': None}
        name = request.POST.get('name')
        pwd = request.POST.get('pwd')
        valid_code = request.POST.get('valid_code')

        if valid_code.upper() == request.session.get('valid_code').upper():
            user = auth.authenticate(request, username=name, password=pwd)
            if user:
                ## ajax请求，不能再返回render页面或者redirect页面，只能返回字符串或者json
                ## 校验通过，一定要登录
                auth.login(request, user)
                response['user'] = name
                response['msg'] = '登录成功'
            else:
                response['msg'] = '用户名密码错误'
        else:
            response['msg'] = '验证码错误'

    return JsonResponse(response)


def get_random_color_light():
    return (random.randint(0, 100), random.randint(0, 100), random.randint(0, 100))


def get_random_color_dark():
    return (random.randint(150, 255), random.randint(150, 255), random.randint(150, 255))


def get_valid_code(request):
    img = Image.new('RGB', (320, 35), color=get_random_color_light())
    # 拿到画笔，在图片上画画
    img_draw = ImageDraw.Draw(img)

    # 生成一个字体对象 ，第一个参数是字体文件路径，第二个参数，是字体大小
    font = ImageFont.truetype('static/font/ss.TTF', size=26)

    ## 保存验证码
    random_code = ''
    ## 写一个循环，循环5次，每次随机写一个(数字，大写，小写字母)
    for i in range(5):
        char_num = random.randint(0, 9)
        # 生成97 ~ 122的数字,生成字母
        char_lower = chr(random.randint(97, 122))
        char_upper = chr(random.randint(65, 90))
        char_str = str(random.choice([char_num, char_lower, char_upper]))

        ## 第一个参数，xy的坐标，第二个参数，文字，第三个参数，颜色，第四个参数，字体。
        img_draw.text((i * 60 + 20, 0), char_str, get_random_color_dark(), font=font)
        random_code += char_str

    ## 把验证码 保存到session中
    request.session['valid_code'] = random_code

    width = 350
    height = 45
    for i in range(10):
        x1 = random.randint(0, width)
        x2 = random.randint(0, width)
        y1 = random.randint(0, height)
        y2 = random.randint(0, height)

        # 在图片上画线
        img_draw.line((x1, y1, x2, y2), fill=get_random_color_light())

    for i in range(100):
        img_draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color_light())
        x = random.randint(0, width)
        y = random.randint(0, height)
        img_draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color_light())

    ## 在内存中生成一个空文件
    f = BytesIO()
    ## 把图片保存到f中
    img.save(f, 'png')
    ## 取出图片
    data = f.getvalue()
    return HttpResponse(data)


def register(request):
    my_form = myforms.RegForm()
    return render(request, 'register.html', {'my_form': my_form})

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #my_file {
            /* 把上传文件控件隐藏 */
            display: none;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登录</h1>
            <form>
                {% csrf_token %}
                {% for foo in my_form %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }}
                    </div>
                {% endfor %}
                {#                加一个上传文件的控件#}
                <div class="form-group">
                    <label for="my_file">
                        头像
                        <img src="/static/img/default.png" id="img_file" alt="" width="80" height="80"
                             style="margin-left: 20px;margin-bottom: 20px" title="点击上传头像">
                    </label>
                    <input type="file" id="my_file">
                </div>
                <input type="button" value="注册" class="btn btn-primary" id="btn"><span class="error"></span>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $("#my_file").change(function () {
        // 取出文件
        var file_obj = $("#my_file")[0].files[0]
        // 通过文件阅读器，把图片放到img标签上
        // 生成一个文件阅读器对象
        var filereader = new FileReader()
        // 把图片读到filereader对象中
        filereader.readAsDataURL(file_obj)
        // filereader.result是filereader对象的值
        filereader.onload = function () {
            $('#img_file').attr('src', filereader.result)
        }
    })
</script>
</html>

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #my_file {
            /* 把上传文件控件隐藏 */
            display: none;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登录</h1>
            <form>
                {% csrf_token %}
                {% for foo in my_form %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }}
                    </div>
                {% endfor %}
                {#                加一个上传文件的控件#}
                <div class="form-group">
                    <label for="my_file">
                        头像
                        <img src="/static/img/default.png" id="img_file" alt="" width="80" height="80"
                             style="margin-left: 20px;margin-bottom: 20px" title="点击上传头像">
                    </label>
                    <input type="file" id="my_file">
                </div>
                <input type="button" value="注册" class="btn btn-primary" id="btn"><span class="error"></span>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $("#my_file").change(function () {
        // 取出文件
        var file_obj = $("#my_file")[0].files[0]
        // 通过文件阅读器，把图片放到img标签上
        // 生成一个文件阅读器对象
        var filereader = new FileReader()
        // 把图片读到filereader对象中
        filereader.readAsDataURL(file_obj)
        // filereader.result是filereader对象的值
        filereader.onload = function () {
            $('#img_file').attr('src', filereader.result)
        }
    })
    $("#btn").click(function () {
        // 因为要上传文件，所以要生成一个formdata对象
        var formdata = new FormData()
        formdata.append('name',$('#id_name').val())
        formdata.append('pwd',$('#id_pwd').val())
        formdata.append('re_pwd',$('#id_re_pwd').val())
        formdata.append('email',$('#id_email').val())
        formdata.append('csrfmiddlewaretoken',$('[name="csrfmiddlewaretoken"]').val())
        // 把文件放到formdata中
        formdata.append('my_file',$('#my_file')[0].files[0])

        $.ajax({
            url: '/register/',
            type: 'post',
            processData:false,
            contentType:false,
            data: {},
            success: function (data) {
                console.log(data)
            }
        })
    })
</script>
</html>

from django import forms
from django.forms import widgets


class RegForm(forms.Form):
    name = forms.CharField(max_length=18, min_length=2, label='用户名',
                           widget=widgets.TextInput(attrs={'class': 'form-control'}))
    pwd = forms.CharField(max_length=18, min_length=2, label='密码',
                          widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    re_pwd = forms.CharField(max_length=18, min_length=2, label='确认密码',
                             widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    email = forms.EmailField(label='邮箱', widget=widgets.EmailInput(attrs={'class': 'form-control'}))

def register(request):
    if request.method == 'GET':
        my_form = myforms.RegForm()
        return render(request, 'register.html', {'my_form': my_form})
    elif request.is_ajax():
        response = {'status':100,'msg':None}
        my_form = myforms.RegForm(request.POST)
        if my_form.is_valid():
            pass
        else:
            response['status'] = 101
            response['msg'] = my_form.errors

        return JsonResponse(response)

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #my_file {
            /* 把上传文件控件隐藏 */
            display: none;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登录</h1>
            <form id="form">
                {% csrf_token %}
                {% for foo in my_form %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }}
                    </div>
                {% endfor %}
                {#                加一个上传文件的控件#}
                <div class="form-group">
                    <label for="my_file">
                        头像
                        <img src="/static/img/default.png" id="img_file" alt="" width="80" height="80"
                             style="margin-left: 20px;margin-bottom: 20px" title="点击上传头像">
                    </label>
                    <input type="file" id="my_file">
                </div>
                <input type="button" value="注册" class="btn btn-primary" id="btn"><span class="error"></span>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $("#my_file").change(function () {
        // 取出文件
        var file_obj = $("#my_file")[0].files[0]
        // 通过文件阅读器，把图片放到img标签上
        // 生成一个文件阅读器对象
        var filereader = new FileReader()
        // 把图片读到filereader对象中
        filereader.readAsDataURL(file_obj)
        // filereader.result是filereader对象的值
        filereader.onload = function () {
            $('#img_file').attr('src', filereader.result)
        }
    })
    $("#btn").click(function () {
        // 因为要上传文件，所以要生成一个formdata对象
        var formdata = new FormData()
        {#formdata.append('name',$('#id_name').val())#}
        {#formdata.append('pwd',$('#id_pwd').val())#}
        {#formdata.append('re_pwd',$('#id_re_pwd').val())#}
        {#formdata.append('email',$('#id_email').val())#}

        var arr = $('#form').serializeArray()
        // jquery的循环
        $.each(arr, function (key, value) {
            formdata.append(value.name, value.value)
        })
        formdata.append('csrfmiddlewaretoken', $('[name="csrfmiddlewaretoken"]').val())
        // 把文件放到formdata中
        formdata.append('my_file', $('#my_file')[0].files[0])

        $.ajax({
            url: '/register/',
            type: 'post',
            processData: false,
            contentType: false,
            data: formdata,
            success: function (data) {
                console.log(data)
            }
        })
    })
</script>
</html>

from django import forms
from django.forms import widgets
from blog import models
from django.core.exceptions import ValidationError

class RegForm(forms.Form):
    username = forms.CharField(max_length=18, min_length=2, label='用户名',
                           widget=widgets.TextInput(attrs={'class': 'form-control'}))
    password = forms.CharField(max_length=18, min_length=2, label='密码',
                          widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    re_password = forms.CharField(max_length=18, min_length=2, label='确认密码',
                             widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    email = forms.EmailField(label='邮箱', widget=widgets.EmailInput(attrs={'class': 'form-control'}))

    # 局部校验钩子
    def clean_username(self):
        name = self.cleaned_data.get('username')
        # 去数据库校验
        ret = models.UserInfo.objects.filter(username=name).first()
        if ret:
            raise ValidationError('用户名已存在')
        return name

    # 全局校验钩子
    def clean(self):
        pwd = self.cleaned_data.get('password')
        re_pwd = self.cleaned_data.get('re_password')
        if pwd and re_pwd:
            if pwd == re_pwd:
                return self.cleaned_data
            else:
                raise ValidationError('两次密码不一致')

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse
from blog import myforms
from blog import models


# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    ## 判断前台发的请求是不是ajax的请求
    elif request.is_ajax():
        response = {'user': None, 'msg': None}
        name = request.POST.get('name')
        pwd = request.POST.get('pwd')
        valid_code = request.POST.get('valid_code')

        if valid_code.upper() == request.session.get('valid_code').upper():
            user = auth.authenticate(request, username=name, password=pwd)
            if user:
                ## ajax请求，不能再返回render页面或者redirect页面，只能返回字符串或者json
                ## 校验通过，一定要登录
                auth.login(request, user)
                response['user'] = name
                response['msg'] = '登录成功'
            else:
                response['msg'] = '用户名密码错误'
        else:
            response['msg'] = '验证码错误'

    return JsonResponse(response)


def get_random_color_light():
    return (random.randint(0, 100), random.randint(0, 100), random.randint(0, 100))


def get_random_color_dark():
    return (random.randint(150, 255), random.randint(150, 255), random.randint(150, 255))


def get_valid_code(request):
    img = Image.new('RGB', (320, 35), color=get_random_color_light())
    # 拿到画笔，在图片上画画
    img_draw = ImageDraw.Draw(img)

    # 生成一个字体对象 ，第一个参数是字体文件路径，第二个参数，是字体大小
    font = ImageFont.truetype('static/font/ss.TTF', size=26)

    ## 保存验证码
    random_code = ''
    ## 写一个循环，循环5次，每次随机写一个(数字，大写，小写字母)
    for i in range(5):
        char_num = random.randint(0, 9)
        # 生成97 ~ 122的数字,生成字母
        char_lower = chr(random.randint(97, 122))
        char_upper = chr(random.randint(65, 90))
        char_str = str(random.choice([char_num, char_lower, char_upper]))

        ## 第一个参数，xy的坐标，第二个参数，文字，第三个参数，颜色，第四个参数，字体。
        img_draw.text((i * 60 + 20, 0), char_str, get_random_color_dark(), font=font)
        random_code += char_str

    ## 把验证码 保存到session中
    request.session['valid_code'] = random_code

    width = 350
    height = 45
    for i in range(10):
        x1 = random.randint(0, width)
        x2 = random.randint(0, width)
        y1 = random.randint(0, height)
        y2 = random.randint(0, height)

        # 在图片上画线
        img_draw.line((x1, y1, x2, y2), fill=get_random_color_light())

    for i in range(100):
        img_draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color_light())
        x = random.randint(0, width)
        y = random.randint(0, height)
        img_draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color_light())

    ## 在内存中生成一个空文件
    f = BytesIO()
    ## 把图片保存到f中
    img.save(f, 'png')
    ## 取出图片
    data = f.getvalue()
    return HttpResponse(data)


def register(request):
    if request.method == 'GET':
        my_form = myforms.RegForm()
        return render(request, 'register.html', {'my_form': my_form})
    elif request.is_ajax():
        response = {'status': 100, 'msg': None}
        my_form = myforms.RegForm(request.POST)
        if my_form.is_valid():
            ## 定义一个字段，把通过的数据赋值给字典
            dic = my_form.cleaned_data
            ## 移除确认密码的字段
            dic.pop('re_password')
            ## 取出上传的文件对象
            my_file = request.FILES.get('my_file')
            ## 放到字典中
            ## 如果没有上传文件，数据库存默认值
            if my_file:
                dic['avatar'] = my_file
            user = models.UserInfo.objects.create_user(**dic)
            print(user.username)
        else:
            response['status'] = 101
            response['msg'] = my_form.errors

        return JsonResponse(response)

<input accept="image/*" type="file" id="my_file">

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #my_file {
            /* 把上传文件控件隐藏 */
            display: none;
        }
        .error{
            color: red;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登录</h1>
            <form id="form">
                {% csrf_token %}
                {% for foo in my_form %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }} <span class="error pull-right"></span>
                    </div>
                {% endfor %}
                {#                加一个上传文件的控件#}
                <div class="form-group">
                    <label for="my_file">
                        头像
                        <img src="/static/img/default.png" id="img_file" alt="" width="80" height="80"
                             style="margin-left: 20px;margin-bottom: 20px" title="点击上传头像">
                    </label>
                    <input accept="image/*" type="file" id="my_file">
                </div>
                <input type="button" value="注册" class="btn btn-primary" id="btn"><span class="error"></span>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $("#my_file").change(function () {
        // 取出文件
        var file_obj = $("#my_file")[0].files[0]
        // 通过文件阅读器，把图片放到img标签上
        // 生成一个文件阅读器对象
        var filereader = new FileReader()
        // 把图片读到filereader对象中
        filereader.readAsDataURL(file_obj)
        // filereader.result是filereader对象的值
        filereader.onload = function () {
            $('#img_file').attr('src', filereader.result)
        }
    })
    $("#btn").click(function () {
        // 因为要上传文件，所以要生成一个formdata对象
        var formdata = new FormData()
        {#formdata.append('name',$('#id_name').val())#}
        {#formdata.append('pwd',$('#id_pwd').val())#}
        {#formdata.append('re_pwd',$('#id_re_pwd').val())#}
        {#formdata.append('email',$('#id_email').val())#}

        var arr = $('#form').serializeArray()
        // jquery的循环
        $.each(arr, function (key, value) {
            formdata.append(value.name, value.value)
        })
        formdata.append('csrfmiddlewaretoken', $('[name="csrfmiddlewaretoken"]').val())
        // 把文件放到formdata中
        formdata.append('my_file', $('#my_file')[0].files[0])

        $.ajax({
            url: '/register/',
            type: 'post',
            processData: false,
            contentType: false,
            data: formdata,
            success: function (data) {
                console.log(data)
                if(data.status === 100){
                    location.href = data.url
                }else {
                    $.each(data.msg,function (key, value) {
                        console.log(key,value)
                        // 根据key 拼上id 通过id取出控件
                        //$('#id_username').next().html('sb')
                        //$('#id_'+key).next().html(value[0])
                        // 取出爸爸，然后加报错颜色
                        //$('#id_'+key).parent().addClass('has-error')
                        //  一行代码实现
                        $('#id_'+key).next().html(value[0]).parent().addClass('has-error')
                    })
                }
            }
        })
    })
</script>
</html>

def register(request):
    if request.method == 'GET':
        my_form = myforms.RegForm()
        return render(request, 'register.html', {'my_form': my_form})
    elif request.is_ajax():
        response = {'status': 100, 'msg': None}
        my_form = myforms.RegForm(request.POST)
        if my_form.is_valid():
            ## 定义一个字段，把通过的数据赋值给字典
            dic = my_form.cleaned_data
            ## 移除确认密码的字段
            dic.pop('re_password')
            ## 取出上传的文件对象
            my_file = request.FILES.get('my_file')
            ## 放到字典中
            ## 如果没有上传文件，数据库存默认值
            if my_file:
                dic['avatar'] = my_file
            user = models.UserInfo.objects.create_user(**dic)
            print(user.username)
            response['url'] = '/login/'
        else:
            response['status'] = 101
            response['msg'] = my_form.errors

        return JsonResponse(response)

from django import forms
from django.forms import widgets
from blog import models
from django.core.exceptions import ValidationError

class RegForm(forms.Form):
    username = forms.CharField(max_length=18, min_length=2, label='用户名',
                           widget=widgets.TextInput(attrs={'class': 'form-control'}))
    password = forms.CharField(max_length=18, min_length=2, label='密码',
                          widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    re_password = forms.CharField(max_length=18, min_length=2, label='确认密码',
                             widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    email = forms.EmailField(label='邮箱', widget=widgets.EmailInput(attrs={'class': 'form-control'}))

    # 局部校验钩子
    def clean_username(self):
        name = self.cleaned_data.get('username')
        # 去数据库校验
        ret = models.UserInfo.objects.filter(username=name).first()
        if ret:
            raise ValidationError('用户名已存在')
        return name

    # 全局校验钩子
    def clean(self):
        pwd = self.cleaned_data.get('password')
        re_pwd = self.cleaned_data.get('re_password')
        if pwd and re_pwd:
            if pwd == re_pwd:
                return self.cleaned_data
            else:
                raise ValidationError('两次密码不一致')

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #my_file {
            /* 把上传文件控件隐藏 */
            display: none;
        }
        .error{
            color: red;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登录</h1>
            <form id="form">
                {% csrf_token %}
                {% for foo in my_form %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }} <span class="error pull-right"></span>
                    </div>
                {% endfor %}
                {#                加一个上传文件的控件#}
                <div class="form-group">
                    <label for="my_file">
                        头像
                        <img src="/static/img/default.png" id="img_file" alt="" width="80" height="80"
                             style="margin-left: 20px;margin-bottom: 20px" title="点击上传头像">
                    </label>
                    <input accept="image/*" type="file" id="my_file">
                </div>
                <input type="button" value="注册" class="btn btn-primary" id="btn"><span class="error"></span>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $("#my_file").change(function () {
        // 取出文件
        var file_obj = $("#my_file")[0].files[0]
        // 通过文件阅读器，把图片放到img标签上
        // 生成一个文件阅读器对象
        var filereader = new FileReader()
        // 把图片读到filereader对象中
        filereader.readAsDataURL(file_obj)
        // filereader.result是filereader对象的值
        filereader.onload = function () {
            $('#img_file').attr('src', filereader.result)
        }
    })
    $("#btn").click(function () {
        // 因为要上传文件，所以要生成一个formdata对象
        var formdata = new FormData()
        {#formdata.append('name',$('#id_name').val())#}
        {#formdata.append('pwd',$('#id_pwd').val())#}
        {#formdata.append('re_pwd',$('#id_re_pwd').val())#}
        {#formdata.append('email',$('#id_email').val())#}

        var arr = $('#form').serializeArray()
        // jquery的循环
        $.each(arr, function (key, value) {
            formdata.append(value.name, value.value)
        })
        formdata.append('csrfmiddlewaretoken', $('[name="csrfmiddlewaretoken"]').val())
        // 把文件放到formdata中
        formdata.append('my_file', $('#my_file')[0].files[0])

        $.ajax({
            url: '/register/',
            type: 'post',
            processData: false,
            contentType: false,
            data: formdata,
            success: function (data) {
                console.log(data)
                if(data.status === 100){
                    location.href = data.url
                }else {
                    $('.form-group').removeClass('has-error')
                        $('.error').html('')
                    $.each(data.msg,function (key, value) {
                        console.log(key,value)
                        // 根据key 拼上id 通过id取出控件
                        //$('#id_username').next().html('sb')
                        //$('#id_'+key).next().html(value[0])
                        // 取出爸爸，然后加报错颜色
                        //$('#id_'+key).parent().addClass('has-error')
                        //  一行代码实现
                        $('#id_'+key).next().html(value[0]).parent().addClass('has-error')
                    })
                    /*setTimeout(function () {
                        // 清除父级的has-error
                        // 清除错误信息
                        $('.form-group').removeClass('has-error')
                        $('.error').html('')
                    },3000)*/
                }
            }
        })
    })
</script>
</html>

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #my_file {
            /* 把上传文件控件隐藏 */
            display: none;
        }

        .error {
            color: red;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登录</h1>
            <form id="form">
                {% csrf_token %}
                {% for foo in my_form %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }} <span class="error pull-right"></span>
                    </div>
                {% endfor %}
                {#                加一个上传文件的控件#}
                <div class="form-group">
                    <label for="my_file">
                        头像
                        <img src="/static/img/default.png" id="img_file" alt="" width="80" height="80"
                             style="margin-left: 20px;margin-bottom: 20px" title="点击上传头像">
                    </label>
                    <input accept="image/*" type="file" id="my_file">
                </div>
                <input type="button" value="注册" class="btn btn-primary" id="btn"><span class="error"></span>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $("#my_file").change(function () {
        // 取出文件
        var file_obj = $("#my_file")[0].files[0]
        // 通过文件阅读器，把图片放到img标签上
        // 生成一个文件阅读器对象
        var filereader = new FileReader()
        // 把图片读到filereader对象中
        filereader.readAsDataURL(file_obj)
        // filereader.result是filereader对象的值
        filereader.onload = function () {
            $('#img_file').attr('src', filereader.result)
        }
    })
    $("#btn").click(function () {
        // 因为要上传文件，所以要生成一个formdata对象
        var formdata = new FormData()
        {#formdata.append('name',$('#id_name').val())#}
        {#formdata.append('pwd',$('#id_pwd').val())#}
        {#formdata.append('re_pwd',$('#id_re_pwd').val())#}
        {#formdata.append('email',$('#id_email').val())#}

        var arr = $('#form').serializeArray()
        // jquery的循环
        $.each(arr, function (key, value) {
            formdata.append(value.name, value.value)
        })
        formdata.append('csrfmiddlewaretoken', $('[name="csrfmiddlewaretoken"]').val())
        // 把文件放到formdata中
        formdata.append('my_file', $('#my_file')[0].files[0])

        $.ajax({
            url: '/register/',
            type: 'post',
            processData: false,
            contentType: false,
            data: formdata,
            success: function (data) {
                console.log(data)
                if (data.status === 100) {
                    location.href = data.url
                } else {
                    $('.form-group').removeClass('has-error')
                    $('.error').html('')
                    $.each(data.msg, function (key, value) {
                        console.log(key, value)
                        // 根据key 拼上id 通过id取出控件
                        //$('#id_username').next().html('sb')
                        //$('#id_'+key).next().html(value[0])
                        // 取出爸爸，然后加报错颜色
                        //$('#id_'+key).parent().addClass('has-error')
                        // 处理两次密码 不一致
                        if(key === '__all__'){
                            $('#id_re_password').next().html(value[0])
                        }
                        //  一行代码实现
                        $('#id_' + key).next().html(value[0]).parent().addClass('has-error')
                    })
                    /*setTimeout(function () {
                        // 清除父级的has-error
                        // 清除错误信息
                        $('.form-group').removeClass('has-error')
                        $('.error').html('')
                    },3000)*/
                }
            }
        })
    })
</script>
</html>

from django import forms
from django.forms import widgets
from blog import models
from django.core.exceptions import ValidationError


class RegForm(forms.Form):
    username = forms.CharField(max_length=18, min_length=2, label='用户名',
                               widget=widgets.TextInput(attrs={'class': 'form-control'}),
                               error_messages={'max_length': '最长18位哦~', 'min_length': '最少2位哦~', 'required': '必须填写哦~'})

    password = forms.CharField(max_length=18, min_length=2, label='密码',
                               widget=widgets.PasswordInput(attrs={'class': 'form-control'}),
                               error_messages={'max_length': '最长18位哦~', 'min_length': '最少2位哦~', 'required': '必须填写哦~'})
    re_password = forms.CharField(max_length=18, min_length=2, label='确认密码',
                                  widget=widgets.PasswordInput(attrs={'class': 'form-control'}),
                                  error_messages={'max_length': '最长18位哦~', 'min_length': '最少2位哦~',
                                                  'required': '必须填写哦~'})
    email = forms.EmailField(label='邮箱', widget=widgets.EmailInput(attrs={'class': 'form-control'}),
                             error_messages={'invalid': '请填写邮件格式，傻x', 'required': '必须填写哦~'})

    # 局部校验钩子
    def clean_username(self):
        name = self.cleaned_data.get('username')
        # 去数据库校验
        ret = models.UserInfo.objects.filter(username=name).first()
        if ret:
            raise ValidationError('用户名已存在')
        return name

    # 全局校验钩子
    def clean(self):
        pwd = self.cleaned_data.get('password')
        re_pwd = self.cleaned_data.get('re_password')
        if pwd and re_pwd:
            if pwd == re_pwd:
                return self.cleaned_data
            else:
                raise ValidationError('两次密码不一致')

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #my_file {
            /* 把上传文件控件隐藏 */
            display: none;
        }

        .error {
            color: red;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>登录</h1>
            <form id="form">
                {% csrf_token %}
                {% for foo in my_form %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }} <span class="error pull-right"></span>
                    </div>
                {% endfor %}
                {#                加一个上传文件的控件#}
                <div class="form-group">
                    <label for="my_file">
                        头像
                        <img src="/static/img/default.png" id="img_file" alt="" width="80" height="80"
                             style="margin-left: 20px;margin-bottom: 20px" title="点击上传头像">
                    </label>
                    <input accept="image/*" type="file" id="my_file">
                </div>
                <input type="button" value="注册" class="btn btn-primary" id="btn"><span class="error"></span>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $("#my_file").change(function () {
        // 取出文件
        var file_obj = $("#my_file")[0].files[0]
        // 通过文件阅读器，把图片放到img标签上
        // 生成一个文件阅读器对象
        var filereader = new FileReader()
        // 把图片读到filereader对象中
        filereader.readAsDataURL(file_obj)
        // filereader.result是filereader对象的值
        filereader.onload = function () {
            $('#img_file').attr('src', filereader.result)
        }
    })
    $("#btn").click(function () {
        // 因为要上传文件，所以要生成一个formdata对象
        var formdata = new FormData()
        {#formdata.append('name',$('#id_name').val())#}
        {#formdata.append('pwd',$('#id_pwd').val())#}
        {#formdata.append('re_pwd',$('#id_re_pwd').val())#}
        {#formdata.append('email',$('#id_email').val())#}

        var arr = $('#form').serializeArray()
        // jquery的循环
        $.each(arr, function (key, value) {
            formdata.append(value.name, value.value)
        })
        formdata.append('csrfmiddlewaretoken', $('[name="csrfmiddlewaretoken"]').val())
        // 把文件放到formdata中
        formdata.append('my_file', $('#my_file')[0].files[0])

        $.ajax({
            url: '/register/',
            type: 'post',
            processData: false,
            contentType: false,
            data: formdata,
            success: function (data) {
                console.log(data)
                if (data.status === 100) {
                    location.href = data.url
                } else {
                    $('.form-group').removeClass('has-error')
                    $('.error').html('')
                    $.each(data.msg, function (key, value) {
                        console.log(key, value)
                        // 根据key 拼上id 通过id取出控件
                        //$('#id_username').next().html('sb')
                        //$('#id_'+key).next().html(value[0])
                        // 取出爸爸，然后加报错颜色
                        //$('#id_'+key).parent().addClass('has-error')
                        // 处理两次密码 不一致
                        if(key === '__all__'){
                            $('#id_re_password').next().html(value[0])
                        }
                        //  一行代码实现
                        $('#id_' + key).next().html(value[0]).parent().addClass('has-error')
                    })
                    /*setTimeout(function () {
                        // 清除父级的has-error
                        // 清除错误信息
                        $('.form-group').removeClass('has-error')
                        $('.error').html('')
                    },3000)*/
                }
            }
        })
    })

    // name失去焦点，发ajax请求校验用户是否存在
    /*$('#id_username').change(function () {
        alert('change')
    })*/

    //只要发生变化就去校验
    $('#id_username').blur(function () {
        $.ajax({
            url: '/check_username/',
            type: 'post',
            data:{name:$('#id_username').val(),'csrfmiddlewaretoken':'{{ csrf_token }}'},
            success:function (data) {
                if(data.status === 101){
                    $('#id_username').next().html(data.msg).parent().addClass('has-error')
                }
            }
        })
    })
</script>
</html>

from django.conf.urls import url
from django.contrib import admin
from blog import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
]

def check_username(request):
    response = {'status':100,'msg':None}
    name = request.POST.get('name')
    user = models.UserInfo.objects.filter(username=name).first()
    if user:
        response['status'] = 101
        response['msg'] = '用户名已存在'
    return JsonResponse(response)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>博客</title>
</head>
<body>
<div class="head">
    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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 navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-7"></div>
        <div class="col-md-3"></div>
    </div>
</div>
</body>
</html>

from django.conf.urls import url
from django.contrib import admin
from blog import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
]

def index(request):
    return render(request,'index.html')

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <title>博客</title>
</head>
<body>
<div class="head">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">曾老湿博客系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <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="#">随笔</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">个人中心 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">修改密码</a></li>
                            <li><a href="#">修改头像</a></li>
                            <li><a href="#">修改主题</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/logout/">注销</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-7"></div>
        <div class="col-md-3"></div>
    </div>
</div>
</body>
</html>

from django.conf.urls import url
from django.contrib import admin
from blog import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
]

def logout(request):
    auth.logout(request)
    return redirect('/index/')

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <title>博客</title>
</head>
<body>
<div class="head">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">曾老湿博客系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <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="#">随笔</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if request.user.is_authenticated %}
                        <li><a href="#">{{ request.user.username }}</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">个人中心<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">修改密码</a></li>
                                <li><a href="#">修改头像</a></li>
                                <li><a href="#">修改主题</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="/logout/">注销</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="/login/">登录</a></li>
                        <li><a href="/register/">注册</a></li>
                    {% endif %}
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-7"></div>
        <div class="col-md-3"></div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        body{
            background-image: url("/static/img/bg.jpg");
        }
    </style>
    <title>博客</title>
</head>
<body>
<div class="head">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">曾老湿博客系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <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="#">随笔</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if request.user.is_authenticated %}
                        <li><a href="#">{{ request.user.username }}</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">个人中心<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">修改密码</a></li>
                                <li><a href="#">修改头像</a></li>
                                <li><a href="#">修改主题</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="/logout/">注销</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="/login/">登录</a></li>
                        <li><a href="/register/">注册</a></li>
                    {% endif %}
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="panel panel-danger">
                <div class="panel-heading">重金求子</div>
                <div class="panel-body">
                    <p>请联系：13800000000</p>
                    <p>年入60w</p>
                </div>
            </div>

            <div class="panel panel-warning">
                <div class="panel-heading">草榴社区</div>
                <div class="panel-body">
                    <a href="http://www.driverzeng.com">请点击跳转</a>
                </div>
            </div>
        </div>
        <div class="col-md-7"></div>
        <div class="col-md-3">
            <div class="panel panel-success">
                <div class="panel-heading">日韩系列</div>
                <div class="panel-body">
                    <a href="http://download.driverzeng.com">Tokyo Hot</a>
                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">欧美系列</div>
                <div class="panel-body">
                    <a href="http://blog.driverzeng.com">金八天国</a>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">动漫卡通</div>
                <div class="panel-body">
                    <a href="http://pikachu.driverzeng.com">女仆</a>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">精品图区</div>
                <div class="panel-body">
                    <a href="http://taiji.driverzeng.com">美腿丝袜</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

def index(request):
    article_list =  models.Article.objects.all()
    return render(request,'index.html',{'article_list':article_list})

LANGUAGE_CODE = 'zh-hans'

from django.contrib import admin
from blog import models
# Register your models here.
admin.site.register(models.UserInfo)
admin.site.register(models.Blog)
admin.site.register(models.Article)
admin.site.register(models.Tag)
admin.site.register(models.Category)
admin.site.register(models.Commit)
admin.site.register(models.UpAndDown)

from django.db import models
from django.contrib.auth.models import AbstractUser


# Create your models here.

## UserInfo这个表 要继承AbstractUser，因为要用auth组件
class UserInfo(AbstractUser):
    nid = models.AutoField(primary_key=True)
    phone = models.CharField(max_length=32, null=True)
    ## 这个需要传一个路径
    avatar = models.FileField(upload_to='avatar/', default='/static/img/default.png')
    blog = models.OneToOneField(to='Blog', to_field='nid',null=True)

    class Meta:
        verbose_name = '用户表'
        verbose_name_plural = verbose_name


class Blog(models.Model):
    nid = models.AutoField(primary_key=True)
    title = models.CharField(max_length=64)
    sit_name = models.CharField(max_length=32)
    theme = models.CharField(max_length=64)

    class Meta:
        verbose_name = '博客表'
        verbose_name_plural = verbose_name


class Category(models.Model):
    nid = models.AutoField(primary_key=True)
    title = models.CharField(max_length=64)
    blog = models.ForeignKey(to='Blog', to_field='nid', null=True)

    class Meta:
        verbose_name = '分类表'
        verbose_name_plural = verbose_name


class Tag(models.Model):
    nid = models.AutoField(primary_key=True)
    title = models.CharField(max_length=64)
    blog = models.ForeignKey(to='Blog', to_field='nid', null=True)

    class Meta:
        verbose_name = '标签表'
        verbose_name_plural = verbose_name


class Article(models.Model):
    nid = models.AutoField(primary_key=True)
    title = models.CharField(max_length=64)
    desc = models.CharField(max_length=255)
    content = models.TextField()
    create_time = models.DateTimeField(auto_now_add=True)
    blog = models.ForeignKey(to='Blog', to_field='nid', null=True)
    category = models.ForeignKey(to='Category', to_field='nid', null=True)
    tag = models.ManyToManyField(to='Tag', through='ArticleToTag', through_fields=('article', 'tag'))

    class Meta:
        verbose_name = '文章表'
        verbose_name_plural = verbose_name


## 手动创建第三张表
class ArticleToTag(models.Model):
    nid = models.AutoField(primary_key=True)
    article = models.ForeignKey(to='Article', to_field='nid')
    tag = models.ForeignKey(to='Tag', to_field='nid')


class Commit(models.Model):
    nid = models.AutoField(primary_key=True)
    user = models.ForeignKey(to='UserInfo', to_field='nid')
    article = models.ForeignKey(to='Article', to_field='nid')
    content = models.CharField(max_length=255)
    create_time = models.DateTimeField(auto_now_add=True)
    ## 自己关联自己：方法一
    parent_id = models.ForeignKey(to='self', to_field='nid')
    ## 自己关联自己：方法二
    # parent_id = models.ForeignKey(to='Commit',to_field='nid')
    class Meta:
        verbose_name = '评论表'
        verbose_name_plural = verbose_name


class UpAndDown(models.Model):
    nid = models.AutoField(primary_key=True)
    user = models.ForeignKey(to='UserInfo', to_field='nid')
    article = models.ForeignKey(to='Article', to_field='nid')
    is_up = models.BooleanField()

    ## user和 article不允许一个作者，给一个文章点多个赞,做联合唯一。

    class Meta:
        ## 做这个只是为了不写脏数据，但是效率低，工作中不写也OK
        unique_together = (('user', 'article'),)
        verbose_name = '点赞表'
        verbose_name_plural = verbose_name

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <title>博客</title>
</head>
<body>
<div class="head">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">曾老湿博客系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <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="#">随笔</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if request.user.is_authenticated %}
                        <li><a href="#">{{ request.user.username }}</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">个人中心<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">修改密码</a></li>
                                <li><a href="#">修改头像</a></li>
                                <li><a href="#">修改主题</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="/logout/">注销</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="/login/">登录</a></li>
                        <li><a href="/register/">注册</a></li>
                    {% endif %}
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="panel panel-danger">
                <div class="panel-heading">重金求子</div>
                <div class="panel-body">
                    <p>请联系：13800000000</p>
                    <p>年入60w</p>
                </div>
            </div>

            <div class="panel panel-warning">
                <div class="panel-heading">草榴社区</div>
                <div class="panel-body">
                    <a href="http://www.driverzeng.com">请点击跳转</a>
                </div>
            </div>
        </div>
        <div class="col-md-7">
            {% for article in article_list %}
                <div>
                    <h3><a href="">{{ article.title }}</a></h3>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="/static/img/default.png">
                            </a>
                        </div>
                        <div class="media-body">
                            {{ article.desc }}
                        </div>
                    </div>
                </div>
            {% endfor %}

        </div>
        <div class="col-md-3">
            <div class="panel panel-success">
                <div class="panel-heading">日韩系列</div>
                <div class="panel-body">
                    <a href="http://download.driverzeng.com">Tokyo Hot</a>
                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">欧美系列</div>
                <div class="panel-body">
                    <a href="http://blog.driverzeng.com">金八天国</a>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">动漫卡通</div>
                <div class="panel-body">
                    <a href="http://pikachu.driverzeng.com">女仆</a>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">精品图区</div>
                <div class="panel-body">
                    <a href="http://taiji.driverzeng.com">美腿丝袜</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <title>博客</title>
</head>
<body>
<div class="head">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">曾老湿博客系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <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="#">随笔</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if request.user.is_authenticated %}
                        <li><a href="#">{{ request.user.username }}</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">个人中心<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">修改密码</a></li>
                                <li><a href="#">修改头像</a></li>
                                <li><a href="#">修改主题</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="/logout/">注销</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="/login/">登录</a></li>
                        <li><a href="/register/">注册</a></li>
                    {% endif %}
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="panel panel-danger">
                <div class="panel-heading">重金求子</div>
                <div class="panel-body">
                    <p>请联系：13800000000</p>
                    <p>年入60w</p>
                </div>
            </div>

            <div class="panel panel-warning">
                <div class="panel-heading">草榴社区</div>
                <div class="panel-body">
                    <a href="http://www.driverzeng.com">请点击跳转</a>
                </div>
            </div>
        </div>
        <div class="col-md-7">
            {% for article in article_list %}
                <div>
                    <h4><a href="">{{ article.title }}</a></h4>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="/static/img/default.png">
                            </a>
                        </div>
                        <div class="media-body">
                            {{ article.desc }}
                        </div>
                    </div>
                    <div>
                        <span><a href="">{{ article.blog.userinfo.username }}</a></span>
                        <span>发布于{{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                    </div>
                </div>
            {% endfor %}

        </div>
        <div class="col-md-3">
            <div class="panel panel-success">
                <div class="panel-heading">日韩系列</div>
                <div class="panel-body">
                    <a href="http://download.driverzeng.com">Tokyo Hot</a>
                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">欧美系列</div>
                <div class="panel-body">
                    <a href="http://blog.driverzeng.com">金八天国</a>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">动漫卡通</div>
                <div class="panel-body">
                    <a href="http://pikachu.driverzeng.com">女仆</a>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">精品图区</div>
                <div class="panel-body">
                    <a href="http://taiji.driverzeng.com">美腿丝袜</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

TIME_ZONE = 'Asia/Shanghai'

class Article(models.Model):
    nid = models.AutoField(primary_key=True)
    title = models.CharField(max_length=64)
    desc = models.CharField(max_length=255)
    content = models.TextField()
    create_time = models.DateTimeField(auto_now_add=True)
    ## 评论数
    commit_num = models.IntegerField(default=0)
    ## 点赞数
    up_num = models.IntegerField(default=0)
    ## 点踩数
    down_num = models.IntegerField(default=0)

    blog = models.ForeignKey(to='Blog', to_field='nid', null=True)
    category = models.ForeignKey(to='Category', to_field='nid', null=True)
    tag = models.ManyToManyField(to='Tag', through='ArticleToTag', through_fields=('article', 'tag'))

    class Meta:
        verbose_name = '文章表'
        verbose_name_plural = verbose_name
    def __str__(self):
        return self.title

MacBook-pro:bbs driverzeng$ python3 manage.py makemigrations
MacBook-pro:bbs driverzeng$ python3 manage.py migrate

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        .bottom span{
            margin-right: 16px;
        }
    </style>
    <title>博客</title>
</head>
<body>
<div class="head">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">曾老湿博客系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <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="#">随笔</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if request.user.is_authenticated %}
                        <li><a href="#">{{ request.user.username }}</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">个人中心<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">修改密码</a></li>
                                <li><a href="#">修改头像</a></li>
                                <li><a href="#">修改主题</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="/logout/">注销</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="/login/">登录</a></li>
                        <li><a href="/register/">注册</a></li>
                    {% endif %}
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="panel panel-danger">
                <div class="panel-heading">重金求子</div>
                <div class="panel-body">
                    <p>请联系：13800000000</p>
                    <p>年入60w</p>
                </div>
            </div>

            <div class="panel panel-warning">
                <div class="panel-heading">草榴社区</div>
                <div class="panel-body">
                    <a href="http://www.driverzeng.com">请点击跳转</a>
                </div>
            </div>
        </div>
        <div class="col-md-7">
            {% for article in article_list %}
                <div>
                    <h4><a href="">{{ article.title }}</a></h4>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" src="/static/img/default.png">
                            </a>
                        </div>
                        <div class="media-body">
                            {{ article.desc }}
                        </div>
                    </div>
                    <div style="margin-top: 20px;margin-bottom: 30px" class="bottom">
                        <span><a href="">{{ article.blog.userinfo.username }}</a></span>
                        <span>发布于{{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                        <span class="glyphicon glyphicon-comment"><a href="" style="margin-left: 2px">评论({{ article.commit_num }})</a></span>
                        <span class="glyphicon glyphicon-thumbs-up"><a href="" style="margin-left: 2px">点赞({{ article.up_num}})</a></span>
                    </div>
                </div>
            {% endfor %}

        </div>
        <div class="col-md-3">
            <div class="panel panel-success">
                <div class="panel-heading">日韩系列</div>
                <div class="panel-body">
                    <a href="http://download.driverzeng.com">Tokyo Hot</a>
                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">欧美系列</div>
                <div class="panel-body">
                    <a href="http://blog.driverzeng.com">金八天国</a>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">动漫卡通</div>
                <div class="panel-body">
                    <a href="http://pikachu.driverzeng.com">女仆</a>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">精品图区</div>
                <div class="panel-body">
                    <a href="http://taiji.driverzeng.com">美腿丝袜</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
]

class UserInfo(AbstractUser):
    nid = models.AutoField(primary_key=True)
    phone = models.CharField(max_length=32, null=True)
    ## 这个需要传一个路径
    avatar = models.FileField(upload_to='avatar/', default='avatar/default.png')
    blog = models.OneToOneField(to='Blog', to_field='nid',null=True)

    class Meta:
        verbose_name = '用户表'
        verbose_name_plural = verbose_name

MacBook-pro:bbs driverzeng$ python3 manage.py makemigrations
MacBook-pro:bbs driverzeng$ python3 manage.py migrate

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        .bottom span {
            margin-right: 16px;
        }
    </style>
    <title>博客</title>
</head>
<body>
<div class="head">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">曾老湿博客系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <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="#">随笔</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if request.user.is_authenticated %}
                        <li><a href="#">{{ request.user.username }}</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">个人中心<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">修改密码</a></li>
                                <li><a href="#">修改头像</a></li>
                                <li><a href="#">修改主题</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="/logout/">注销</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="/login/">登录</a></li>
                        <li><a href="/register/">注册</a></li>
                    {% endif %}
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="panel panel-danger">
                <div class="panel-heading">重金求子</div>
                <div class="panel-body">
                    <p>请联系：13800000000</p>
                    <p>年入60w</p>
                </div>
            </div>

            <div class="panel panel-warning">
                <div class="panel-heading">草榴社区</div>
                <div class="panel-body">
                    <a href="http://www.driverzeng.com">请点击跳转</a>
                </div>
            </div>
        </div>
        <div class="col-md-7">
            {% for article in article_list %}
                <div>
                    <h4><a href="">{{ article.title }}</a></h4>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img  width="60px" height="60px" class="media-object" src="/media/{{ article.blog.userinfo.avatar }}">
                            </a>
                        </div>
                        <div class="media-body">
                            {{ article.desc }}
                        </div>
                    </div>
                    <div style="margin-top: 20px;margin-bottom: 30px" class="bottom">
                        <span><a href="">{{ article.blog.userinfo.username }}</a></span>
                        <span>发布于{{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                        <span class="glyphicon glyphicon-comment"><a href=""
                                                                     style="margin-left: 2px">评论({{ article.commit_num }})</a></span>
                        <span class="glyphicon glyphicon-thumbs-up"><a href=""
                                                                       style="margin-left: 2px">点赞({{ article.up_num }})</a></span>
                    </div>
                </div>
            {% endfor %}

        </div>
        <div class="col-md-3">
            <div class="panel panel-success">
                <div class="panel-heading">日韩系列</div>
                <div class="panel-body">
                    <a href="http://download.driverzeng.com">Tokyo Hot</a>
                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">欧美系列</div>
                <div class="panel-body">
                    <a href="http://blog.driverzeng.com">金八天国</a>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">动漫卡通</div>
                <div class="panel-body">
                    <a href="http://pikachu.driverzeng.com">女仆</a>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">精品图区</div>
                <div class="panel-body">
                    <a href="http://taiji.driverzeng.com">美腿丝袜</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)', views.user_blog),
]

def user_blog(request, username):
    print(username)
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')

    blog = user.blog
    return render(request, 'user_blog.html', locals())

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404错误</title>
</head>
<body>

<a href="http://www.cnblogs.com/"><img src="//static.cnblogs.com/images/logo_small.gif" alt="cnblogs"></a>

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


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.userinfo.username }}-的个人博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="head">
    <p>{{ blog.title }}</p>
</div>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-3">

            <div class="panel panel-primary">
                <div class="panel-heading">我的标签</div>
                <div class="panel-body">
                   {% for foo in tag_num %}
                   <p><a href="">{{ foo.0 }}({{ foo.1 }})</a></p>
                   {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">我的分类</div>
                <div class="panel-body">
                    {% for foo in category_num %}
                        <p><a href="">{{ foo.0 }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">随笔档案</div>
                <div class="panel-body">
                    {% for foo in y_m_num %}
                    <p><a href="">{{ foo.0|date:"Y-m" }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>
        </div>
        <div class="col-md-9">
            {#通过站点查询所有文章,反向查询,按表名小写_set.all#}
            {% for article in blog.article_set.all %}
                <div>
                <h4><a href="">{{ article.title }}</a></h4>
                <div class="media">


                    <div>

                        {{ article.desc }}
                    </div>

                    <div style="margin-top: 10px " class="article_bottom small">


                        <span>posted @ {{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                        {#反向查询,一对多,按表名小写_set#}
                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}

                        <span>{{ article.blog.userinfo.username }}</span>
                        <span><i class="fa fa-comment" aria-hidden="true"><a
                                href="">评论({{ article.commit_num }})</a></i></span>

                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}
                        <span class="glyphicon glyphicon-thumbs-up"><a href="">点赞({{ article.up_num }})</a></span>
                        <span><a href="">编辑</a></span>
                    </div>
                    <hr>
                </div>
            {% endfor %}



            </div>
        </div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.userinfo.username }}-的个人博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="head">
    <p>{{ blog.title }}</p>
</div>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-3">

            <div class="panel panel-primary">
                <div class="panel-heading">我的标签</div>
                <div class="panel-body">
                   {% for foo in tag_num %}
                   <p><a href="">{{ foo.0 }}({{ foo.1 }})</a></p>
                   {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">我的分类</div>
                <div class="panel-body">
                    {% for foo in category_num %}
                        <p><a href="">{{ foo.0 }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">随笔档案</div>
                <div class="panel-body">
                    {% for foo in y_m_num %}
                    <p><a href="">{{ foo.0|date:"Y-m" }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>
        </div>
        <div class="col-md-9">
            {#通过站点查询所有文章,反向查询,按表名小写_set.all#}
            {% for article in blog.article_set.all %}
                <div>
                <h4><a href="">{{ article.title }}</a></h4>
                <div class="media">


                    <div>

                        {{ article.desc }}
                    </div>

                    <div style="margin-top: 10px " class="article_bottom small">


                        <span>posted @ {{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                        {#反向查询,一对多,按表名小写_set#}
                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}

                        <span>{{ article.blog.userinfo.username }}</span>
                        <span><i class="fa fa-comment" aria-hidden="true"><a
                                href="">评论({{ article.commit_num }})</a></i></span>

                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}
                        <span class="glyphicon glyphicon-thumbs-up"><a href="">点赞({{ article.up_num }})</a></span>
                        <span><a href="">编辑</a></span>
                    </div>
                    <hr>
                </div>
            {% endfor %}



            </div>
        </div>
    </div>
</div>
</body>
</html>

def user_blog(request, username):
    print(username)
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')

    blog = user.blog
    # 查询当前站点下所有的分类,对应的文章数

    # 每个的分类,对应的文章数
    #group by谁,就以谁做基表
    #ret=models.Category.objects.all().annotate(coun=Count('article__title')).values('title','coun')
    #filter在前表示where value在前表group by
    #value在后表示取值,fileter在后,表示having
    #先过滤出当前站点下所有的分类
    #ret=models.Category.objects.all().filter(blog=blog)
    #ret=models.Category.objects.all().filter(blog=blog).values('pk').annotate(coun=Count('article__title')).values('title','coun')
    #结果跟上面一样
    #ret=models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values('title','coun')
    category_num = models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title', 'coun')
    print(category_num)
    return render(request, 'user_blog.html', locals())

from django.contrib import admin
from blog import models
# Register your models here.
admin.site.register(models.UserInfo)
admin.site.register(models.Blog)
admin.site.register(models.Article)
admin.site.register(models.Tag)
admin.site.register(models.Category)
admin.site.register(models.Commit)
admin.site.register(models.UpAndDown)
admin.site.register(models.ArticleToTag)

def user_blog(request, username):
    print(username)
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')

    blog = user.blog
    # 查询当前站点下所有的分类,对应的文章数

    # 每个的分类,对应的文章数
    #group by谁,就以谁做基表
    #ret=models.Category.objects.all().annotate(coun=Count('article__title')).values('title','coun')
    #filter在前表示where value在前表group by
    #value在后表示取值,fileter在后,表示having
    #先过滤出当前站点下所有的分类
    #ret=models.Category.objects.all().filter(blog=blog)
    #ret=models.Category.objects.all().filter(blog=blog).values('pk').annotate(coun=Count('article__title')).values('title','coun')
    #结果跟上面一样
    #ret=models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values('title','coun')
    category_num = models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title', 'coun')
    print(category_num)

    # 查询当前站点下每个标签对应的文章数
    tag_num = models.Tag.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title','coun')
    print(tag_num)
    return render(request, 'user_blog.html', locals())

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.userinfo.username }}-的个人博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="head">
    <p>{{ blog.title }}</p>
</div>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-3">

            <div class="panel panel-primary">
                <div class="panel-heading">我的标签</div>
                <div class="panel-body">
                   {% for foo in tag_num %}
                   <p><a href="">{{ foo.0 }}({{ foo.1 }})</a></p>
                   {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">我的分类</div>
                <div class="panel-body">
                    {% for foo in category_num %}
                        <p><a href="">{{ foo.0 }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">随笔档案</div>
                <div class="panel-body">
                    {% for foo in y_m_num %}
                    <p><a href="">{{ foo.0|date:"Y-m" }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>
        </div>
        <div class="col-md-9">
            {#通过站点查询所有文章,反向查询,按表名小写_set.all#}
            {% for article in blog.article_set.all %}
                <div>
                <h4><a href="">{{ article.title }}</a></h4>
                <div class="media">


                    <div>

                        {{ article.desc }}
                    </div>

                    <div style="margin-top: 10px " class="article_bottom small">


                        <span>posted @ {{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                        {#反向查询,一对多,按表名小写_set#}
                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}

                        <span>{{ article.blog.userinfo.username }}</span>
                        <span><i class="fa fa-comment" aria-hidden="true"><a
                                href="">评论({{ article.commit_num }})</a></i></span>

                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}
                        <span class="glyphicon glyphicon-thumbs-up"><a href="">点赞({{ article.up_num }})</a></span>
                        <span><a href="">编辑</a></span>
                    </div>
                    <hr>
                </div>
            {% endfor %}



            </div>
        </div>
    </div>
</div>
</body>
</html>

'''
from django.db.models.functions import TruncMonth
Sales.objects
.annotate(month=TruncMonth('timestamp'))  # Truncate to month and add to select list
.values('month')  # Group By month
.annotate(c=Count('id'))  # Select the count of the grouping
.values('month', 'c')  # (might be redundant, haven't tested) select month and count
'''

## 截断函数

文章标题                时间            blog_id      month
文章1     2018-07-03 02:55:42.391000      1       2018-07
文章2     2018-07-24 03:08:19.705000      1       2018-07
文章3     2019-08-23 03:09:09.747000      1       2019-08

group by month
from django.db.models.functions import TruncMonth
y_m_num = models.Article.objects.all().filter(blog=blog).annotate(y_m=TruncMonth('create_time')).values('y_m').annotate(coun=Count('y_m')).values('y_m', 'coun')

## 不用UTC时间
USE_TZ = False

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse
from blog import myforms
from blog import models
from django.db.models import Count

def user_blog(request, username):
    print(username)
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')

    blog = user.blog
    # 查询当前站点下所有的分类,对应的文章数

    # 每个的分类,对应的文章数
    #group by谁,就以谁做基表
    #ret=models.Category.objects.all().annotate(coun=Count('article__title')).values('title','coun')
    #filter在前表示where value在前表group by
    #value在后表示取值,fileter在后,表示having
    #先过滤出当前站点下所有的分类
    #ret=models.Category.objects.all().filter(blog=blog)
    #ret=models.Category.objects.all().filter(blog=blog).values('pk').annotate(coun=Count('article__title')).values('title','coun')
    #结果跟上面一样
    #ret=models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values('title','coun')
    category_num = models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title', 'coun')
    print(category_num)

    # 查询当前站点下每个标签对应的文章数
    tag_num = models.Tag.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title','coun')
    print(tag_num)

    '''
        from django.db.models.functions import TruncMonth
        Sales.objects
        .annotate(month=TruncMonth('timestamp'))  # Truncate to month and add to select list
        .values('month')  # Group By month
        .annotate(c=Count('id'))  # Select the count of the grouping
        .values('month', 'c')  # (might be redundant, haven't tested) select month and count

    '''
    # 查询当前站点下按年月分类的文章数
    from django.db.models.functions import TruncMonth
    # y_m_num = models.Article.objects.all().filter(blog=blog).annotate(y_m=TruncMonth('create_time')).values('y_m').annotate(coun=Count('y_m')).values('y_m', 'coun')
    y_m_num = models.Article.objects.all().filter(blog=blog).annotate(y_m=TruncMonth('create_time')).values('y_m').annotate(coun=Count('y_m')).values_list('y_m', 'coun')
    print(y_m_num)
    return render(request, 'user_blog.html', locals())

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.userinfo.username }}-的个人博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="head">
    <p>{{ blog.title }}</p>
</div>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-3">

            <div class="panel panel-primary">
                <div class="panel-heading">我的标签</div>
                <div class="panel-body">
                   {% for foo in tag_num %}
                   <p><a href="">{{ foo.0 }}({{ foo.1 }})</a></p>
                   {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">我的分类</div>
                <div class="panel-body">
                    {% for foo in category_num %}
                        <p><a href="">{{ foo.0 }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">随笔档案</div>
                <div class="panel-body">
                    {% for foo in y_m_num %}
                    <p><a href="">{{ foo.0|date:"Y-m" }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>
        </div>
        <div class="col-md-9">
            {#通过站点查询所有文章,反向查询,按表名小写_set.all#}
            {% for article in blog.article_set.all %}
                <div>
                <h4><a href="">{{ article.title }}</a></h4>
                <div class="media">


                    <div>

                        {{ article.desc }}
                    </div>

                    <div style="margin-top: 10px " class="article_bottom small">


                        <span>posted @ {{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                        {#反向查询,一对多,按表名小写_set#}
                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}

                        <span>{{ article.blog.userinfo.username }}</span>
                        <span><i class="fa fa-comment" aria-hidden="true"><a
                                href="">评论({{ article.commit_num }})</a></i></span>

                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}
                        <span class="glyphicon glyphicon-thumbs-up"><a href="">点赞({{ article.up_num }})</a></span>
                        <span><a href="">编辑</a></span>
                    </div>
                    <hr>
                </div>
            {% endfor %}



            </div>
        </div>
    </div>
</div>
</body>
</html>

<p><a href="">{{ foo.0|date:"Y年m月" }}({{ foo.1 }})</a></p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.userinfo.username }}-的个人博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="head">
    <p>{{ blog.title }}</p>
</div>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-3">

            <div class="panel panel-primary">
                <div class="panel-heading">我的标签</div>
                <div class="panel-body">
                    {% for foo in tag_num %}
                        <p><a href="">{{ foo.0 }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">我的分类</div>
                <div class="panel-body">
                    {% for foo in category_num %}
                        <p><a href="">{{ foo.0 }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">随笔档案</div>
                <div class="panel-body">
                    {% for foo in y_m_num %}
                        <p><a href="">{{ foo.0|date:"Y年m月" }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>
        </div>
        <div class="col-md-9">
            {#通过站点查询所有文章,反向查询,按表名小写_set.all#}
            {% for article in blog.article_set.all %}
                <div>
                <h4><a href="">{{ article.title }}</a></h4>
                <div class="media">


                    <div>

                        {{ article.desc }}
                    </div>
                    <div class="clearfix">
                        <div style="margin-top: 10px " class="article_bottom small pull-right">


                            <span>posted @ {{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                            {#反向查询,一对多,按表名小写_set#}
                            {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}

                            <span>{{ article.blog.userinfo.username }}</span>
                            <span><i class="fa fa-comment" aria-hidden="true"><a
                                    href="">评论({{ article.commit_num }})</a></i></span>

                            {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}
                            <span class="glyphicon glyphicon-thumbs-up"><a href="">点赞({{ article.up_num }})</a></span>
                            <span><a href="">编辑</a></span>
                        </div>
                    </div>
                    <hr>
                </div>
            {% endfor %}



            </div>
        </div>
    </div>
</div>
</body>
</html>

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点过滤
    url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)', views.user_blog),
]

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse
from blog import myforms
from blog import models
from django.db.models import Count

def user_blog(request, username,*args,**kwargs):
    print(username)
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')
    # 先取出category_id
    category_id =  kwargs.get('category_id',None)
    blog = user.blog
    ## 过滤这个人所有的文章
    article_list = blog.article_set.all()
    # 判断category_id，如果有值直接过滤
    if category_id:
        article_list = article_list.filter(category__pk=category_id)


    # 查询当前站点下所有的分类,对应的文章数
    # 每个的分类,对应的文章数
    #group by谁,就以谁做基表
    #ret=models.Category.objects.all().annotate(coun=Count('article__title')).values('title','coun')
    #filter在前表示where value在前表group by
    #value在后表示取值,fileter在后,表示having
    #先过滤出当前站点下所有的分类
    #ret=models.Category.objects.all().filter(blog=blog)
    #ret=models.Category.objects.all().filter(blog=blog).values('pk').annotate(coun=Count('article__title')).values('title','coun')
    #结果跟上面一样
    #ret=models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values('title','coun')
    category_num = models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title', 'coun')
    print(category_num)

    # 查询当前站点下每个标签对应的文章数
    tag_num = models.Tag.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title','coun')
    print(tag_num)

    '''
        from django.db.models.functions import TruncMonth
        Sales.objects
        .annotate(month=TruncMonth('timestamp'))  # Truncate to month and add to select list
        .values('month')  # Group By month
        .annotate(c=Count('id'))  # Select the count of the grouping
        .values('month', 'c')  # (might be redundant, haven't tested) select month and count

    '''
    # 查询当前站点下按年月分类的文章数
    from django.db.models.functions import TruncMonth
    # y_m_num = models.Article.objects.all().filter(blog=blog).annotate(y_m=TruncMonth('create_time')).values('y_m').annotate(coun=Count('y_m')).values('y_m', 'coun')
    y_m_num = models.Article.objects.all().filter(blog=blog).annotate(y_m=TruncMonth('create_time')).values('y_m').annotate(coun=Count('y_m')).values_list('y_m', 'coun')
    print(y_m_num)
    return render(request, 'user_blog.html', locals())

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),
    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)', views.user_blog),
]

def user_blog(request, username,*args,**kwargs):
    print(username)
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')
    
    '''
    过滤分类
    '''
    # 先取出category_id
    category_id =  kwargs.get('category_id',None)
    blog = user.blog
    ## 过滤这个人所有的文章
    article_list = blog.article_set.all()
    # 判断category_id，如果有值直接过滤
    if category_id:
        article_list = article_list.filter(category__pk=category_id)


    '''
    过滤标签
    '''
    tag_id = kwargs.get('tag_id', None)
    blog = user.blog
    ## 过滤这个人所有的文章
    article_list = blog.article_set.all()
    # 判断category_id，如果有值直接过滤
    if tag_id:
        article_list = article_list.filter(category__pk=tag_id)

    # 查询当前站点下所有的分类,对应的文章数
    # 每个的分类,对应的文章数
    #group by谁,就以谁做基表
    #ret=models.Category.objects.all().annotate(coun=Count('article__title')).values('title','coun')
    #filter在前表示where value在前表group by
    #value在后表示取值,fileter在后,表示having
    #先过滤出当前站点下所有的分类
    #ret=models.Category.objects.all().filter(blog=blog)
    #ret=models.Category.objects.all().filter(blog=blog).values('pk').annotate(coun=Count('article__title')).values('title','coun')
    #结果跟上面一样
    #ret=models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values('title','coun')
    category_num = models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title', 'coun')
    print(category_num)

    # 查询当前站点下每个标签对应的文章数
    tag_num = models.Tag.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title','coun')
    print(tag_num)

    '''
        from django.db.models.functions import TruncMonth
        Sales.objects
        .annotate(month=TruncMonth('timestamp'))  # Truncate to month and add to select list
        .values('month')  # Group By month
        .annotate(c=Count('id'))  # Select the count of the grouping
        .values('month', 'c')  # (might be redundant, haven't tested) select month and count

    '''
    # 查询当前站点下按年月分类的文章数
    from django.db.models.functions import TruncMonth
    # y_m_num = models.Article.objects.all().filter(blog=blog).annotate(y_m=TruncMonth('create_time')).values('y_m').annotate(coun=Count('y_m')).values('y_m', 'coun')
    y_m_num = models.Article.objects.all().filter(blog=blog).annotate(y_m=TruncMonth('create_time')).values('y_m').annotate(coun=Count('y_m')).values_list('y_m', 'coun')
    print(y_m_num)
    return render(request, 'user_blog.html', locals())

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    # url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    # url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),

    ## 路由三合一（分类，标签，随笔）
    # 分组分出三个，（用户名，category|tag|archive中的一个，可能是分类id  tagid或者时间）
    url(r'^(?P<username>[\w]+)/(?P<condition>category|tag|archive)/(?P<param>.*)', views.user_blog),

    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)$', views.user_blog),
]

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse
from blog import myforms
from blog import models
from django.db.models import Count
from django.db.models.functions import TruncMonth

def user_blog(request, username, *args, **kwargs):
    print(username)
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')
    blog = user.blog
    article_list = blog.article_set.all()
    condition = kwargs.get('condition')
    param = kwargs.get('param')
    if condition == 'tag':
        article_list = article_list.filter(tag__pk=param)
    elif condition == 'category':
        article_list = article_list.filter(category__pk=param)
    elif condition == 'archive':
        archive_list = param.split('-')
        article_list = article_list.filter(create_time__year=archive_list[0], create_time__month=archive_list[1])

    category_num = models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list(
        'title', 'coun', 'pk')
    print(category_num)
    tag_num = models.Tag.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title',
                                                                                                            'coun',
                                                                                                            'pk')
    print(tag_num)
    y_m_num = models.Article.objects.all().filter(blog=blog).annotate(y_m=TruncMonth('create_time')).values(
        'y_m').annotate(coun=Count('y_m')).values_list('y_m', 'coun')
    print(y_m_num)
    return render(request, 'user_blog.html', locals())

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.userinfo.username }}-的个人博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="head">
    <p>{{ blog.title }}</p>
</div>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-3">

            <div class="panel panel-primary">
                <div class="panel-heading">我的标签</div>
                <div class="panel-body">
                    {% for foo in tag_num %}
                        <p><a href="/{{ username }}/tag/{{ foo.2 }}">{{ foo.0 }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">我的分类</div>
                <div class="panel-body">
                    {% for foo in category_num %}
                        <p><a href="/{{ username }}/category/{{ foo.2 }}">{{ foo.0 }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">随笔档案</div>
                <div class="panel-body">
                    {% for foo in y_m_num %}
                        <p><a href="/{{ username }}/archive/{{ foo.0|date:"Y-m" }}">{{ foo.0|date:"Y年m月" }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>
        </div>
        <div class="col-md-9">
            {#通过站点查询所有文章,反向查询,按表名小写_set.all#}
            {% for article in article_list %}
                <div>
                <h4><a href="">{{ article.title }}</a></h4>
                <div class="media">


                    <div>

                        {{ article.desc }}
                    </div>
                    <div class="clearfix">
                        <div style="margin-top: 10px " class="article_bottom small pull-right">


                            <span>posted @ {{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                            {#反向查询,一对多,按表名小写_set#}
                            {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}

                            <span>{{ article.blog.userinfo.username }}</span>
                            <span><i class="fa fa-comment" aria-hidden="true"><a
                                    href="">评论({{ article.commit_num }})</a></i></span>

                            {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}
                            <span class="glyphicon glyphicon-thumbs-up"><a href="">点赞({{ article.up_num }})</a></span>
                            <span><a href="">编辑</a></span>
                        </div>
                    </div>
                    <hr>
                </div>
            {% endfor %}



            </div>
        </div>
    </div>
</div>
</body>
</html>

def user_blog(request, username, *args, **kwargs):
    print(username)
    username = username
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')
    blog = user.blog
    article_list = blog.article_set.all()
    condition = kwargs.get('condition')
    param = kwargs.get('param')
    if condition == 'tag':
        article_list = article_list.filter(tag__pk=param)
    elif condition == 'category':
        article_list = article_list.filter(category__pk=param)
    elif condition == 'archive':
        archive_list = param.split('-')
        article_list = article_list.filter(create_time__year=archive_list[0], create_time__month=archive_list[1])

    category_num = models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list(
        'title', 'coun', 'pk')
    print(category_num)
    tag_num = models.Tag.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title',
                                                                                                            'coun',
                                                                                                            'pk')
    print(tag_num)

    from django.db.models.functions import TruncMonth
    y_m_num = models.Article.objects.all().filter(blog=blog).annotate(y_m=TruncMonth('create_time')).values(
        'y_m').annotate(coun=Count('y_m')).values_list('y_m', 'coun')
    print(y_m_num)
    return render(request, 'user_blog.html', locals())

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    # url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    # url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),

    ## 路由三合一（分类，标签，随笔）
    # 分组分出三个，（用户名，category|tag|archive中的一个，可能是分类id  tagid或者时间）
    url(r'^(?P<username>[\w]+)/(?P<condition>category|tag|archive)/(?P<param>.*)', views.user_blog),
    url(r'^(?P<username>[\w]+)/article/(?P<id>\d+)', views.article_detail),

    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)/$', views.user_blog),
]

def article_detail(request,username,id):
    article = models.Article.objects.filter(pk=id)
    
    return render(request,'article_detail.html',locals())

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.userinfo.username }}-的个人博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="head">
    <p>{{ blog.title }}</p>
</div>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-3">

            <div class="panel panel-primary">
                <div class="panel-heading">我的标签</div>
                <div class="panel-body">
                    {% for foo in tag_num %}
                        <p><a href="/{{ username }}/tag/{{ foo.2 }}">{{ foo.0 }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">我的分类</div>
                <div class="panel-body">
                    {% for foo in category_num %}
                        <p><a href="/{{ username }}/category/{{ foo.2 }}">{{ foo.0 }}({{ foo.1 }})</a></p>
                    {% endfor %}

                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">随笔档案</div>
                <div class="panel-body">
                    {% for foo in y_m_num %}
                        <p>
                            <a href="/{{ username }}/archive/{{ foo.0|date:"Y-m" }}">{{ foo.0|date:"Y年m月" }}({{ foo.1 }})</a>
                        </p>
                    {% endfor %}

                </div>
            </div>
        </div>
        <div class="col-md-9">
            {% block content %}
            {% endblock %}
        </div>
    </div>
</div>
</div>
</body>
</html>

{% extends 'base.html' %}
{% block content %}
    {#通过站点查询所有文章,反向查询,按表名小写_set.all#}
    {% for article in article_list %}
        <div>
            <h4><a href="">{{ article.title }}</a></h4>
            <div class="media">


                <div>

                    {{ article.desc }}
                </div>
                <div class="clearfix">
                    <div style="margin-top: 10px " class="article_bottom small pull-right">


                        <span>posted @ {{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                        {#反向查询,一对多,按表名小写_set#}
                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}

                        <span>{{ article.blog.userinfo.username }}</span>
                        <span><i class="fa fa-comment" aria-hidden="true"><a
                                href="">评论({{ article.commit_num }})</a></i></span>

                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}
                        <span class="glyphicon glyphicon-thumbs-up"><a href="">点赞({{ article.up_num }})</a></span>
                        <span><a href="">编辑</a></span>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    {% endfor %}
{% endblock %}

from django.template import Library
from blog import models
from django.db.models import Count
from django.db.models.functions import TruncMonth

register = Library()


@register.inclusion_tag('classify.html')
def classify(username):
    user = models.UserInfo.objects.filter(username=username).first()
    blog = user.blog
    category_num = models.Category.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list(
        'title', 'coun', 'pk')
    tag_num = models.Tag.objects.all().filter(blog=blog).annotate(coun=Count('article__title')).values_list('title',
                                                                                                            'coun',
                                                                                                            'pk')
    y_m_num = models.Article.objects.all().filter(blog=blog).annotate(y_m=TruncMonth('create_time')).values(
        'y_m').annotate(coun=Count('y_m')).values_list('y_m', 'coun')

    return {'category_num': category_num, 'tag_num': tag_num, 'y_m_num': y_m_num, 'username': username}

<div>
    <div class="panel panel-primary">
        <div class="panel-heading">我的标签</div>
        <div class="panel-body">
            {% for foo in tag_num %}
                <p><a href="/{{ username }}/tag/{{ foo.2 }}">{{ foo.0 }}({{ foo.1 }})</a></p>
            {% endfor %}

        </div>
    </div>

    <div class="panel panel-primary">
        <div class="panel-heading">我的分类</div>
        <div class="panel-body">
            {% for foo in category_num %}
                <p><a href="/{{ username }}/category/{{ foo.2 }}">{{ foo.0 }}({{ foo.1 }})</a></p>
            {% endfor %}

        </div>
    </div>

    <div class="panel panel-primary">
        <div class="panel-heading">随笔档案</div>
        <div class="panel-body">
            {% for foo in y_m_num %}
                <p>
                    <a href="/{{ username }}/archive/{{ foo.0|date:"Y-m" }}">{{ foo.0|date:"Y年m月" }}({{ foo.1 }})</a>
                </p>
            {% endfor %}

        </div>
    </div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.userinfo.username }}-的个人博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="head">
    <p>{{ blog.title }}</p>
</div>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-3">
            {% load my_tag %}
            {% classify username %}
        </div>
        <div class="col-md-9">
            {% block content %}
            {% endblock %}
        </div>
    </div>
</div>
</div>
</body>
</html>

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse
from blog import myforms
from blog import models
from django.db.models import Count
from django.db.models.functions import TruncMonth


# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    ## 判断前台发的请求是不是ajax的请求
    elif request.is_ajax():
        response = {'user': None, 'msg': None}
        name = request.POST.get('name')
        pwd = request.POST.get('pwd')
        valid_code = request.POST.get('valid_code')

        if valid_code.upper() == request.session.get('valid_code').upper():
            user = auth.authenticate(request, username=name, password=pwd)
            if user:
                ## ajax请求，不能再返回render页面或者redirect页面，只能返回字符串或者json
                ## 校验通过，一定要登录
                auth.login(request, user)
                response['user'] = name
                response['msg'] = '登录成功'
            else:
                response['msg'] = '用户名密码错误'
        else:
            response['msg'] = '验证码错误'

    return JsonResponse(response)


def get_random_color_light():
    return (random.randint(0, 100), random.randint(0, 100), random.randint(0, 100))


def get_random_color_dark():
    return (random.randint(150, 255), random.randint(150, 255), random.randint(150, 255))


def get_valid_code(request):
    img = Image.new('RGB', (320, 35), color=get_random_color_light())
    # 拿到画笔，在图片上画画
    img_draw = ImageDraw.Draw(img)

    # 生成一个字体对象 ，第一个参数是字体文件路径，第二个参数，是字体大小
    font = ImageFont.truetype('static/font/ss.TTF', size=26)

    ## 保存验证码
    random_code = ''
    ## 写一个循环，循环5次，每次随机写一个(数字，大写，小写字母)
    for i in range(5):
        char_num = random.randint(0, 9)
        # 生成97 ~ 122的数字,生成字母
        char_lower = chr(random.randint(97, 122))
        char_upper = chr(random.randint(65, 90))
        char_str = str(random.choice([char_num, char_lower, char_upper]))

        ## 第一个参数，xy的坐标，第二个参数，文字，第三个参数，颜色，第四个参数，字体。
        img_draw.text((i * 60 + 20, 0), char_str, get_random_color_dark(), font=font)
        random_code += char_str

    ## 把验证码 保存到session中
    request.session['valid_code'] = random_code

    width = 350
    height = 45
    for i in range(10):
        x1 = random.randint(0, width)
        x2 = random.randint(0, width)
        y1 = random.randint(0, height)
        y2 = random.randint(0, height)

        # 在图片上画线
        img_draw.line((x1, y1, x2, y2), fill=get_random_color_light())

    for i in range(100):
        img_draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color_light())
        x = random.randint(0, width)
        y = random.randint(0, height)
        img_draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color_light())

    ## 在内存中生成一个空文件
    f = BytesIO()
    ## 把图片保存到f中
    img.save(f, 'png')
    ## 取出图片
    data = f.getvalue()
    return HttpResponse(data)


def register(request):
    if request.method == 'GET':
        my_form = myforms.RegForm()
        return render(request, 'register.html', {'my_form': my_form})
    elif request.is_ajax():
        response = {'status': 100, 'msg': None}
        my_form = myforms.RegForm(request.POST)
        if my_form.is_valid():
            ## 定义一个字段，把通过的数据赋值给字典
            dic = my_form.cleaned_data
            ## 移除确认密码的字段
            dic.pop('re_password')
            ## 取出上传的文件对象
            my_file = request.FILES.get('my_file')
            ## 放到字典中
            ## 如果没有上传文件，数据库存默认值
            if my_file:
                dic['avatar'] = my_file
            user = models.UserInfo.objects.create_user(**dic)
            print(user.username)
            response['url'] = '/login/'
        else:
            response['status'] = 101
            response['msg'] = my_form.errors

        return JsonResponse(response)


def check_username(request):
    response = {'status': 100, 'msg': None}
    name = request.POST.get('name')
    user = models.UserInfo.objects.filter(username=name).first()
    if user:
        response['status'] = 101
        response['msg'] = '用户名已存在'
    return JsonResponse(response)


def index(request):
    article_list = models.Article.objects.all()
    return render(request, 'index.html', {'article_list': article_list})


def logout(request):
    auth.logout(request)
    return redirect('/index/')


def user_blog(request, username, *args, **kwargs):
    username = username
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')
    blog = user.blog
    article_list = blog.article_set.all()
    condition = kwargs.get('condition')
    param = kwargs.get('param')
    if condition == 'tag':
        article_list = article_list.filter(tag__pk=param)
    elif condition == 'category':
        article_list = article_list.filter(category__pk=param)
    elif condition == 'archive':
        archive_list = param.split('-')
        article_list = article_list.filter(create_time__year=archive_list[0], create_time__month=archive_list[1])
    return render(request, 'user_blog.html', locals())

def article_detail(request,username,id):
    username = username
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')
    blog = user.blog
    article = models.Article.objects.filter(pk=id)

    return render(request,'article_detail.html',locals())

{% extends 'base.html' %}
{% block content %}
    {#通过站点查询所有文章,反向查询,按表名小写_set.all#}
    {% for article in article_list %}
        <div>
            <h4><a href="/{{ username }}/article/{{ article.pk }}">{{ article.title }}</a></h4>
            <div class="media">


                <div>

                    {{ article.desc }}
                </div>
                <div class="clearfix">
                    <div style="margin-top: 10px " class="article_bottom small pull-right">


                        <span>posted @ {{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                        {#反向查询,一对多,按表名小写_set#}
                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}

                        <span>{{ article.blog.userinfo.username }}</span>
                        <span><i class="fa fa-comment" aria-hidden="true"><a
                                href="">评论({{ article.commit_num }})</a></i></span>

                        {#                        <span class="glyphicon glyphicon-comment"><a href="">评论({{ article.commit_num }})</a></span>#}
                        <span class="glyphicon glyphicon-thumbs-up"><a href="">点赞({{ article.up_num }})</a></span>
                        <span><a href="">编辑</a></span>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    {% endfor %}
{% endblock %}

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        .bottom span {
            margin-right: 16px;
        }
    </style>
    <title>博客</title>
</head>
<body>
<div class="head">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">曾老湿博客系统</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <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="#">随笔</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if request.user.is_authenticated %}
                        <li><a href="#">{{ request.user.username }}</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">个人中心<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">修改密码</a></li>
                                <li><a href="#">修改头像</a></li>
                                <li><a href="#">修改主题</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="/logout/">注销</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="/login/">登录</a></li>
                        <li><a href="/register/">注册</a></li>
                    {% endif %}
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="panel panel-danger">
                <div class="panel-heading">重金求子</div>
                <div class="panel-body">
                    <p>请联系：13800000000</p>
                    <p>年入60w</p>
                </div>
            </div>

            <div class="panel panel-warning">
                <div class="panel-heading">草榴社区</div>
                <div class="panel-body">
                    <a href="http://www.driverzeng.com">请点击跳转</a>
                </div>
            </div>
        </div>
        <div class="col-md-7">
            {% for article in article_list %}
                <div>
                    <h4><a href="/{{ article.blog.userinfo.username }}/article/{{ article.pk }}">{{ article.title }}</a></h4>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img  width="60px" height="60px" class="media-object" src="/media/{{ article.blog.userinfo.avatar }}">
                            </a>
                        </div>
                        <div class="media-body">
                            {{ article.desc }}
                        </div>
                    </div>
                    <div style="margin-top: 20px;margin-bottom: 30px" class="bottom">
                        <span><a href="/{{ article.blog.userinfo.username }}/">{{ article.blog.userinfo.username }}</a></span>
                        <span>发布于{{ article.create_time|date:'Y-m-d H:i:s' }}</span>
                        <span class="glyphicon glyphicon-comment"><a href=""
                                                                     style="margin-left: 2px">评论({{ article.commit_num }})</a></span>
                        <span class="glyphicon glyphicon-thumbs-up"><a href=""
                                                                       style="margin-left: 2px">点赞({{ article.up_num }})</a></span>
                    </div>
                </div>
            {% endfor %}

        </div>
        <div class="col-md-3">
            <div class="panel panel-success">
                <div class="panel-heading">日韩系列</div>
                <div class="panel-body">
                    <a href="http://download.driverzeng.com">Tokyo Hot</a>
                </div>
            </div>

            <div class="panel panel-primary">
                <div class="panel-heading">欧美系列</div>
                <div class="panel-body">
                    <a href="http://blog.driverzeng.com">金八天国</a>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">动漫卡通</div>
                <div class="panel-body">
                    <a href="http://pikachu.driverzeng.com">女仆</a>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">精品图区</div>
                <div class="panel-body">
                    <a href="http://taiji.driverzeng.com">美腿丝袜</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

def article_detail(request,username,id):
    username = username
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')
    blog = user.blog
    article = models.Article.objects.filter(pk=id).first()

    return render(request,'article_detail.html',locals())

{% extends 'base.html' %}
{% block content %}
<div>
<h4 class="text-center">{{ article.title }}</h4>
<div>
    {{ article.content }}
</div>
</div>
{% endblock %}

{% extends 'base.html' %}
{% block content %}
<div>
<h4 class="text-center">{{ article.title }}</h4>
<div>
    {{ article.content|safe }}
</div>
</div>
{% endblock %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ blog.userinfo.username }}-的个人博客</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/mycss.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/static/css/{{ blog.theme }}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
<div class="head">
    <p>{{ blog.title }}</p>
</div>
<div class="container-fluid">
    <div class="row">

        <div class="col-md-3">
            {% load my_tag %}
            {% classify username %}
        </div>
        <div class="col-md-9">
            {% block content %}
            {% endblock %}
        </div>
    </div>
</div>
</div>
</body>
</html>

#div_digg {
    float: right;
    margin-bottom: 10px;
    margin-right: 30px;
    font-size: 12px;
    width: 125px;
    text-align: center;
    margin-top: 10px;
}

.diggit {
    float: left;
    width: 46px;
    height: 52px;
    background: url(/static/img/upup.gif) no-repeat;
    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;
}
.clear {
    clear: both;
}
.diggword {
    margin-top: 5px;
    margin-left: 0;
    font-size: 12px;
    color: gray;
}

{% extends 'base.html' %}
{% block content %}
    <div>
        <h4 class="text-center">{{ article.title }}</h4>
        <div>
            {{ article.content|safe }}
        </div>
        <div id="div_digg">
            <div class="diggit">
                <span class="diggnum" id="digg_count">{{ article.up_num }}</span>
            </div>
            <div class="buryit">
                <span class="burynum" id="bury_count">{{ article.down_num }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="digg_tips" style="color: red;">您已经反对过</div>
        </div>

    </div>
    </div>
{% endblock %}

{% extends 'base.html' %}
{% block content %}
    <div>
        <h4 class="text-center">{{ article.title }}</h4>
        <div>
            {{ article.content|safe }}
        </div>
        <div id="div_digg">
            <div class="diggit">
                <span class="diggnum" id="digg_count">{{ article.up_num }}</span>
            </div>
            <div class="buryit">
                <span class="burynum" id="bury_count">{{ article.down_num }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="digg_tips" style="color: red;">您已经反对过</div>
        </div>

    </div>
    </div>

    <script>
        $(".diggit").click(function () {
            $.ajax({
                url: '/diggit/',
                type: 'post',
                //谁对哪篇文章,点赞
                //谁,可以不传吗?从后台取
                data: {
                    article_id: '{{ article.pk }}',
                    is_up: true,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function (data) {
                    console.log(data)

                }
            })
        })
    </script>
{% endblock %}

def diggit(request):
    response={'status':100,'msg':None}


    if request.user.is_authenticated():
        # 从前端传过来的数据,都转成str类型
        article_id=request.POST.get('article_id')
        is_up=request.POST.get('is_up')
        print(is_up)
        print(type(is_up))
        # 用json转
        # # python中的
        # {'is_up':True}
        # # 转成json
        # {"is_up": "true"}
        is_up=json.loads(is_up)
        print(is_up)
        print(type(is_up))
        # 原子性操作.用事务
        with transaction.atomic():
            models.UpAndDown.objects.create(user=request.user,article_id=article_id,is_up=is_up)
            models.Article.objects.filter(pk=article_id).update(up_num=F('up_num')+1)
            response['msg']='点赞成功'
    else:
        response['msg'] = '请先登录'
        response['status'] = 101
    return JsonResponse(response)

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    # url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    # url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),
    
    # 点赞的路由
    url(r'^diggit/$', views.diggit),
    
    
    ## 路由三合一（分类，标签，随笔）
    # 分组分出三个，（用户名，category|tag|archive中的一个，可能是分类id  tagid或者时间）
    url(r'^(?P<username>[\w]+)/(?P<condition>category|tag|archive)/(?P<param>.*)', views.user_blog),
    url(r'^(?P<username>[\w]+)/article/(?P<id>\d+)', views.article_detail),

    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)/$', views.user_blog),
]

{% extends 'base.html' %}



{% block content %}

    {#{% csrf_token %}#}

    <div>
        <p><h4 class="text-center">{{ article.title }}</h4></p>
        <div>
            {{ article.content|safe }}
        </div>
        {#点赞#}
        <div class="clearfix">
            <div id="div_digg">
                <div class="diggit action">
                    <span class="diggnum" id="digg_count">{{ article.up_num }}</span>
                </div>
                <div class="buryit action">
                    <span class="burynum" id="bury_count">{{ article.down_num }}</span>
                </div>
                <div class="clear"></div>
                <div class="diggword" id="digg_tips" style="color: red;"></div>
            </div>
        </div>

        {#评论#}
        <div>
            <ul class="list-group cotent_ul">

                {% for content in content_list %}
                    <li class="list-group-item">
                        <p><span>#{{ forloop.counter }}楼</span>
                            <span>{{ content.create_time|date:'Y-m-d H:i:s' }}</span>
                            <span><a href="/{{ content.user.username }}">{{ content.user.username }}</a></span>
                            <span class="pull-right replay" username="{{ content.user.username }}" content_id="{{ content.pk }}">回复</span>
                        </p>
                        {% if content.parent %}
                            {#content.parent 拿到的是什么? 拿到父评论的对象#}
                            <p class="well">@{{ content.parent.user.username }}</p>

                        {% endif %}
                        {{ content.content }}
                    </li>
                {% endfor %}


            </ul>
        </div>
        <div>
            <p>发表评论</p>
            <p>
                昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="曾老湿">
            </p>
            <p>评论内容：</p>
            <p>
                <textarea name="" id="content" cols="60" rows="10">


            </textarea>
            </p>
            <button class="btn btn-primary submit">提交</button>


        </div>
    </div>

    <script>
        //全局变量
        var pid = ''
        //评论相关(跟评论的方法)
        /*
        $('.submit').click(function () {
            //评论要提交什么内容
            //谁?又不需要传对哪篇文章评论了什么内容

            var content = $("#content").val()
            $("#content").val("")
            $.ajax({
                url: '/commit_content/',
                type: 'post',
                data: {
                    'article_id': '{{ article.pk }}',
                    'content': content,
                    'pid': '',
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function (data) {
                    console.log(data)
                    //拼  用户名:时间
                    //    评论内容    这些数据都应该从后台返回
                    var time=data.time
                    var content=data.content
                    var user_name=data.user_name
                    var ss=`
                      <li class="list-group-item">
                        <p>
                            <span>${ user_name }</span>:
                            <span>${ time }</span>
                        </p>
                         ${content}
                    </li>
                    `
                    $(".cotent_ul").append(ss)

                }
            })


        })
        */
        //字评论和根评论
        $('.submit').click(function () {
            var content = $("#content").val()
            $("#content").val("")

            if (pid) {
                //pid有值,才切掉头部
                //拿到content要切的起始位置indexOf(),取到指定值的索引值
                //取到 \n 索引位置的后一位
                var index = content.indexOf('\n') + 1
                alert('评论成功')
                //slice传一个起始位置,一个结束位置,就可以切出来
                content = content.slice(index)
            }


            $.ajax({
                url: '/commit_content/',
                type: 'post',
                data: {
                    'article_id': '{{ article.pk }}',
                    'content': content,
                    'pid': pid,
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                success: function (data) {
                    console.log(data)
                    //拼  用户名:时间
                    //    评论内容    这些数据都应该从后台返回
                    var time = data.time
                    var content = data.content
                    var user_name = data.user_name
                    var ss =''
                    if (pid){
                        //需要清空一下父评论的id
                        {#pid=''#}
                        var parent_name=data.parent_name
                        ss=`
                         <li class="list-group-item">
                         <p>
                         <span>${ user_name }</span>
                            <span>${ time }</span>
                        </p>
                            <p class="well">@${parent_name }</p>
                        ${content}
                    </li>
                        `
                    }else {
                         ss= `
                      <li class="list-group-item">
                        <p>
                            <span>${ user_name }</span>:
                            <span>${ time }</span>
                        </p>
                         ${content}
                    </li>
                    `
                    }

                    $(".cotent_ul").append(ss)

                }
            })
        })
        $(".replay").click(function () {

            //拿到span标签中username属性对应的值
            var username = $(this).attr('username')
            //alert(username)
            //把拼接的字符串放到content内,并且换行
            $('#content').val('@' + username + '\n')
            //让光标聚焦到这个控件
            $('#content').focus()
            //给pid赋值(pid是父评论的id)
            pid = $(this).attr('content_id')


        })
        //点赞相关
        $(".action").click(function () {
            //判断当前点击的div控件,有没有diggit类
            var is_up = $(this).hasClass('diggit')

            var obj = $(this).children('span')
            //alert(is_up)
            $.ajax({
                url: '/diggit/',
                type: 'post',
                //谁对哪篇文章,点赞
                //谁,可以不传吗?从后台取
                data: {article_id: '{{ article.pk }}', is_up: is_up, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                success: function (data) {
                    console.log(data)
                    //在点赞下方显示信息提示
                    $("#digg_tips").html(data.msg)
                    if (data.status == 100) {
                        //如果返回成功,点赞数或点踩数加1(第一种方案)
                        /*
                        if(is_up){
                            //这个值是字符串
                           var count= $("#digg_count").text()
                            //把count转成int类型
                            //这两种方式都可以
                            //$("#digg_count").text(parseInt(count)+1)
                            $("#digg_count").text(Number(count)+1)
                        }else{
                            var count= $("#bury_count").text()
                            $("#bury_count").text(Number(count)+1)
                        }
                        */
                        //第二种方案
                        //ojb是当前点击div中的span标签,先取出span中的数字,+1,然后放到span中
                        obj.text(Number(obj.text()) + 1)

                    }


                    //过三秒清除提示
                    setTimeout(function () {
                        $("#digg_tips").html("")
                    }, 3000)

                }
            })

        })
        /*
            $(".diggit").click(function () {


            })

            function test() {

                $.ajax({
                    url: '/diggit/',
                    type: 'post',
                    //谁对哪篇文章,点赞
                    //谁,可以不传吗?从后台取
                    data: {article_id: '{{ article.pk }}', is_up: true, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
                success: function (data) {
                    console.log(data)

                }
            })

        }
        */


    </script>


{% endblock %}

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse
from blog import myforms
from blog import models
from django.db.models import Count
from django.db.models.functions import TruncMonth
from django.contrib.auth.decorators import login_required
import json
from django.db import transaction
from django.db.models import F


# Create your views here.
def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    ## 判断前台发的请求是不是ajax的请求
    elif request.is_ajax():
        response = {'user': None, 'msg': None}
        name = request.POST.get('name')
        pwd = request.POST.get('pwd')
        valid_code = request.POST.get('valid_code')

        if valid_code.upper() == request.session.get('valid_code').upper():
            user = auth.authenticate(request, username=name, password=pwd)
            if user:
                ## ajax请求，不能再返回render页面或者redirect页面，只能返回字符串或者json
                ## 校验通过，一定要登录
                auth.login(request, user)
                response['user'] = name
                response['msg'] = '登录成功'
            else:
                response['msg'] = '用户名密码错误'
        else:
            response['msg'] = '验证码错误'

    return JsonResponse(response)


def get_random_color_light():
    return (random.randint(0, 100), random.randint(0, 100), random.randint(0, 100))


def get_random_color_dark():
    return (random.randint(150, 255), random.randint(150, 255), random.randint(150, 255))


def get_valid_code(request):
    img = Image.new('RGB', (320, 35), color=get_random_color_light())
    # 拿到画笔，在图片上画画
    img_draw = ImageDraw.Draw(img)

    # 生成一个字体对象 ，第一个参数是字体文件路径，第二个参数，是字体大小
    font = ImageFont.truetype('static/font/ss.TTF', size=26)

    ## 保存验证码
    random_code = ''
    ## 写一个循环，循环5次，每次随机写一个(数字，大写，小写字母)
    for i in range(5):
        char_num = random.randint(0, 9)
        # 生成97 ~ 122的数字,生成字母
        char_lower = chr(random.randint(97, 122))
        char_upper = chr(random.randint(65, 90))
        char_str = str(random.choice([char_num, char_lower, char_upper]))

        ## 第一个参数，xy的坐标，第二个参数，文字，第三个参数，颜色，第四个参数，字体。
        img_draw.text((i * 60 + 20, 0), char_str, get_random_color_dark(), font=font)
        random_code += char_str

    ## 把验证码 保存到session中
    request.session['valid_code'] = random_code

    width = 350
    height = 45
    for i in range(10):
        x1 = random.randint(0, width)
        x2 = random.randint(0, width)
        y1 = random.randint(0, height)
        y2 = random.randint(0, height)

        # 在图片上画线
        img_draw.line((x1, y1, x2, y2), fill=get_random_color_light())

    for i in range(100):
        img_draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color_light())
        x = random.randint(0, width)
        y = random.randint(0, height)
        img_draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color_light())

    ## 在内存中生成一个空文件
    f = BytesIO()
    ## 把图片保存到f中
    img.save(f, 'png')
    ## 取出图片
    data = f.getvalue()
    return HttpResponse(data)


def register(request):
    if request.method == 'GET':
        my_form = myforms.RegForm()
        return render(request, 'register.html', {'my_form': my_form})
    elif request.is_ajax():
        response = {'status': 100, 'msg': None}
        my_form = myforms.RegForm(request.POST)
        if my_form.is_valid():
            ## 定义一个字段，把通过的数据赋值给字典
            dic = my_form.cleaned_data
            ## 移除确认密码的字段
            dic.pop('re_password')
            ## 取出上传的文件对象
            my_file = request.FILES.get('my_file')
            ## 放到字典中
            ## 如果没有上传文件，数据库存默认值
            if my_file:
                dic['avatar'] = my_file
            user = models.UserInfo.objects.create_user(**dic)
            print(user.username)
            response['url'] = '/login/'
        else:
            response['status'] = 101
            response['msg'] = my_form.errors

        return JsonResponse(response)


def check_username(request):
    response = {'status': 100, 'msg': None}
    name = request.POST.get('name')
    user = models.UserInfo.objects.filter(username=name).first()
    if user:
        response['status'] = 101
        response['msg'] = '用户名已存在'
    return JsonResponse(response)


def index(request):
    article_list = models.Article.objects.all()
    return render(request, 'index.html', {'article_list': article_list})


def logout(request):
    auth.logout(request)
    return redirect('/index/')


def user_blog(request, username, *args, **kwargs):
    username = username
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')
    blog = user.blog
    article_list = blog.article_set.all()
    condition = kwargs.get('condition')
    param = kwargs.get('param')
    if condition == 'tag':
        article_list = article_list.filter(tag__pk=param)
    elif condition == 'category':
        article_list = article_list.filter(category__pk=param)
    elif condition == 'archive':
        archive_list = param.split('-')
        article_list = article_list.filter(create_time__year=archive_list[0], create_time__month=archive_list[1])
    return render(request, 'user_blog.html', locals())


def article_detail(request, username, id):
    username = username
    user = models.UserInfo.objects.filter(username=username).first()
    if not user:
        return render(request, 'error.html')
    blog = user.blog
    article = models.Article.objects.filter(pk=id).first()
    content_list = article.commit_set.all().order_by('pk')

    return render(request, 'article_detail.html', locals())


def diggit(request):
    response = {'status': 100, 'msg': None}

    if request.user.is_authenticated():
        # 从前端传过来的数据,都转成str类型
        article_id = request.POST.get('article_id')
        is_up = request.POST.get('is_up')
        is_up = json.loads(is_up)
        user = request.user
        # 存之前先查询,当前用户对该篇文章是否点过
        ret = models.UpAndDown.objects.filter(user_id=user.pk, article_id=article_id).exists()
        if ret:
            # 当有数据,说明,已经点过赞或者踩了
            response['msg'] = '您已经点过了'
            response['status'] = 101
        else:
            # 原子性操作.用事务
            with transaction.atomic():
                models.UpAndDown.objects.create(user=user, article_id=article_id, is_up=is_up)
                # 先取出文章的queryset对象
                article = models.Article.objects.filter(pk=article_id)
                if is_up:
                    article.update(up_num=F('up_num') + 1)
                    response['msg'] = '点赞成功'
                else:
                    article.update(down_num=F('down_num') + 1)
                    response['msg'] = '反对成功'
    else:
        response['msg'] = '请先登录'
        response['status'] = 101
    return JsonResponse(response)


def commit_content(request):
    response = {'status': 100, 'msg': None}
    if request.is_ajax():
        if request.user.is_authenticated():
            # 核心逻辑
            user = request.user
            article_id = request.POST.get('article_id')
            content = request.POST.get('content')
            pid = request.POST.get('pid')
            print(pid)
            with transaction.atomic():
                ret = models.Commit.objects.create(user=user, article_id=article_id, content=content, parent_id_id=pid)
                models.Article.objects.filter(pk=article_id).update(commit_num=F('commit_num') + 1)

            response['msg'] = '评论成功'
            response['content'] = ret.content
            # 把datetime类型转成字符串,因为json是无法序列化datetime
            response['time'] = ret.create_time.strftime('%Y-%m-%d %X')
            response['user_name'] = ret.user.username
            if pid:
                # 如果是字评论,返回父评论的名字
                response['parent_name'] = ret.parent.user.username


        else:
            response['status'] = 101
            response['msg'] = '您没有登录'
    else:
        response['status'] = 101
        response['msg'] = '您请求非法'
    print(response)
    return JsonResponse(response)

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    # url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    # url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),

    # 点赞的路由
    url(r'^diggit/$', views.diggit),
    # p评论的路由
    url(r'^commit_content/$', views.commit_content),

    ## 路由三合一（分类，标签，随笔）
    # 分组分出三个，（用户名，category|tag|archive中的一个，可能是分类id  tagid或者时间）
    url(r'^(?P<username>[\w]+)/(?P<condition>category|tag|archive)/(?P<param>.*)', views.user_blog),
    url(r'^(?P<username>[\w]+)/article/(?P<id>\d+)', views.article_detail),

    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)/$', views.user_blog),
]

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    # url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    # url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),

    # 点赞的路由
    url(r'^diggit/$', views.diggit),
    # p评论的路由
    url(r'^commit_content/$', views.commit_content),
    url(r'^backend/', views.backend),

    ## 路由三合一（分类，标签，随笔）
    # 分组分出三个，（用户名，category|tag|archive中的一个，可能是分类id  tagid或者时间）
    url(r'^(?P<username>[\w]+)/(?P<condition>category|tag|archive)/(?P<param>.*)', views.user_blog),
    url(r'^(?P<username>[\w]+)/article/(?P<id>\d+)', views.article_detail),

    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)/$', views.user_blog),
]

@login_required(login_url='/login/')
def backend(request):
    if request.method == 'GET':
        return render(request,'back/backend.html')

    return HttpResponse('OK')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
</head>
<body>
这里是后台管理页面
</body>
</html>

@login_required(login_url='/login/')
def backend(request):
    if request.method == 'GET':
        blog = request.user.blog
        article_list = models.Article.objects.filter(blog=blog)
        return render(request,'back/backend.html',{'article_list':article_list})

    return HttpResponse('OK')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/mycss.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <title>后台管理</title>
    <style>
        .head {
            height: 60px;
            background: aquamarine;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<div class="head">
    <p>后台管理</p>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">

            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                               aria-expanded="true" aria-controls="collapseOne">
                                操作
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">添加文章</a>
                        </div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">添加随笔</a>
                        </div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">其他操作</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th>文章标题</th>
                    <th>发布时间</th>
                    <th>评论数</th>
                    <th>点赞数</th>
                    <th>修改</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tbody>
                {% for article in article_list %}
                <tr>
                <td><a href="/{{ article.blog.userinfo.username }}/article/{{ article.pk }}">{{ article.title }}</a></td>
                <td>{{ article.create_time|date:'Y-m-d H:i:s' }}</td>
                <td>{{ article.commit_num }}</td>
                <td>{{ article.up_num }}</td>
                <td><a href="">修改</a></td>
                <td><a href="">删除</a></td>
                </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    # url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    # url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),

    # 点赞的路由
    url(r'^diggit/$', views.diggit),
    # p评论的路由
    url(r'^commit_content/$', views.commit_content),
    url(r'^backend/', views.backend),

    ## 路由三合一（分类，标签，随笔）
    # 分组分出三个，（用户名，category|tag|archive中的一个，可能是分类id  tagid或者时间）
    url(r'^(?P<username>[\w]+)/(?P<condition>category|tag|archive)/(?P<param>.*)', views.user_blog),
    url(r'^(?P<username>[\w]+)/article/(?P<id>\d+)', views.article_detail),

    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)/$', views.user_blog),
]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/mycss.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <title>后台管理</title>
    <style>
        .head {
            height: 60px;
            background: aquamarine;
            margin-bottom: 20px;
        }

        .a1 {
            background: red;
            color: black;
        }

        .a2 {
            background: orange;
            color: black;
        }

        .a3 {
            background: yellow;
            color: black;
        }

        .a4 {
            background: lawngreen;
            color: black;
        }

        .a5 {
            background: #2aabd2;
            color: black;
        }

        .a6 {
            background: pink;
            color: black;
        }

        .a7 {
            background: lightcoral;
            color: black;
        }

        .a8 {
            background: gray;
            color: black;

        }

        .a9 {
            background: beige;
            color: black;
        }


    </style>
</head>
<body>

<div class="head">
    <p>后台管理</p>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">

            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                               aria-expanded="true" aria-controls="collapseOne">
                                操作
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">添加文章</a>
                        </div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">添加随笔</a>
                        </div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">其他操作</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">

            <div>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a class="a1" href="#article" aria-controls="home" role="tab"
                                                              data-toggle="tab">文章</a></li>
                    <li role="presentation" class="nav2"><a class="a2" href="#note" aria-controls="profile"
                                                            role="tab" data-toggle="tab">随笔</a>
                    </li>
                    <li role="presentation" class="nav3"><a class="a3" href="#log" aria-controls="messages"
                                                            role="tab" data-toggle="tab">日志</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a4" href="#comment" aria-controls="settings"
                                                            role="tab" data-toggle="tab">评论</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a5" href="#linked" aria-controls="settings"
                                                            role="tab" data-toggle="tab">链接</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a6" href="#photo" aria-controls="settings"
                                                            role="tab" data-toggle="tab">相册</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a7" href="#file" aria-controls="settings"
                                                            role="tab" data-toggle="tab">文件</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a8" href="#settings" aria-controls="settings"
                                                            role="tab" data-toggle="tab">设置</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a9" href="#options" aria-controls="settings"
                                                            role="tab" data-toggle="tab">选项</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="article">
                        <table class="table table-hover table-striped">
                            <thead>
                            <tr>
                                <th>文章标题</th>
                                <th>发布时间</th>
                                <th>评论数</th>
                                <th>点赞数</th>
                                <th>修改</th>
                                <th>删除</th>
                            </tr>
                            </thead>
                            <tbody>

                            {% for article in article_list %}
                                <tr>
                                    <td>
                                        <a href="/{{ article.blog.userinfo.username }}/article/{{ article.pk }}">{{ article.title }}</a>
                                    </td>
                                    <td>{{ article.create_time|date:'Y-m-d H:i:s' }}</td>
                                    <td>{{ article.commit_num }}</td>
                                    <td>{{ article.up_num }}</td>
                                    <td><a href="">修改</a></td>
                                    <td><a href="">删除</a></td>
                                </tr>
                            {% endfor %}

                            </tbody>
                        </table>

                    </div>
                    <div role="tabpanel" class="tab-pane" id="note">随笔页面</div>
                    <div role="tabpanel" class="tab-pane" id="log">日志页面</div>
                    <div role="tabpanel" class="tab-pane" id="comment">评论页面</div>
                    <div role="tabpanel" class="tab-pane" id="linked">链接页面</div>
                    <div role="tabpanel" class="tab-pane" id="photo">相册页面</div>
                    <div role="tabpanel" class="tab-pane" id="file">文件页面</div>
                    <div role="tabpanel" class="tab-pane" id="settings">设置页面</div>
                    <div role="tabpanel" class="tab-pane" id="options">选项页面</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/mycss.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <title>后台管理</title>
    <style>
        .head {
            height: 60px;
            background: aquamarine;
            margin-bottom: 20px;
        }

        .a1 {
            background: red;
            color: black;
        }

        .a2 {
            background: orange;
            color: black;
        }

        .a3 {
            background: yellow;
            color: black;
        }

        .a4 {
            background: lawngreen;
            color: black;
        }

        .a5 {
            background: #2aabd2;
            color: black;
        }

        .a6 {
            background: pink;
            color: black;
        }

        .a7 {
            background: lightcoral;
            color: black;
        }

        .a8 {
            background: gray;
            color: black;

        }

        .a9 {
            background: beige;
            color: black;
        }


    </style>
</head>
<body>

<div class="head">
    <p>后台管理</p>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">

            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                               aria-expanded="true" aria-controls="collapseOne">
                                操作
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">添加文章</a>
                        </div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">添加随笔</a>
                        </div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">其他操作</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">

            <div>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a class="a1" href="#article" aria-controls="home" role="tab"
                                                              data-toggle="tab">文章</a></li>
                    <li role="presentation" class="nav2"><a class="a2" href="#note" aria-controls="profile"
                                                            role="tab" data-toggle="tab">随笔</a>
                    </li>
                    <li role="presentation" class="nav3"><a class="a3" href="#log" aria-controls="messages"
                                                            role="tab" data-toggle="tab">日志</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a4" href="#comment" aria-controls="settings"
                                                            role="tab" data-toggle="tab">评论</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a5" href="#linked" aria-controls="settings"
                                                            role="tab" data-toggle="tab">链接</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a6" href="#photo" aria-controls="settings"
                                                            role="tab" data-toggle="tab">相册</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a7" href="#file" aria-controls="settings"
                                                            role="tab" data-toggle="tab">文件</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a8" href="#settings" aria-controls="settings"
                                                            role="tab" data-toggle="tab">设置</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a9" href="#options" aria-controls="settings"
                                                            role="tab" data-toggle="tab">选项</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="article">
                        {% block home %}
                        {% endblock %}

                    </div>
                    <div role="tabpanel" class="tab-pane" id="note">随笔页面</div>
                    <div role="tabpanel" class="tab-pane" id="log">日志页面</div>
                    <div role="tabpanel" class="tab-pane" id="comment">评论页面</div>
                    <div role="tabpanel" class="tab-pane" id="linked">链接页面</div>
                    <div role="tabpanel" class="tab-pane" id="photo">相册页面</div>
                    <div role="tabpanel" class="tab-pane" id="file">文件页面</div>
                    <div role="tabpanel" class="tab-pane" id="settings">设置页面</div>
                    <div role="tabpanel" class="tab-pane" id="options">选项页面</div>
                </div>

            </div>


        </div>
    </div>
</div>
</body>
</html>

{% extends 'back/backbase.html' %}
{% block home %}
              <table class="table table-hover table-striped">
                            <thead>
                            <tr>
                                <th>文章标题</th>
                                <th>发布时间</th>
                                <th>评论数</th>
                                <th>点赞数</th>
                                <th>修改</th>
                                <th>删除</th>
                            </tr>
                            </thead>
                            <tbody>

                            {% for article in article_list %}
                                <tr>
                                    <td>
                                        <a href="/{{ article.blog.userinfo.username }}/article/{{ article.pk }}">{{ article.title }}</a>
                                    </td>
                                    <td>{{ article.create_time|date:'Y-m-d H:i:s' }}</td>
                                    <td>{{ article.commit_num }}</td>
                                    <td>{{ article.up_num }}</td>
                                    <td><a href="">修改</a></td>
                                    <td><a href="">删除</a></td>
                                </tr>
                            {% endfor %}

                            </tbody>
                        </table>
{% endblock %}

@login_required(login_url='/login/')
def add_article(request):
    if request.method == 'GET':

        return render(request,'back/add_article.html')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/mycss.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <title>后台管理</title>
    <style>
        .head {
            height: 60px;
            background: aquamarine;
            margin-bottom: 20px;
        }

        .a1 {
            background: red;
            color: black;
        }

        .a2 {
            background: orange;
            color: black;
        }

        .a3 {
            background: yellow;
            color: black;
        }

        .a4 {
            background: lawngreen;
            color: black;
        }

        .a5 {
            background: #2aabd2;
            color: black;
        }

        .a6 {
            background: pink;
            color: black;
        }

        .a7 {
            background: lightcoral;
            color: black;
        }

        .a8 {
            background: gray;
            color: black;

        }

        .a9 {
            background: beige;
            color: black;
        }


    </style>
</head>
<body>

<div class="head">
    <p>后台管理</p>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">

            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                               aria-expanded="true" aria-controls="collapseOne">
                                操作
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="/add_article/">添加文章</a>
                        </div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">添加随笔</a>
                        </div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <a href="">其他操作</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">

            <div>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a class="a1" href="#article" aria-controls="home" role="tab"
                                                              data-toggle="tab">文章</a></li>
                    <li role="presentation" class="nav2"><a class="a2" href="#note" aria-controls="profile"
                                                            role="tab" data-toggle="tab">随笔</a>
                    </li>
                    <li role="presentation" class="nav3"><a class="a3" href="#log" aria-controls="messages"
                                                            role="tab" data-toggle="tab">日志</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a4" href="#comment" aria-controls="settings"
                                                            role="tab" data-toggle="tab">评论</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a5" href="#linked" aria-controls="settings"
                                                            role="tab" data-toggle="tab">链接</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a6" href="#photo" aria-controls="settings"
                                                            role="tab" data-toggle="tab">相册</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a7" href="#file" aria-controls="settings"
                                                            role="tab" data-toggle="tab">文件</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a8" href="#settings" aria-controls="settings"
                                                            role="tab" data-toggle="tab">设置</a>
                    </li>
                    <li role="presentation" class="nav4"><a class="a9" href="#options" aria-controls="settings"
                                                            role="tab" data-toggle="tab">选项</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="article">
                        {% block home %}
                        {% endblock %}

                    </div>
                    <div role="tabpanel" class="tab-pane" id="note">随笔页面</div>
                    <div role="tabpanel" class="tab-pane" id="log">日志页面</div>
                    <div role="tabpanel" class="tab-pane" id="comment">评论页面</div>
                    <div role="tabpanel" class="tab-pane" id="linked">链接页面</div>
                    <div role="tabpanel" class="tab-pane" id="photo">相册页面</div>
                    <div role="tabpanel" class="tab-pane" id="file">文件页面</div>
                    <div role="tabpanel" class="tab-pane" id="settings">设置页面</div>
                    <div role="tabpanel" class="tab-pane" id="options">选项页面</div>
                </div>

            </div>


        </div>
    </div>
</div>
</body>
</html>

{% extends 'back/backbase.html' %}

{% block home %}
<div>
<p>添加文章</p>
    <form action="/add_article/" method="post">
        <div>
            <p>标题</p>
            <p><input type="text" name="title" class="form-control"></p>
            <p>内容(KindEditor编辑器，不支持拖放/粘贴上传图片)</p>
            <p>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </p>
            <input type="submit" class="btn btn-danger" value="发表">
        </div>
    </form>
</div>
{% endblock %}

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    # url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    # url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),

    # 点赞的路由
    url(r'^diggit/$', views.diggit),
    # p评论的路由
    url(r'^commit_content/$', views.commit_content),
    url(r'^backend/', views.backend),
    url(r'^add_article/', views.add_article),

    ## 路由三合一（分类，标签，随笔）
    # 分组分出三个，（用户名，category|tag|archive中的一个，可能是分类id  tagid或者时间）
    url(r'^(?P<username>[\w]+)/(?P<condition>category|tag|archive)/(?P<param>.*)', views.user_blog),
    url(r'^(?P<username>[\w]+)/article/(?P<id>\d+)', views.article_detail),

    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)/$', views.user_blog),
]

{% extends 'back/backbase.html' %}

{% block home %}
    <div>
        <p>添加文章</p>
        <form action="/add_article/" method="post">
            <div>
                <p>标题</p>
                <p><input type="text" name="title" class="form-control"></p>
                <p>内容(KindEditor编辑器，不支持拖放/粘贴上传图片)</p>
                <p>
                    <textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>
                </p>
                <input type="submit" class="btn btn-danger" value="发表">
            </div>
        </form>
    </div>
    <script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id', {
                width: '100%',
                height: '600px',
                resizeType: 0
            });
        });
    </script>
{% endblock %}

{% extends 'back/backbase.html' %}

{% block home %}
    <div>
        <p>添加文章</p>
        <form action="/add_article/" method="post">
            {% csrf_token %}
            <div>
                <p>标题</p>
                <p><input type="text" name="title" class="form-control"></p>
                <p>内容(KindEditor编辑器，不支持拖放/粘贴上传图片)</p>
                <p>
                    <textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>
                </p>
                <input type="submit" class="btn btn-danger" value="发表">
            </div>
        </form>
    </div>
    <script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id', {
                width: '100%',
                height: '600px',
                resizeType: 0
            });
        });
    </script>
{% endblock %}

@login_required(login_url='/login/')
def add_article(request):
    if request.method == 'GET':
        return render(request, 'back/add_article.html')
    elif request.method == 'POST':
        title = request.POST.get('title')
        content = request.POST.get('content')
        desc = content[0:150]
        blog =  request.user.blog
        models.Article.objects.create(title=title, desc=desc, content=content,blog=blog)
        return redirect('/backend/')

{% extends 'back/backbase.html' %}

{% block home %}
    <div>
        <p>添加文章</p>
        <form action="/add_article/" method="post">
            {% csrf_token %}
            <div>
                <p>标题</p>
                <p><input type="text" name="title" class="form-control"></p>
                <p>内容(KindEditor编辑器，不支持拖放/粘贴上传图片)</p>
                <p>
                    <textarea id="editor_id" name="content" style="width:700px;height:300px;"></textarea>
                </p>
                <input type="submit" class="btn btn-danger" value="发表">
            </div>
        </form>
    </div>
    <script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id', {
                width: '100%',
                height: '600px',
                resizeType: 0,
                uploadJson: '/upload_img/', // 需要添加一个路由
                extraFileUploadParams:{
                    'csrfmiddlewaretoken':'{{ csrf_token }}'
                },
                filePostName:'myfile',
            });
        });
    </script>
{% endblock %}

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse
from blog import myforms
from blog import models
from django.db.models import Count
from django.db.models.functions import TruncMonth
from django.contrib.auth.decorators import login_required
import json
from django.db import transaction
from django.db.models import F
import os
from bbs import settings

def upload_img(request):
    myfile = request.FILES.get('myfile')
    path = os.path.join(settings.BASE_DIR, 'media', 'img')
    if not os.path.isdir(path):
        os.mkdir(path)
    file_path = os.path.join(path, myfile.name)
    with open(file_path, 'wb', ) as f:
        for line in myfile:
            f.write(line)

    dic = {'error': 0, 'url': '/media/img/%s' % myfile.name}
    return JsonResponse(dic)

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    # url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    # url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),

    # 点赞的路由
    url(r'^diggit/$', views.diggit),
    # p评论的路由
    url(r'^commit_content/$', views.commit_content),
    url(r'^backend/', views.backend),
    url(r'^add_article/', views.add_article),
    # 富文本编辑器上床图片
    url(r'^upload_img/', views.upload_img),

    ## 路由三合一（分类，标签，随笔）
    # 分组分出三个，（用户名，category|tag|archive中的一个，可能是分类id  tagid或者时间）
    url(r'^(?P<username>[\w]+)/(?P<condition>category|tag|archive)/(?P<param>.*)', views.user_blog),
    url(r'^(?P<username>[\w]+)/article/(?P<id>\d+)', views.article_detail),

    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)/$', views.user_blog),
]

MacBook-pro:auth_module driverzeng$ pip3 install BeautifulSoup4  -i https://mirrors.aliyun.com/pypi/simple/

## 导入模块
from bs4 import BeautifulSoup

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse
from blog import myforms
from blog import models
from django.db.models import Count
from django.db.models.functions import TruncMonth
from django.contrib.auth.decorators import login_required
import json
from django.db import transaction
from django.db.models import F
import os
from bbs import settings
from bs4 import BeautifulSoup

@login_required(login_url='/login/')
def add_article(request):
    if request.method == 'GET':
        return render(request, 'back/add_article.html')
    elif request.method == 'POST':
        title = request.POST.get('title')
        content = request.POST.get('content')
        ## 第一个参数，被解析对象，第二个参数，选择解析器
        soup = BeautifulSoup(content,'html.parser')
        ## 取出html标签中的文本内容
        ## soup.text
        desc = soup.text[0:150]
        blog = request.user.blog
        models.Article.objects.create(title=title, desc=desc, content=content, blog=blog)
        return redirect('/backend/')

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse
from blog import myforms
from blog import models
from django.db.models import Count
from django.db.models.functions import TruncMonth
from django.contrib.auth.decorators import login_required
import json
from django.db import transaction
from django.db.models import F
import os
from bbs import settings
from bs4 import BeautifulSoup

@login_required(login_url='/login/')
def add_article(request):
    if request.method == 'GET':
        return render(request, 'back/add_article.html')
    elif request.method == 'POST':
        title = request.POST.get('title')
        content = request.POST.get('content')
        ## 第一个参数，被解析对象，第二个参数，选择解析器
        soup = BeautifulSoup(content,'html.parser')

        ## 查询出所有的标签
        tags = soup.find_all()
        ## 循环标签，找到script就删除
        for tag in tags:
            if tag.name == 'script':
                ## 删除标签
                tag.decompose()

        ## 取出html标签中的文本内容
        ## soup.text
        desc = soup.text[0:150]
        blog = request.user.blog
        models.Article.objects.create(title=title, desc=desc, content=content, blog=blog)
        return redirect('/backend/')

from django.core.mail import send_mail

# EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.qq.com'
EMAIL_PORT = 465
EMAIL_HOST_USER = '253097001@qq.com'  # 帐号
EMAIL_HOST_PASSWORD = '***'  # 密码
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER
#这样收到的邮件，收件人处就会这样显示
#DEFAULT_FROM_EMAIL = 'zls<'253097001@qq.com>'
EMAIL_USE_SSL = True   #使用ssl
#EMAIL_USE_TLS = False # 使用tls

#EMAIL_USE_SSL 和 EMAIL_USE_TLS 是互斥的，即只能有一个为 True

def commit_content(request):
    response = {'status': 100, 'msg': None}
    if request.is_ajax():
        if request.user.is_authenticated():
            # 核心逻辑
            user = request.user
            article_id = request.POST.get('article_id')
            content = request.POST.get('content')
            pid = request.POST.get('pid')
            print(pid)
            with transaction.atomic():
                ret = models.Commit.objects.create(user=user, article_id=article_id, content=content, parent_id_id=pid)
                models.Article.objects.filter(pk=article_id).update(commit_num=F('commit_num') + 1)

            response['msg'] = '评论成功'
            response['content'] = ret.content
            # 把datetime类型转成字符串,因为json是无法序列化datetime
            response['time'] = ret.create_time.strftime('%Y-%m-%d %X')
            response['user_name'] = ret.user.username
            if pid:
                # 如果是字评论,返回父评论的名字
                response['parent_name'] = ret.parent.user.username
                ## 评论成功，发送邮件
                '''
                subject:邮件标题
                message:邮件内容
                from_email:邮件发送者
                recipient_list:接收者列表
                '''
            from bbs import settings
            ## 拿到文章标题
            article_name = ret.article.title

            ## 被当前登录人评论
            user_name = request.user.username

            ## 有返回值，邮件发送成功是true
            res = send_mail('您的《%s》文章被[%s]评论了' % (article_name, user_name), '这个人评论内容：%s' % content,
                            settings.EMAIL_HOST_USER, ['133411023@qq.com'])
            print(res)

        else:
            response['status'] = 101
            response['msg'] = '您没有登录'
    else:
        response['status'] = 101
        response['msg'] = '您请求非法'
    return JsonResponse(response)

from django.shortcuts import render, HttpResponse, redirect
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
from django.contrib import auth
from django.http import JsonResponse
from blog import myforms
from blog import models
from django.db.models import Count
from django.db.models.functions import TruncMonth
from django.contrib.auth.decorators import login_required
import json
from django.db import transaction
from django.db.models import F
import os
from bbs import settings
from bs4 import BeautifulSoup
from django.core.mail import send_mail

def commit_content(request):
    response = {'status': 100, 'msg': None}
    if request.is_ajax():
        if request.user.is_authenticated():
            # 核心逻辑
            user = request.user
            article_id = request.POST.get('article_id')
            content = request.POST.get('content')
            pid = request.POST.get('pid')
            print(pid)
            with transaction.atomic():
                ret = models.Commit.objects.create(user=user, article_id=article_id, content=content, parent_id_id=pid)
                models.Article.objects.filter(pk=article_id).update(commit_num=F('commit_num') + 1)

            response['msg'] = '评论成功'
            response['content'] = ret.content
            # 把datetime类型转成字符串,因为json是无法序列化datetime
            response['time'] = ret.create_time.strftime('%Y-%m-%d %X')
            response['user_name'] = ret.user.username
            if pid:
                # 如果是字评论,返回父评论的名字
                response['parent_name'] = ret.parent.user.username
                ## 评论成功，发送邮件
                '''
                subject:邮件标题
                message:邮件内容
                from_email:邮件发送者
                recipient_list:接收者列表
                '''
            from bbs import settings
            ## 拿到文章标题
            # article_name = ret.article.title
            #
            # ## 被当前登录人评论
            # user_name = request.user.username
            #
            # ## 有返回值，邮件发送成功是true
            # res = send_mail('您的《%s》文章被[%s]评论了' % (article_name, user_name), '这个人评论内容：%s' % content,
            #                 settings.EMAIL_HOST_USER, ['133411023@qq.com'])
            # print(res)
            from threading import Thread
            article_name = ret.article.title
            user_name = request.user.username
            ## 实例化
            t1 = Thread(target=send_mail, args=('您的《%s》文章被[%s]评论了' % (article_name, user_name), '这个人评论内容：%s' % content,
                                           settings.EMAIL_HOST_USER, ['133411023@qq.com']))
            t1.start()

        else:
            response['status'] = 101
            response['msg'] = '您没有登录'
    else:
        response['status'] = 101
        response['msg'] = '您请求非法'
    return JsonResponse(response)

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>修改头像</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="head">
    <input type="submit" value="提交">
</form>
</body>
</html>

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    # url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    # url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),

    # 点赞的路由
    url(r'^diggit/$', views.diggit),
    # p评论的路由
    url(r'^commit_content/$', views.commit_content),
    url(r'^backend/', views.backend),
    url(r'^add_article/', views.add_article),
    # 富文本编辑器上床图片
    url(r'^upload_img/', views.upload_img),
    ## 修改头像
    url(r'^update_head/', views.update_head),

    ## 路由三合一（分类，标签，随笔）
    # 分组分出三个，（用户名，category|tag|archive中的一个，可能是分类id  tagid或者时间）
    url(r'^(?P<username>[\w]+)/(?P<condition>category|tag|archive)/(?P<param>.*)', views.user_blog),
    url(r'^(?P<username>[\w]+)/article/(?P<id>\d+)', views.article_detail),

    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)/$', views.user_blog),
]

@login_required
def update_head(request):
    if request.method == 'GET':
        return render(request,'update_head.html')
    else:
        myfile = request.FILES.get('head')
        ## 可以只删除数据库的地址，不删实际文件
        user = request.user
        user.avatar=myfile
        user.save()
        ret = #models.UserInfo.objects.filter(pk=request.user.pk).update(avatar=myfile)
        return redirect('/index/')

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    # url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    # url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),

    # 点赞的路由
    url(r'^diggit/$', views.diggit),
    # p评论的路由
    url(r'^commit_content/$', views.commit_content),
    url(r'^backend/', views.backend),
    url(r'^add_article/', views.add_article),
    # 富文本编辑器上床图片
    url(r'^upload_img/', views.upload_img),
    ## 修改头像
    url(r'^update_head/', views.update_head),

    ##修改文章
    url(r'^update_article/(?P<pk>\d+)', views.update_article),

    ## 路由三合一（分类，标签，随笔）
    # 分组分出三个，（用户名，category|tag|archive中的一个，可能是分类id  tagid或者时间）
    url(r'^(?P<username>[\w]+)/(?P<condition>category|tag|archive)/(?P<param>.*)', views.user_blog),
    url(r'^(?P<username>[\w]+)/article/(?P<id>\d+)', views.article_detail),

    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)/$', views.user_blog),
]

def update_article(request,pk):
    if request.method == 'GET':
        article = models.Article.objects.get(pk=pk)
        return render(request,'back/update_article.html',{'article':article})

{% extends 'back/backbase.html' %}
{% block home %}
              <table class="table table-hover table-striped">
                            <thead>
                            <tr>
                                <th>文章标题</th>
                                <th>发布时间</th>
                                <th>评论数</th>
                                <th>点赞数</th>
                                <th>修改</th>
                                <th>删除</th>
                            </tr>
                            </thead>
                            <tbody>

                            {% for article in article_list %}
                                <tr>
                                    <td>
                                        <a href="/{{ article.blog.userinfo.username }}/article/{{ article.pk }}">{{ article.title }}</a>
                                    </td>
                                    <td>{{ article.create_time|date:'Y-m-d H:i:s' }}</td>
                                    <td>{{ article.commit_num }}</td>
                                    <td>{{ article.up_num }}</td>
                                    <td><a href="/update_article/{{ article.pk }}">修改</a></td>
                                    <td><a href="">删除</a></td>
                                </tr>
                            {% endfor %}

                            </tbody>
                        </table>
{% endblock %}

{% extends 'back/backbase.html' %}

{% block home %}
    <div>
        <p>修改文章</p>
        <form action="/add_article/" method="post">
            {% csrf_token %}
            <div>
                <p>标题</p>
                <p><input type="text" name="title" class="form-control" value="{{ article.title }}"></p>
                <p>内容(KindEditor编辑器，不支持拖放/粘贴上传图片)</p>
                <p>
                    <textarea id="editor_id" name="content" rows="10" value="{{ article.content|safe }}"></textarea>
                </p>
                <input type="submit" class="btn btn-danger" value="发表">
            </div>
        </form>
    </div>
    <script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id', {
                width: '100%',
                height: '600px',
                resizeType: 0,
                uploadJson: '/upload_img/', // 需要添加一个路由
                extraFileUploadParams:{
                    'csrfmiddlewaretoken':'{{ csrf_token }}'
                },
                filePostName:'myfile',
            });
        });
    </script>
{% endblock %}

{% extends 'back/back_base.html' %}

{% block home %}


    <div>
        <p>修改文章</p>
        <form action="/add_article/" method="post">
            {% csrf_token %}

            <p>标题</p>
            <p><input type="text" name="title" class="form-control" id="title" article_id="{{ article_id }}"></p>
            <p>内容(KindEdit编辑器，不支持拖放/粘贴上传图片)</p>
            <p>
             <textarea name="content" id="editor_id" cols="30" rows="10">


                </textarea>

            </p>
            <input type="submit" class="btn btn-danger" value="提交">


        </form>
    </div>



    <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
    <script>

        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id', {
                width: '100%',
                height: '500px',
                //item 控制要显示的控件
                //控制控件不能拖动
                resizeType: 0,
                //上传图片,uploadJson 指的是上传的路径,也就是咱们的路由
                uploadJson: '/upload_img/',
                //添加一些额外的参数
                extraFileUploadParams: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'article_id': '1'
                },
                //修改默认上传文件的名字
                filePostName: 'myfile'

            })

        });

        //当页面加载完成以后,发ajax请求,拿回文章数据

        //jquery 的页面加载完成

        $(function () {
            var id = $("#title").attr('article_id')
            $.ajax({
                url: '/get_article/' + '{{ article_id }}',
                type: 'get',
                success: function (data) {
                    console.log(data)
                    $("#title").val(data.title)
                    // 设置HTML内容
                    window.editor.html(data.content);

                }

            })
        })
        /*
        window.onload = function () {
            //拿到我隐藏的id
            var id = $("#title").attr('article_id')
            $.ajax({
                url: '/get_article/' + '{{ article_id }}',
                type: 'get',
                success: function (data) {
                    console.log(data)
                    $("#title").val(data.title)
                    // 设置HTML内容
                    window.editor.html(data.content);

                }

            })

        }
        */
    </script>
{% endblock %}

def update_article(request,pk):
    if request.method=='GET':
        return render(request,'back/update_article.html',{'article_id':pk})

def get_article(request,pk):
    article=models.Article.objects.get(pk=pk)

    return JsonResponse({'title':article.title,'content':article.content})

from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from bbs import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^get_valid_code/$', views.get_valid_code),
    url(r'^register/$', views.register),
    url(r'^check_username/$', views.check_username),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.logout),
    ##  有名分组
    # 1.url第一个参数，正则表达式
    # 2.第二个参数，函数的内存地址
    # 3.第三个参数，字典，它会以关键字参数的形式传到(第二个参数)
    # 4.当从浏览器输入media/后面的路径会去settings.MEDIA_ROOT这个变量对应的文件夹下面去找对应的图片
    url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    ## 个人站点分类过路由
    # url(r'^(?P<username>[\w]+)/category/(?P<category_id>\d+)', views.user_blog),
    ## 个人站点标签过滤路由
    # url(r'^(?P<username>[\w]+)/tag/(?P<tag>\d+)', views.user_blog),

    # 点赞的路由
    url(r'^diggit/$', views.diggit),
    # p评论的路由
    url(r'^commit_content/$', views.commit_content),
    url(r'^backend/', views.backend),
    url(r'^add_article/', views.add_article),
    # 富文本编辑器上床图片
    url(r'^upload_img/', views.upload_img),
    ## 修改头像
    url(r'^update_head/', views.update_head),

    # 修改文章
    url(r'^update_article/(?P<pk>\d+)', views.update_article),
    # ajax获取文件的口
    url(r'^get_article/(?P<pk>\d+)', views.get_article),

    ## 路由三合一（分类，标签，随笔）
    # 分组分出三个，（用户名，category|tag|archive中的一个，可能是分类id  tagid或者时间）
    url(r'^(?P<username>[\w]+)/(?P<condition>category|tag|archive)/(?P<param>.*)', views.user_blog),
    url(r'^(?P<username>[\w]+)/article/(?P<id>\d+)', views.article_detail),

    # 放到最后,都匹配完成,没有匹配到,再匹配它
    url(r'^(?P<username>[\w]+)/$', views.user_blog),
]