1. 程式人生 > 實用技巧 >vue框架前後端分離專案之框架介紹及前後端配置等相關內容-116

vue框架前後端分離專案之框架介紹及前後端配置等相關內容-116

1 軟體開發規範
2 pip換源
1、檔案管理器檔案路徑位址列敲:%APPDATA% 回車,快速進入 C:\Users\電腦使用者\AppData\Roaming 資料夾中
2、新建 pip 資料夾並在資料夾中新建 pip.ini 配置檔案
3、新增 pip.ini 配置檔案內容
3 虛擬環境(以後再寫新專案,直接用虛擬環境,儘量一個專案一個虛擬環境)
1 配置
-windows下
-pip3 install virtualenv # 虛擬環境模組
-pip3 install virtualenvwrapper-win # workon命令,會產生一個可執行檔案virtualenvwrapper.bat
-環境變數:WORKON_HOME: D:\Virtualenvs
-Linux,mac
-pip3 install virtualenv # 虛擬環境模組
-pip3 install virtualenvwrapper # virtualenvwrapper.sh
# 在 ~/.bash_profile 完成配置,virtualenvwrapper的預設預設存放虛擬環境路徑是 ~/.virtualenvs
# WORKON_HOME=自定義存放虛擬環境的絕對路徑,需要自定義就解注
VIRTUALENVWRAPPER_PYTHON=/usr/local/bin/python3
source /usr/local/bin/virtualenvwrapper.sh
# 在終端讓配置生效:
source ~/.bash_profile
2 命令
mkvirtualenv -p python3.6 虛擬環境名稱

4 路飛後臺
-django-admin命令建立專案
-目錄調整
luffyapi
-manage.py # 指令碼檔案(資料遷移,測試執行...)
-scripts # 測試指令碼
-logs
-luffyapi
-urls.py # 總路由,setting中配置
-settings
-dev.py # 開發階段用的配置檔案
-pro.py # 上線階段用的配置檔案
-libs # 第三方的庫
-utils # 自己寫的公共方法
-wsgi.py # 上線階段的啟動檔案
-apps # 所有的app
-user # user app
-course
-home
-調整完能執行
-django啟動是依據settings.py啟動,配置檔案路徑配置正確
-wsgi.py 後期上線要改
-把專案根路徑加入環境變數(匯入模組,基於小luffyapi檔案加匯入)
-把apps資料夾加入到環境變數(再配置檔案中,註冊app時候,直接寫名字即可)
-pycharm中匯入報錯(實質沒錯),把加入環境變數的檔案加作為了source root
5 資料庫配置
-建立資料庫使用者,授予luffy這個庫的所有許可權,建立luffy使用者,密碼是Luffy123?
grant all privileges on luffy.* to 'luffy'@'%' identified by 'Luffy123?';
grant all privileges on luffy.* to 'luffy'@'localhost' identified by 'Luffy123?';
flush privileges; #修改落到硬碟上了,把許可權,使用者更新到記憶體


-再django配置檔案中
import os
user=os.environ.get('db_user','root')
password=os.environ.get('db_password','123')
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'luffy', # 庫名
'USER': user, # 使用者名稱
'PASSWORD': password,
'HOST': 'localhost',
'PORT': 3306
}
}
import pymysql
pymysql.install_as_MySQLdb()
-使用環境變數配置資料庫的使用者名稱和密碼
import os
user=os.environ.get('db_user')
password=os.environ.get('db_password')

6 前端建立專案
-vue create luffycity
-配置執行

0 路飛前臺配置

1 node_models 資料夾內放了一堆當前專案的依賴(刪掉:傳git,給別人)
2 如果專案中沒有這個資料夾
cnpm install (pip3 istall -r requements.txt)
3 目錄介紹
luffycity # 專案
-node_modules # 專案依賴,可以刪除 執行npm install 會安裝
-public
-index.html # 專案整個index.html 單要麼開發
-favicon.ico # favicon圖示
-src
main.js # 整個專案的入口js檔案(django的setting.py)
components # 元件
views # 頁面元件
assets # 靜態資源,圖片...
store # vuex:狀態管理器的相關配置和使用,cookie,localstorage,sessionstorage(https://www.cnblogs.com/pengc/p/8714475.html)
router # 路由相關:不同元件之間跳轉
App.vue # 根元件(<div id='box'></div>)

babel.config.js
package.json # 相當於咱麼的requements.txt,專案依賴,配置。。。不能刪
package-lock.json #
.gitignore
.editorconfig
README.md

router的使用

1 再要跳轉的位置加(等同於原來的a標籤)
<router-link to="/">首頁</router-link> |
2 roueter資料夾 index.js

前臺配置

0 全域性樣式,配置檔案
1 axios
2 vue-cookies
3 elementui

1 User表配置

2 封裝全域性Response物件和全域性異常

1 原來使用
def get_logger(name):
'''log日誌
'''
logging.config.dictConfig(setting.LOGGING_DIC) # 匯入上面定義的logging配置
logger = logging.getLogger(name) # 生成一個log例項
return logger

2 djaong中更實用
import logging
logger = logging.getLogger('django')

3 配置日誌,記錄日誌

4 跨域問題及解決

1 同源策略:瀏覽器的安全策略,不允許向不同的域傳送請求獲取資料
http://127.0.0.1:8080/
http://127.0.0.1:8000/
這倆不是同一個域(地址,埠不一樣,就不是一個域),傳送請求,能發出去,資料也回來了
但是被瀏覽器的同源策略阻止了
2 前後端分離後,會存在跨域
-前端專案和後端專案跑在不同的埠上
3 解決跨域問題
-第一種:前端解決(通過代理解決)
-第二種:自己解決(自己寫程式碼解決)
-第三種:藉助第三方模組(pip install django-cors-headers)
-下載
-app中註冊:corsheaders
-配置中介軟體:
'corsheaders.middleware.CorsMiddleware',
-修改配置檔案
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:8080',
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)

CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)

5 前後端打通

mounted() {
// this.$axios.get('http://127.0.0.1:8000/user/test/')
this.$axios.get(this.$settings.base_url+'/user/test/').then(res=>{
console.log(res.data)
})
},

拓展

1 Python 獲取環境變數的幾種方式(django專案中配置檔案,資料庫使用者和密碼通過環境變數獲取)
2 cookie,localstorage,sessionstorage區別(https://www.cnblogs.com/pengc/p/8714475.html)
3 pyechars的使用(研究一下)
4 2.2.2需要改原始碼的原因,你使用了pymysql來操作mysql資料庫
-如果使用mysqlclient操做mysql,就不需要改原始碼了,並且
import pymysql
pymysql.install_as_MySQLdb()
-mysqlclient安裝麻煩,解決起來:http://liuqingzheng.top/python/%E5%85%B6%E4%BB%96/01-%E5%90%84%E4%B8%BB%E6%B5%81Linux%E7%B3%BB%E7%BB%9F%E8%A7%A3%E5%86%B3pip%E5%AE%89%E8%A3%85mysqlclient%E6%8A%A5%E9%94%99/