vue第三方插件

vue第三方插件

1、vuex插件

实现组件之间信息相互的交互，主要开发移动端端使用，因为浏览器可以有数据库直接各组件从数据库中拿数据即可

1、vuex是实现任何组件之间信息交互的，可以理解为全局的一个单例，为任何一个组件共享vue仓库的数据

2、在任何一个组件的逻辑里，都可以访问仓库

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

前端存储数据大汇总

1、cookie：一字符串形式存储，数据有过期时间

2、localStorage：以对象形式存储，数据永久保存

3、sessionStorage：以对象形式存储，页面关闭数据就没了

4、vuex中的store：以对象形式存储，当页面刷新数据就会重置（移动端不能刷新，所以只有应用大退才会重置）

2、前后台交互的方式

1、form表单方式

  1. get和post两种方式，get请求包含直接在浏览器中输入的url回车后发送的请求

  2. 该方式一定会发送页面的跳转（刷新页面是本页面跳转），后台决定页面的跳转的url

2、Ajax异步方式

  1. 有get | post | patch | put | delete 等多种请求方式，请求的目的都是异步获取后台的数据

  2. 该方式的特点是不会刷新页面，可以得到新的数据，前台自己完成也页面的局部刷新、整体刷新、页面跳转-前台决定页面的路由

注意：

  1. 前后台不分离的项目，采用form表单提交，可以完成页面的跳转，Ajax异步请求完成页面的局部刷新

  2. 前后台分离项目，采用form表单提交请求， 页面刷新和页面跳转的请求都是由Ajax完成的，只不过页面的跳转后台相应的是跳转到相应的url，前台再自己完成跳转

  3. 前后台分离项目，前台也会出现大量的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、什么叫跨域（以下三者满足一个就是跨域）

  1. IP不同：前后台（两个服务器）不在一台主机上运行的

  2. port不同：前后台（两个服务器）是相互独立的，运行在不同的端口之上

  3. 协议不同：HTTP与HTTPS直接也同样是跨域

2、解决跨域

  1. 伪装：将前台请求伪装成后台自己对自己发送请求

  2. 后台主动允许跨域，后台配置允许跨域即可（响应头中处理）

3、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

5、前后台分离项目交互流程

1、先启动前后台项目

2、前台配置页面的路由，渲染前台页面 | 后台配置数据路由，响应数据（处理好的跨域问题）

3、前台通过Ajax请求后台接口

  1. 将前台请求数据提交给后台

  2. 前台得到响应的结果

  3. 根据响应的结果的数据，最后完成页面的局部刷新、整体刷新、页面跳转

异步请求细节

1、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
})

2、前台提交数据的两种方式：

  1. url拼接参数：

    • 所有的请求都拥有的提交方式

    • 该方式数据都会在url后面以？拼接方式传给后台

    • 提交数据只能采用url字符串提交给后台，数据是不安全的

    • axios插件可以用params属性携带url拼接参数，和url后直接？拼接是一样的

  2. 数据包参数：

    • 除了get请求外的所有请求都拥有的提交数据的方式

    • 该方式会将数据进行加密，打包提交给后台

    • 打包加密的方式有三种：urlencoded(form表单默认的方式)、form-data(可以提交文件)、json(提交json数据)

    • axios插件可以用data属性携带数据包参数

3、注意：

  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框架是提供了三种类型的数据包参数解析

6、element-ui插件

element-ui就类似于Bootstrap框架，前者是在vue中运用，后者是在原生项目中运用，也可以在vue中使用

环境搭建：

  1. 安装：在前端项目根目录下的终端  cnpm install element-ui

  1. 配置：main.js

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

  1. 使用：根据视频和官方API接口

7、jq+bs插件

在vue中也可以使用Bootstrap框架来进行布局，下面是先配置后再使用Bootstrap语法

1、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';

2、bs环境搭建：

  1. 安装：在前端项目根目录下的终端，@选择版本

    cnpm install bootstrap@3

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

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

 

posted @ 2020-02-16 20:32  Mr沈  阅读(985)  评论(0)  编辑  收藏  举报