基於django的我的博客網站創建(五)

基於django的我的博客網站創建(五)

前言

網站效果可點擊這裏訪問javascript


以前鴿了兩天,今天繼續再寫點html

主要內容

今天加了個展現照片的功能,就叫他生活記錄吧前端

先建表vue

class Record(models.Model):
    title = models.CharField(max_length=128)
    content = models.TextField()
    picture = models.CharField(max_length=128)
    creationTime = models.DateTimeField(auto_now_add=True)

主要功能就是爲了上傳一張圖片,並添加標題,內容來記錄一些有趣的事情java

因而在後臺要添加圖片的上傳python

借用了別人點擊上傳圖片後顯示圖片的代碼django

<input type="file" id="chooseImage" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" name="picture" class="form-control" aria-invalid="false">
<!-- 保存用戶自定義的背景圖片 -->
<img id="cropedBigImg" value='custom' alt="請添加圖片" data-address='' title="個人圖片"/>

<script> $('#chooseImage').on('change',function(){ var filePath = $(this).val(), //獲取到input的value,裏面是文件的路徑 fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase() src = window.URL.createObjectURL(this.files[0]); //轉成能夠在本地預覽的格式 // 檢查是不是圖片 if( !fileFormat.match(/.png|.jpg|.jpeg/) ) { alert('請選擇圖片'); return; } $('#cropedBigImg').attr('src',src); }); </script>

效果爲:服務器

處理的視圖函數爲:markdown

@auth
def publish_record(request):
    if request.method == 'GET':
        return render(request, 'backend/publish_record.html')
    if request.method == 'POST':
        if request.FILES:
            myFile = None
            for i in request.FILES:
                myFile = request.FILES[i]
            if myFile:
                dir = os.path.join(
                    os.path.join(
                    os.path.join(
                    os.path.join(
                        BASE_DIR,
                        'statics'),'assets'),'images'),
                    'record')
                destination = open(os.path.join(dir, myFile.name),
                                   'wb+')
                for chunk in myFile.chunks():
                    destination.write(chunk)
                destination.close()

            title = request.POST.get('title')
            content = request.POST.get('content')
            models.Record.objects.create(title=title,content=content,picture=myFile.name)
        else:
            messages.error(request,'輸入信息有誤')
        return redirect('/backend/publish_record')

主要是把圖片放到一個固定的文件夾下,以後在頁面顯示時路徑的前綴是固定的app

在前端顯示爲

接下來設置默認的訪問錯誤頁面:

在url.py中添加

handler403 = views.permission_denied
handler404 = views.page_not_found
handler500 = views.page_error

而後編寫對應的視圖處理函數

def permission_denied(request):
    return render(request,'show/403.html')

def page_not_found(request):
    return render(request, 'show/404.html')

def page_error(request):
    return render(request, 'show/500.html')

而後隨意訪問一個不存在的url:

最後加一個關於界面,也就是一個簡單的介紹,內容也用markdown編輯

首前後臺添加一個關於內容的輸入頁面

在後臺經過.md文件的方式存儲內容

def about_edit(request):
    if request.method == 'GET':
        dir = os.path.join(
            os.path.join(
                os.path.join(
                    os.path.join(
                        BASE_DIR,
                        'statics'), 'assets'), 'about'),
            'about.md')
        with open(dir,'r+') as f:
            content = f.read()

        return render(request,'backend/about_edit.html',{'content':content})
    if request.method == 'POST':
        dir = os.path.join(
            os.path.join(
                os.path.join(
                    os.path.join(
                        BASE_DIR,
                        'statics'), 'assets'), 'about'),
            'about.md')
        content = request.POST.get('content')
        with open(dir,'w+') as f:
            f.write(content)

        return redirect('/backend/about_edit')

這樣就能夠在前端顯示關於頁面的內容了

def about(request):
    if request.method == 'GET':
        all_type = models.ArticleType.objects.all()
        dir = os.path.join(
            os.path.join(
                os.path.join(
                    os.path.join(
                        BASE_DIR,
                        'statics'), 'assets'), 'about'),
            'about.md')
        with open(dir, 'r+') as f:
            content = f.read()
        content = markdown(content)
        return render(request, 'show/about.html', {'all_type': all_type,'content':content })

總結

基本內容已經完成,今天剛擱騰訊雲那提交了網站備案審覈,明天預計把項目先部署到服務器上看看效果

相關文章
相關標籤/搜索