1、vuex插件
實現組件之間信息相互的交互，主要開發移動端端使用，因為瀏覽器可以有數據庫直接各組件從數據庫中拿數據即可
1、vuex是實現任何組件之間信息交互的，可以理解為全局的一個單例，為任何一個組件共享vue倉庫的數據
2、在任何一個組件的邏輯里，都可以訪問倉庫
-
先在倉庫里(store/index.js)中定義變量，用來存儲共享數據
state: { info: '共享數據的初始值' },
-
在組件邏輯中獲取倉庫值
let 變量 = this.$store.state.info
-
在組件邏輯中更新倉庫值
this.$store.state.info = '新值'
注：vuex通常運用開發移動端項目，pc端可以用localStorage或sessionStorage數據庫來替換數據
原因：vuex中的數據，會在頁面刷新后，重置store/index.js配置的默認值
<h1>免費課</h1> <input type="text" v-model="info"> <p>{{ info }}</p> created (){ // this.info = this.$store.state.info // 利用瀏覽器的數據庫可以直接存取 this.info = localStorage.info }, watch:{ info (){ // this.$store.state.info=this.info localStorage.info=this.info } }
前端存儲數據大匯總
1、cookie：一字符串形式存儲，數據有過期時間
2、localStorage：以對象形式存儲，數據永久保存
3、sessionStorage：以對象形式存儲，頁面關閉數據就沒了
4、vuex中的store：以對象形式存儲，當頁面刷新數據就會重置（移動端不能刷新，所以只有應用大退才會重置）
2、前后台交互的方式
1、form表單方式
-
get和post兩種方式，get請求包含直接在瀏覽器中輸入的url回車后發送的請求
-
該方式一定會發送頁面的跳轉（刷新頁面是本頁面跳轉），后台決定頁面的跳轉的url
2、Ajax異步方式
-
有get | post | patch | put | delete 等多種請求方式，請求的目的都是異步獲取后台的數據
-
該方式的特點是不會刷新頁面，可以得到新的數據，前台自己完成也頁面的局部刷新、整體刷新、頁面跳轉-前台決定頁面的路由
注意：
-
前后台不分離的項目，采用form表單提交，可以完成頁面的跳轉，Ajax異步請求完成頁面的局部刷新
-
前后台分離項目，采用form表單提交請求， 頁面刷新和頁面跳轉的請求都是由Ajax完成的，只不過頁面的跳轉后台相應的是跳轉到相應的url，前台再自己完成跳轉
-
前后台分離項目，前台也會出現大量的form表單，但是form表單的提交按鈕，不是走的submit提交，而且Ajax請求
3、axios插件：完成前后台Ajax交互的
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', }) }
4、同源策略-跨域問題
Django默認是同源策略，所以前后台分離的項目，訪問Django會出現CORS跨域問題的報錯
1、什么叫跨域（以下三者滿足一個就是跨域）
-
IP不同：前后台（兩個服務器）不在一台主機上運行的
-
port不同：前后台（兩個服務器）是相互獨立的，運行在不同的端口之上
-
協議不同：HTTP與HTTPS直接也同樣是跨域
2、解決跨域
-
偽裝：將前台請求偽裝成后台自己對自己發送請求
-
后台主動允許跨域，后台配置允許跨域即可（響應頭中處理）
3、Django中解決跨域問題：
-
在Django中安裝模塊
pip install django-cors-headers
-
Django中配置文件中注冊app
INSTALLED_APPS = ['corsheaders' ]
-
Django中配置文件中添加中間件
MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware' ]
-
Django中配置文件中允許跨域
CORS_ORIGIN_ALLOW_ALL = True
5、前后台分離項目交互流程
1、先啟動前后台項目
2、前台配置頁面的路由，渲染前台頁面 | 后台配置數據路由，響應數據（處理好的跨域問題）
3、前台通過Ajax請求后台接口
-
將前台請求數據提交給后台
-
前台得到響應的結果
-
根據響應的結果的數據，最后完成頁面的局部刷新、整體刷新、頁面跳轉
異步請求細節
1、vue框架用axios完成Ajax異步請求
-
main.js中配置
import axios from 'axios' Vue.prototype.$axios = axios; -
語法：this.$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、前台提交數據的兩種方式：
-
url拼接參數：
-
所有的請求都擁有的提交方式
-
該方式數據都會在url后面以？拼接方式傳給后台
-
提交數據只能采用url字符串提交給后台，數據是不安全的
-
axios插件可以用params屬性攜帶url拼接參數，和url后直接？拼接是一樣的
-
-
數據包參數：
-
除了get請求外的所有請求都擁有的提交數據的方式
-
該方式會將數據進行加密，打包提交給后台
-
打包加密的方式有三種：urlencoded(form表單默認的方式)、form-data(可以提交文件)、json(提交json數據)
-
axios插件可以用data屬性攜帶數據包參數
-
3、注意：
-
this.$axios({}).then(response => {}).catch(error => {})中的then和catch是回調函數，不能寫function，因為實際vue開發中，一定會在回調函數中用到this語法 (代表vue對象)，而在function函數中使用的this語法function就變成了類了，(this不是指代vue對象了)
-
原生Django沒有提供所有類型的數據包解析規則，但是數據會在request.body中，可以自動解析；Django-rest-framework框架是提供了三種類型的數據包參數解析
6、element-ui插件
element-ui就類似於Bootstrap框架，前者是在vue中運用，后者是在原生項目中運用，也可以在vue中使用
環境搭建：
-
安裝：在前端項目根目錄下的終端 cnpm install element-ui
-
配置：main.js
import ElementUI from 'element-ui'
Vue.use(ElementUI);
import 'element-ui/lib/theme-chalk/index.css';
-
使用：根據視頻和官方API接口
7、jq+bs插件
在vue中也可以使用Bootstrap框架來進行布局，下面是先配置后再使用Bootstrap語法
1、jq環境搭建
-
安裝：在前端項目根目錄下的終端
-
配置：自己在項目根目錄下新建 vue.config.js
const webpack = require("webpack"); module.exports = { configureWebpack: { devServer: { port: 8080, // 在DevServe中可以更改vue端口 }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.$": "jquery", "window.jQuery": "jquery", Popper: ["popper.js", "default"] }) ] } }; -
在main.js中配置：
import ElementUI from 'element-ui' Vue.use(ElementUI); import 'element-ui/lib/theme-chalk/index.css';
2、bs環境搭建：
-
安裝：在前端項目根目錄下的終端，@選擇版本
cnpm install bootstrap@3
-
配置：在main.js中配置
import BootStrap from "bootstrap" import "bootstrap/dist/css/bootstrap.css" Vue.use(BootStrap)