Vue 前后台交互,插件

Posted kai-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 前后台交互,插件相关的知识,希望对你有一定的参考价值。

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: this.$settings.base_url + '/test/',
        method: 'delete',
    })
}


同源策略-跨域问题

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

提供布局

以上是关于Vue 前后台交互,插件的主要内容,如果未能解决你的问题,请参考以下文章

前端Vue框架 05 第三方插件(vuex: 组件间交互的(移动端), axios - 前后台(django): ajax, element-ui: 页面布局, jq+bs: jQuery+Boo

vue和django前后端交互前戏

vue和php-前后台交互

Vue之前后端交互

vscode代码片段生成vue模板

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图