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)