(day69)axios、配置ElementUI、配置jQuery和Bootstrap、Django中的CORS问题

时间:2023-05-17 19:53:26

一、Vue的ajax插件:axios

  1. 安装插件

    >: cnpm install axios // 一定要在项目目录下执行该命令
  2. 在main.js中配置

    import axios from 'axios'
    Vue.prototype.$axios = axios;  // JS原型、全局访问axios插件
  3. axios的使用

    this.$axios({
        url:'http://127.0.0.1:8000/cars',  // 后端url
        methods:'get',  // 请求方式,相当于ajax中的type
    }).then(respons=>{  // then,回调函数,相当于ajax中的success,必须用箭头函数,this可以指代axios
        this.cars = response.data
    }).catch(error=>{  // 捕捉错误、网路状态码为4xx、5xx
        console.log(error)
    })

二、Django中的CORS跨域问题

(一)同源策略

  1. 同源:http协议相同、ip服务器地址相同、app应用端口相同
  2. 跨域:协议、ip地址、应用端口有一个不同,就是跨域
  3. Django默认是同源策略,存在跨域问题
  • Vue项目中

    1. 浏览器请求的是vue项目的域名和端口
    2. Vue项目中再去请求后端Django的域名端口
    3. 后端再返回相应数据

    因此会产生跨域问题

(二)解决方式(cors模块)

  1. 下载安装cors模块

    >: pip install django-cors-headers
  2. 注册cors模块(settings.py文件中)

    # settings.py
    INSTALLED_APPS = [
         'corsheaders'
    ]
  3. 配置中间件(settings.py文件中)

    # settings.py
    MIDDLEWARE = [
        'corsheaders.middleware.CorsMiddleware'
    ]
  4. 开启允许跨越(settings.py文件中)

    # settings.py
    CORS_ORIGIN_ALLOW_ALL = True

三、Vue配置ElementUI

ElementUI 是一套基于Vue2.0的快速搭建网站的组件库,类似Bootstrap的一种UI框架

  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. ElementUI文档官网中粘贴复制使用

四、Vue配置jQuery和Bootstarp

(一)配置jQuery

  1. 安装jQuery

    >: cnpm install jquery
  2. 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

  1. 安装Bootstrap

    >: cnpm install bootstrap@3  // @3表示版本号,在终端中给python解释器安装则是 pip install bootstrap==3 ,3默认是3点几版本中最稳定的那个版本
  2. main.js文件中配置

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