django2.0+python3.4實戰開發教程-資訊型部落格系統(一)
專案簡介
執行平臺:windows
Python版本:3.4
Django版本:2.0
資料庫工具:sqlite
開發工具:Pycharm+sublime-text
寫在開頭:這是我第一次使用Django進行web開發,在此之前並無任何web開發經驗。其中,Django以及html/css都屬於邊學邊用階段,因此專案中可能出現一些粗糙的地方,讀者可以自行規避。雖然本專案名為資訊資源型系統,但是其實也就是開發了一個部落格,希望能帶給你們一些幫助~
本專案中的一切網頁都是靜態網頁,另外還有諸多不足的地方,不過作為一個入手專案,暫不會繼續修改更新,有興趣者可以自行完善。
目前本專案釋出在阿里雲平臺,地址:
專案下載地址:
建議
- 配合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/
可以看到註冊介面
當然此時的註冊資訊是寫入不到資料庫的,畢竟我們的後臺目前只有一句話,也就是展示該頁面。