Vue前後端互動、生命週期、元件化開發
一、Vue用axios與後端互動
如果用jQuery與後端互動的話，我們用Ajax發請求，那麼用Vue做前端，需要做前後端分離，與後端做互動。這個時候Vue也提供了獨立的方法叫Axios,其實Ajax也是沒問題的但是同時使用兩個框架寫前端專案，有點大材小用了，或者而且也會影響專案執行效率。因此我們的Vue也提供了單獨的互動的Axios。Axios 是一個基於 promise 的 HTTP 庫，還是基於XMLHttpRequest封裝的那麼接下來我們就用axios的方式實現前後端互動。那麼我們透過展示新上市電影的例子來詮釋前後端互動吧
'''後端程式碼'''
# 1.匯入模組
from django.urls import path, include
from app01 import views
from rest_framework.routers import SimpleRouter
# 2.例項化物件
router = SimpleRouter()
# 3.註冊路由
router.register('film', views.FilmList, 'film')
# 4.最後一步新增到這裡，拼路由
urlpatterns = [
path('api/v1/', include(router.urls)), # http://127.0.0.1:8000/api/v1/film/film
]
from rest_framework.viewsets import ViewSet
from rest_framework.decorators import action
import json
from rest_framework.response import Response
class FilmList(ViewSet):
@action(methods=['GET', ], detail=False)
def film(self, request):
with open(r'film.json', 'r', encoding='utf-8') as f:
res = json.load(f)
return Response(headers={'Access-Control-Allow-Origin':'*'}, data=res)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hot films list</h1>
<ul>
<li v-for="item in dataList">
<h2>Film Name:{{item.name}}</h2>
<h3>Director:{{item.director}}</h3>
<h3>Category:{{item.category}}</h3>
<p>Desc:{{item.synopsis}}</p>
<img :src="item.poster" alt="" height="300px" width="200px">
</li>
<button @click="handleClick">Wanna see then press here</button>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
dataList: []
},
methods: {
handleClick() {
axios.get('http://127.0.0.1:8000/api/v1/film/film/').then(res => {
this.dataList = res.data.data.films
})
}
},
mounted() {
axios.get('http://127.0.0.1:8000/api/v1/film/film/').then(res => {
console.log(res)
this.dataList = res.data.data.films
})
}
})
</script>
</html>
二、Vue的生命週期
Vue其實有它的生命週期的，從vue例項建立開始，到例項被銷燬，總共會經歷8個生命週期鉤子[只要寫了就會執行]鉤子函式【反序列化驗證】擴充套件以下知識面吧，順便get以下兩個專業學名 面向切面程式設計(AOP)、物件導向程式設計(OOP)、那麼我們我們說的8個生命週期具體指什麼呢》我們一起來列一下！
| 序號 | 英文稱呼 | 個人理解 | 何時呼叫 |
|---|---|---|---|
| 1 | beforeCreate | 建立之前 | 建立Vue例項之前呼叫 |
| 2 | created | 建立例項 | 建立Vue例項成功後呼叫 |
| 3 | beforeMount | 安裝之前 | 渲染DOM之前呼叫 |
| 4 | mounted | 安裝例項 | 渲染DOM之後呼叫 |
| 5 | beforeUpdate | 更新之前 | 重新渲染之前呼叫 |
| 6 | updated | 更新例項 | 重新渲染完成之後呼叫 |
| 7 | beforeDestroy | 銷燬之前 | 銷燬之前呼叫 |
| 8 | destroyed | 銷燬例項 | 銷燬之後呼叫 |
三、元件化開發
在基礎部分我們用spa的形式學習了Vue，但是實際上當前普遍使用元件化開發。那麼接下來，我們的研究主題是大名鼎鼎的元件化開發；嘿嘿嘿準備好了嗎？！那為何元件化開發呢？原因也很簡單類似於我們的Python裡面的裝飾器、類、函式一樣寫好以後可以重複使用，減小程式碼量。提高開發效率，畢竟程式設計開發本身就是被那些智商超高的聰明懶人發明的嘛，他們會想方設法的少寫程式碼而多幹活哈哈哈，講到這裡我很榮幸也能接觸程式設計領域，每天都很充實，不斷進步，不斷提高，簡直是我夢寐以求的人生！話說回來，元件分為兩種，一是全域性元件、二是區域性元件。下面詳細介紹如何使用如何定義元件。
定義元件的方法
元件就是：擴充套件 HTML 元素，封裝可重用的程式碼，目的是複用
例如：有一個輪播圖，可以在很多頁面中使用，一個輪播有js，css，html
元件把js，css，html放到一起，有邏輯，有樣式，有html
<script>
// 全域性元件-----》在任意元件中都可以使用
// 跟之前學的沒有區別
Vue.component('child', {
template: `
<div>
<button>Back</button>
<span style="font-size: 40px">Home Page--{{ name }}</span>
<button @click="handleFor"> Forward</button>
<lqz1></lqz1>
</div>`,// 裡面寫html內容，必須包在一個標籤中
data() { // data必須是方法 因為這個元件是可以多次使用，返回物件
return {
name: '阿麗米熱',
t: null
}
},
methods: {
handleFor() {
this.name = 'mire'
}
},
components: {
'mire1': {
template: `
<div>
<h1>Local component---{{ age }}</h1>
</div>`,
data() {
return {
age: 19
}
}
},
}
})
Vue.component('child3', {
template: `
<div>
<button>back</button>
</div>`,
})
let foo={
template: `
<div>
<h1>Local component---{{ age }}</h1>
</div>`,
data() {
return {
age: 19
}
}
}
var vm = new Vue({
el: '.app',
data: {
show: false
},
methods: {
handleShow() {
this.show = !this.show
}
},
components: {
foo
}
})
</script>