目录
vue 安装 Ajax 插件: axios
CORS 跨域问题 (同源策略)
Vue 配置 ElementUI
Vue 配置 jQuery + Bootstrap
vue 安装 Ajax 插件: axios
安装插件 在项目目录下安装
cnpm install axios
在 main.JS 中配置
- import axios from 'axios'
- Vue.prototype.$axios = axios
在一个组件的逻辑中发送 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 => {
- console.log(error);
- })
CORS 跨域问题 (同源策略)
同源: http 协议相同, 服务器 ip 地址相同, App 应用端口相同
跨域: 协议, ip 地址, 应用端口有一个不同, 就是跨域
django 默认是同源策略, 存在跨域问题.
解决方案:
django 安装 cors 模块:
pip install django-cors-headers
在 settings 文件中注册模块, 配置中间件:
- INSTALLED_APPS = [
- ....
- 'corsheaders'
- ]
- MIDDLEWARE = [
- ....
- 'corsheaders.middleware.CorsMiddleware'
- ]
在 settings 开启允许跨域:
CORS_ORIGIN_ALLOW_ALL = True
Vue 配置 ElementUI https://element.eleme.cn/
安装插件 (在项目目录下)
cnpm install element-ui
在 main.JS 中配置:
- import ElementUI from 'element-ui';
- import 'element-ui/lib/theme-chalk/index.CSS';
- Vue.use(ElementUI);
使用: 看官方文档 https://element.eleme.cn/#/zh-CN/component/layout 复制粘贴
Vue 配置 jQuery + Bootstrap
先安装 jQuery
cnpm install jQuery
在 vue 项目中配置 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 [email protected]
在 vue 项目中配置 Bootstrap, 在 main.JS 中配置
- import "bootstrap"
- import "bootstrap/dist/css/bootstrap.css"
来源: http://www.bubuko.com/infodetail-3345004.html