Django搭建一個blog

參考出處:https://www.cnblogs.com/fnng/p/3737964.html

簡書-Django搭建簡易博客教程:http://www.jianshu.com/p/d15188a74104

自強學堂-Django基礎教程:http://www.ziqiangxuetang.com/django/django-tutorial.html

Django官方文檔中文翻譯版:http://python.usyiyi.cn/django/index.html

另外可參考:https://www.cnblogs.com/Liqiongyu/p/5909706.html


 Django 自稱是“最適合開發有限期的完美WEB框架”。本文參考《Django web開發指南》,快速搭建一個blog 出來,在中間涉及諸多知識點,這裏不會詳細說明,如果你是第一次接觸Django ,本文會讓你在感性上對Django有個認識,完成本文操作後會讓你有興趣閱讀的相關書籍和文檔。

廢話少說,come on!!

 

本操作的環境:

===================

Windows 10

python 3.6   https://www.python.org/

Django 2.0  https://www.djangoproject.com/

===================

 

 

 創建項目                                                                                                          

 

創建mysite項目和 blog應用:

> django-admin startproject mysite   # 創建mysite項目
> cd mysite        # 切換到mysite目錄
mysite> python manage.py startapp blog   # 創建blog應用

項目目錄結構:

 項目目錄介紹:

--------

manage.py : Django項目裏面的工具,通過它可以調用django shell和數據庫等。

mysite/

| ---  settings.py : 包含了項目的默認設置,包括數據庫信息,調試標誌以及其他一些工作的變量。

| ---  urls.py : 負責把URL模式映射到應用程序。

| --- wsgi.py :  用於項目部署。

blog /

| --- admin.py  :  django 自帶admin後面管理,將models.py 中表映射到後臺。

| --- apps.py :  blog 應用的相關配置。

| --- models.py  : Django 自帶的ORM,用於設計數據庫表。

| --- tests.py  :  用於編寫Django單元測試。

| --- veiws.py :視圖文件,用於編寫功能的主要處理邏輯。

 

打開settings.py 配置文件,添加blog應用。

複製代碼
# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
]
複製代碼

 

 

初始化admin後臺數據庫                                                                                                

 Python 自帶SQLite3數據庫,Django默認使用SQLite3數據庫,如果使用其它數據庫請在settings.py文件中設置。

複製代碼
# Database
# https://docs.djangoproject.com/en/2.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}
複製代碼

 Django默認幫我們做很多事情,比如User、Session 這些都需要創建表來存儲數據,Django已經把這些模塊幫我準備好了,我們只需要執行數據庫同步,把相關表生成出來即可:

複製代碼
mysite> python manage.py migrate

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying sessions.0001_initial... OK
複製代碼

 要想登錄admin後臺,必須要有帳號,接下來創建超級管理員帳號。

複製代碼
mysite> python manage.py createsuperuser
Username (leave blank to use 'fnngj'): admin    # 管理員帳號
Email address: [email protected]      # email
Password:                          # 密碼
Password (again):                  # 重複密碼
Superuser created successfully.
複製代碼

 

 

啓動應用 & 訪問admin後臺                                                                                    

Django自帶Web,可以通過“runserver”命令啓動應用:

複製代碼
mysite> python manage.py runserver
Performing system checks...

System check identified no issues (0 silenced).
January 06, 2018 - 11:02:32
Django version 2.0, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
複製代碼

 通過瀏覽器訪問:http://127.0.0.1:8000

訪問Admin 後臺:http://127.0.0.0:8000/admin  , 通過前面創建的超級管理員賬號。

django2.0 後臺樣式做了自適應。

 到此,準備工作結束。

 

 

設計Model(即設計數據庫表)                                  

 

1、設計blog表

打開blog目錄下的models.py文件,這是定義blog數據結構的地方。

複製代碼
from django.db import models

# Create your models here.
class BlogsPost(models.Model):
    title = models.CharField(max_length = 150)  # 博客標題
    body = models.TextField()                   # 博客正文
    timestamp = models.DateTimeField()          # 創建時間
複製代碼

 

2、再次執行數據庫同步。

複製代碼
mysite> python manage.py makemigrations blog
Migrations for 'blog':
  blog\migrations\0001_initial.py
    - Create model BlogsPost

mysite> python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, blog, contenttypes, sessions
Running migrations:
  Applying blog.0001_initial... OK
複製代碼

 

4、通過Admin 管理。

通過Admin後臺來管理blog表數據。打開 admin.py 文件。

複製代碼
from django.contrib import admin
from blog.models import BlogsPost


# Register your models here.
class BlogsPostAdmin(admin.ModelAdmin):
    list_display = ['title', 'body', 'timestamp']


admin.site.register(BlogsPost, BlogsPostAdmin)
複製代碼

 

5、登錄Admin後臺添加blog 

再次啓動項目,訪問:http://127.0.0.0:8000/admin

博客編寫完成,點擊“SAVE” 按鈕保存。

 到此,數據部分已經搞定。

 

創建模板                                                                                                  

 在blog項目下創建templates目錄(mysite/blog/templates/),在目錄下創建模板文件index.html,內容如下:

{% for blog in blog_list %}
    <h2>{{ blog.title }}</h2>
    <p>{{ blog.timestamp }}</p>
    <p>{{ blog.body }}</p>
{% endfor %}

 這裏涉及到Django模板語言,循環讀取表中的數據,顯示標題,創建時間和正文。

 

創建視圖函數                                                                                          

 打開mysite/blog/views.py文件:

複製代碼
from django.shortcuts import render
from blog.models import BlogsPost


# Create your views here.
def blog_index(request):
    blog_list = BlogsPost.objects.all()  # 獲取所有數據
    return render(request,'index.html', {'blog_list':blog_list})   # 返回index.html頁面
複製代碼

blog_list = BlogPost.objects.all() :獲取數據庫裏面所擁有BlogPost對象

render返回一個頁面(index.html),順帶把數據庫中查詢出來的所有博客內容(blog_list)也一併返回。

 

 

創建blog的URL模式                                                                             

 在mysite/urls.py文件裏添加blog的url:

複製代碼
from django.contrib import admin
from django.urls import path
from blog import views


urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog/', views.blog_index),
]
複製代碼

 再次啓動服務($ python manage.py runserver),訪問blog應用(http://127.0.0.1:8000/blog/)。

頁面如下:

當然,你可以繼續到admin後臺添加blog,從而刷新這個頁是否顯示新添加的blog。

到此,項目開發完成

 

美化blog                                                                                                    

 到 BootStrap 官網去找樣模板。http://www.bootcss.com/

https://v3.bootcss.com/examples/starter-template/  這個樣式就很合適。

 修改index.html模板。

複製代碼
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面,任何其他內容都*必須*跟隨其後! -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">蟲師blog</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container" style="margin-top: 50px;">

      <div class="starter-template">

        {% for blog in blog_list %}
            <h2>{{ blog.title }}</h2>
            <p>{{ blog.timestamp }}</p>
            <p>{{ blog.body }}</p>
        {% endfor %}

      </div>

    </div><!-- /.container -->

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
複製代碼

 再次刷新博客頁面:

http://127.0.0.1/blog/  。

 請系統的學習django web框架,然後在此基礎上做更多的擴展,開發自己真正的blog 

 

------------------------------------------------------------------------------------------------------------------------------------- 

參考:

《Django Web開發指南》 第二章

blog:http://my.oschina.net/matrixchan/blog/184445


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章