[筆記][網頁設計]Django2 + Vue-cli－葉先生

由於有Django與Vue-cli合併使用的需求，故轉載星辰和Walikrence的文章做個人筆記用途，原文連結在最底下，有興趣的可以看看運作原理和使用理念。

1. 創建Django項目

命令：

django-admin startproject ulb_manager

結構：

.
├── manage.py
└── ulb_manager
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

2. 進入項目根目錄，創建一個app 作為項目後端

命令：

cd ulb_manager
python manage.py startapp backend

即：app 名叫做backend

結構：

.
├── backend
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
└── ulb_manager
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

3. 使用vue-cli創建一個vuejs項目作為項目前端

命令：

vue-init webpack frontend

即：項目名叫frontend

結構：

.
├── backend
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── frontend
│   ├── README.md
│   ├── build
│   │   └── ....
│   ├── config
│   │   ├── dev.env.js
│   │   ├── index.js
│   │   ├── prod.env.js
│   │   └── test.env.js
│   ├── index.html
│   ├── package.json
│   ├── src
│   │   ├── App.vue
│   │   ├── assets
│   │   │   └── logo.png
│   │   ├── components
│   │   │   └── Hello.vue
│   │   └── main.js
│   ├── static
│   └── test
│       └── ...
├── manage.py
└── ulb_manager
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

結構總結：

可以看到項目根目錄有兩個新文件夾，一個叫backend ，一個叫frontend，分別是：

backend Django的一個app
frontend Vuejs項目

4. 接下來我們使用webpack 打包Vusjs項目

命令：

cd frontend
npm install
npm run build

結構：

我引入了一些包，比如element-ui等，你的static裡面的內容會不同，沒關係index.html 和static 文件夾相同就夠了

dist
├── index.html
└── static
    ├── css
    │   ├── app.42b821a6fd065652cb86e2af5bf3b5d2.css
    │   └── app.42b821a6fd065652cb86e2af5bf3b5d2.css.map
    ├── fonts
    │   ├── element-icons.a61be9c.eot
    │   └── element-icons.b02bdc1.ttf
    ├── img
    │   └── element-icons.09162bc.svg
    └── js
        ├── 0.8750b01fa7ffd70f7ba6.js
        ├── vendor.804853a3a7c622c4cb5b.js
        └── vendor.804853a3a7c622c4cb5b.js.map

構建完成會生成一個文件夾名字叫dist，裡面有一個index.html 和一個文件夾static ，

5.使用Django的通用視圖TemplateView

找到項目根urls.py (即ulb_manager/urls.py)，使用通用視圖創建最簡單的模板控制器，訪問『/』時直接返回index.html

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    **url(r'^$', TemplateView.as_view(template_name="index.html")),**
    url(r'^api/', include('backend.urls', namespace='api'))
]

6. 配置Django項目的模板搜索路徑

上一步使用了Django的模板系統，所以需要配置一下模板使Django知道從哪裡找到index.html

打開settings.py (ulb_manager/settings.py)，找到TEMPLATES配置項，修改如下:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        **'DIRS': ['frontend/dist']**,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

注意這裡的frontend 是VueJS項目目錄，dist則是運行npm run build 構建出的index.html與靜態文件夾static 的父級目錄

這時啟動Django項目，訪問/ 則可以訪問index.html，但是還有問題，靜態文件都是404錯誤，下一步我們解決這個問題

7. 配置靜態文件搜索路徑

打開settings.py (ulb_manager/settings.py)，找到STATICFILES_DIRS 配置項，配置如下:

# Add for vuejs
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

這樣Django不僅可以將/ulb 映射到index.html，而且還可以順利找到靜態文件

此時訪問/ulb 我們可以看到使用Django作為後端的VueJS helloworld

ALL DONE.

8. 開發環境

因為我們使用了Django作為後端，每次修改了前端之後都要重新構建（你可以理解為不編譯不能運行）

除了使用Django作為後端，我們還可以在dist目錄下面運行以下命令來看效果：

hs(即: http server)

但是問題依然沒有解決，我想過檢測文件變化來自動構建，但是構建是秒級的，太慢了，所以我直接使用VueJS的開發環境來調試

npm run dev

毫秒，但是有個新問題，使用VueJS的開發環境脫離了Django環境，訪問Django寫的API，出現了跨域問題，有兩種方法解決，一種是在VueJS層上做轉發（proxyTable），另一種是在Django層注入header，這裡我使用後者，用Django的第三方包django-cors-headers 來解決跨域問題

安裝

pip install django-cors-headers

配置（兩步）

1. settings.py 修改

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    **'corsheaders.middleware.CorsMiddleware',**
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

這裡要注意中間件加載順序，列表是有序的哦

2. settings.py 添加

CORS_ORIGIN_ALLOW_ALL = True

至此，我的開發環境就搭建完成了

