文章目錄

• vue框架之前后台交互、element-ui
• vuex（了解）
• 前端存儲數據庫總匯
• cookie
• localStorage
• sessionStorage
• vuex(store)
• 前后台交互方式（重點）
• axios
• 同源策略-跨域問題
• 前后台分離項目交互流程
• 異步請求細節
• element-ui
• jq+bs
• Django國際化配置
• 小結

vue框架之前后台交互、element-ui

vuex（了解）

注：可以完成任意間組件信息交互（移動端）

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

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

  1. 現在倉庫里（store/index.js）定義變量，用來村粗共享數據

     state:{info:‘共享數據的初始值’}

  2. 在組件邏輯中獲取倉庫值

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

  3. 在組件邏輯中更新倉庫值

     this.$store.sate.info = ‘新值’

注：vuex通常運用在開發移動端項目，pc端項目可以用localstorege喝sessionstorege數據庫來替換

原因：vuex中的數據，會在頁面刷新后，重置到store/index.js配置的默認值

前端存儲數據庫總匯

cookie

以字符串形式存儲，數據有過期時間（過期時間到，數據失效，否則永遠有效）

localStorage

以對象形式存儲，數據永久保存

sessionStorage

以對象形式存儲，生命周期同所屬頁面標簽（頁面不關閉，數據就有效）

vuex(store)

以對象形式存儲，當頁面刷新數據就重置（移動端不能刷新，所以只有應用大退才會重置）

前后台交互方式（重點）

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

注：

1. 前后台不分離項目，采用form表單請求，可以完成頁面跳轉，同步ajax異步請求完成頁面局部刷新
2. 前后台分離項目，不采用form表單請求，頁面刷新、頁面跳轉的請求，都是由ajax完成，只不過頁面跳轉。后台相應的是跳轉的目標url，前台再自己完成跳轉
3. 前后台分離項目，前台也會出現大量的form表單，但是form表單的提交按鈕，走的不是form表單的submit提交，而是ajax請求

axios

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

   cnpm install axios

2. 項目配置：main.js

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

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

   beforMount(){
   //請求后台
       this.$axios({
           url:this.$settings.base_url + "/test/",
           method：'delete',
       })
   }
   

同源策略-跨域問題

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

二、什么叫跨域

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

三、解決跨域

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

四、Django解決跨域

1. 安裝模塊：
   pip install django-cors-headers
2. 注冊app：
   INSTALLED_APPS = [
   …
   ‘corsheaders’
   ]
3. 添加中間件
   MIDDLEWARE = [
   …
   ‘corsheaders.middleware.CorsMiddleware’
   ]
4. 允許跨域源
   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

一、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國際化配置

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-ui
   提供一堆布局

4. jq+bs
   提供一堆布局