Python Django模块

Django模块，是针对有django基础，对django功能进行模块化，方便下次使用。

一、注册模块

该注册采用邮箱验证，注册成功后会发送激活链接到邮箱。

1.数据库设计

from django.db import models

# Create your models here.

class UserInfo(models.Model):

     status_choices = (

          (0, '未激活'),

          (1, '激活'),

     )

     username = models.CharField(verbose_name='用户名',max_length=32,db_index=True)    # db_index = True 创建索引

     email = models.EmailField(verbose_name="邮箱",max_length=32)

     mobile_phone = models.CharField(verbose_name="手机号",max_length=11)

     password = models.CharField(verbose_name="密码",max_length=32)

     status = models.SmallIntegerField(verbose_name='账户激活状态', default=0, choices=status_choices)

     def __str__(self):

         return self.username

2.配置url

urlpatterns = [

    # 注册模块

    url(r'^index/$', index.index,name='index'),

    # 图片验证码

    url(r'^image/code/$', index.image_code, name='image_code'),

    # 邮箱验证

    url(r'^active/(?P<token>.*)$', index.activation,name='active'),

]

3.form组件设计

通过form主键生成HTML 的 Form标签

from django import forms

from django.core.validators import RegexValidator

from django.core.exceptions import ValidationError

from app01 import models

from utils import encrypt # md5加密模块（对密码进行加密）

class RegisterForm(forms.ModelForm):

    password = forms.CharField(

        label='密码',

        widget=forms.PasswordInput(),

        min_length=8,

        max_length=32,

        error_messages={

            'min_length':"密码长度不能小于8个字符",

            'max_length':"密码长度不能大于32个字符"

        }

    )

    confirm_password = forms.CharField(

        label='确认密码',

        widget=forms.PasswordInput(),

        min_length=8,

        max_length=32,

        error_messages={

            'min_length':"密码长度不能小于8个字符",

            'max_length':"密码长度不能大于32个字符"

        }

    )

    mobile_phone = forms.CharField(

        label="手机号",

        validators=[

            RegexValidator(r'^1[3-9]\d{9}','手机号格式不正确')

        ]

    )

    code = forms.CharField(label='图片验证码', widget=forms.TextInput())

    class Meta:

        model = models.UserInfo

        fields = [

            'username',

            'mobile_phone',

            'email',

            'password',

            'confirm_password',

            'code'

        ]

    def __init__(self,request,*args,**kwargs):

        super().__init__(*args,**kwargs)

        self.request = request

        for name,field in self.fields.items():

            field.widget.attrs['class'] = 'form-control'

            field.widget.attrs['placeholder'] = '请输入%s' % (field.label,)

    """

    验证规则

    通过钩子对提交的数据进行验证

    """

    def clean_code(self):

        """钩子 图片验证码"""

        # 读取用户输入的验证码

        code = self.cleaned_data['code']

        # 在session获取图片验证码

        session_code = self.request.session.get('image_code')

        if not session_code:

            raise ValidationError("验证码已过期，请重新获取")

        if code.upper().strip() != session_code.upper().strip():    # upper()小写

            raise ValidationError("验证码输入错误")

        return code

    def clean_username(self):

        """用户名验证"""

        username = self.cleaned_data['username']

        exists = models.UserInfo.objects.filter(username=username).exists()

        if exists:

            raise ValidationError('用户名已存在')

        return username

    def clean_email(self):

        """邮箱验证"""

        email = self.cleaned_data['email']

        exists = models.UserInfo.objects.filter(email=email).exists()

        if exists:

            raise ValidationError('邮箱已存在')

        return email

    def clean_password(self):

   		"""返回加密后的密码"""

        pwd = self.cleaned_data['password']

        return encrypt.md5(pwd)

    def clean_confirm_password(self):

        """确认密码验证"""

        pwd = self.cleaned_data['password']

        confirm_pwd = encrypt.md5(self.cleaned_data['confirm_password'])

        if pwd != confirm_pwd:

            raise ValidationError('两次密码不一致')

        return confirm_pwd

    def clean_mobile_phone(self):

        """手机号验证码"""

        mobile_phone = self.cleaned_data['mobile_phone']

        exists = models.UserInfo.objects.filter(mobile_phone=mobile_phone).exists()

        if exists:

            raise ValidationError('手机号已存在')

        return mobile_phone

