vue第三方插件

vue第三方插件

一、vuex插件

實現組件之間信息相互的交互，主要開發移動端端使用，由於瀏覽器能夠有數據庫直接各組件從數據庫中拿數據便可

一、vuex是實現任何組件之間信息交互的，能夠理解爲全局的一個單例，爲任何一個組件共享vue倉庫的數據

二、在任何一個組件的邏輯裏，均可以訪問倉庫

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

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

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

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

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

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

前端存儲數據大彙總

一、cookie：一字符串形式存儲，數據有過時時間

二、localStorage：以對象形式存儲，數據永久保存

三、sessionStorage：以對象形式存儲，頁面關閉數據就沒了

四、vuex中的store：以對象形式存儲，當頁面刷新數據就會重置（移動端不能刷新，因此只有應用大退纔會重置）

二、先後臺交互的方式

一、form表單方式

1. get和post兩種方式，get請求包含直接在瀏覽器中輸入的url回車後發送的請求

2. 該方式必定會發送頁面的跳轉（刷新頁面是本頁面跳轉），後臺決定頁面的跳轉的url

二、Ajax異步方式

1. 有get | post | patch | put | delete 等多種請求方式，請求的目的都是異步獲取後臺的數據

2. 該方式的特色是不會刷新頁面，能夠獲得新的數據，前臺本身完成也頁面的局部刷新、總體刷新、頁面跳轉-前臺決定頁面的路由

注意：

1. 先後臺不分離的項目，採用form表單提交，能夠完成頁面的跳轉，Ajax異步請求完成頁面的局部刷新

2. 先後臺分離項目，採用form表單提交請求， 頁面刷新和頁面跳轉的請求都是由Ajax完成的，只不過頁面的跳轉後臺相應的是跳轉到相應的url，前臺再本身完成跳轉

3. 先後臺分離項目，前臺也會出現大量的form表單，可是form表單的提交按鈕，不是走的submit提交，並且Ajax請求

三、axios插件：完成先後臺Ajax交互的

一、安裝：終端切換到在前端項目目錄根目錄下

cnpm install axios

二、項目配置：main.js

import axios from 'axios'

Vue.prototype.$axios = axios;

三、在任意一個組件的邏輯中，均可以訪問this.$axios({ })

beforeMount() {
    // 請求後臺
    this.$axios({
        url: this.$settings.base_url + '/test/',
        method: 'delete',
    })
}

四、同源策略-跨域問題

Django默認是同源策略，因此先後臺分離的項目，訪問Django會出現CORS跨域問題的報錯

一、什麼叫跨域（如下三者知足一個就是跨域）

1. IP不一樣：先後臺（兩個服務器）不在一臺主機上運行的

2. port不一樣：先後臺（兩個服務器）是相互獨立的，運行在不一樣的端口之上

3. 協議不一樣：HTTP與HTTPS直接也一樣是跨域

二、解決跨域

1. 假裝：將前臺請求假裝成後臺本身對本身發送請求

2. 後臺主動容許跨域，後臺配置容許跨域便可（響應頭中處理）

三、Django中解決跨域問題：

1. 在Django中安裝模塊

   pip install django-cors-headers

2. Django中配置文件中註冊app

   INSTALLED_APPS = ['corsheaders' ]

3. Django中配置文件中添加中間件

   MIDDLEWARE = [  'corsheaders.middleware.CorsMiddleware' ]

4. Django中配置文件中容許跨域

   CORS_ORIGIN_ALLOW_ALL = True

五、先後臺分離項目交互流程

一、先啓動先後臺項目

二、前臺配置頁面的路由，渲染前臺頁面 | 後臺配置數據路由，響應數據（處理好的跨域問題）

三、前臺經過Ajax請求後臺接口

1. 將前臺請求數據提交給後臺

2. 前臺獲得響應的結果

3. 根據響應的結果的數據，最後完成頁面的局部刷新、總體刷新、頁面跳轉

異步請求細節

一、vue框架用axios完成Ajax異步請求

1. main.js中配置

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

2. 語法：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
   })

二、前臺提交數據的兩種方式：

1. url拼接參數：

   • 全部的請求都擁有的提交方式

   • 該方式數據都會在url後面以？拼接方式傳給後臺

   • 提交數據只能採用url字符串提交給後臺，數據是不安全的

   • axios插件能夠用params屬性攜帶url拼接參數，和url後直接？拼接是同樣的

2. 數據包參數：

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

在vue中也可使用Bootstrap框架來進行佈局，下面是先配置後再使用Bootstrap語法

一、jq環境搭建

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

   cnpm install jquery

2. 配置：本身在項目根目錄下新建 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"]
               })
           ]
       }
   };

3. 在main.js中配置：

   import ElementUI from 'element-ui'
   Vue.use(ElementUI);
   import 'element-ui/lib/theme-chalk/index.css';

二、bs環境搭建：

1. 安裝：在前端項目根目錄下的終端，@選擇版本

   cnpm install bootstrap@3

2. 配置：在main.js中配置

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