1. 程式人生 > >django2.0+python3.4實戰開發教程-資訊型部落格系統(一)

django2.0+python3.4實戰開發教程-資訊型部落格系統(一)

專案簡介

執行平臺:windows
Python版本:3.4
Django版本:2.0
資料庫工具:sqlite
開發工具:Pycharm+sublime-text

寫在開頭:這是我第一次使用Django進行web開發,在此之前並無任何web開發經驗。其中,Django以及html/css都屬於邊學邊用階段,因此專案中可能出現一些粗糙的地方,讀者可以自行規避。雖然本專案名為資訊資源型系統,但是其實也就是開發了一個部落格,希望能帶給你們一些幫助~

本專案中的一切網頁都是靜態網頁,另外還有諸多不足的地方,不過作為一個入手專案,暫不會繼續修改更新,有興趣者可以自行完善。

目前本專案釋出在阿里雲平臺,地址:

http://47.106.39.91/
專案下載地址:

建議

  • 配合Django官方文件教程以及其他博主學習部落格進行學習
  • 跟著教程自己完成一次Django開發
  • 具有一定python語言基礎
  • 下載SQLITEStudio

實戰開始
我們首先給我們的專案起個名字:EasyDown。
(1)利用命令列建立專案

django-admin startproject EasyDown

(2)建立APP
由於我們準備搭建的是一個部落格系統,所以就給這個APP起名為:blog
在命令列下繼續輸入

python manage.py startapp blog

此時本專案的檔案樹列表如下所示:
在這裡插入圖片描述

在blog子目錄下新建一個py文件:urls.py
在這裡插入圖片描述
(3)註冊app並配置靜態檔案目錄
開啟setting.py檔案,新增如下資訊
在這裡插入圖片描述

# 配置靜態檔案目錄
STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'static'),
    ]

(4)建立目錄
在blog目錄下建立兩個子目錄

  • templates
  • static
    其中templates用於存放模板(即html檔案)
    static資料夾下存放靜態檔案
    在這裡插入圖片描述
    接著我們在static資料夾下繼續新增幾個資料夾
    在這裡插入圖片描述
    然後我們在css資料夾下新增一個資料夾:images
    在這裡插入圖片描述

    (5)建立模型
  • 每一個Django 模型都繼承自django.db.models.Model
  • 在模型當中每一個屬性都對應一個數據庫表的欄位
    (本專案使用預設資料庫SQLITE,不需要配置資料庫)

由於本專案希望使用者註冊登陸後檢視部落格內容,因此我們需要一個登陸系統,那麼我們便從這裡開始入手。

使用者具有如下資訊:

  • 使用者名稱(用於登陸)
  • 密碼
  • 暱稱
  • 郵箱
  • 建立時間
  • 評論數
  • 頭像

開啟blog目錄下的models.py檔案,新增如下內容

from django.db import models
from django.utils.timezone import now

class User(models.Model):
    username = models.CharField(max_length = 50)
    password = models.CharField(max_length = 200)
    nickname = models.CharField(max_length = 50,default='匿名')
    email = models.EmailField()
    created_time = models.CharField(max_length=50,default=now)
    comment_num = models.PositiveIntegerField(verbose_name='評論數', default=0)
    avatar = models.ImageField(upload_to = 'media', default="media/default.png")

    def __str__(self):
        return self.username

(ps:當初在開發該專案時頭像這條資訊是後續加入的)
由於我們頭像預設地址為media/default.png,所以需要放一張default.png圖片在該資料夾下。

(6)註冊模型並同步資料庫
接下來開啟blog下的admin.py檔案

from django.contrib import admin
from .models import User

admin.site.register(User)

接著開啟命令列進入manage.py同級目錄
依次輸入以下指令

python manage.py makemigrations
python manage.py migrate

建立成功後,會生成一個SQL檔案
在這裡插入圖片描述
用SQLITEStudio開啟這個檔案,進入blog_user表
在這裡插入圖片描述
這裡可以看到我們已經成功同步資料庫