4.视图函数

from django.shortcuts import render,HttpResponse

from django.http import JsonResponse

from django.core.mail import send_mail

from itsdangerous import TimedJSONWebSignatureSerializer as Serializer

from itsdangerous import SignatureExpired

from django.conf import settings

from app01.forms.account import RegisterForm # form组件

from app01 import models

def index(request):

	""" 注册 """

    if request.method == "GET":

        form = RegisterForm(request)

        return render(request,'register.html',{'form':form,'title':'注册','data':{'href':'/login','pageName':'登录'}})

    form = RegisterForm(request,data=request.POST)

    if form.is_valid():

        instance = form.save()

        # 发送激活邮件，包含激活链接：http://127.0.0.1:8000/user/active/1

        # 激活链接包含用户的身份信息 并且身份信息进行加密

        # 加密用户的身份信息，生成激活token

        serializer = Serializer(settings.SECRET_KEY, 3600)

        info = {'confirm': instance.id}

        token = serializer.dumps(info)  # 加密 bytes

        token = token.decode('utf-8')  # bytes转为字符串

        # 发邮件(同步发送 延迟会阻塞)

        subject = '注册信息'

        message = ''

        sender = settings.EMAIL_FROM  # 发件人

        receiver = [instance.email]  # 收件人列表

        html_message = '<h1>欢迎您注册</h1>请点击下面链接激活您的用户<br><a href="http://127.0.0.1:8000/active/%s">http://127.0.0.1:8000/active/%s</a>' % (

        token, token)

        send_mail(subject, message, sender, receiver, html_message=html_message)

        return JsonResponse({'status': True, 'data': "邮件发送成功，请注意接收"})

    return JsonResponse({'status': False, 'error': form.errors})

def image_code(request):

    """生成图片验证码"""

    from io import BytesIO

    from utils.image_code import check_code # 生成图片验证码

    img_obj, code = check_code()	# 返回图片对象，验证码

    request.session['image_code'] = code

    request.session.set_expiry(60)  # 主动修改session的值过期时间为60秒

    """ 将图片内容写到内存中 """

    stream = BytesIO()

    img_obj.save(stream, 'png')

    return HttpResponse(stream.getvalue())

def activation(request,token):

    """进行用户激活"""

    # 进行解密，获取要激活的用户信息

    serializer = Serializer(settings.SECRET_KEY, 3600)

    try:

        info = serializer.loads(token)  # 解密

        # 获取待激活用户的id

        user_id = info['confirm']

        # 根据id获取用户信息

        user = models.UserInfo.objects.get(id=user_id)

        user.status = 1

        user.save()

        # 跳转到登录页面

        return HttpResponse('邮箱激活成功')

    except SignatureExpired as e:  # 邮箱激活异常

        # 激活链接已过期

        return HttpResponse('激活链接已过期')

5.前端代码

{% extends 'navigation/navigation.html' %}

{% block css %}

    <style>

        .account {

            width: 400px;

            margin-top: 30px;

            margin-left: auto;

            margin-right: auto;

            border: 1px solid #f0f0f0;

            padding: 10px 30px 30px 30px;

        }

        h1 {

            text-align: center;

        }

        .error-msg{

            font-size: 10px;

            color: #721c24;

        }

    </style>

{% endblock %}

