---
# System prepended metadata

title: Django 專案佈建紀錄

---

# Django 專案佈建紀錄

 Django框架的運作示意圖：
![](https://i.imgur.com/is5Eqoa.png)

Django　專案內有幾個很重要的檔案，與網頁呈現有直接關係。
* setting.py  => 可以更改web-server 執行ip , port, 語言，時區，採用的資料庫
* model.py =>  建立資料庫的shema　，並嘗試建立幾筆資料
* admin.py  => 啟用後台管理介面　，需要到url.py  去建立可存取的路徑與root目錄
* view.py  => 定義資料庫提取出來的物件

Django　的運作方式：
![](https://i.imgur.com/xuP2NwG.png)



# 基本套件安裝 
安裝 django 環境，先檢查有沒有裝 python3 & pip3
```
$python3 -V
$sudo apt install python3-pip


# 已安裝套件查詢
$pip3 list
```

# virtual environment　建置（非必要）
為了讓專案使用套件和系統環境有所區隔，因為不同專案可能需要用到的模組環境不一樣，因此我們可以使用虛擬環境的方式，去將專案所需要的套件或模組裝在特定地方，方便自己管理。

`＄sudo pip3 install virtualenvwrapper`

接著加入 .bashrc
```
export WORKON_HOME=$HOME/.virtualenvs
export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
export PROJECT_HOME=$HOME/Devel
source /usr/local/bin/virtualenvwrapper.sh
```

refresh env 變數
`$source ~/.bashrc`


# Django　專案建置

開起新專案　：

`$ django-admin startproject locallibrary`

在專案下開　app：

`$python3 manage.py startapp catalog`

![](https://i.imgur.com/mjNMfah.png)


檢視專案結構：
```
locallibrary/
├── catalog
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── locallibrary
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   └── settings.cpython-36.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

4 directories, 14 files
```



# Startup  專案 
執行　runserver　去啟動網頁，下圖就是預設的首頁囉～

`$ python .\manage.py runserver 127.0.0.1:8000`


![](https://i.imgur.com/MfvSgj1.png)


# 路徑查詢
有時候出現錯誤請先確定路徑。
```
$ python -m site
or
$ python -c "import sys; print('\n'.join(sys.path))"
```


# Django 版本查詢
專案啟動會失敗請確認版本是否有相容性問題。
```
user@hostname:~$ python
Python 2.7.11+ (default, Apr 17 2016, 14:00:29)
[GCC 5.3.1 20160413] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> import django;
>>> print(django.get_version());
1.9.4
>>> quit
Use quit() or Ctrl-D (i.e. EOF) to exit
>>>
```

或直接查詢

```
$ python -m django --version
```

---
django 專案中是採用　pip workflow 管理 requirement.txt

pip freeze 會列出所有被安裝的 python 模組及其版本。

`$ pip freeze > requirements.txt`


＃套件先安裝要求的模組

```
＄　pip install -r  .\requirements.txt
```

［範例］django 教育部檢核計畫網站系統布建

＃缺模組
```
pip3 install django-ckeditor
pip3 install social-auth-app-django
pip3 install django-captcha
pip3 install django-simple-history
pip3 install django-import-export
pip3 install django-bs4
pip3 install beautifulsoup4
pip3 install  django-xhtml2pdf
pip3 install python-magic
```


# 專案設置檔　＂setting.py＂
setting.py是django 專案中最重要的一個檔案。
內部很多模組或功能使用設定都須透過它。

```
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'catalog.apps.CatalogConfig',
]
```



# Database　設置
在　setting.py　內設置資料庫連接。django 專案預設是採用sqlite，在測試功能少量姿量時還勉強可以用，在資料庫逐漸變大時候效能就會出現瓶頸。

```

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

> **更新資料庫內容，只要有更新資料庫就一定要執行**

`$ python manage.py migrate`

# 使用 django 的 template 功能
建置 template  資料夾
＊產生一個　html 作為回覆給client的模板

在　html 裡面　python 運算結果的輸出
```
{% 內容 %}
{{  內容  }}
```


# html 幾個基本功能　 
* 學習如何插入圖片:
```
<img src=http://xxxxx.xxxx.xxx>
插入超連結標籤
<a herf=http://xxxxxxxxxx>
插入影片連結:
<iframe width="420" height="315"
src="https://xxxxxxxxxxxxxxxxxx">
</iframe>
```
# urls.py  render 渲染效果 
用 urls.py 控制網頁路徑。

* 有效率的調整分割與重組技術

django  把原本的 index.html 收到　HTTP request 並做出　 post 的template拆分成 base.html ,post.html, header.html, footer.html　，HTTP post 時候　post.html 是由　 base.html　把相對應於　post.html, header.html, footer.html 的部分　block 起來。呈現分是分別切分於不同檔案去編輯。

![](https://i.imgur.com/1eNUivu.png)

### 頁面的美編與樣板
* 學習如何使用 bootstrap,  Javascript 以及 CSS檔案的引用

由此輕易的去更改版面樣式，才不會又素又醜

*bootstrap CDN 的穿插
https://getbootstrap.com/docs/3.3/getting-started/#download


* CSS Grid System  用來割版面區塊，頁面牌。
* 根據 12 欄網格設計，嘗試在插入banner(側攔) 。
* 學習 md : 
螢幕寬度不大於 992px 時：
垂直排列 螢幕寬度大於 992px 時：
水平排列 另有 .col-xs-*、.col-sm-*、.col-lg-*

* 如何建立 local 檔案存取 ?

由於路徑被　urls.py 局限了，要如何存取 local images　於特定路徑，以static目錄做為測試。通常在一個網站資料目錄下，圖形檔大部份會被放置在image資料夾下，而.css和.js 檔案則會被放在css和js資料夾下


* 如何新增 icon ？
https://www.designevo.com/tw/




# 使用 git　做專案的板控
學習git 使用與commit 到remote 儲存空間，可以控制每個專案的版本。

* $ git push github master
* $ git add --all
* $ git commit -m '9_myblog-20191109 20191114 upload'
* $ git push github master


