Vue and around django-side interaction foreplay

Front-end configuration plug

Global static configuration file

css files, js files

css style file

load

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

settings.js file **

$-Time members

prototype is to add properties to the class attribute

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

Configuration element-ui plug

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

Configuring jq + bs environment

jQuery

>: cnpm install jquery

vue / cli 3 Configuration jQuery: disposed in vue.config.js (without, manual new project root directory)

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 Configuration BootStrap: disposed in the main.js

import "bootstrap" // 加载bs的逻辑
import "bootstrap/dist/css/bootstrap.css"

Background processing across domains

Solve problems across the front and back of interaction: CORS

Install plug

>: pip install django-cors-headers

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

Separation of front and back interaction

Background processing across domains

Install plug

>: pip install django-cors-headers

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

Project Configuration: dev.py

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

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

# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True