vue-axios插件、django-cors插件、及vue如何使用第三方前端样式库：element/jQuery/bootstrap
目录
一、vue的ajax插件：axios
1、安装axios
// 1）安装插件(一定要在项目目录下)：
>: cnpm install axios
// 2）在main.js中配置：
import axios from 'axios'
Vue.prototype.$axios = axios;
2、axios参数
url:'接口路径'；
method:'get|post|delete|patch|put'；
param:{拼接参数}；
data:{数据包参数}；
headers:{请求头(认证信息)}；
this.$axios({
// 后端服务器端口路径
url: 'http://127.0.0.1:8000/cars/',
// 相当于ajax的type
method: 'get',
}).then(response => {
console.log(response);
// this.cars = response.data;
}).catch(error => { // 网络状态码为4xx、5xx
console.log(error); // 可以打印具体的报错信息
});
二、CORS跨域问题（同源策略）
同源：http协议相同、ip服务器地址相同、app应用端口相同。
跨域：协议、ip地址、应用端口有一个不同，就是跨域。
Django默认是同源策略，不接收跨域请求。
1、Django解决CORS跨域问题方法
使用第三方模块：django-cors-headers
# 1）Django安装cors模块(可在cmd中，要注意切换到项目文件夹中；也可以直接在pycharm中的terminal中安装)：
>: pip3 install django-cors-headers
# 2）在settings注册模块，配置中间件：
INSTALLED_APPS = [
...
'corsheaders'
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
# 3）在settings开启允许跨域：
CORS_ORIGIN_ALLOW_ALL = True
三、前端请求携带参数及Django后台如何获取
1、拼接参数方式携带参数和获取
前端发送：
任何请求(get、post...)都可以通过url拼接的方式携带参数。
created() {
// 完成ajax请求后台，获得数据库中的数据
this.$axios({
url: this.$settings.base_url + '/cars/',
method: 'post',
params: { // url拼接参数：任何请求都可以携带
a: 1,
b: 2,
c: 3
},
}).then(response => {
// console.log('正常', response);
this.cars = response.data;
}).catch(error => { // 网络状态码为4xx、5xx
console.log('异常', error.response);
});
}
后端获取：
在request.GET中获取。
2、数据包方式携带的参数和获取
前端发送：
前端向后端发送请求，get方式是无法携带数据包参数的。
created() {
// 完成ajax请求后台，获得数据库中的数据
this.$axios({
url: this.$settings.base_url + '/cars/',
method: 'post',
params: { // url拼接参数：任何请求都可以携带
a: 1,
b: 2,
c: 3
},
data: { // 数据包参数：get请求是无法携带的
x: 10,
y: 20,
}
}).then(response => {
// console.log('正常', response);
this.cars = response.data;
}).catch(error => { // 网络状态码为4xx、5xx
console.log('异常', error.response);
});
}
后端获取：
在request.body中获取。
四、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);
五、Vue配置jQuery和bootstrap
1、配置jQuery环境
安装：
>: cnpm install jquery
配置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"]
})
]
}
};
2、配置BootStrap环境
安装：
>: cnpm install bootstrap@3
配置BootStrap：在main.js中配置
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
补充小知识点
HTML文件头的en换成zh可以使浏览器不显示是否翻译弹框。
css伪类：nth-child(5n)可以获取索引5的倍数的标签。
TODO注释。
