VUE與django建立連線互動

2021-10-07 01:13:50 字數 3425 閱讀 7070

export


default


function


geturl


(str)
9.在同乙個目錄下建立axios.js檔案

我的前端資料互動使用的模組使用的是axios

import axios from


'axios'


import geturl from


'./getpath'


export


default).


then


((res)


=>)}


, post:()


=>).


then


((res)


=>)}


}//狀態檢測


letstatedetection


=(data, callback)


=>


}
二、前端get請求使用

1.在src/store/目錄下的archivestore.js檔案引入axios模組

import axios from


'../assets/js/axios'
2.在src/store/目錄下的archivestore.js檔案裡的state新增文章詳情的資料結構

specific:


,//文章詳情
3.在src/store/目錄下的archivestore.js檔案裡建立乙個action方法

getarticlesspecific


(, id)


, callback:


(res)


=>


state.loading =


false


;// specific}}


)}
4.在文章詳情頁面specificartical.vue(src/components)下執行getarticlesspecific方法即可



="specificartical borderstyle container"


>


='title'


>


}<


/h1>


='content'


>


='annotation'


>


<


/i>


}<


/span>/


='annotation'


>


<


/i>


}<


/span>/


}<


/div>


='attention'


>


@<


/i>


<


/div>


='lable'


>


*<


/i>


for=


"(tag,index) in specific.tags"


:key=


"index"


>}}


<


/a>


<


/div>


<


/div>


<


/div>


<


/template>


import


from


'vuex'


export


default)}


, methods:


, activated:


function()


}<


/script>
在這裡要注意的是使用activated生命週期函式，該函式會在keep-alive，元件被啟用時呼叫

三、後端get請求使用

1.在urls.py(djangoblog)檔案下面引入views.py裡面的方法

from blog.views import


*
2.註冊url

from blog.views import


*urlpatterns =


[ url(r'^get_article_specific/$'


, getarticlespecific, name=


'get_article_specific'),


]
3.在views.py裡面匯入需要用到的模組和models

from django.db.models.functions import truncdate4.在views.py裡面新增getarticlespecific方法

#得到文章詳情


defgetarticlespecific


(request)


: results=


#得到標籤陣列


temp=


list


(article.objects.get(


id=request.get[


'id'])


.tag.values_list(


'name'))


results[


'tags']=


#處理標籤陣列的格式


for value in temp:


results[


'tags']0


])#得到文章詳情


data=article.objects.annotate(date=truncdate(


'create_time'))


.values(


'title'


,'content'


,'browse'


,'date'


).get(


id=request.get[


'id'])


results[


'browse'


]=data[


'browse'


] results[


'title'


]=data[


'title'


] results[


'content'


]=data[


'content'


] results[


'date'


]=data[


'date'


] results[


'status_code']=


102return jsonresponse(results, safe=


false


)

Django初始 Django的建立與使用

啟動django前提 前提 如何讓你的計算機能夠正常啟動django專案 1 計算機的名稱不能有中文 2 乙個pycharm視窗又能開乙個django專案 3 專案裡面所有的檔案也盡量不要使用中文 4 python直譯器盡量使用3.4 3.6版本 如果你的專案報錯 你點選最後乙個錯誤資訊 去原始碼把...

Vue通過WebSocket建立長連線

在專案開發中，後端需要處理一連串的邏輯，或者等待第三方的資料返回來進行處理之後在返回給前端，可能時間會很長，而且前端也不知道後端什麼時候能處理好 時間長的話會達到10分鐘左右 如果採用普通的http連線，前後端無法一直保持聯絡，麻煩的時候可能還需要採用輪詢的機制，所以使用websocket連線效果還...

Django建立專案與配置

mvc設計模式 核心思想 解耦 m model v view c controller django中 mtv模式簡介 m model t template v view django的安裝 windows下進入cmd命令列 pip install django 1.11.26 檢視是否安裝成功 進...