目录
一、Vue的ajax插件:axios
-
安装插件
>: cnpm install axios // 一定要在项目目录下执行该命令
-
在main.js中配置
import axios from 'axios' Vue.prototype.$axios = axios; // JS原型、全局访问axios插件
-
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跨域问题
(一)同源策略
- 同源:http协议相同、ip服务器地址相同、app应用端口相同
- 跨域:协议、ip地址、应用端口有一个不同,就是跨域
- Django默认是同源策略,存在跨域问题
-
Vue项目中
- 浏览器请求的是vue项目的域名和端口
- Vue项目中再去请求后端Django的域名端口
- 后端再返回相应数据
因此会产生跨域问题
(二)解决方式(cors模块)
-
下载安装cors模块
>: pip install django-cors-headers
-
注册cors模块(settings.py文件中)
# settings.py INSTALLED_APPS = [ 'corsheaders' ]
-
配置中间件(settings.py文件中)
# settings.py MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware' ]
-
开启允许跨越(settings.py文件中)
# settings.py CORS_ORIGIN_ALLOW_ALL = True
三、Vue配置ElementUI
ElementUI 是一套基于Vue2.0的快速搭建网站的组件库,类似Bootstrap的一种UI框架
-
运行安装插件命令(必须在项目目录下运行)
>: cnpm install element-ui
-
main.js文件中配置
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
ElementUI文档官网中粘贴复制使用
四、Vue配置jQuery和Bootstarp
(一)配置jQuery
-
安装jQuery
>: cnpm install 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
-
安装Bootstrap
>: cnpm install bootstrap@3 // @3表示版本号,在终端中给python解释器安装则是 pip install bootstrap==3 ,3默认是3点几版本中最稳定的那个版本
-
main.js文件中配置
import "bootstrap" import "bootstrap/dist/css/bootstrap.css"