vue的ajax插件:axios
1)安装插件(一定要在项目目录下):
>: cnpm install axios
2)在main.js中配置:
import axios from 'axios'
Vue.prototype.$axios = axios;
3)在任何一个组件的逻辑中发送ajax请求:
// 完成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.GET拿前台的数据,前端通过params参数给后台传拼接参数;数据包参数,除了get请求,其他的请求都可以携带,前台通过data参数给后台传数据包参数(因为get没有加任何安全认证)
CORS跨域问题(同源策略)
同源:http协议相同、ip服务器地址相同、app应用端口相同
跨域:协议、ip地址、应用端口有一个不同,就是跨域
Django默认是同源策略,存在跨越问题。
Django的解决方案:
1)Django按照cors模块:
>: pip install django-cors-headers
2)在settings注册模块,配置中间件:
INSTALLED_APPS = [
...
'corsheaders'
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
3)在settings开启允许跨越:
CORS_ORIGIN_ALLOW_ALL = True
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配置jq+bs:
安装插件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"
浙公网安备 33010602011771号