{% block content %}

    <div class="account">

        <h1>{{ title }}</h1>

        <form id="regForm" method="post" novalidate>

            {% csrf_token %}

            {% for field in form %}

                {% if field.name == 'code' %}

                    <div class="form-group">

                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>

                        <div class="row">

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

                                {{ field }}

                                <span class="error-msg">{{ field.errors.0 }}</span>

                            </div>

                            <div class="col-xs-5">

                                <img src="{% url 'image_code' %}" alt="" id="imageCode" title="看不清，点击更换图片">

                            </div>

                        </div>

                    </div>

                {% else %}

                    <div class="form-group">

                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>

                        {{ field }}

                        <span class="error-msg">    </span>

                    </div>

                {% endif %}

            {% endfor %}

            <div>

                <div style="float: right">

                    <a href="{{ data.href }}">{{ data.pageName }}？</a>

                </div>

            </div>

            <div class="row">

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

                    <input id="btnSubmit" type="button" class="btn btn-primary" value="{{ title }}"/>

                </div>

            </div>

        </form>

    </div>

{% endblock %}

{% block js %}

    <script>

        $(function () {

            bindClickImage();

            bindClickSubmit()

        });

        /*

        点击获取验证码的按钮绑定事件

        */

        function bindClickImage() {

            $('#imageCode').click(function () {

                var oldSrc = $(this).attr('src');

                $(this).attr('src', oldSrc + '?')

            })

        }

        /*

        * 注册

        * */

        function bindClickSubmit(){

            $('.error-msg').empty();

            $('#btnSubmit').click(function () {

                $.ajax({

                    url:'{% url 'index' %}',

                    type:'POST',

                    data:$("#regForm").serialize(),

                    success:function (res) {

                        if (res.status){

                            location.href = {% url 'issues' %};

                        }else {

                            $.each(res.error, function (key, value) {

                                $("#id_" + key).next().text(value[0]);

                            })

                        }

                    }

                })

            })

        }

    </script>

{% endblock %}

二、登录模块

1.配置url

urlpatterns = [

    # 登录模块

    url(r'^login/$', login.login, name='login'),

]

2.form组件设计

from django import forms

from django.core.exceptions import ValidationError

from app01 import models

from utils import encrypt # MD5加密模块

class LoginForm(forms.ModelForm):

    password = forms.CharField(

        label="密码",

        widget=forms.PasswordInput(),

        min_length=8,

        max_length=32,

        error_messages={

            'min_length': "密码长度不能小于8个字符",

            'max_length': "密码长度不能大于32个字符"

        }

    )

    username = forms.CharField(label='邮箱或手机号')

    code = forms.CharField(label='图片验证码')

    class Meta:

        model = models.UserInfo

        fields = [

            'username',

            'password',

            'code'

        ]

    def __init__(self,request,*args,**kwargs):

        super().__init__(*args,**kwargs)

        self.request = request

        for name,field in self.fields.items():

            field.widget.attrs['class'] = 'form-control'

            field.widget.attrs['placeholder'] = '请输入%s' % (field.label,)

    def clean_password(self):

        """ 密码校验钩子，返回加密后的密码 """

        pwd = self.cleaned_data['password']

        return encrypt.md5(pwd)

    def clean_code(self):

        """图片验证码校验钩子"""

        code = self.cleaned_data['code']

        session_code =self.request.session.get('image_code')

        if not session_code:

            raise ValidationError("验证码已过期，请重新获取")

        if code.upper().strip() != session_code.upper().strip():

            raise ValidationError("验证码输入错误")

        return code

3.视图模块

from app01.forms.login import LoginForm

from app01 import models

from django.shortcuts import HttpResponse,render

from django.http import JsonResponse

def login(request):

    if request.method == 'GET':

        form = LoginForm(request)

        return render(request,'register.html',{'form':form,'title':'登录','data':{'href':'/index','pageName':'注册'}})

    form = LoginForm(request,data=request.POST)

    if form.is_valid():

        username = form.cleaned_data['username']

        pwd = form.cleaned_data['password']

        from django.db.models import Q

        user_object = models.UserInfo.objects.filter(Q(email=username) | Q(mobile_phone=username)).filter(password = pwd).first()

        if user_object:

            if user_object.status:

                request.session['username'] =user_object.username

                request.session['user_id'] = user_object.id

                request.session.set_expiry(60 * 60 * 24 * 7)

                return JsonResponse({'status': True, 'data': '登录成功'})

            else:

                form.add_error('username', '用户名未激活')

                return JsonResponse({'status': False, 'error': form.errors})

        form.add_error('username','用户名或密码错误')

    return JsonResponse({'status': False, 'error': form.errors})

