Python+Django+Boostrap搭建我的Blog－Part02 Django簡介及bootstrap引用

時間 2019-11-12

標籤 python+django+boostrap python django boostrap 搭建我的 blog part02 簡介 bootstrap 引用欄目 Python 简体版

原文原文鏈接

1、Django 簡介javascript

1.1Django是什麼？css

本來想本身去寫這塊，可是既然有《Django Book》這麼好的資源，那就沒必要再去浪費這個好的資源了對吧。廢話少說，什麼是Django?html

根據Django Book 3.0中的解釋：Django是新一代卓越的web框架。框架的好處，在於節省大量的時間，經過使用相似的web框架可以快速的搭建一個高效的web應用。若是按照傳統的模式，咱們創建一個web應用併發布，須要作一下的工做：前端

1.前端現實的html頁面java

2.數據庫鏈接及數據庫操做jquery

3.將數據庫操做的數據返回給html中，最後渲染到瀏覽器中web

4.發佈這些則須要選擇一個web容器，好比tomcat等sql

那麼有了web框架以後，它將爲一個應用程序提供這樣一套的程序框架，而無需從頭寫起。這樣咱們就能夠專一於編寫清晰、易維護的代碼。這就是Django包括市場上其餘框架所爲咱們作的。數據庫

1.2Django的結構django

Django與傳統的web框架相似，都是採用了mvc的設計模式。mvc模式是一種軟件設計典範，最大的用處就是業務邏輯、數據、界面顯示分離。在這裏叫作MTV結構。

M:Model 模型(ORM) 用於數據庫模型，應用程序中用於處理應用程序數據邏輯部分，負責業務對象和數據庫的關係映射,一般負責在數據中存取數據。對應的Django 中model.py 文件。經過這個文件，咱們能夠用很簡單的代碼來建立、檢索、更新、刪除數據庫中的紀錄，從而無需編寫冗餘的sql語句，直接能夠被視圖層調用處理數據庫數據。

V:View 視圖顯示數據。一般用於處理業務層邏輯。對應到Django中view.py。經過在view.py 中定義各類函數來處理咱們想要處理的業務邏輯，對頁面請求進行響應和邏輯控制。而後返回這些數據，給到前端模版解析。

T:Template 模板(HTML) 負責如何把頁面展示給用戶。

另：Urls.py指出了什麼樣的url調用什麼視圖。主要起到一個url分發的做用。將一個個URL的頁面請求分發給不一樣的View處理，View再調用相應的Model和Template。

咱們能夠經過下圖，更爲清晰的理解：

這種設計優點在於各個組件是鬆耦的，能夠獨立修改而不影響到其餘模塊。

2、引入Boostrap

經過上述的解釋，我相信你們對django有了一個大體的映像及瞭解，爲了便於後續咱們更爲詳細的介紹，如下引用Boostrap3.0咱們開始實際作一個功能給你們講解下。

1.因爲bootstrap就是一堆css和js以及字體文件,而且屬於靜態資源,因此咱們只須要配置好django的訪問路徑,可以讓template裏面的代碼訪問到bootstrap相關的文件便可.

目錄結構以下：

2.調整django的框架配置

修改setting.py文件

肯定是否已有下列文件：

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

STATIC_URL = '/static/'

STATICFILES_DIRS =(

os.path.join(BASE_DIR, 'static'),

)

3.在templates文件中調用boostrap

文件開始位置加入 {% load staticfiles %}

4.在views.py中編寫函數

def hello(request):

return render(request, ‘index.html')

5.在urls.py中分發地址與函數

urlpatterns = [

url(r'^index/', Blog.views.hello),

]

接下來就看到咱們的主頁了：

前端index.html源碼以下：

<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
    <meta charset="UTF-8">
    <title>豐申的我的博客</title>

     <!-- 引入 Bootstrap -->
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'bootstrap/css/bootstrap-theme.css' %}" rel="stylesheet">
    <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
    <style type="text/css" src="{% static 'bootstrap/css/bootstrap.css' %}"></style>
</head>
<body role="document">

    <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">主頁</a></li>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <div class="container theme-showcase" role="main">
      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>你好,世界!</p>
      </div>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="{% static 'bootstrap/css/bootstrap.min.css' %}"></script>
  </body>
</html>

下一章，咱們將講一下django自己的一些文件做用，及使用。