1220 Vue與Django先後端的結合

[toc]

vue的安裝

## 環境

附帶安裝pnm

npm換源

腳手架 快速換源

## 項目建立

cd 存放項目的目錄

vue create 項目名  ===> 須要安裝的組件  babel  router vuex

## 配置項目啓動

pycharm打開項目,配置npm啓動

## 加載vue環境

main.js完成vue環境的加載,完成根組件的渲染加載route,vuex等環境加載 

## Vue的ajax插件安裝

axios

​```
安裝插件 (必定要在項目目錄下)
	cnpm install axios
	
在main.js中配置:
	import axios from 'axios'
	Vue.prototype.$axios = axios
	
使用,就能夠直接ajax的使用
​```

Vue前端的設置

頁面的分佈

index.html是項目中的惟一頁面

App.vue是根組件,裏面只有5行代碼 其中 <router-view/> 指定渲染了view中的文件

views文件夾是頁面組件,定義了各類頁面的組件,home.vue是主頁組件
	主頁中使用導航條的話須要在components文件夾中定義小組件,而後導入才能使用 import Nav from '../components/Nav',導入完畢還須要進行註冊 components:{ Nav }

導航條是小組件,須要在components文件夾中定義,導航條上有什麼:主頁跳轉以及汽車頁面跳轉,標籤跳轉的<router-link to="/"> 當你跳轉的時候,須要定義路由跳轉,在router文件夾中的index.js腳本文件添加跳轉,添加跳轉須要進行導入,導入views文件夾中的路由跳轉以後的界面.import Car from '../views/Car'  const routes = [{path:'car',component:car'}

car界面中須要有汽車的圖片信息,汽車的數據是從後端拿到的,這裏使用created(){}聲明週期鉤子函數獲取,獲取後端的數據進行渲染,渲染的時候使用CarTag定義小組件,在car組件中父傳子將數據輸入子組件,CarTag進行獲取數據而後渲染圖片以及標題.

給每個圖片的定義跳轉連接,跳轉到的界面使用拼接 <router-link :to="`car/detail/${pk=car.id}`"> url,而後在index中定義路由的跳轉,使用有名分組的方式 path: '/car/detail/:pk' 

而後定義詳情頁的頁面組件 views文件夾中cardetail組件頁面,在組件頁面中經過鉤子函數獲取url中的pk值   (let pk= this.$route.query.pk || this.$route.params.pk;)

後臺數據的替換

使用django將數據動態的傳輸到前端vue組件中
建立django項目

css樣式

display: block;   將標籤變成塊級標籤

nth-child() 	定製指定位置的標準樣式,能夠在循環多箇中使用

/*清除浮動*/
.warp:after {    display: block;    content: '';    clear: both;}

/*vw :屏幕寬度  vh 屏幕高度*/
        width: 100vw;
        height: 100vh;

Django的配置

國際化配置

settings文件中國際化配置

// 報錯信息的設置,中文的信息提示
LANGUAGE_CODE = 'zh-hans'
// 時區的設置  上海
TIME_ZONE = 'Asia/Shanghai'
// 數據庫的時區設置,建立時間就不會使用默認的
USE_TZ = False

TODO註釋

# TODO 這裏是註釋

axios插件安裝

Vue的ajax插件的安裝 :axios

1.安裝插件(必定要在項目目錄下):
	cnpm install axios

2.在main.js 中配置
	import axios from 'axios'
	Vue.prototype.$axios = axios;

3.使用 在任何一個組件中發送ajax請求,獲取數據庫中的數據
	this.$axios({
		// 後端數據的接口地址
		url:'http://127.0.0.1:8000/cars/',
		// 請求方式
		method:'get',
	// 請求成功以後的回調函數
	}).then(response=>{
		this.cars = response.data;
	// 請求失敗的回調函數
	}).catch(error=>{
		
	})

CORS跨域問題(同源策略)

當前端的Vue向後端發送請求的時候,後端不知道發送過來的數據是否是正常的,因此對請求進行了限制,Django默認只會對同源請求作響應

同源:
	http協議相同,ip服務器地址形同,app應用端口相同
跨域:
	協議.IP地址.應用端口有一個不一樣,就是跨域
	
Django默認是同源策略,存在跨域問題

處理跨域問題: cors插件

Django後臺安裝cors插件
	pip install django-cors-headers
	
插件參考地址：https://github.com/ottoyiu/django-cors-headers/

1.註冊模塊插件
	INSTALLED_APPS = [
	...
	'corsheaders'
]
2.配置中間件
	MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware'
]
3.開啓容許跨域
	CORS_ORIGIN_ALLOW_ALL = True

axios提交數據給後臺

這裏能夠將url中的數據傳遞給後臺Django中,兩種方式

this.$axios({
                url:'http://127.0.0.1:8000/cars/',
                method:'get',
                params:{ //url拼接參數
                    a:1,
                    b:2
                    c:3
                },
                data:{ //數據包參數
                    x:10,
                    y:20
                }

拼接參數 params:{}

任何請求均可以攜帶
    params:{ 
        a:1,
        b:2,
    }

數據包參數data:{}

get請求是沒法攜帶的
    data:{ 
        x:10,
        y:20
    }

Django中設置數據

media相關

新建media文件夾

而後在settings.py中設置MEDIA_ROOT：

MEDIA_ROOT = os.path.join(BASE_DIR,'media')

接着在urls.py中設置media路由的相關配置：

from django.urls import path,re_path
from django.views.static import serve
from cnblog import settings

##media配置——配合settings中的MEDIA_ROOT的配置，就能夠在瀏覽器的地址欄訪問media文件夾及裏面的文件了
re_path(r'media/(?P<path>.*)$',serve,{'document_root':settings.MEDIA_ROOT}),

有了上面這個路由設置，咱們就能夠在瀏覽器的地址欄根據media文件夾中文件的路徑去訪問對應的文件了（須要注意的是爲了保證安全，默認狀況下Django項目中各目錄的文件是不能經過地址欄去訪問的）。

固然，咱們這裏實現的是文件上傳的功能，須要將文件信息傳給數據庫保存，models.py文件中的內容以下：

admin中註冊使用

將model表註冊到admin管理界面

from . import models
admin.site.register(models.Car)

利用admin管理表數據進行添加

前端接受數據

在汽車鏈接url獲取全部的數據庫汽車信息,返回給前端,前端的axios接受並開始渲染數據

def get_cars(request,*args,**kwargs):
    # 獲取數據庫全部的數據
    car_query = models.Car.objects.values('id','title','img')
    car_list = list(car_query)
    for car in car_list:
        # 拼接圖片文件的http真實路徑
        car['img'] = '%s%s%s' % ('http://localhost:8000',settings.MEDIA_URL,str(car.get('img')))
    # 返回給前端頁面
    return JsonResponse(car_list,safe=False)

created(){
            // 完成ajax請求後臺數據
            this.$axios({
                url:'http://127.0.0.1:8000/cars/',
                method:'get',
                params:{ //url拼接參數
                    a:1,
                    b:2,
                    c:3,
                },
                data:{ //數據包參數
                    x:10,
                    y:20,
                }
            }).then(response => {
                // console.log(response)
                this.cars = response.data;
            }).catch(error=>{
                console.log('異常',error.response)
            });
        }
    }

前端渲染單個汽車界面

<script>
    export default {
        name: "CarDetail",
        data (){
            return{
                car:{}
            }
        },
// 鉤子函數獲取pk數據
        created(){
            // 拿到路由傳遞過來的組件
            let pk= this.$route.query.pk || this.$route.params.pk;
            // 主鍵不存在,就直接結束方法
            if (!pk) return false;
            // 主鍵存在才請求後臺數據
            this.$axios({
                url: this.$settings.base_url + `/car/${pk}/`,
            }).then(response => {
                this.car = response.data
            }).catch(error => {
                console.log(error.response)
            })
        }
    }
</script>

element插件安裝

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.使用
 	賦值粘貼

bootstrap插件的使用

安裝JQuery插件

cnpm install jquery

安裝bootstrap

cnpm install bootstrap@3

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"]
            })
        ]
 		}
};

vue/cli 3 配置BootStrap：在main.js中配置

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"

Vue代碼

main.js代碼

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false;

// 全局css
require('@/assets/css/global.css');

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

// 配置axios插件
import axios from 'axios'
Vue.prototype.$axios = axios;

// 配置element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 配置bootstrap
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'


new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');