實戰之BBS(仿博客園寫一個論壇)（一）

時間 2019-11-10

標籤實戰 bbs 博客一個論壇简体版

原文原文鏈接

須要知識：python，Django框架，前端HTML，CSS，JS，JQuery，Bootstarp，Django的ORM，Authjavascript

一.數據庫表的分析：

1.首先是用戶表，用戶表繼承Django自帶的Auth_user表，目的是能夠使用Django封裝好的方法，不用本身手動寫cookie和session操做，還能夠自定義添加字段css

2.我的站點表，和用戶是一對一的關係，每一個用戶都有一個站點(不要臉的打廣告)html

3.文章表，字段有標題和內容，而且還應該有文章的分類和標籤，文章只能有一個分類，好比說這篇文章是Python，那篇是前端，可是一個文章能夠有多個標籤，因此應該還有文章分類表（和文章表是一對多的關係），文章標籤表（和文章表是一對多的關係）前端

4.文章分類表java

5.文章標籤表python

6.評論表，和用戶是一對一的關係jquery

7.論壇怎麼能沒有點贊評論，因此加一個點贊點踩表，一個用戶一篇文章只能點一次贊或點一次踩，因此是一對多關係ajax

畫個圖:sql

二.表的創建

由於懶，因此直接使用Django自帶的sqllite數據庫數據庫

from django.db import models
#導入AbstractUser類，繼承以後，Django自帶的Auth_user就被替換了
from django.contrib.auth.models import AbstractUser
# Create your models here.
class UserInfo(AbstractUser):
   #自定義字段
    phone=models.BigIntegerField(null=True)
    create_time=models.DateField(auto_now_add=True)
   #用戶上傳頭像，upload_to是頭像保存的位置，default是用戶默認的頭像   avatar=models.FileField(upload_to='avatar/',default='avatar/default.jpg')
    # 關聯我的頁表
    blog=models.OneToOneField(to='Blog',null=True)
class Blog(models.Model):
    site_name=models.CharField(max_length=32)
    site_tittle=models.CharField(max_length=32)
    theme=models.CharField(max_length=32)

class Category(models.Model):
    name = models.CharField(max_length=32)
   #關聯外鍵
    blog = models.ForeignKey(to='Blog')


class Tag(models.Model):
    name = models.CharField(max_length=32)
   #關聯外鍵
    blog = models.ForeignKey(to='Blog')


class Article(models.Model):
    title = models.CharField(max_length=32)
    desc = models.CharField(max_length=256)
    # 存大段文本
    content = models.TextField()
    create_time = models.DateField(auto_now_add=True)
    # 文章的評論數,點贊數,點踩數，雖然有評論表，點贊表，點踩表，可是每次獲取數據都是一次查詢，速度會很慢，因此直接在文章表裏添加
    comment_num = models.IntegerField(default=0)
    up_num = models.IntegerField(default=0)
    down_num = models.IntegerField(default=0)

    blog = models.ForeignKey(to='Blog',null=True)
    category = models.ForeignKey(to='Category',null=True)
    #半自動建立中間表，這樣咱們就能夠自定義中間表的字段啦
    tags = models.ManyToManyField(to='Tag',through='Article2Tag',through_fields=('article','tag'))

#中間表
class Article2Tag(models.Model):
    article = models.ForeignKey(to='Article')
    tag = models.ForeignKey(to='Tag')

class UpAndDown(models.Model):
    user = models.ForeignKey(to='UserInfo')
    article = models.ForeignKey(to='Article')
    is_up = models.BooleanField()


class Comment(models.Model):
    user = models.ForeignKey(to='UserInfo')
    article = models.ForeignKey(to='Article')
    content = models.CharField(max_length=128)
   #本身是本身的外鍵，回覆若是有其餘回覆，那麼他的parent就是第一個樓層，不然默認是null
    parent = models.ForeignKey(to='self',null=True)

