Django簡單實例

時間 2019-12-05

標籤 django 簡單實例欄目 Python 简体版

原文原文鏈接

1、前戲-MVC框架與MTV框架

1.MVC　　css

　　MVC（Model View Controller），是一種軟件工程開發的架構模式，不只適用於軟件開發，並且適用於其餘普遍的設計和組織工做，主要思想經過分層的概念把軟件系統分爲三層：html

　　1）模型（Model），負責數據的存取和分發前端

　　2）視圖（View），負責如何把前端頁面的展現python

　　3）控制器（Controller），從視圖層接收客戶端輸入的指令mysql

　　每層間緊密聯繫，但又互相獨立，每一層的發生變化不影響其它層，且都對外提供接口，共其它層調用，從而實現模塊化設計，修改外觀或者變動數據都不用涉及其它層，便於升級和維護jquery

2.MTVsql

　　MTV（Model Template View），即模型、模板、視圖，是Django了框架的設計模式，它借鑑了MVC框架的思想，也是分爲三層以減低各層之間的耦合性　　數據庫

　　1）模型（Model），負責業務對象與數據庫的對象(ORM)django

　　2）模板（Template），負責如何把頁面展現給用戶bootstrap

3）視圖（View），負責業務邏輯，並在適當的時候調用Model和Template

　　Django中設置了一個urls分發器，用於將URL頁面請求分發給不一樣的view處理，view再調用相應的Model和Template

2、Django框架　　

1.建立工程

　　方法一：cmd模式下輸入django-admin startproject 工程名

　　方法二：pychram下建立

2.Django工程的目錄結構

---
|-manager.py        管理項目的命令行工具，進行站點運行，數據庫自動生成、靜態文件收集等
|-templates
|-djangosite
|   |-__init__.py   告訴Python這是一個包
|   |-setting.py    配置文件，默認時定義本項目引用的Django組件、項目名等。在以後的開發中，還須要在其中配置數據庫參數、導入的其餘包信息等
|   |-urls.py       維護項目的URL路由映射，即定義客戶端訪問的URL由哪個Python模塊解釋並提供反饋。默認，其中只定義了"/admin"，即管理員站點的解釋器
|   |-wsgi.py       定義WSGI接口信息，用於和其它WEB服務器集成，通常本文件在生成後無需改動
|
**註釋：
****創建應用，一個Django項目可創建多個應用：
****語法：python manager.py 站點名或者django-admin startapp 站點名
|
|-app
|   |-__init__.py
|   |-admin.py      管理站點模型的聲明文件，默認爲空
|   |-apps.y        應用信息定義文件，在其中生成AppConfig，該類用於定義應用名等Meta數據
|   |-migrations    用於以後定義引用遷移功能
|   |-models.py     添加模型層數據類的文件
|   |-test.py       測試代碼文件
|   |-views.py      定義URL響應函數
|
---Remade            項目介紹文件（自建）

3、示例

以圖書館管理系統爲例看目錄結構以及配置

　　1.修改setting.py配置文件

　　　　1）添加新建的APP

INSTALLED_APPS = ['publisher.apps.PublisherConfig',      # 添加新建的APP
]

　　　　2）關閉提交表單時的403報錯

MIDDLEWARE = [# 'django.middleware.csrf.CsrfViewMiddleware',
]

　　　　3）配置數據庫鏈接參數

# Database
# https://docs.djangoproject.com/en/2.0/ref/settings/#databases
DATABASES = {
    'default': {
        # 鏈接數據庫的模塊
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'day62',
        'HOST': '127.0.0.1',
        'PORT': '3306',
        'USER': 'root',
        'PASSWORD': '123',
    }
}

　　　　4）配置自動在URL後面添加斜槓

APPEND_SLASH = True

　　　　5）配置靜態文件目錄，同時在templates的統計目錄下添加文件夾static

注：

　　靜態文件夾通常用於存放HTML等須要的文件，如CSS、JS文件等

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.0/howto/static-files/
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'static'),       # 末尾必須加逗號
)

　　　　6）setting.py文件的同目錄下的__init__.py指定鏈接數據庫須要的模塊

import pymysql
pymysql.install_as_MySQLdb()

　　2.添加視圖文件

　　　　1）在templates文件夾內添加HTML文件

　　　　2）在static文件夾內添加HTML文件須要的CSS、JS等文件

　　　　3）經過django-admin startapp在工程添加APP

django-admin startapp APP名稱

　　　　4）在APP的根目錄下的models.py中添加模型

　　　　　建立完畢以後，在cmd下執行兩個命令：