4.前端代码

前端代码与注册模块的前端代码相同，只是ajax的请求路径改为登录的请求路径即可。

三、问题模块及评论

1.登录中间件

登录中间件用于判断用户是否登录，已经设置访问白名单，用于处理不用登录就能访问的页面。

在settings.py文件设置白名单

# 登陆白名单：无需登陆可以访问的页面

WHITE_REGEX_URL_LIST = [

    "/login/",

    "/image/code/",

    "/index/",

    "/active/",

]

在中间件文件夹创建auth.py 文件存储登录中间件代码

from django.utils.deprecation import MiddlewareMixin

from django.shortcuts import redirect

from django.conf import settings

from app01 import models

import datetime

class Tracer(object):

    def __init__(self):

        self.user = None

class AuthMiddleware(MiddlewareMixin):

    def process_request(self, request):

        request.tracer = Tracer()

        """用户已登陆，则request中赋值"""

        user_id = request.session.get('user_id', 0)

        user_obj = models.UserInfo.objects.filter(id=user_id).first()

        request.tracer.user = user_obj

        # 白名单：没有登陆可以访问的页面

        """

        1. 获取当前用户访问的URL

        2. 检查URL是否在白名单中，如果不在，判断是否登录，没有登陆跳转到登录页面

        """

        if request.path_info in settings.WHITE_REGEX_URL_LIST:

            return

        # 检测用户是否登录，已登录继续往下执行，未登陆返回登陆页面

        if not request.tracer.user:

            return redirect('login')

在settings.py中开启中间件

MIDDLEWARE = [

	....

    'app01.middleware.auth.AuthMiddleware'

]

2.数据库设置

from django.db import models

class Issues(models.Model):

    """ 问题 """

     subject = models.CharField(verbose_name="主题", max_length=32)

     desc = models.TextField(verbose_name="问题描述")

     creator = models.ForeignKey(verbose_name='创建者', to="UserInfo", related_name='create_problems')

     reply_num = models.IntegerField(verbose_name='回复人数',default=0)

     create_datetime = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)

class Discuss(models.Model):

     """ 讨论 """

     issues = models.ForeignKey(verbose_name='问题', to='Issues')

     content = models.TextField(verbose_name="内容")

     creator = models.ForeignKey(verbose_name="创建者",to="UserInfo",related_name="create_discuss")

     create_datetime = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)

     reply = models.ForeignKey(verbose_name='回复',to='self',null=True,blank=True)

3.配置url

urlpatterns = [

	....

    # 评论模块

    url(r'^issues/$',discuss.issues,name='issues'),

    url(r'^issues/discuss_page/(?P<issues_id>\d+)$',discuss.discuss_page,name='discuss_page'),

    url(r'^issues/discuss/(?P<issues_id>\d+)$',discuss.discuss,name='discuss')

]

3.form组件设计

from django import forms

from app01 import models

class IssuesModelForm(forms.ModelForm):

    """问题form组件"""

    class Meta:

        model = models.Issues

        fields = ['subject', 'desc']

    def __init__(self,request,*args,**kwargs):

        super().__init__(*args,**kwargs)

        self.request = request

        for name,field in self.fields.items():

            field.widget.attrs['class'] = 'form-control'

            field.widget.attrs['placeholder'] = '请输入%s' % (field.label,)

class DiscussModelForm(forms.ModelForm):

    """评论form组件"""

    class Meta:

        model = models.Discuss

        fields = ['content','reply']

4.视图函数

from django.shortcuts import render

from django.http import JsonResponse

from django.views.decorators.csrf import csrf_exempt

