寫在前面的話
自從寫完那個PHP項(xiàng)目之后就一直處于很頹廢的狀態(tài)。今天把Vue.js學(xué)的差不多了，終于決定要開始做這個項(xiàng)目了。
這個開發(fā)任務(wù)是小組布置的另一個任務(wù)。今天剛把Django官方文檔里那個入門項(xiàng)目做完，我就感覺到Django這個東西一點(diǎn)也不簡單，而我要寫的這個項(xiàng)目更不簡單。雖然配合vue-cli實(shí)現(xiàn)前后端分離并且做成單頁面應(yīng)用可以降低后端開發(fā)的難度——后端只用管數(shù)據(jù)處理、存儲就可以了，其他的都交給前端，博客系統(tǒng)也沒有特別復(fù)雜的后端邏輯，而且自己也經(jīng)常用Python寫一些腳本，對這門語言還算熟悉。但是……畢竟這東西不像PHP那么簡單，也沒用它進(jìn)行過后端開發(fā)，一時半會肯定是學(xué)不完的了……
最近剛剛接觸了vue-cli，感覺這個東西還挺神奇的，似乎也非常好用，對提高網(wǎng)站的性能應(yīng)該是有很大的幫助。雖然學(xué)Vue學(xué)了有一段時間了，也用Vue寫過一部分頁面，自己也非常喜歡這個框架，但是使用vue-cli做單頁面應(yīng)用，這還是第一次。單頁面應(yīng)用、前后端分離、Ajax，幾乎全都是我的知識盲區(qū)。但是畢竟自己喜歡前端開發(fā)，單頁面應(yīng)用和前后端分離是以后的主流，所以就硬著頭皮決定用這樣的方式搭建這個項(xiàng)目了。畢竟，沒有學(xué)習(xí)就沒有進(jìn)步嘛，如果因?yàn)楹ε码y而不去學(xué)、不去做，又哪來的進(jìn)步呢。
這次肯定不會像上次那個PHP前后端不分離的項(xiàng)目一樣那么快就完成，規(guī)劃的是15天左右，在8月25日之前完成就可以了，不過具體需要多少天……我心里也沒底，畢竟是第一次做這樣的項(xiàng)目，而且網(wǎng)上也沒有很多可參考的資料。不像PHP隨便一搜就是一大堆，還得為參考哪個更好而發(fā)愁，這次是有相關(guān)資料就不錯了。。。
因?yàn)檫@個項(xiàng)目的前端是vue-cli做的單頁面應(yīng)用，重點(diǎn)在前端的數(shù)據(jù)處理、渲染、用戶交互等方面，所以頁面的設(shè)計與美化我也不是很想花太大力氣了，決定使用Bootstrap框架配合少量的手寫完成對前端的美化。還不是因?yàn)镸DUI實(shí)在是看膩了又不想手寫才會考慮Bootstrap。。。
所以最后其實(shí)是打算邊做這個項(xiàng)目邊學(xué)習(xí)Vue.js和Django。
需要用到的知識點(diǎn)
后端
- Python
- Django
- 跨域、Django的CSRF token等
前端
- Bootstrap
- Vue.js
- vue-cli
- vue-router
- Vue.js組件化開發(fā)
- Ajax
- 前后端分離
- 單頁面應(yīng)用（SPA）的開發(fā)
開發(fā)工具
后端
- PyCharm
前端
- IntelliJ IDEA（裝了Vue的插件并進(jìn)行了相關(guān)設(shè)置）
- Visual Studio Code
項(xiàng)目的總體邏輯
如果不考慮評論功能的話，登錄到博客系統(tǒng)的用戶只有一個，那就是博主本人，所以用戶管理方面不是很復(fù)雜，可以不設(shè)置注冊頁面而只有登錄頁面，在設(shè)置數(shù)據(jù)庫的時候加上博主這個用戶就可以，前端也可以沒有登錄按鈕，以輸入url的方式跳轉(zhuǎn)到登錄組件（少一個按鈕肯定是美觀一些）。復(fù)雜的地方還是在于前端不同組件之間的邏輯與數(shù)據(jù)的請求、渲染問題。
初步設(shè)想整個系統(tǒng)的前端由以下組件組成，比留言板項(xiàng)目的邏輯還是簡單一些：
數(shù)據(jù)庫方面，感覺Django自帶的SQLite似乎很好用，雖然對它不如對MySQL熟悉，但是還是決定用它，也省去一些配置上的麻煩。具體怎么用還是需要繼續(xù)摸索。
項(xiàng)目的建立
首先建立整個項(xiàng)目：
django-admin startproject Blog
后端
cd Blog
python manage.py startapp backend
前端
vue-init webpack frontend
cd frontend
npm install
前端一些需要用到的庫
Bootstrap4
npm install bootstrap --save --save-exact
Ajax
npm install axios vue-axios --save --save-exact
打包Vue項(xiàng)目
主要是為了生成index.html，方便Django中的設(shè)置。
npm install
npm run build
Django視圖、靜態(tài)文件搜索路徑配置
參考：
http://blog.csdn.net/liuyukuan/article/details/70477095
http://blog.csdn.net/qq_39785489/article/details/82751868
因?yàn)槭菃雾撁鎽?yīng)用，所以也就只有一個index.html，配置一下即可。
Blog/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')) #默認(rèn)訪問index.html
]
Blog/settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'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',
],
},
},
]
# 添加以下項(xiàng)
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'frontend/dist/static')
]
解決跨域問題
參考： https://blog.csdn.net/ros_donggua/article/details/82800510
在開發(fā)前端時使用npm run dev命令，在請求Django的接口時可能會出現(xiàn)跨域問題。
安裝django-cors-headers：
pip install django-cors-headers
我這里是直接就有了，不需要安裝。
Blog/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',
]
CORS_ORIGIN_ALLOW_ALL = True #添加這一行
啟動項(xiàng)目
python manage.py runserver
訪問127.0.0.1:8080，就可以看到Vue.js的默認(rèn)頁面了，也代表項(xiàng)目基本構(gòu)建完成，可以進(jìn)行后續(xù)的開發(fā)了。
