1糯耍、先要下載安裝Django包
PIP install?Django
2、利用命令行創(chuàng)建Django項目jswf
django-admin startproject mysite
創(chuàng)建成功后目錄如下
.
├── manage.py
└──mysite
? ?├── __init__.py
? ?├── settings.py
? ?├── urls.py
? ?└── wsgi.py
3、在jswf目錄下創(chuàng)建后臺應(yīng)用項目作為項目后端
cd mysite
python manage.py startapp backend?
創(chuàng)建成功后目錄如下
.
├── backend
│ ? ├── __init__.py
│ ? ├── admin.py
│ ? ├── migrations
│ ? │ ? └── __init__.py
│ ? ├── models.py
│ ? ├── tests.py
│ ? └── views.py
├── manage.py
└── mysite?
? ?├── __init__.py
? ?├── settings.py
? ?├── urls.py
? ?└── wsgi.py
4撇他、配置Django項目的數(shù)據(jù)庫:
django中默認(rèn)的數(shù)據(jù)庫為sqlite3逛裤，即新建項目后配置文件（settings.py）中關(guān)于數(shù)據(jù)庫的初始配置如下：
DATABASES = {
? ? 'default': {
? ? ? ? 'ENGINE': 'django.db.backends.sqlite3',
? ? ? ? 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
? ? }
}
在django中將配置改為：
DATABASES = {
? ? 'default': {
? ? ? ? 'ENGINE': 'django.db.backends.mysql',
? ? ? ? 'NAME': 'mall',
? ? ? ? 'USER': 'rinka',
? ? ? ? 'PASSWORD': 'rinka0414',
? ? ? ? 'HOST': 'localhost',
? ? ? ? 'PORT': '3306',
? ? }
}
其中：
DATABASE_ENGINE即為“背景”中所提到的那些數(shù)據(jù)庫服務(wù)器
DATABASE_NAME將數(shù)據(jù)庫名稱告知 django
DATABASE_USER告訴 django 用哪個用戶連接數(shù)據(jù)庫
DATABASE_PASSWORD?告訴django連接用戶的密碼
DATABASE_HOST告訴 django 連接哪一臺主機的數(shù)據(jù)庫服務(wù)器
DATABASE_PORT告訴 django 連接數(shù)據(jù)庫時使用哪個端口
如果使用的是自己的數(shù)據(jù)庫，比如MySQL启涯，最重要的一步贬堵，記得在項目同名文件夾下的__init.py__中，加入：
?import pymysql
?pymysql.install_as_MySQLdb()
其中pymysql包同樣先使用PIP下載安裝结洼。
pip install pymysql
如果沒有導(dǎo)入pip install pymysql包會報錯：
django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module: No module named'MySQLdb'
5黎做、使用vue-cli在根目錄創(chuàng)建一個名稱叫【frontend】的Vue.js項目作為項目前端
vue-init webpack frontend
創(chuàng)建成功后目錄如下
.
├── 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
│ ? │ ? │ ? └── HelloWorld.vue
│ ? │ ? └── main.js
│ ? ├── static
│ ? └── test
│ ? ? ? └── ...
├── manage.py
└── mysite?
? ?├── __init__.py
? ?├── settings.py
? ?├── urls.py
? ?└── wsgi.py
我們可以在vue中加入一些常用組件，如element-ui等松忍，再隨便添加倆個例子
frontend/src/HelloWorld.vue文件
<template>
? <div class="hello">
? ? <h1>{{ msg }}</h1>
? ? <h2>Essential Links</h2>
? ? <el-select v-model="value" placeholder="請選擇">
? ? <el-option
? ? ? v-for="item in options"
? ? ? :key="item.value"
? ? ? :label="item.label"
? ? ? :value="item.value">
? ? </el-option>
? </el-select>
? <el-row>
? ? <el-button>默認(rèn)按鈕</el-button>
? ? <el-button type="primary">主要按鈕</el-button>
? ? <el-button type="success">成功按鈕</el-button>
? ? <el-button type="info">信息按鈕</el-button>
? ? <el-button type="warning">警告按鈕</el-button>
? ? <el-button type="danger">危險按鈕</el-button>
? </el-row>
? </div>
</template>
6蒸殿，使用 webpack 打包vue項目
cd frontend
npm install
npm run build
此時直接運行npm run dev也可以直接查看前端 vue界面
構(gòu)建完成會生成一個文件夾，名字叫dist，里面有一個 index.html 和一個 文件夾static宏所。
7酥艳， 使用Django的通用視圖 TemplateView修改靜態(tài)指向路徑（就是讓Django訪問目錄指向我們剛才打包的dist/index.html）
找到項目根 ulb_manager/urls.py文件作出如下修改
fromdjango.contribimport adminfromdjango.urlsimport pathfromdjango.views.generic.baseimportTemplateView //注意加上這句
urlpatterns = [
? ? # path('admin/', admin.site.urls),path('admin/', admin.site.urls),
? ? path(r'', TemplateView.as_view(template_name="index.html")),
]
?8、配置Django項目的模板搜索路徑和靜態(tài)文件搜索路徑 找到根目錄下 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',
? ? ? ? ? ? ],
? ? ? ? },
? ? },
]# Add for vue.jsSTATICFILES_DIRS = [
? ? os.path.join(BASE_DIR, "frontend/dist/static"),
]
9、到此基本就配置完成了盖腕，運行命令就可以直接查看效果
python manage.py runserver
記錄一些踩過的坑
1赫冬、django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.
如果你的Django是最新的2.2,PyMySQL也是最新的0.93的話，你會發(fā)現(xiàn)Django會報錯：
django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.
這個是Django對MySQLdb版本的限制溃列，我們使用的是PyMySQL劲厌，所以不用管它
在Python安裝路徑下的Python36-32\Lib\site-packages\django\db\backends\mysql\base.py文件下，注釋下面語句
if version < (1,3,3):
????raise ImproperlyConfigured("mysqlclient 1.3.3 or newer is required; you have %s"% Database.__version__)
這樣就可以順利運行了听隐。
2补鼻、AttributeError: ‘str‘ object has no attribute ‘decode‘
緊接著上一個錯誤，出現(xiàn)了AttributeError: ‘str‘ object has no attribute ‘decode‘雅任，發(fā)現(xiàn)是對字符串進(jìn)行了decode解碼操作：（一般對字符串進(jìn)行編碼风范，二進(jìn)制進(jìn)行解碼）
其實也是python3的問題，我們用了pymysql沪么，所以也可以不管他
在Python安裝路徑下的Python36-32\Lib\site-packages\django\db\backends\base\mysql\operations.py147行
query = query.decode(errors='replace')
改為
query = query.encode(errors='replace')
