vue和django前后端交互前戏

Posted jhpy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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"

后台处理跨域

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

安装插件

>: pip install django-cors-headers

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

分离的前后台交互

后台处理跨域

安装插件
>: 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

以上是关于vue和django前后端交互前戏的主要内容,如果未能解决你的问题,请参考以下文章

前后端分离之使用axios进行前后端交互实现评论显示——django+mysql+vue+element

一 . Vue+Django 前后端数据交互知识点

vue你真棒

前端Vue框架 05 第三方插件(vuex: 组件间交互的(移动端), axios - 前后台(django): ajax, element-ui: 页面布局, jq+bs: jQuery+Boo

Vue之前后端交互

Vue 前后台交互,插件