　　　　　　　　python manage.py makemigrations　　將變動的models.py登記到當前APP的migrations文件夾中的001_initial.py文件中

　　　　　　　　python manage.py migrate　　　　　　將登記的改動信息轉換成SQL語句，轉移到數據庫中執行

from django.db import models

# Create your models here.
# 建立的對象必須繼承Model
class Publisher(models.Model):
    id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=32)

　　　　5）在APP的根目錄下的views.py中添加視圖

from django.shortcuts import render
from django.shortcuts import redirect
from publisher import models

# Create your views here.
def publisher(request):
    ret = models.Publisher.objects.all()
    print(ret)
    return render(request,'publisher.html',{'publisher':ret})

def add_publisher(request):
    # 根據請求方法的不一樣，要作不一樣的事情
    if request.method == "POST":
        # 你要給我發新數據了
        # 1. 取到你發送的數據
        new_publisher_name = request.POST.get("publisher_name")
        # 2. 去數據庫存數據
        models.Publisher.objects.create(name=new_publisher_name)
        # 回覆建立成功
        return redirect("/publisher_list/")
    return render(request, "add_publisher.html")

　　　　6）在urls.py中添加URL路由

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from publisher import views


urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^publisher',views.publisher),
    url(r'^add_publisher',views.add_publisher),　　# 新建的兩個視圖的URL路由
]

附錄：

　　視圖文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; 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="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
    <link href="/static/dashboard.css" rel="stylesheet">
    <link href="/static/my-style.css" rel="stylesheet">

    <title>圖書管理系統</title>
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-menu"
                    aria-expanded="true"
                    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="http://v3.bootcss.com/examples/dashboard/#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse" aria-expanded="true" style="">
            <ul class="nav navbar-nav">
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Help</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar collapse" id="my-menu">
            <div class="my-menu-item" data-target="#menu-son1" data-toggle="collapse"><a>菜單一</a></div>
            <ul class="nav nav-sidebar collapse" id="menu-son1">
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Overview</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Export</a></li>
            </ul>
            <div class="my-menu-item" href="#menu-son2" data-toggle="collapse"><a>菜單二</a></div>
            <ul class="nav nav-sidebar collapse" id="menu-son2">
                <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">More navigation</a></li>
            </ul>
            <div class="my-menu-item" href="#menu-son3" data-toggle="collapse"><a>菜單三</a></div>
            <ul class="nav nav-sidebar collapse" id="menu-son3">
                <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">圖書信息管理系統</h1>

            <!-- 面板開始 -->
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">出版社管理</h3>
                </div>
                <div class="panel-body">
                    <!--表格 工具欄 開始-->
                    <div class="row table-toolbar">
                        <div class="col-md-3 col-sm-6">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search for...">
                                <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>

                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->

                        <div class="col-md-3 col-sm-6 pull-right add-btn">
                            <button data-target="#myModal" data-toggle="modal" class="btn btn-success pull-right">新增
                            </button>
                            <a href="/add_publisher/" class="btn btn-info pull-right">新頁面添加
                            </a>
                        </div>

                    </div>
                    <!--表格 工具欄 結束-->

                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>出版社名稱</th>
                            <th>操做</th>
                        </tr>
                        </thead>
                        <tbody>
                            {% for pub in publisher %}
                            <tr>
                                <td>{{ pub.id }}</td>
                                <td>{{ pub.name }}</td>
                                <td class="text-center">
                                    <button class="btn btn-info btn-sm"><i class="fa fa-pencil fa-fw"
                                                                           aria-hidden="true"></i>編輯
                                    </button>
                                    <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o fa-fw"
                                                                             aria-hidden="true"></i>刪除
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}

                        </tbody>
                    </table>

                    <!--分頁 開始-->
                    <div>
                        <nav aria-label="Page navigation" class="pull-right">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <!--分頁 結束-->
                </div>
            </div>
            <!-- 面板 結束-->
        </div>
    </div>
</div>

<!--模態框開始-->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加新信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-3 control-label">出版社名稱</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="inputEmail3" placeholder="名稱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="addr" class="col-sm-3 control-label">出版社地址</label>
                        <div class="col-sm-9">
                            <textarea id="addr" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模態框結束-->

<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

主視圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
    <title>Title</title>
</head>
<body>

<div class="container">
<h1>添加新的出版社</h1>
    <dvi class="row">
        <form action="/add_publisher/" method="post">
            <input type="text" name="publisher_name">
            <input type="submit" value="提交">
        </form>
    </dvi>
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

添加出版社的視圖

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。