VUE前后台分離

配置js環境

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"

分離的前后台交互

后台跨域處理

安裝插件

>: 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

總結

"""
1、vue項目配置全局css文件：在main.js中用import導入或是require()加載 .css 文件
	assets/css/global.css
	import '@/assets/css/global.css' | require('@/assets/css/global.css')

2、vue項目配置全局js文件：在main.js中用import導入 .js 文件，並將其設置給 Vue 原型
	settings.js => export default {base_url='http://127.0.0.1:8000'}
	import settings from '@/assets/js/settings.js'
	Vue.prototype.$settings = settings => this.$settings.base_url
	
3、vuex提供的store倉庫存儲，可以完成組件間的傳參(了解)
	store/index.js => state: {num: 0}
	this.$store.state.num

4、vue項目配置axios可以完成前后台交互：this.$axios({}).then(response=>{}).catch(error=>{})
	import axios from 'axios'
	Vue.prototype.$axios = axios
	this.$axios({
		url: '后台接口',
		method: 'get|post',
		params: {},
		data: {},
		headers: {},
	}).then(response=>{
		response.data
	}).catch(error=>{
		error.response.data
	})

5、django利用django-cors-headers插件解決前后台分類項目跨越問題(重點)
	注冊corsheaders => 添加中間件 => 允許跨越

6、前台兩種提交數據的方式：url拼接參數，數據包參數
7、前后台分離，后台登錄通過的token會返回給前台，前台自己處理存儲在cookie中：vue-cookies插件操作cookie
	token = response.data.token
	
	this.$cookies.set(k, v, exp);
	this.$cookies.get(k);
	this.$cookies.remove(k);
	
8、全局應用配置element-ui、bootstrap
	import ElementUi from 'element-ui'
	Vue.use(ElementUi)
"""