9. 生產環境部署（部署到UCloud ）

接下來我們嘗試將項目部署到UCloud雲主機上：

9.1 創建主機

註冊UCloud -專業雲計算服務商
點擊左側的雲主機，然後點擊創建主機
右側選擇付費方式，點擊立即購買
在支付確認頁面，點擊確認支付

購買成功後回到主機管理列表，如下所示：

這裡註意記住你的外網IP，下面的ip替換成你的

9.2 環境搭建與部署

登錄主機，用你剛填寫的密碼：

ssh root@120.132.**.75

CentOS 系統可以使用yum 安裝必要的包

# 如果你使用git来托管代码的话
yum install git

# 如果你要在服务器上构建前端
yum install nodejs
yum install npm

yum install nginx

我們使用uwsgi 來處理Django 請求，使用nginx 處理static 文件（即之前build 之後dist 裡面的static，這裡默認前端已經打包好了，如果在服務端打包前端需要安裝nodejs，npm等）

安裝uWsgi

yum install uwsgi
# 或者
pip install uwsgi

我們使用配置文件啟動uwsgi，比較清楚

uwsgi配置文件：

[uwsgi]
socket = 127.0.0.1:9292
stats = 127.0.0.1:9293
workers = 4
# 项目根目录
chdir = /opt/inner_ulb_manager
touch-reload = /opt/inner_ulb_manager
py-auto-reload = 1
# 在项目跟目录和项目同名的文件夹里面的一个文件
module= inner_ulb_manager.wsgi
pidfile = /var/run/inner_ulb_manager.pid
daemonize = /var/log/inner_ulb_manager.log

nginx 配置文件：

server {
    listen 8888;
    server_name 120.132.**.75;
    root /opt/inner_ulb_manager;
    access_log /var/log/nginx/access_narwhals.log;
    error_log /var/log/nginx/error_narwhals.log;

    location / {
            uwsgi_pass 127.0.0.1:9292;
            include /etc/nginx/uwsgi_params;
    }
    location /static/ {
            root  /opt/inner_ulb_manager/;
            access_log off;
    }
    location ^~ /admin/ {
            uwsgi_pass 127.0.0.1:9292;
            include /etc/nginx/uwsgi_params;
    }
}

/opt/inner_ulb_manager/static 即為靜態文件目錄，那麼現在我們靜態文件還在frontend/dist 怎麼辦，不怕，Django給我們提供了命令：

先去settings裡面配置：

STATIC_ROOT = os.path.join(BASE_DIR, "static")

然後在存在manage.py的目錄，即項目跟目錄執行：

python manage.py collectstatic

這樣frontend/dist/static裡面的東西就到了項目根目錄的static文件夾裡面了

那麼為什麼不直接手動把構建好的dist/static拷過來呢，因為開始提過Django自帶的App：admin 也有一些靜態文件（css,js等），它會一併collect過來，畢竟nginx只認項目跟目錄的靜態文件，它不知道django把它自己的需求文件放到哪了

開頭說過Django配置靈活，那麼我們專門為Django創建一個生產環境的配置prod.py

prod.py 與默認settings.py 同目錄

# 导入公共配置
from .settings import *

# 生产环境关闭DEBUG模式
DEBUG = False

# 生产环境开启跨域
CORS_ORIGIN_ALLOW_ALL = False

# 特别说明，下面这个不需要，因为前端是VueJS构建的，它默认使用static作为静态文件入口，我们nginx配置static为入口即可，保持一致，没Django什么事
STATIC_URL = '/static/'

如何使用這個配置呢，進入wisg.py 即uwsgi配置裡面的module配置修改為：

import os

from django.core.wsgi import get_wsgi_application

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "**inner_ulb_manager.prod**")

application = get_wsgi_application()

啟動uwsgi

uwsgi --ini inner_ulb_manager.ini

啟動ngingx

service nginx start

至此，部署就完成了

10. 效果圖

List 組件：

傳單個ULB 對像給Detail 組件使用即可

Detail 組件：

當然裡面還實現了前面提到的ULB 的VServer 創建，VServer 的RServer 的創建等

本文首發於知乎專欄（隨心DevOps），轉載請註明出處：

https://zhuanlan.zhihu.com/p/24893786

以上是針對舊版Django的內容，如果使用新的Django2還需要以下：

urls.py長這樣

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
path('admin/', admin.site.urls),
path('', TemplateView.as_view(template_name="index.html")),
]

在setting.py末尾添加

STATICFILES_DIRS = [

os.path.join(BASE_DIR, "dist/static"),

]

有關Django２的參考文章出自：
https://blog.csdn.net/Walikrence/article/details/90091259

葉先生

葉先生發表在痞客邦留言(0) 人氣()

E-mail轉寄

葉先生

與你分享我學習到的理財知識教你提高生活效率的電子化小技巧與你分享我在設計上的快樂