from app01.forms.issues import IssuesModelForm,DiscussModelForm

from app01 import models

def issues(request):

    """问题模块"""

    if request.method == "GET":

        form = IssuesModelForm(request)

        issues_obj_list = models.Issues.objects.filter()

        print(issues_obj_list)

        context = {

            'form':form,

            'issues_obj_list': issues_obj_list,

        }

        return render(request,'issues.html',context)

    form = IssuesModelForm(request,data=request.POST)

    if form.is_valid():

        form.instance.creator = request.tracer.user

        form.save()

        return JsonResponse({'status':True})

    return JsonResponse({'status': False, 'error': form.errors})

def discuss(request,issues_id):

    """评论内容获取"""

    reply_list = models.Discuss.objects.filter(issues_id=issues_id)

    data_list = []

    for item in reply_list:

        data = {

            'id':item.id,

            'content':item.content,

            'creator':item.creator.username,

            'datetime': item.create_datetime.strftime('%Y-%m-%m %H:%M'),

            'parent_id': item.reply_id,

        }

        data_list.append(data)

    return JsonResponse({'status':True,'data':data_list})

# 前端采用ajax请求没有form表单，采用csrf_exempt解决请求跨域问题

@csrf_exempt

def discuss_page(request,issues_id):

    """评论模块"""

    if request.method == 'GET':

        issues_obj = models.Issues.objects.filter(id=issues_id).first()

        return render(request,'discuss.html',{'issues_obj':issues_obj})

    form = DiscussModelForm(data=request.POST)

    if form.is_valid():

        form.instance.issues_id = issues_id

        form.instance.creator = request.tracer.user

        instance = form.save()

        data = {

            'id': instance.id,

            'content': instance.content,

            'creator': instance.creator.username,

            'datetime': instance.create_datetime.strftime('%Y-%m-%m %H:%M'),

            'parent_id': instance.reply_id,

        }

        issues_obj = models.Issues.objects.get(id=issues_id)

        issues_obj.reply_num += 1

        issues_obj.save()

        return JsonResponse({'status':True,'data':data})

    return JsonResponse({'status': False, 'error': form.errors})

5.前端代码

问题页面

{% extends 'navigation/navigation.html' %}

{% load static %}

{% block css %}

    <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">

    <style>

        .panel-default .card-header {

            display: flex;

            flex-direction: row;

            justify-content: space-between;

        }

        .error-msg {

            font-size: 10px;

            color: #721c24;

        }

        .comment-footer {

            display: -webkit-box;

            display: -ms-flexbox;

            display: flex;

            -webkit-box-pack: justify;

            -ms-flex-pack: justify;

            justify-content: space-between;

            -webkit-box-align: center;

            -ms-flex-align: center;

            align-items: center;

            margin-top: 20px;

        }

        .comment-footer span {

            display: block;

            font-size: 14px;

            color: #989898;

            margin-top: 0;

        }

        .comment-reply-link {

            padding: 6px 22px;

            font-size: 13px;

            border: 1px solid #dddddd;

            line-height: normal;

            font-weight: 500;

            display: inline-block;

            background-color: transparent;

            border-radius: 30px;

            color: black;

            -webkit-transition: all 0.35s ease-in-out;

            transition: all 0.35s ease-in-out;

        }

    </style>

{% endblock %}

