（day69）axios、配置ElementUI、配置jQuery和Bootstrap、Django中的CORS问题

目录

• 一、Vue的ajax插件：axios
• 二、Django中的CORS跨域问题
  • （一）同源策略
  • （二）解决方式（cors模块）
• 三、Vue配置ElementUI
• 四、Vue配置jQuery和Bootstarp
  • （一）配置jQuery
  • （二）配置Bootstrap

一、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"