wtf

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"
posted on 2019-12-22 14:44  wtfss  阅读(142)  评论(0)    收藏  举报