{% block content %}

    <div class="container-fluid clearfix" style="padding: 20px 0;">

        <div class="col-sm-12">

            <div class="card panel-default">

                <div class="card-header">

                    <div>

                        问题

                    </div>

                    <div>

                        <a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addModal"

                           style="color: white">

                            <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建问题</a>

                    </div>

                </div>

                <table class="table">

                    <tbody class="issues-list">

                    {% for item in issues_obj_list %}

                        <ul class="list-unstyled">

                            <li class="media my-4" style="padding: 0 20px">

                                <div class="media-body">

                                    <h5 class="mt-0 mb-1">{{ item.subject }}</h5>

                                    <p style="padding: 0 10px"> {{ item.desc }}</p>

                                    <div class="comment-footer">

                                        <span class="date">{{ item.create_datetime }}</span>

                                        <a href="{% url 'discuss_page' issues_id=item.id %}" class="comment-reply-link">回复{{ item.reply_num }}</a>

                                    </div>

                                </div>

                            </li>

                        </ul>

                    {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModal" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel">发布问题</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body">

                    <form id="addForm" class="form-horizontal">

                        {% csrf_token %}

                        {% for item in form %}

                            <div class="form-group">

                            <label for="message-text" class="col-form-label">{{ item.label }}:</label>

                            {{ item }}

                            <span class="error-msg"></span>

                        {% endfor %}

                        </div>

                    </form>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                    <button type="button" class="btn btn-primary" id="btnAddSubmit">发布</button>

                </div>

            </div>

        </div>

    </div>

{% endblock %}

{% block js %}

    <script>

        var POST_ISSUES = "{% url 'issues' %}";

        $(function () {

            bindAddSubmit();

        });

        function bindAddSubmit() {

            $('#btnAddSubmit').click(function () {

                $('#addForm').find('.error-msg').empty();

                $.ajax({

                    url: POST_ISSUES,

                    type: "POST",

                    data: $('#addForm').serialize(),

                    dataType: "JSON",

                    success: function (res) {

                        if (res.status) {

                            location.href = location.href;

                        } else {

                            $.each(res.error, function (key, value) {

                                $("#id_" + key).next().text(value[0]);

                            })

                        }

                    }

                })

            });

        }

    </script>

{% endblock %}

评论页面

{% extends 'navigation/navigation.html' %}

{% block css %}

    <style>

        .comment-area .item {

            margin-top: 20px;

        }

        .comment-area .left-avatar {

            float: left;

            margin-right: 10px;

            display: inline-block;

            width: 30px;

            height: 30px;

            background-color: #304659;

            color: white;

            text-align: center;

            line-height: 30px;

            border-radius: 50%;

        }

        .comment-area .right-info {

            padding-left: 35px;

        }

        .comment-area .right-info .desc .msg {

            display: inline-block;

            padding-right: 20px;

            color: #8c8c8c;

        }

        .comment-area .child {

            padding-left: 55px;

        }

        .comment-area .error-msg {

            color: red;

        }

        .comment-area .reply-user {

            display: inline-block;

            background-color: #ddd;

            color: black;

            padding: 6px 8px;

            margin-left: 20px;

            border-radius: 8px;

            cursor: pointer;

        }

        .editormd-fullscreen {

            z-index: 1001;

        }

        pre {

            display: block;

            padding: 9.5px;

            margin: 0 0 10px;

            font-size: 13px;

            line-height: 1.42857143;

            color: #333;

            word-break: break-all;

            word-wrap: break-word;

            background-color: #f5f5f5;

            border: 1px solid #ccc;

            border-radius: 4px;

        }

    </style>

{% endblock %}

{% block content %}

    <div class="container-fluid clearfix" style="padding: 20px 0;">

        <div class="col-sm-12">

            <div class="card panel-default">

                <div class="card-header">

                    <i class="fa fa-search" aria-hidden="true"></i> 讨论

                </div>

                <div class="card-body comment-area">

                    <div class="comment-list">

                    </div>

                    <hr/>

                    <div class="comment-text" id="commentText">

                        <div class="form-group">

                            <textarea id="content" rows="6" class="form-control" placeholder="请输入回复内容"></textarea>

                            <span class="error-msg"></span>

                        </div>

                        <input type="button" class="btn btn-primary" id="btnSubmit" value="提 交">

                        <div class="reply-user d-none" id="replyUser">

                            回复 <span></span>

                            <i class="fa fa-times-circle" aria-hidden="true" style="color: #9d9d9d;"></i>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="d-none" id="recordTemplate">

        <div class="item clearfix">

            <div class="left-avatar"></div>

            <div class="right-info">

                <pre></pre>

                <div class="desc">

                    <div class="msg">

                        <i class="fa fa-bullhorn" aria-hidden="true"></i>

                        <span class="type"></span>

                    </div>

                    <div class="msg">

                        <i class="fa fa-user-o" aria-hidden="true"></i>

                        <span class="user"></span>

                    </div>

                    <div class="msg">

                        <i class="fa fa-clock-o" aria-hidden="true"></i>

                        <span class="date"></span>

                    </div>

                    <a href="#commentText" class="reply">

                        <i class="fa fa-commenting-o" aria-hidden="true"></i> 回复

                    </a>

                </div>

            </div>

            <div class="child">

            </div>

        </div>

    </div>

{% endblock %}

{% block js %}

    <script>

        var ISSUES_RECORD_URL = '{% url 'discuss' issues_id=issues_obj.id %}';

        var ISSUES_URL = '{% url 'discuss_page' issues_id=issues_obj.id %}';

        $(function () {

            bindSubmit();

            initIssuesRecord();

            bindReply();

            bindCancelReplyUser();

        });

        /*

         问题评论的初始化

         */

        function initIssuesRecord() {

            $.ajax({

                url: ISSUES_RECORD_URL,

                type: "GET",

                dataType: "JSON",

                success: function (res) {

                    if (res.status) {

                        console.log(res.data);

                        $.each(res.data, function (index, item) {

                            createRecordNode(item);

                        })

                    } else {

                    }

                }

            })

        }

        /*

        创建操作记录节点

         */

        function createRecordNode(nodeDict) { //nodeDict后端发过来的数据

            var $item = $("#recordTemplate").find('.item').clone();

            $item.find('.left-avatar').html(nodeDict.creator[0].toUpperCase());

            $item.find('pre').html(nodeDict.content);

            $item.find('.user').html(nodeDict.creator);

            $item.find('.date').html(nodeDict.datetime);

            $item.attr({id: nodeDict.id, username: nodeDict.creator});

            if (nodeDict.parent_id) {

                // 挂在谁下

                $('#' + nodeDict.parent_id).children('.child').append($item);

            } else {

                // 根下

                $('.comment-list').append($item);

            }

        }

        /*

        回复问题

         */

        function bindReply() {

            $('.comment-list').on('click', '.reply', function () {

                var $item = $(this).parent().parent().parent();

                var id = $item.attr('id');

                var username = $item.attr('username');

                $('#replyUser').removeClass('d-none').attr('parent-id', id).children('span').text(username);

            })

        }

        /*

        取消回复

         */

        function bindCancelReplyUser() {

            $('#replyUser').click(function () {

                $(this).addClass('d-none').removeClass('parent-id').children('span').text();

            })

        }

        /*

        点击评论

         */

        function bindSubmit() {

            $('#btnSubmit').click(function () {

                $('#commentText .error-msg').text("");

                $.ajax({

                    url: ISSUES_URL,

                    type: 'POST',

                    data: {content: $('#content').val(), reply: $('#replyUser').attr('parent-id')},

                    dataType: "JSON",

                    success: function (res) {

                        if (res.status) {

                            createRecordNode(res.data);

                            //输入框清空

                            $('#content').val('');

                            $('#replyUser').addClass('d-none').removeAttr('parent-id').children('span').text("")

                        } else {

                            $.each(res.error, function (key, value) {

                                $('#content').next('.error-msg').text(value[0])

                            })

                        }

                    }

                })

            })

        }

    </script>

{% endblock %}

巴特西

Python Django 功能模块

Python Django模块

一、注册模块

1.数据库设计

2.配置url

3.form组件设计

4.视图函数

5.前端代码

二、登录模块

1.配置url

2.form组件设计

3.视图模块

4.前端代码

三、问题模块及评论

1.登录中间件

2.数据库设置

3.配置url

3.form组件设计

4.视图函数

5.前端代码

问题页面

评论页面

最新文章

热门文章