Vue 05

Posted 2020-11-23 bigb

目录

• axios
  • 安装
  • 配置
  • 使用
• CORS跨域问题
  • 解决django跨域问题
• aixos提交数据
• Vue配置ElementUI
• Vue配置BootStrap

axios

• 就是Vue的ajax插件

安装

在vue项目文件下安装 cnpm install axios

配置

• 为vue项目全局配置axios

import Axios from axios
// 添加ajax原型(类属性)
Vue.prototype.$ajax = Axios

使用

let _this = this
this.$ajax({
    // 后端提交地址
    url: 'http://127.0.0.1:8000/loginAction',
    method: 'post',    
    params: {
        username: this.username,
        password: this.password
    }
}).then(function(response) {
    // this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向
    // 要更新页面的title变量,title属于vue实例
    // response为回调的对象,该对象的data属性就是后台返回的数据
    _this.title = response.data
}).catch(function(error) {
    window.console.log(error)
})


// 回调函数也可以使用箭头函数的形式, 而回调函数自身是没有this的
this.$ajax({
    // 后端提交地址
    url: 'http://127.0.0.1:8000/loginAction',
    method: 'post',    
    params: {
        username: this.username,
        password: this.password
    }
}).then((response) => {
   
    this.title = response.data
}).catch((error) => {
    window.console.log(error)
})

CORS跨域问题

• Cross-Origin Resource Sharing (CORS)

• 同源: http协议相同, ip服务器地址相同, 应用端口相同
• 跨域: 上面三个有一个不同

• django默认是响应同源请求

解决django跨域问题

• 安装cors模块
• 注册app
• 添加中间件
• 开启跨域

"""
1）Django按照cors模块：    
    >: pip install django-cors-headers


2）在settings注册模块，配置中间件： ?  
    INSTALLED_APPS = [
        ...
        'corsheaders'
        ] 
    
    
3) 添加中间件
    MIDDLEWARE = [
        ... ? ? ? 
        'corsheaders.middleware.CorsMiddleware' ?  
        ]

    
4）在settings开启允许跨越：    
    CORS_ORIGIN_ALLOW_ALL = True

"""

aixos提交数据

• 拼接参数 (任何请求)
  • params
• 数据包参数 (get请求无法携带)
  • data

Vue配置ElementUI

"""
1）安装插件(一定要在项目目录下)：
    >: cnpm install element-ui
    
2）在main.js中配置：
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    

3）使用：
    复制粘贴
    
"""

Vue配置BootStrap

• 先安装jQuery

>: cnpm install jquery

• vue/cli 3 配置jQuery：在vue.config.js中配置(没有，手动项目根目录下新建)

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

• 安装BootStrap

>: cnpm install bootstrap@3

• vue/cli 3 配置BootStrap：在main.js中配置

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"