1. 創建一個目錄,進入目錄(還沒有用django創建項目,所以這個目錄還不是項目目錄,會在里面率先創建一些虛擬環境相關文件).
2.創建並激活虛擬隔離環境
D:\'Program Files'\Python\Python3.9\Scripts\pipenv --python3.9.2 E:\MyPythonProjects\vue-django>"d:\Program Files\Python\Python3.9\Scripts\pipenv.exe" shell
3.pip或者pipenv install django
(vue-django-X2kn2ljj) E:\MyPythonProjects\vue-django>pipenv install django Installing django... Adding django to Pipfile's [packages]... Installation Succeeded Pipfile.lock not found, creating... Locking [dev-packages] dependencies... Locking [packages] dependencies... Locking...Building requirements... Resolving dependencies... Success! Updated Pipfile.lock (06f36b)! Installing dependencies from Pipfile.lock (06f36b)... ================================ 0/0 - 00:00:00
4.創建一個django項目: django-admin startproject vue_django(項目名)
(vue-django-X2kn2ljj) E:\MyPythonProjects\vue-django>django-admin startproject vue_django (vue-django-X2kn2ljj) E:\MyPythonProjects\vue-django>dir 驅動器 E 中的卷是 新加卷 卷的序列號是 3AC3-28BB E:\MyPythonProjects\vue-django 的目錄 2021/03/29 02:28 <DIR> . 2021/03/29 02:28 <DIR> .. 2021/03/29 02:26 151 Pipfile 2021/03/29 02:26 1,724 Pipfile.lock 2021/03/29 02:28 <DIR> vue_django 2 個文件 1,875 字節
5. 用pycharm或vscode打開當前項目, 在項目根目錄下創建templates目錄,也就是有manage.py的那個目錄,然后修改settings文件.
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': ["templates"], # 項目根目錄下創建一個目錄,把目錄名寫在這里 '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', ], }, }, ]
LANGUAGE_CODE = 'zh-hans' TIME_ZONE = 'Asia/Shanghai'
6. manage.py server, 應該可以運行django項目了.ctrl+c, 退出服務. 接下來創建一個app
7. manage.py startapp book(APP名字)
8. 在book文件夾下創建一個空的urls.py 用來以后補充填寫路由信息.
9. 編寫book文件夾下的views.py
from django.shortcuts import render
# Create your views here.
def home(request): # 定義一個視圖函數,用來相應web請求
return render(request,"index.html") # 返回一個靜態頁面,這個index.html模板還沒創建.
10. 創建index.html, 在templates下,隨便寫個頁面
11. 視圖函數和模板都有了,再規划一個路由地址,在剛才的那個空urls.py下寫入
from django.urls import path from . import views urlpatterns=[ path("",view=views.home,name="home"), # 訪問這個APP的""地址的時候會調用views中定義的home函數處理. ]
12. 編寫項目下的urls.py, 不是app下的urls.py.這個urls.py是個路由總管
from django.contrib import admin from django.urls import path, include # 新增include urlpatterns = [ path('admin/', admin.site.urls), path('book/',include('book.urls')), # 新增,本行把book APP下的urls.py路由信息導入 ]
13. 在settings里添加app名稱
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'book', # 新增 ]
14 . 到此第一個APP的html頁面完成, 可以runserver下.
15. 增加復雜度,讓某個路徑請求返回一串Json數據, 在book APP的urls.py下增加
from django.shortcuts import render # Create your views here. def home(request): # 定義一個函數,用來相應web請求 return render(request,"index.html") # 返回一個靜態頁面,這個index.html還沒創建. # 以下新增, from的書寫位置並不規范,方便示例而已 from django.http.response import JsonResponse #導入能處理Json響應的模塊 def books(request): books_list = [ {"id":1, "title":"VUE詳解","price":100}, {"id":2, "title": "K8s詳解", "price": 200}, {"id":3, "title": "Echarts詳解", "price": 300} ] return JsonResponse(books_list,safe=False) # 實際項目中一般json數據來自數據庫
16. 在book APP的urls下添加一個url路由
path("api/books/",view=views.books, name="api-books"),
17. 重新runserver, 訪問http://127.0.0.1:8000/book/api/books/, 應該可以看到頁面.
18. 好了,前后端分離就是django負責對不同的web訪問地址啟動不同的視圖,返回一串數據,這串數據由vue等前端框架截獲,經處理在瀏覽器上展示給客戶.下面開始制作能用vue處理的web頁面. 重新編寫剛才的那個index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django-vue</title>
<!-- 開發環境的vue2版本，包含了有幫助的命令行警告, vue3是合成型API,另有不同 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- axios負責處理json數據 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<h1> Django vue</h1>
<div id="app">
<table>
<tr>
<th>#</th>
<th>標題</th>
<th>單價</th>
</tr>
<!-- 這里使用了雙方括號 ,代替雙花括號,因為django模板會使用雙花括號,造成與vue的沖突.-->
<tr v-for="book in books">
<td>[[book.id]]</td>
<td>[[book.title]]</td>
<td>[[book.price]]</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el:"#app",
delimiters: ["[[","]]"], // 這里聲明一個叫分隔符的成員,使得雙方括號 ,代替雙花括號
data: {
books: []
},
//加載完畢,掛載綁定的時候,執行fetchData這個函數
mounted: function(){
this.fecthData();
},
methods: {
fecthData(){
axios.get("/book/api/books/").then(response=>{
this.books = response.data;
}), err=>{
console.log(err);
};
}
}
});
</script>
</body>
</html>
19. 重新runserver, 訪問http://127.0.0.1:8000/book/ ,就能看見下面的頁面
這就是django+Vue的一個簡單快速的示例, 從這個示例中可以看出來前后端分離后,如果是一個人全棧開發寫個小項目,工作量其實是提升了,