Vue 前后台交互，插件

目錄

• Vuex 插件
• 前端存儲數據匯總
• 前后台交互方式（重點）
• axios 插件
• 同源策略-跨域問題
• 前后台分離項目交互流程
• 異步請求細節
• Element-ui 插件
• jQ + Bs插件
• Django 國際化配置
• 總結

Vuex 插件

Vuex 插件可以完成任意組件間信息交互（移動端）了解

1. vuex是實現任何組件間的信息交互的，可以理解為全局的一個單例，為任何一個組件共享vue倉庫里的數據

2. 在任何一個組件的邏輯里，都可以訪問倉庫

   • 先在倉庫里(store/index.js)定義變量，用來存儲共享數據

   state: {
           info: '共享數據的初始值'
       },
   

   • 在組件邏輯中獲取倉庫值

   let 變量 = this.$store.state.info
   

   • 在組件邏輯中更新倉庫值

   this.$store.state.info = '新值'
   

注：vuex通常運用在開發移動端項目，pc端項目可以用localStorege和sessionStorege數據庫來替換
原因：vuex中的數據，會在頁面刷新后，重置到store/index.js配置的默認值

前端存儲數據匯總

1. cookie：以字符串形式存儲，數據有過期時間（過期時間到，數據失效嗎，否則永遠有效）
2. localStorage：以對象形式存儲，數據永久保存
3. sessionStorage：以對象形式存儲，生命周期同所屬頁面標簽（頁面不關閉，數據就有效）
4. vuex(store)：以對象形式存儲，當頁面刷新數據就重置（移動端不能刷新，所以只有應用大退才會重置）

前后台交互方式（重點）

1. Form 表單方式
   • get | post 兩種請求方式，get請求包含直接在瀏覽器中輸入 url 回車后發送的請求
   • 該方式的特點是一定會發生頁面的跳轉（刷新頁面叫本頁跳轉） - 后台決定頁面路由
2. Ajax 異步加載
   • get | post | patch | put | delete 等眾多請求方式，請求的目的都是異步獲取后台的數據
   • 該方式的特點是不會刷新頁面，只是得到新的數據，前台自己完成頁面的局部刷新、整體刷新、頁面跳轉 - 前台決定頁面路由

注意：

• 前后台不分離項目，采用form表單請求，可以完成頁面跳轉，同步ajax異步請求完成頁面局部刷新

• 前后台分離項目，不采用form表單請求，頁面刷新、頁面跳轉的請求，都是由ajax完成，只不過頁面跳轉，后台相應的是跳轉的目標url，前台再自己完成跳轉

• 前后台分離項目，前台也會出現大量的form表單，但是form表單的提交按鈕，走的不是form表單的submit提交，而是ajax請求

axios 插件

完成前后台 Ajax 交互

1 安裝：在前端項目根目錄下的終端

cnpm install axios

2 項目配置：main.js

import axios from 'axios'
Vue.prototype.$axios = axios;

3 在任何一個組件的邏輯中，都可以訪問 this.$axios()

beforeMount() {
this.axios({
	url: '/login/',
	method: 'post',
	headers: {
		authorization: 'jwt token',
	},
	params: {
		
	},
	data: {
		
	}
}).then(response => {
	response.data
}).catch(error => {
	error.response.data
}) 

同源策略-跨域問題

1 django 默認是同源策略，所以前后台分離項目，訪問 django 會出現 CORS 跨域問題的報錯

2 什么叫跨域？

• ip不同：前后台（兩個服務器）不在一台主機上運行的
• port不同：前后台（兩個服務器）是相互獨立的，運行在不同的端口之上
• 協議不同：http與https之間也同樣是跨域問題

注：三者滿足一個，就是跨域

3 解決跨域

• 偽裝：將前台請求偽裝成后台自己對自己發生的請求
• 后台主動允許跨域：后台配置允許跨域即可（在響應頭中處理）

4 Django 解決跨域

• pip install django-cors-headers

• 注冊APP

  • INSTALLED_APPS = [
    	...
    	'corsheaders'
    ]
    

• 添加中間件

  • MIDDLEWARE = [
    	...
    	'corsheaders.middleware.CorsMiddleware'
    ]
    

• 允許跨域源

  • CORS_ORIGIN_ALLOW_ALL = True
    
    

前后台分離項目交互流程

1. 啟動前后台項目
2. 前台配置頁面路由，渲染前台頁面 | 后台配置數據路由，響應數據（處理好跨域問題）
3. 前台通過ajax請求后台接口
   • 將前台數據提交給后台
   • 得到后台的響應結果
   • 根據響應結果的數據，最后完成頁面的局部刷新、整體刷新、頁面跳轉

異步請求細節

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 前台提交數據的兩種方式

url 拼接參數：

所有請求都擁有的提交數據的方式

該方式會將數據在請求 url 后用 ‘ ？’ 拼接的方式提交給后台

提交數據只能采用 url 字符串方式提交后台，數據是不安全的

axios 插件可以用 params 屬性攜帶 url 拼接參數

數據包參數：

除 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 插件

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插件

jQuery環境搭建：

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"]
            })
        ]
 	}
};

Bootstarp 環境搭建

1 安裝：在前端項目根目錄下的終端

cnpm install bootstarp@3

2 配置：自己在根目錄下新建 vue.config.js

import BootStrap from "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
Vue.use(BootStrap)

Django 國際化配置

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

總結

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-ul

提供布局

4 jQuery + Bootstarp

提供布局