建表語句

還要在setting文件裏：添加你繼承AbstractUser的表名

AUTH_USER_MODEL='app01.UserInfo'

建表語句完成，makemigrations，migrate

數據庫完成

三.註冊頁面

完成效果圖：

第一步：forms類的搭建

上篇隨便寫了，我就不囉嗦了。。。（懶）

from django import forms
from app01 import models
from django.forms import widgets
class RegForm(forms.Form):
    username=forms.CharField(max_length='8',min_length=3,label='用戶名',error_messages={
        'max_length':'最長爲8位',
        'min_length':'最短爲3位',
        'required':'用戶名不能爲空'
    },widget=widgets.TextInput(attrs={'class':'form-control'}))
    password = forms.CharField(max_length='8', min_length=3, label='密碼', error_messages={
        'max_length': '密碼最長爲8位',
        'min_length': '密碼最短爲3位',
        'required': '密碼不能爲空'
    }, widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    re_password = forms.CharField(max_length='8', min_length=3, label='重複密碼', error_messages={
        'max_length': '密碼最長爲8位',
        'min_length': '密碼最短爲3位',
        'required': '密碼不能爲空'
    }, widget=widgets.PasswordInput(attrs={'class': 'form-control'}))
    email = forms.EmailField(label='郵箱', error_messages={
        'required': '郵箱不能爲空',
        'invalid':'郵箱格式錯誤'
    }, widget=widgets.EmailInput(attrs={'class': 'form-control'}))
    def clean_username(self):
        username=self.cleaned_data.get('username')
        user_obj=models.UserInfo.objects.filter(username=username)
        if user_obj:
            self.add_error('username','用戶名已經存在')
        else:
            return username
    def clean(self):
        password=self.cleaned_data.get('password')
        re_password=self.cleaned_data.get('re_password')
        if password==re_password:
            return self.cleaned_data
        else:
            self.add_error('re_password','兩次密碼不一致')

第二步：前端頁面的搭建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--類是Bootstarp提供的類，可讓頁面變得美觀，不用也不要緊-->

<div class="container">
    <div class="row">
        <h1 class="text-center">註冊</h1>
        <div class="col-md-6 col-md-offset-3">
            <form action="" id="myform" method="post">
                <!-- 注意必定要寫 {% csrf_token %}，否則會報403，固然你能夠在中間件中關掉csrf，可是那樣就不能防止csrf跨站僞造了-->
                {% csrf_token %}
                <!--Django的模板語法 form_obj是forms組件對象，請看後端代碼 -->
                {% for foo in form_obj %}
                    <div class="form-group">
                        <p><label for="{{ foo.auto_id }}">{{ foo.label }}</label>{{ foo }}
                     <!--行元素由其自己大小決定，因此當你沒有錯誤的時候，不佔位置 -->
                            <span class="pull-right" style="color: red">
                    </span>
                        </p>
                    </div>
                {% endfor %}
                <div>
                  <!-- label 指向了下面的input標籤，這樣就能夠點擊頭像或者圖片提交圖片了-->
                    <label for="myfile">頭像
                        <img id="img_01" src="/static/default.jpg" alt="" style="width: 80px;margin-left: 50px">
                    </label>
                 <!--我懶，因此直接在標籤內寫了樣式，把本來的標籤隱藏，本來的太醜了 -->
                    <input type="file" id="myfile" style="display: none">
                </div>
               <!-- 注意，這裏type是button，爲下面的ajax作準備，若是是submit，那就直接提交了，會刷新頁面-->
                <input id='mybutton' type="button" value="註冊" class="pull-right btn-primary btn">
            </form>
        </div>
    </div>
</div>
</body>

第三步：後端代碼

def register(request):
   #自定義狀態碼,等會ajax要用到
    respone_code={'code':100,'msg':''}
   #初始化forms組件
    form_obj=myforms.RegForm()

   #渲染註冊頁面，locals()把from_obj,response_code傳到了前端，起碼目前是這樣
    return render(request,'register.html',locals())

固然了，確定不能就這麼點，這是get請求的時候進行的操做，等寫完ajax再回來繼續

第四步:javascript和Ajax

1.首先先把簡單的頭像上傳搞定：

這是初始的默認頭像，如今實現的功能是上傳頭像以後，變成這樣

#這是jq，也能夠用js寫，可是比較麻煩
    #爲input框添加事件，若是改變，那麼。。
    $('#myfile').change(function () {
        #獲取該文件，寫法是固定寫法
        var file = $(this)[0].files[0];
        #要用到文件閱讀，實例化一下
        var read = new FileReader();
        #添加到裏面
        read.readAsDataURL(file);
        #若是不加read.onload，圖片不會顯示，由於讀取速度遠慢於函數執行速度
        read.onload = function () {
             #更改屬性
            $('#img_01').attr('src', read.result);
        }
    });

好了，如今頭像搞定了

如今搞比較困難的ajax異步提交：

 $('#mybutton').click(function () {
 {#實例化一個FormData對象#} var formData = new FormData();
      {#$('#myform').serializeArray()是form表單中的全部數據，自動獲取form表單中全部input框鍵值對，用each循環取出來#}
        $.each($('#myform').serializeArray(), function (index, obj) {
           {#只是添加了普通的鍵值對,文件對象須要你手動添加#}
            formData.append(obj.name,obj.value);
        });
         {#手動添加文件對象#}
        formData.append('myfile', $('#myfile')[0].files[0]);
        {#ajax操做，如今不用看函數#}
        $.ajax({
            url: '',
            type: 'post',
             {#由於有文件，因此要用formData#}
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                if (data.code == 100) {
                    location.href = data.url
                }
                else {
                    $.each(data.msg, function (index, obj) {
                        var tagId = '#id_' + index;
                        $(tagId).next().html(obj[0]).parent().parent().addClass('has-error')

                    })
                }
            }
        })
    });

那麼後端代碼也要寫相應的post請求時的代碼了：

完整後端代碼：

def register(request):
    respone_code={'code':100,'msg':''}
    form_obj=myforms.RegForm()
    if request.method=='POST':
        #Ajax請求，實例化forms組件
        form_obj = myforms.RegForm(request.POST)
       #若是校驗沒有問題
        if form_obj.is_valid():
            cleaned_data=form_obj.cleaned_data
            #數據庫中的userinfo表中沒有re_password因此把這個字段丟掉
            cleaned_data.pop('re_password')
            #看看有沒有新頭像，沒有就不添加，直接使用默認的頭像，減小數據庫的工做量
            atatar=request.FILES.get('myfile')
            if atatar:
                cleaned_data['avatar'] = atatar
            #插入數據
            models.UserInfo.objects.create_user(**cleaned_data)
            #修改respone_code['msg']，而且添加url，若是註冊成功，直接跳到登陸頁面
            respone_code['msg']='註冊成功'
            respone_code['url']='/login'
        else:
            #若是有校驗錯誤，code變爲101，同時msg改成錯誤信息。錯誤信息是一個個的鍵值對
            respone_code['code']=101
            respone_code['msg']=form_obj.errors
        #無論校驗成功與否都返回一個字典
        return JsonResponse(respone_code)
    return render(request,'register.html',locals())

這個時候再來看看ajax的函數：

 success: function (data) {
                if (data.code == 100) {
                  #若是成功，那麼跳轉到url指定的路徑
                    location.href = data.url
                }
                else {
                 # // 手動拼接處forms組件渲染的input的id值     id_字段的特色
                    $.each(data.msg, function (index, obj) {
                        var tagId = '#id_' + index;
                        $(tagId).next().html(obj[0]).parent().parent().addClass('has-error')

                    })

註冊頁面完成

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。