vue和django前后端交互前戏

前端配置插件

全局静态文件配置

css文件,js文件

css样式文件

加载

// 配置全局css样式
// import '@/assets/css/global.css'
require('@/assets/css/global.css');

settings.js文件**

$按时成员

prototype就是给类属性添加属性

// 配置全局settings.js
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;

配置element-ui插件

// 1、安装：cnpm install element-ui
// 2、配置环境
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

配置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" // 加载bs的逻辑
import "bootstrap/dist/css/bootstrap.css"

配置axios来完成前后台ajax请求

// 1、安装：cnpm install axios
// 2、配置环境
import Axios from 'axios'
Vue.prototype.$ajax = Axios;

配置cookie操作插件

// 1、安装：cnpm install vue-cookies
// 2、配置环境
import Cookies from 'vue-cookies'
Vue.prototype.$cookies = Cookies;

后台处理跨域

解决前后台交互跨越的问题:CORS

分离的前后台交互

后台处理跨域

安装插件

>: pip install django-cors-headers

插件参考地址：https://github.com/ottoyiu/django-cors-headers/

项目配置：dev.py

# 注册app
INSTALLED_APPS = [
	...
	'corsheaders'
]

# 添加中间件
MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware'
]

# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True