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

文章目录

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