vuex外掛、前端儲存資料、前後臺互動方式、axios外掛、同源策略 - 跨域問題、前後臺分離專案互動流程、非同步請求細節、element-ui外掛、jq+bs外掛、bs環境搭建、Django國際化配置
阿新 • • 發佈:2020-09-09
```python
"""
第三方外掛:
1)vuex:元件間互動的(移動端)
2)axios - 前後臺(django):ajax
3)element-ui:頁面佈局
4)jq+bs:jQuery+BootStrap
"""
```
### vuex外掛:可以完成任意元件間資訊互動(移動端) - 瞭解
```python
"""
1)vuex是實現任何元件間的資訊互動的,可以理解為全域性的一個單例,為任何一個元件共享vue倉庫裡的資料
2)在任何一個元件的邏輯裡,都可以訪問倉庫
i)現在倉庫裡(store/index.js)定義變數,用來儲存共享資料
state: {
info: '共享資料的初始值'},
ii)在元件邏輯中獲取倉庫值
let 變數 = this.$store.state.info
iii)在元件邏輯中更新倉庫值
this.$store.state.info = '新值'
注:vuex通常運用在開發移動端專案,pc端專案可以用localStorege和localStorege資料庫來替換
原因:vuex中的資料,會在頁面重新整理後,重置到store/index.js配置的預設值
"""
```
### 前端儲存資料大彙總
```python
"""
1)cookie:以字串形式儲存,資料有過期時間(過期時間到,資料失效嗎,否則永遠有效)
2)localStorage:以物件形式儲存,資料永久儲存
3)sessionStorage:以物件形式儲存,生命週期同所屬頁面標籤(頁面不關閉,資料就有效)
4)vuex(store):以物件形式儲存,當頁面重新整理資料就重置(移動端不能重新整理,所以只有應用大退才會重置)
"""
```
### 前後臺互動方式(重點)
```python
"""
1)form表單方式
i)get | post 兩種請求方式,get請求包含直接在瀏覽器中輸入url回車後傳送的請求
ii)該方式的特點是一定會發生頁面的跳轉(重新整理頁面叫本頁跳轉) - 後臺決定頁面路由
2)ajax非同步方式
i)get | post | patch | put | delete 等眾多請求方式,請求的目的都是非同步獲取後臺的資料ii)該方式的特點是不會重新整理頁面,只是得到新的資料,前臺自己完成頁面的區域性重新整理、整體重新整理、頁面跳轉 - 前臺決定頁面路由
注:
i)前後臺不分離專案,採用form表單請求,可以完成頁面跳轉,同步ajax非同步請求完成頁面區域性重新整理
ii)前後臺分離專案,不採用form表單請求,頁面重新整理、頁面跳轉的請求,都是由ajax完成,只不過頁面跳轉,後臺相應的是跳轉的目標url,前臺再自己完成跳轉
iii)前後臺分離專案,前臺也會出現大量的form表單,但是form表單的提交按鈕,走的不是form表單的submit提交,而是ajax請求
"""
```
### axios外掛:完成前後臺ajax互動的
```python
"""
1)安裝:在前端專案根目錄下的終端
cnpm install axios
2)專案配置:main.js
import axios from 'axios'
Vue.prototype.$axios = axios;
3)在任何一個元件的邏輯中,都可以訪問 this.$axios()
beforeMount() {
// 請求後臺
this.$axios({
url: this.$settings.base_url + '/test/',
method: 'delete',
})
}
"""
```
### 同源策略 - 跨域問題
```python
"""
一、django預設是同源策略,所以前後臺分離專案,訪問django會出現CORS跨域問題的報錯
二、什麼叫跨域
i)ip不同:前後臺(兩個伺服器)不在一臺主機上執行的
ii)port不同:前後臺(兩個伺服器)是相互獨立的,執行在不同的埠之上
iii)協議不同:http與https之間也同樣是跨域問題
注:三者滿足一個,就是跨域
三、解決跨域
i)偽裝:將前臺請求偽裝成後臺自己對自己發生的請求
ii)後臺主動允許跨域:後臺配置允許跨域即可(在響應頭中處理)
四、Django解決跨域
i)安裝模組:
pip install django-cors-headers
ii)註冊app:
INSTALLED_APPS = [
...
'corsheaders'
]
iii)新增中介軟體
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
iv)允許跨域源
CORS_ORIGIN_ALLOW_ALL = True
"""
```
### 前後臺分離專案互動流程
```python
"""
1)啟動前後臺專案
2)前臺配置頁面路由,渲染前臺頁面 | 後臺配置資料路由,響應資料(處理好跨域問題)
3)前臺通過ajax請求後臺介面
i)將前臺資料提交給後臺
ii)得到後臺的響應結果
iii)根據響應結果的資料,最後完成頁面的區域性重新整理、整體重新整理、頁面跳轉
"""
```
### 非同步請求細節
```python
"""
1)vue框架用axios完成ajax非同步請求
語法:this.$axios().then().catch();
解讀:$axios()是請求邏輯 | then()是正常響應邏輯 | catch()是錯誤響應邏輯
具體語法:
this.$axios({
url: '後臺介面連結',
method: '請求方式',
params: {}, // url拼接引數
data: {}, // 資料包引數
headers: {} // 請求頭引數
}).then(response => {
// response是http狀態2xx的響應結果,響應資料是response.data
}).catch(error => {
// error是http狀態4xx、5xx的響應結果,錯誤響應物件是error.response,錯誤響應資料是error.response.data
})
2)前臺提交資料的兩種方式:
i)url拼接引數:
所有請求都擁有的提交資料的方式
該方式會將資料都在請求url後用?拼接的方式提交給後臺
提交資料只能採用url字串方式提交給後臺,資料是不安全的
axios外掛可以用params屬性攜帶url拼接引數
ii)資料包引數:
除get請求外的所有請求都擁有的提交資料的方式
該方式會將資料進行加密,打包成資料包方式提交給後臺
打包加密資料有三種方式:urlencoded(form預設的方式)、form-data(可以提交檔案)、json(提交json資料)
axios外掛可以用data屬性攜帶資料包引數
"""
"""
注意項:
1)this.$axios({}).then(response => {}).catch(error => {}) 中的then和catch回撥函式,不能寫function,因為實際vue專案開發,一定會在回撥邏輯用到this語法(代表vue物件),而在function中使用了this語法,function就不是普通函數了(可以理解為類,this就不能代表vue物件了)
2)原生django沒有提供所有型別的資料包資料解析規則,但是資料會在request.body中,可以自己解析;Django-rest-framework框架是提供了三種類型的資料包引數解析
"""
```
### element-ui外掛
```python
"""
element-ui就類似於BootStrap框架,前者是在vue專案中運用,後者是在原生專案中運用,當然也可以在vue專案中運用
環境搭建:
1)安裝:在前端專案根目錄下的終端
cnpm install element-ui
2)配置:main.js
import ElementUI from 'element-ui'
Vue.use(ElementUI);
import 'element-ui/lib/theme-chalk/index.css';
3)使用:根據視訊和官方API介面
"""
```
### jq+bs外掛
```python
"""
一、jq環境搭建:
1)安裝:在前端專案根目錄下的終端
cnpm install jquery
2)配置:自己在專案根目錄下新建 vue.config.js
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.$": "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
二、bs環境搭建:
1)安裝:在前端專案根目錄下的終端
cnpm install bootstrap@3
2)配置:自己在專案根目錄下新建 vue.config.js
import BootStrap from "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
Vue.use(BootStrap)
"""
```
### Django國際化配置
```python
"""
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False
"""
```
## 小結
```python
"""
1)vuex
倉庫,擁有元件間傳參
前臺儲存資料的位置:cookie、localStorage、sessionStorage、vuex
2)axios
配置:安裝 => 配置給Vue.prototype.$axios
使用:this.$axios({}).then(response => {}).catch(error => {})
兩種請求:form(頁面跳轉,前後臺不分離) | ajax(只重新整理資料,所有型別專案都可以)
前後臺分離專案工作流程:前臺啟動提供頁面 => 後臺啟動提供資料 => 前臺渲染頁面並請求後臺資料
請求方式:get、post、patch、put、delete...
請求資料:
url拼接資料:所有請求都可以攜帶
資料包資料:只有get不能攜帶
資料包三種格式:urlencoded、form-data、json
3)element-ui
提供一堆佈局
4)jq+bs
提供一堆佈局
"""
```