(7)註冊介面的開發
(本博不講解html元素佈局以及css等內容)
首先我們在templates資料夾下新建一個檔案:register.html
接著我們在static/css資料夾下新建一個檔案:log.css。
然後我們在static/css資料夾下新增一個檔案:semantic.css(這是個前端框架,去官網下載後複製過來)
其中log.css檔案內容如下(某些內容用不到):

.back{background:#181015 url("images/back.jpg") no-repeat; background-size: cover;}
.login{background:#181015 url("images/log_in.jpg") no-repeat; background-size: cover;}
.register{background:#181015 url("images/regis.jpg") no-repeat; background-size: cover;}
.forget{background:#181015 url("images/for_get.jpg") no-repeat; background-size: cover;}
.bg{padding-top:100px;background:#181015 url("images/background.jpg") no-repeat; background-size: cover;}
.reset{background:#181015 url("images/reset.jpg") no-repeat; background-size: cover;}
.comment{background:#181015 url("images/comm.png") no-repeat; background-size: cover;}
.contact{background:#181015 url("images/contact.png") no-repeat; background-size: cover;}



.footer2 { background: #191919; padding: 15px 0; color: #777; font-size: 12px; }
	.footer2 a { color: #aaa; }
		.footer2 a:hover { color: #fff; }
		.footer2 p { margin: 0; }

	.widget-simplenav { margin-left:-5px; }
	.widget-simplenav a{ margin:0 5px; }

我們需要在css/images資料夾下放一張圖片命名為:regis.jpg
這便是我們註冊頁面的背景圖

register.html檔案內容如下:

{%load static%}
<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>註冊</title>
    <link rel="stylesheet" href="{%static 'css/log.css' %}">
    <link rel="stylesheet" href="{%static 'css/semantic.css' %}">
</head>
<body class="register">
    <div class="ui center aligned grid" style="margin-top: 200px">
        <div class="ui six wide column">
            <h1 class="ui teal header"><font color="black">EasyDown-使用者註冊</font></h1>
            <div class="ui segment">
                <div class="ui content">
                    <form class="ui form" method="post" action="http://127.0.0.1:8000/register/"  enctype="multipart/form-data">
                        <div class="field">
                            <input type="text" name="username" placeholder="請輸入使用者名稱"><br>
                        </div>
                        <div class="field">
                            <input type="password" name="password_1" placeholder="請輸入密碼"><br>
                        </div>
                        <div class="field">
                            <input type="password" name="password_2" placeholder="請確認密碼"><br>
                        </div>
                        <div class="field">
                            <input type="text" name="nickname" placeholder="請輸入暱稱"><br>
                        </div>
                        <div class="field">
                            <input type="text" name="email" placeholder="請輸入郵箱"><br>
                        </div>
                        <div>頭像<input type="file" name="avatar"></div>
                        {{ error }}<br>
                        <button class="ui fluid large teal button" type="submit">註冊</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

第一句話{%load static%}代表引入靜態檔案(css,js等)
img,css,js等檔案的引用與下述語句類似:

 <link rel="stylesheet" href="{%static 'css/log.css' %}">

開啟blog下的views.py檔案,新增以下內容

from django.shortcuts import render
def register(requests):
    return render(requests,'register.html')

接著我們開啟EasyDown目錄下的urls.py檔案,為我們的註冊頁面新增路由資訊

from django.contrib import admin
from django.urls import path
from blog import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('register/',views.register,name = 'register'),
]

命令列進入manage.py同級目錄輸入指令

python manage.py runserver

由於我們註冊頁面的相對路徑為register/,所以我們在瀏覽器中進入http://127.0.0.1:8000/register/
可以看到註冊介面

當然此時的註冊資訊是寫入不到資料庫的,畢竟我們的後臺目前只有一句話,也就是展示該頁面。