整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
用的python
mysql5.5安裝方法地址：https://jingyan.baidu.com/article/647f011591f1eb7f2148a81a.html
由于編輯器不友好，python代碼的縮進(jìn)直接刪除了，所以就放百度盤地址：https://pan.baidu.com/s/1nuS2xPB
這里就不提供mysql的安裝方法了。
因?yàn)槭莗ython小項(xiàng)目，因此mysql建表之類的操作，直接可以用Navicat Premium來解決。
記住，怎么方便怎么來。
代碼功能解析：python3超級(jí)簡(jiǎn)單的爬蟲就是下面這樣，通篇代碼演示的是：通過在百度中搜索關(guān)鍵詞，設(shè)定指定頁(yè)數(shù)，然后采集標(biāo)題，存為一個(gè)set，再通過這些標(biāo)題拿內(nèi)容。
#num為頁(yè)數(shù)，設(shè)定一個(gè)url，將兩者結(jié)合，然后用requests.get這個(gè)url，html.encoding=html.apparent_encoding是將源碼編碼強(qiáng)制轉(zhuǎn)換，最后一步將內(nèi)容賦值給dome ，然后就可以print。
num=0
while num < 500:
url='http://www.baidu.com/s?wd=site%3Abaike.baidu.com%20您住宿的絕佳選擇%20好巧網(wǎng)&pn=' + str(num)
html=requests.get(url)
html.raise_for_status()
html.encoding=html.apparent_encoding
dome=html.text
WHAT?就這樣結(jié)束了？這么簡(jiǎn)單？
你以為就這樣結(jié)束了？以下是升級(jí)版的內(nèi)容。
titles=set()
num=0
while num < 500:
url='http://www.baidu.com/s?wd=site%3Abaike.baidu.com%20您住宿的絕佳選擇%20好巧網(wǎng)&pn=' + \
str(num)
#try except 捕捉異常
try:
html=requests.get(url)
html.raise_for_status()
html.encoding=html.apparent_encoding
dome=html.text
if "您住宿的絕佳選擇" in str(dome):
#BeautifulSoup初始化，用html.parser解析處理html
soup=BeautifulSoup(dome, "html.parser")
#haoqiao=[titles.add(h3.string[:-5]) for h3 in soup.find_all('h3', class_="t") if h3.string is not None]
#用find_all查找標(biāo)題
haoqiao=soup.find_all('h3', class_="t")
for haoqiao_title in haoqiao:
if haoqiao_title.string:
name=(haoqiao_title.string[:-5])
#將采集到的標(biāo)題寫入到titles這個(gè)set
titles.add(name)
num +=10
print ("正在爬取第%d頁(yè)搜索結(jié)果標(biāo)題" % (int(num / 10)))
except Exception as err:
print(err)
說了這么多，還是沒說怎么存?。。?！
要在mysql中建一個(gè)表baidubaike，
'''
表結(jié)構(gòu)，這里直接用sql語(yǔ)句代替了，也不詳細(xì)說了。
CREATE TABLE `NewTable` (
`title` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL ,
`quote` mediumtext CHARACTER SET utf8 COLLATE utf8_general_ci NULL ,
PRIMARY KEY (`title`)
)
ENGINE=InnoDB
DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci
ROW_FORMAT=COMPACT
;
"""
import requests
from bs4 import BeautifulSoup
import pymysql
import re
import time
import hashlib
#import redis
##創(chuàng)建Redis連接池
##pool=redis.ConnectionPool(host='localhost', port=6379,db=0)
##r=redis.Redis(connection_pool=pool)
'''
這部分是連接mysql
'''
db=pymysql.connect(host="127.0.0.1",
user="root",
password="root",
db="test",
charset="utf8")
cursor=db.cursor()
#這部分采集標(biāo)題
titles=set()
num=0
while num < 500:
url='http://www.baidu.com/s?wd=site%3Abaike.baidu.com%20您住宿的絕佳選擇%20好巧網(wǎng)&pn=' + \
str(num)
try:
html=requests.get(url)
html.raise_for_status()
html.encoding=html.apparent_encoding
dome=html.text
if "您住宿的絕佳選擇" in str(dome):
soup=BeautifulSoup(dome, "html.parser")
#haoqiao=[titles.add(h3.string[:-5]) for h3 in soup.find_all('h3', class_="t") if h3.string is not None]
haoqiao=soup.find_all('h3', class_="t")
for haoqiao_title in haoqiao:
if haoqiao_title.string:
name=(haoqiao_title.string[:-5])
titles.add(name)
num +=10
print ("正在爬取第%d頁(yè)搜索結(jié)果標(biāo)題" % (int(num / 10)))
except Exception as err:
print(err)
這部分通過上面的標(biāo)題來采集內(nèi)容，中間有直接寫入mysql
for baike_haoqiao in titles:
results=[]
url2="http://baike.baidu.com/item/" + baike_haoqiao
try:
haoqiao_html=requests.get(url2)
haoqiao_html.raise_for_status()
haoqiao_html.encoding=haoqiao_html.apparent_encoding
if haoqiao_html.status_code==200:
dome1=haoqiao_html.text
haoqiao_soup=BeautifulSoup(dome1, "html.parser")
haoqiao_soup_html_title=haoqiao_soup.find('h1').string
haoqiao_soup_html_quote=re.findall('<div class="main-content">(.*?)<div class="side-content">',dome1,re.S)
results.append(
(haoqiao_soup_html_title, haoqiao_soup_html_quote))
#這里開始插入新行，和執(zhí)行內(nèi)容寫入
sql="INSERT INTO baidubaike VALUES (%s, %s)"
try:
result=cursor.executemany(sql, results)
db.commit()
print("正在寫入 %s." % haoqiao_soup_html_title )
except Exception as e:
print(e)
db.rollback()
except Exception as err2:
print(err2)
cursor.close()
db.close()
在半年前，Python團(tuán)隊(duì)就公布了正式版大概上線的時(shí)間，并不斷迭代測(cè)試版本，而就在本月初，眾望所歸的3.9終于帶著諸多令人驚喜的新特性正式發(fā)布了。
對(duì)Python程序員們來說，Python團(tuán)隊(duì)如此勤懇地推出新功能，那必須要通過爆肝學(xué)習(xí)來表示支持啦！來看看這次大升級(jí)的重點(diǎn)吧！
新語(yǔ)法特性：
· PEP 584，為 dict 增加合并運(yùn)算符。
· PEP 585，標(biāo)準(zhǔn)多項(xiàng)集中的類型標(biāo)注泛型。
· PEP 614，放寬對(duì)裝飾器的語(yǔ)法限制。
新內(nèi)置功能：
· PEP 616，移除前綴和后綴的字符串方法。
新標(biāo)準(zhǔn)庫(kù)中的特性：
· PEP 593，靈活的函數(shù)和變量標(biāo)注。
· 添加了os.pidfd_open() ，允許不帶競(jìng)爭(zhēng)和信號(hào)的進(jìn)程管理。
解釋器的改進(jìn)：
· PEP 573，從C擴(kuò)展類型的方法快速訪問模塊狀態(tài)。
· PEP 617，從Python現(xiàn)在使用基于PEG的新解析器。
現(xiàn)在，使用以下命令加速了許多Python內(nèi)置函數(shù)（范圍，元組，集合，frozenset，列表，字典）PEP 590矢量通話；
· 垃圾回收不會(huì)阻止復(fù)活的對(duì)象；
· 許多Python模塊（_abc，audioop，_bz2，_codecs，_contextvars，_crypt，_functools，_json，_locale，math，operator，resource， time，_weakref）現(xiàn)在使用通過PEP 489定義多相初始化;
· 許多標(biāo)準(zhǔn)庫(kù)模塊（audioop，ast，grp， _hashlib，pwd，_posixsubprocess，random， select，struct，termios，zlib）現(xiàn)在正在使用的穩(wěn)定ABI通過PEP 384限定。
新庫(kù)模塊：
· PEP 615，IANA 時(shí)區(qū)數(shù)據(jù)庫(kù)現(xiàn)在已包含于標(biāo)準(zhǔn)庫(kù)的zoneinfo模塊。
· 圖的拓?fù)渑判驅(qū)崿F(xiàn)現(xiàn)在已由新的graphlib模塊提供。
更多更新內(nèi)容，詳見Python官方文檔：
https://docs.python.org/release/3.9.0/whatsnew/3.9.html
當(dāng)然，對(duì)于準(zhǔn)備學(xué)或者剛?cè)腴T的程序員來說，Python新特性其實(shí)并不是首要關(guān)注的點(diǎn)。不管更新多少新特性，入門學(xué)習(xí)依舊是從基礎(chǔ)語(yǔ)法再到高階算法循序漸進(jìn)的，不能一口吃成胖子。
零基礎(chǔ)都能學(xué)的Python訓(xùn)練營(yíng)來啦，原價(jià)199元，現(xiàn)在限量免費(fèi)學(xué)！5天方法論+代碼實(shí)操，入門Python一周就夠啦！
▼▼▼
零基礎(chǔ)學(xué)Python訓(xùn)練營(yíng)
零基礎(chǔ)學(xué)Python訓(xùn)練營(yíng)
《Python編程從入門到精通》
關(guān)于老師
管西京，《Python編程從入門到精通》的審校人，浪潮資深開發(fā)工程師，擁有12年開發(fā)經(jīng)驗(yàn)，精通各種主流開發(fā)語(yǔ)言。
你將學(xué)會(huì)
△ 高效學(xué)習(xí)Python方法論以及完整知識(shí)體系
△ 第一個(gè)程序，Python基礎(chǔ)語(yǔ)法的秘密
△ 深入學(xué)習(xí)運(yùn)算符和表達(dá)式
△ 常用分支語(yǔ)句（if、for循環(huán)、while循環(huán)）,循環(huán)控制語(yǔ)句使用
△ 列表、元組、字典基本操作應(yīng)用
△ 函數(shù)的返回值，變量的作用域，函數(shù)傳遞列表,匿名函數(shù)的使用
△ 函數(shù)和模塊的開發(fā)應(yīng)用
適用人群
①Python初學(xué)者
②職業(yè)發(fā)展迷茫想轉(zhuǎn)行Python
③升職加薪受阻（想要入門Python，但不清楚自己是否適合）
④計(jì)算機(jī)專業(yè)大學(xué)生
服務(wù)支持
5天（直播+錄播）視頻講解
班主任全程督學(xué)
講師全程社群和在線答疑（永久）
Python全程學(xué)習(xí)氛圍，互學(xué)互助
推薦實(shí)習(xí)和面試機(jī)會(huì)
形式與時(shí)間
朋友圈分享199元課程，免費(fèi)學(xué)訓(xùn)練營(yíng)【5天視頻講解+課后作業(yè)+班主任督學(xué)】，學(xué)前自行購(gòu)買紙書
時(shí)間：10月26日-10月30日
課程大綱
班主任督學(xué)開/結(jié)營(yíng)+1天直播+4天錄播+4次作業(yè)
圖書推薦
《Python編程從入門到精通》
作者： 葉維忠
內(nèi)容簡(jiǎn)介：
本書循序漸進(jìn)、由淺入深地詳細(xì)講解了Python語(yǔ)言開發(fā)的核心技術(shù)，并通過具體實(shí)例的實(shí)現(xiàn)過程演練了各個(gè)知識(shí)點(diǎn)的具體使用流程。
通過兩個(gè)綜合實(shí)例的實(shí)現(xiàn)過程，介紹了Python語(yǔ)言在綜合項(xiàng)目中的使用流程。全書內(nèi)容循序漸進(jìn)，以“技術(shù)解惑”和“范例演練”貫穿全書，引領(lǐng)讀者全面掌握Python語(yǔ)言。
質(zhì)文章，第一時(shí)間送達(dá)！
學(xué)習(xí)全文大概需要 12分鐘，內(nèi)容實(shí)戰(zhàn)性較強(qiáng)。
1. 前言
本篇將基于Python 3.7+Django 3.0結(jié)合Vue.js前端框架，為大家介紹如何基于這三者的技術(shù)棧來實(shí)現(xiàn)一個(gè)前端后離的Web開發(fā)項(xiàng)目。為了簡(jiǎn)化，方便讀者理解，本文將以開發(fā)一個(gè)單體頁(yè)面應(yīng)用作為實(shí)戰(zhàn)演示。
2. 先搞清楚什么是前后端分離
在正式開始實(shí)戰(zhàn)示例之前，我們有必要先弄清楚一個(gè)概念：什么是前后端分離?
前后端分離目前已成為互聯(lián)網(wǎng)項(xiàng)目開發(fā)的業(yè)界標(biāo)準(zhǔn)使用方式，在聊前后端分離之前，相信也有很多讀者，對(duì)如何區(qū)分前端還是后端，還搞不清楚（是不是讓我戳中了你的痛處了）。本著“致良知”，先科譜一下知識(shí)。
通常情況下，我們說的前端，大多是指瀏覽器這一端，一般是用Html+CSS+JS來實(shí)現(xiàn)的，所以通常會(huì)引申為用Html+CSS+JS寫的大部分程序都是前端，包括App，小程序，H5等。
PS: 在NodeJS出現(xiàn)之后，用NodeJS寫的后端部分，也會(huì)被人歸類為前端，為了區(qū)分之前的前端，就給他們起了一個(gè)名字，叫做“大前端”。
久而久之，人們習(xí)慣把Html+CSS+JS，運(yùn)行在瀏覽器端執(zhí)行的，稱之為前端。
而Java，C，Python，PHP這些運(yùn)行在服務(wù)器端的，統(tǒng)一稱之為后端。
但，這種以語(yǔ)言為分界點(diǎn)去區(qū)分前后端，真的合理么？顯然不合理！
前后端的定義，不應(yīng)該是以語(yǔ)言來定義，而是應(yīng)該以它的運(yùn)行環(huán)境，如果是在服務(wù)器端，就應(yīng)該被稱之為后端，代表著你看不見，摸不著。而如果運(yùn)行在用戶端，就應(yīng)該被稱之為前端，代表你是可以看得到的。
在不分前后端的時(shí)候，無(wú)論是Java還是JS，全都是一個(gè)人來寫。
為什么現(xiàn)在很多互聯(lián)網(wǎng)公司在項(xiàng)目開發(fā)時(shí)，都建議要進(jìn)行前后端分離，或者說前后端分離能帶來哪些優(yōu)勢(shì)？（好處多多，這里僅提兩個(gè)點(diǎn)）
第一個(gè)，并行開發(fā)、獨(dú)立部署、實(shí)現(xiàn)前后端解耦，前后端的進(jìn)度互不影響，在過去，前后端不分離的情況下，項(xiàng)目代碼耦合嚴(yán)重相互影響，且前后端人員工作量分布不均。
第二個(gè)，術(shù)業(yè)有專攻（開發(fā)人員分離），以前的JavaWeb項(xiàng)目大多數(shù)都是Java程序員又當(dāng)?shù)之?dāng)媽，又搞前端，又搞后端。前后端分離之后，前端工程師只管前端的事情，后端工程師只管后端的事情。
我們先看看一個(gè) Web 系統(tǒng)，在前后端不分離時(shí)架構(gòu)設(shè)計(jì)是什么樣的。
用戶在瀏覽器上發(fā)送請(qǐng)求，服務(wù)器端接收到請(qǐng)求，根據(jù) Header 中的 token 進(jìn)行用戶鑒權(quán)，從數(shù)據(jù)庫(kù)取出數(shù)據(jù)，處理后將結(jié)果數(shù)據(jù)填入 HTML 模板，返回給瀏覽器，瀏覽器將 HTML 展現(xiàn)給用戶。
而采用前后端分離之后，分離的是人員職責(zé)，人員職責(zé)分離了，因此架構(gòu)也發(fā)生變化。
前后端分離后，前端人員和后端人員約定好接口，前端人員不用再關(guān)心業(yè)務(wù)處理是怎么回事，他只需要把界面做好就可以了，后端人員也不用再關(guān)系前端界面是什么樣的，他只需要做好業(yè)務(wù)邏輯處理即可。
小結(jié)一下，前后端分離是什么？
前后端分離是一種架構(gòu)模式，或者說是最佳實(shí)踐，它主張將前端開發(fā)人員和后端開發(fā)人員的工作進(jìn)行解耦，盡量減少他她們之間的交流成本，幫助他她們更能專注于自己擅長(zhǎng)的工作。
PS: 本篇實(shí)戰(zhàn)示例，使用Vue.js作為前端框架，代替Django本身自帶的模板引擎，Django則作為服務(wù)端提供API接口，從而實(shí)現(xiàn)前后端分離。
3. 環(huán)境準(zhǔn)備
本實(shí)戰(zhàn)示例，基礎(chǔ)環(huán)境對(duì)應(yīng)安裝版本如下：
Python 3.7.4
Mysql 5.7
Pycharm （建議專業(yè)版）
Node
PS: 其中Python、Mysql、Pycharm、Node安裝過程皆較為簡(jiǎn)單，不是本文介紹重點(diǎn)，讀者可直接參考官網(wǎng)安裝方法。
4. 新建獨(dú)立的虛擬開發(fā)環(huán)境
1、創(chuàng)建一個(gè)用于Django項(xiàng)目開發(fā)的獨(dú)立虛擬環(huán)境，切換到本地開發(fā)目錄，輸入如下命令：
python3 -m venv venv2、創(chuàng)建完成后，目錄結(jié)構(gòu)如下：
? venv tree -L 2.├── bin│ ├── activate│ ├── activate.csh│ ├── activate.fish│ ├── easy_install│ ├── easy_install-3.7│ ├── pip│ ├── pip3│ ├── pip3.7│ ├── python -> python3│ └── python3 -> /usr/local/bin/python3├── include├── lib│ └── python3.7└── pyvenv.cfg4 directories, 11 files
3、進(jìn)入到bin目錄，輸入命令source activate 命令，激活虛擬環(huán)境。
4、虛擬環(huán)境激活后，如上圖所示。接下來，在虛擬環(huán)境安裝Django庫(kù)。
安裝Django （最新版本為3.0）
(venv) ? pip install DjangoDjango 項(xiàng)目源碼：
https://github.com/django/django
Django3.0 版本特性可查閱官網(wǎng)：
https://docs.djangoproject.com/en/3.0/releases/3.0/
5、安裝完成后，可檢查一下版本信息：
(venv) ? pythonPython 3.7.4 (default, Jul 9 2019, 18:15:00)[Clang 10.0.0 (clang-1000.11.45.5)] on darwinType "help", "copyright", "credits" or "license" for more information.>>> import django>>> print(django.get_version)3.0
可以發(fā)現(xiàn)，在虛擬環(huán)境中已經(jīng)成功安裝好了Django 3.0。
5. 創(chuàng)建Django后端項(xiàng)目
1、創(chuàng)建Django項(xiàng)目，采用Pycharm或者命令行創(chuàng)建皆可。此處，以命令行方式作為演示，項(xiàng)目名為django_vue。
(venv) ? django-admin startproject django_vue2. Django項(xiàng)目創(chuàng)建完成后，目錄結(jié)構(gòu)如下所示。
├── django_vue│ ├── django_vue│ │ ├── __init__.py│ │ ├── asgi.py│ │ ├── settings.py│ │ ├── urls.py│ │ └── wsgi.py│ └── manage.py
3、執(zhí)行同步數(shù)據(jù)庫(kù)文件(Django默認(rèn)數(shù)據(jù)庫(kù)為db.sqlite3)，執(zhí)行同步過程如下：
(venv) ? python manage.py migrateOperations to perform:Apply all migrations: admin, auth, contenttypes, sessionsRunning migrations:Applying contenttypes.0001_initial... OKApplying auth.0001_initial... OKApplying admin.0001_initial... OKApplying admin.0002_logentry_remove_auto_add... OKApplying admin.0003_logentry_add_action_flag_choices... OKApplying contenttypes.0002_remove_content_type_name... OKApplying auth.0002_alter_permission_name_max_length... OKApplying auth.0003_alter_user_email_max_length... OKApplying auth.0004_alter_user_username_opts... OKApplying auth.0005_alter_user_last_login_... OKApplying auth.0006_require_contenttypes_0002... OKApplying auth.0007_alter_validators_add_error_messages... OKApplying auth.0008_alter_user_username_max_length... OKApplying auth.0009_alter_user_last_name_max_length... OKApplying auth.0010_alter_group_name_max_length... OKApplying auth.0011_update_proxy_permissions... OKApplying sessions.0001_initial... OK
4、啟動(dòng)Django Server ，驗(yàn)證默認(rèn)配置是否正常。
(venv) ? python manage.py runserver 0.0.0.0:8000Watching for file changes with StatReloaderPerforming system checks...System check identified no issues (0 silenced).December 15, 2019 - 08:36:28Django version 3.0, using settings 'django_vue.settings'Starting development server at http://0.0.0.0:8000/Quit the server with CONTROL-C.
5、打開瀏覽器，訪問http://localhost:8000，一切正常的話，可見到如下界面。
6. 將Django數(shù)據(jù)庫(kù)更換為Mysql
1、假設(shè)在前面，我們已經(jīng)安裝配置好了Mysql，輸入如下命令進(jìn)入到Mysql。
mysql -u root -p2、創(chuàng)建數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)取名為django_vue_db，并設(shè)置字符集為utf-8。
mysql> CREATE DATABASE django_vue_db CHARACTER SET utf8;Query OK, 1 row affected (0.01 sec)
3、安裝myslqclient庫(kù)
(venv) ? pip install mysqlclient4、配置settings.py文件，配置Mysql數(shù)據(jù)庫(kù)引擎。
```pythonDATABASES={'default': {'ENGINE': 'django.db.backends.mysql','NAME': 'django_vue_db','USER': 'root','PASSWORD': 'xxxxxxx','HOST': '127.0.0.1',}}```
5、執(zhí)行同步操作，將數(shù)據(jù)遷移到Mysql。
python manage.py migrate6、驗(yàn)證是否切庫(kù)成功，進(jìn)入到Mysql客戶端，查看django初化表是否有生成。
mysql> use django_vue_db;Database changedmysql> show tables;+----------------------------+| Tables_in_django_vue_db |+----------------------------+| auth_group || auth_group_permissions || auth_permission || auth_user || auth_user_groups || auth_user_user_permissions || django_admin_log || django_content_type || django_migrations || django_session |+----------------------------+10 rows in set (0.00 sec)
7、運(yùn)行Django Server，重新訪問http://localhost:8000。
python manage.py runserver 0.0.0.0:8000如果能正常訪問，過程沒有報(bào)錯(cuò)，說明切換數(shù)據(jù)庫(kù)已經(jīng)成功了。
7. 創(chuàng)建Django實(shí)戰(zhàn)項(xiàng)目App
1、創(chuàng)建Django App，進(jìn)入django_vue項(xiàng)目主目錄，輸入如下命令：
(venv) ? python manage.py startapp api_test2、App創(chuàng)建完成后，目錄結(jié)構(gòu)如下所示：
├── api_test│ ├── __init__.py│ ├── admin.py│ ├── apps.py│ ├── migrations│ │ └── __init__.py│ ├── models.py│ ├── tests.py│ └── views.py
并把a(bǔ)pi_test加入到settings文件中的installed_apps列表里：
```pythonINSTALLED_APPS=['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','api_test',]```
3、 在api_test目錄下的models.py里我們簡(jiǎn)單寫一個(gè)model如下：
```python# -*- coding: utf-8 -*-from __future__ import unicode_literalsfrom django.db import modelsclass Book(models.Model):book_name=models.CharField(max_length=128)add_time=models.DateTimeField(auto_now_add=True)def __unicode__(self):return self.book_name```
只有兩個(gè)字段，書名book_name和添加時(shí)間add_time。如果沒有指定主鍵的話Django會(huì)自動(dòng)新增一個(gè)自增id作為主鍵。
4、在api_test目錄下的views里我們新增兩個(gè)接口，一個(gè)是show_books返回所有的書籍列表（通過JsonResponse返回能被前端識(shí)別的json格式數(shù)據(jù)），二是add_book接受一個(gè)get請(qǐng)求，往數(shù)據(jù)庫(kù)里添加一條book數(shù)據(jù)。
```pythonfrom django.shortcuts import renderfrom django.views.decorators.http import require_http_methodsfrom django.core import serializersfrom django.http import JsonResponseimport jsonfrom .models import Book@require_http_methods(["GET"])def add_book(request):response={}try:book=Book(book_name=request.GET.get('book_name'))book.saveresponse['msg']='success'response['error_num']=0except Exception as e:response['msg']=str(e)response['error_num']=1return JsonResponse(response)@require_http_methods(["GET"])def show_books(request):response={}try:books=Book.objects.filterresponse['list']=json.loads(serializers.serialize("json", books))response['msg']='success'response['error_num']=0except Exception as e:response['msg']=str(e)response['error_num']=1return JsonResponse(response)```
可以看出，在ORM的幫忙下，我們的接口實(shí)際上不需要自己去組織SQL代碼。
5、在api_test目錄下，新增一個(gè)urls.py文件，把我們新增的兩個(gè)接口添加到路由里：
from django.conf.urls import url, includefrom .views import *urlpatterns=[url(r"add_book$", add_book, ),url(r"show_books$", show_books, ),]```
6、我們還要把a(bǔ)pi_test下的urls添加到項(xiàng)目django_vue下的urls中，才能完成路由：
```pythonfrom django.contrib import adminfrom django.urls import pathfrom django.conf.urls import url, includefrom django.contrib import adminfrom django.views.generic import TemplateViewimport api_test.urlsurlpatterns=[url(r"^admin/", admin.site.urls),url(r'^api/', include(api_test.urls)),]```
7、在項(xiàng)目的根目錄，輸入命令：
python manage.py makemigrations api_testpython manage.py migrate
8、查詢數(shù)據(jù)庫(kù)，看到book表已經(jīng)自動(dòng)創(chuàng)建了：
mysql> show tables;+----------------------------+| Tables_in_django_vue_db |+----------------------------+| api_test_book || auth_group || auth_group_permissions || auth_permission || auth_user || auth_user_groups || auth_user_user_permissions || django_admin_log || django_content_type || django_migrations || django_session |+----------------------------+11 rows in set (0.00 sec)mysql> desc api_test_book;+-----------+--------------+------+-----+---------+----------------+| Field | Type | | Key | Default | Extra |+-----------+--------------+------+-----+---------+----------------+| id | int(11) | NO | PRI | | auto_increment || book_name | varchar(128) | NO | | | || add_time | datetime(6) | NO | | | |+-----------+--------------+------+-----+---------+----------------+3 rows in set (0.01 sec)mysql>```
Django生成的表名將以app名加上model中的類名組合而成。
9、在項(xiàng)目的根目錄，輸入命令：
python manage.py runserver 0.0.0.0:800啟動(dòng)服務(wù)，通過httpie測(cè)試一下我們剛才寫的兩個(gè)接口。
10、通過調(diào)用接口向Django App中添加兩條書名記錄。
```shell? http http://127.0.0.1:8000/api/add_book\?book_name\=mikezhou_talkHTTP/1.1 200 OKContent-Length: 34Content-Type: application/jsonDate: Sun, 15 Dec 2019 09:11:12 GMTServer: WSGIServer/0.2 CPython/3.7.4X-Content-Type-Options: nosniffX-Frame-Options: DENY{"error_num": 0,"msg": "success"}? http http://127.0.0.1:8000/api/add_book\?book_name\=測(cè)試開發(fā)技術(shù)HTTP/1.1 200 OKContent-Length: 34Content-Type: application/jsonDate: Sun, 15 Dec 2019 09:11:44 GMTServer: WSGIServer/0.2 CPython/3.7.4X-Content-Type-Options: nosniffX-Frame-Options: DENY{"error_num": 0,"msg": "success"}```
11、通過調(diào)用接口，顯示Django App中所有書名列表：
```shell? http http://127.0.0.1:8000/api/show_booksHTTP/1.1 200 OKContent-Length: 305Content-Type: application/jsonDate: Sun, 15 Dec 2019 09:13:48 GMTServer: WSGIServer/0.2 CPython/3.7.4X-Content-Type-Options: nosniffX-Frame-Options: DENY{"error_num": 0,"list": [{"fields": {"add_time": "2019-12-15T09:11:12.673Z","book_name": "mikezhou_talk"},"model": "api_test.book","pk": 1},{"fields": {"add_time": "2019-12-15T09:11:44.305Z","book_name": "測(cè)試開發(fā)技術(shù)"},"model": "api_test.book","pk": 2}],"msg": "success"}```
8. 新建Vue.js前端項(xiàng)目
1、有關(guān)Vue的模塊(包括vue)可以使用node自帶的npm包管理器安裝。推薦使用淘寶的 cnpm 命令行工具代替默認(rèn)的 npm。
npm install -g cnpm --registry=https://registry.npm.taobao.org2、先用cnpm安裝vue-cli腳手架工具（vue-cli是官方腳手架工具，能迅速幫你搭建起vue項(xiàng)目的框架）：
cnpm install -g vue-cli3、安裝好后，在django_vue項(xiàng)目根目錄下，新建一個(gè)前端工程目錄：
vue-init webpack frontend在創(chuàng)建項(xiàng)目的過程中會(huì)彈出一些與項(xiàng)目相關(guān)的選項(xiàng)需要回答，按照真實(shí)情況進(jìn)行輸入即可。
4、安裝 vue 依賴模塊
cd frontendcnpm installcnpm install vue-resourcecnpm install element-ui
5、現(xiàn)在我們可以看到整個(gè)文件目錄結(jié)構(gòu)是這樣的：
本文為了讀者方便查看，是直接將vue前端工程放在django項(xiàng)目目錄下，實(shí)際多人協(xié)作開發(fā)過程中，完全是可以放在不同代碼倉(cāng)庫(kù)下面的。
6、在frontend目錄src下包含入口文件main.js，入口組件App.vue等。后綴為vue的文件是Vue.js框架定義的單文件組件，其中標(biāo)簽中的內(nèi)容可以理解為是類html的頁(yè)面結(jié)構(gòu)內(nèi)容。
7、在src/component文件夾下新建一個(gè)名為Home.vue的組件，通過調(diào)用之前在Django上寫好的api，實(shí)現(xiàn)添加書籍和展示書籍信息的功能。在樣式組件上我們使用了餓了么團(tuán)隊(duì)推出的element-ui，這是一套專門匹配Vue.js框架的功能樣式組件。由于組件的編碼涉及到了很多js、html、css的知識(shí)，并不是本文的重點(diǎn)，因此在此只貼出部分代碼：
Home.vue文件代碼：
```vue<template><div class="home"><el-row display="margin-top:10px"><el-input v-model="input" placeholder="請(qǐng)輸入書名" style="display:inline-table; width: 30%; float:left"></el-input><el-button type="primary" @click="addBook" style="float:left; margin: 2px;">新增</el-button></el-row><el-row><el-table :data="bookList" style="width: 100%" border><el-table-column prop="id" label="編號(hào)" min-width="100"><template slot-scope="scope"> {{ scope.row.pk }} </template></el-table-column><el-table-column prop="book_name" label="書名" min-width="100"><template slot-scope="scope"> {{ scope.row.fields.book_name }} </template></el-table-column><el-table-column prop="add_time" label="添加時(shí)間" min-width="100"><template slot-scope="scope"> {{ scope.row.fields.add_time }} </template></el-table-column></el-table></el-row></div></template><script>export default {name: 'home',data {return {input: '',bookList:}},mounted: function {this.showBooks},methods: {addBook {this.$http.get('http://127.0.0.1:8000/api/add_book?book_name=' + this.input).then((response)=> {var res=JSON.parse(response.bodyText)if (res.error_num===0) {this.showBooks} else {this.$message.error('新增書籍失敗，請(qǐng)重試')console.log(res['msg'])}})},showBooks {this.$http.get('http://127.0.0.1:8000/api/show_books').then((response)=> {var res=JSON.parse(response.bodyText)console.log(res)if (res.error_num===0) {this.bookList=res['list']} else {this.$message.error('查詢書籍失敗')console.log(res['msg'])}})}}}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 {font-weight: normal;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}a {color: #42b983;}</style>```
8、在src/router目錄的index.js中，我們把新建的Home組件，配置到vue-router路由中：
```jsimport Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/components/HelloWorld'import Home from '@/components/Home'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Home',component: Home}]})```
9、在src/main.js文件中，導(dǎo)入element-ui、vue-resource庫(kù)。
```jsimport Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui'import VueResource from 'vue-resource'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)Vue.use(VueResource)Vue.config.productionTip=false/* eslint-disable no-new */new Vue({el: '#app',router,components: { App },template: '<App/>'})```
10、如果出現(xiàn)跨域問題，需要在Django層注入header，用Django的第三方包django-cors-headers來解決跨域問題：
pip install django-cors-headerssettings.py 修改：
```pythonMIDDLEWARE=['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```
PS: 注意中間件的添加順序。
12、在前端工程frontend目錄下，輸入npm run dev啟動(dòng)node自帶的服務(wù)器，瀏覽器會(huì)自動(dòng)打開， 我們能看到頁(yè)面：13、嘗試新增書籍，如填入：“自動(dòng)化測(cè)試實(shí)戰(zhàn)寶典”，新增的書籍信息會(huì)實(shí)時(shí)反映到頁(yè)面的列表中，這得益于Vue.js的數(shù)據(jù)雙向綁定特性。
14、在前端工程frontend目錄下，輸入npm run build，如果項(xiàng)目沒有錯(cuò)誤的話，就能夠看到所有的組件、css、圖片等都被webpack自動(dòng)打包到dist目錄下了：
9. 整合Django和Vue.js前端
目前我們已經(jīng)分別完成了Django后端和Vue.js前端工程的創(chuàng)建和編寫，但實(shí)際上它們是運(yùn)行在各自的服務(wù)器上，和我們的要求是不一致的。因此我們須要把Django的TemplateView指向我們剛才生成的前端dist文件即可。
1、 找到project目錄的urls.py，使用通用視圖創(chuàng)建最簡(jiǎn)單的模板控制器，訪問 『/』時(shí)直接返回 index.html:
```pythonurlpatterns=[url(r"^admin/", admin.site.urls),url(r'^api/', include(api_test.urls)),url(r'^$', TemplateView.as_view(template_name="index.html")),]```
2、上一步使用了Django的模板系統(tǒng)，所以需要配置一下模板使Django知道從哪里找到index.html。在project目錄的settings.py下：
```pythonTEMPLATES=[{'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',],},},]```
3、 我們還需要配置一下靜態(tài)文件的搜索路徑。同樣是project目錄的settings.py下：
```python# Add for vuejsSTATICFILES_DIRS=[os.path.join(BASE_DIR, "frontend/dist/static"),]```
4、 配置完成，我們?cè)趐roject目錄下輸入命令python manage.py runserver，就能夠看到我們的前端頁(yè)面在瀏覽器上展現(xiàn)：
注意此時(shí)服務(wù)的端口已經(jīng)是Django服務(wù)的8000而不是node服務(wù)的8080了，說明我們已經(jīng)成功通過Django集成了Vue前端工程。
該實(shí)戰(zhàn)示例為大家充分展示了現(xiàn)在主流的前后端分離方式，由前端框架，如Vue.js來構(gòu)建實(shí)現(xiàn)前端界面，再通過后端框架，如Django來實(shí)現(xiàn)API數(shù)據(jù)提供，兩者通過接口進(jìn)行通訊、相輔相成、最終實(shí)現(xiàn)一個(gè)完整Web項(xiàng)目。
聲明：前后端分離圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
