摘要:前文上篇中篇地址現(xiàn)在只剩下把東西展示出來(lái)了頁(yè)面這里有四種頁(yè)面其實(shí)是四個(gè)組件文章,雜談,收藏,具體的文章或雜談前三個(gè)雖然布局一樣,但功能有細(xì)微差別,同時(shí)考慮到以后可能要針對(duì)不同種類(lèi)做不同的布局方法我還是定義了三個(gè)組件以及具體的那個(gè)可以看到它們
前文
上篇:https://segmentfault.com/a/11...
中篇:https://segmentfault.com/a/11...
github地址:https://github.com/ssevenk/ss...
現(xiàn)在只剩下把東西展示出來(lái)了
頁(yè)面這里有四種頁(yè)面(其實(shí)是四個(gè)組件):
文章,雜談,收藏,具體的文章或雜談
前三個(gè)雖然布局一樣,但功能有細(xì)微差別,同時(shí)考慮到以后可能要針對(duì)不同種類(lèi)做不同的布局方法
我還是定義了三個(gè)組件
ShowBlogs、ShowEssays、ShowArticles
以及具體的那個(gè)
TheOne
可以看到它們共用一個(gè)抬頭的logo和導(dǎo)航欄
所以我把這一塊部分寫(xiě)進(jìn)front組件里
剩下的部分用路由決定展示哪一個(gè)組件
使用嵌套路由
這個(gè)很簡(jiǎn)單,就在最開(kāi)始請(qǐng)求后端獲取到數(shù)據(jù)后
created() { this.getData(); }, methods: { getData() { this.$axios.get("/data/blog").then(res => { this.blogs = res.data; this.show = this.blogs; }); }
用v-for將router-link循環(huán)出來(lái)
每一個(gè)數(shù)據(jù)都是一個(gè)link,可以跳轉(zhuǎn)到具體的內(nèi)容頁(yè)面
分頁(yè){{ item.date }} {{ item.title }}
在上面的代碼中你應(yīng)該注意到了,看到了一個(gè)很熟悉的東西
show.slice((currentPage-1)*pageSize,currentPage*pageSize)
這是我們?cè)诤笈_(tái)管理系統(tǒng)中用過(guò)的分頁(yè)
這里不再贅述
不過(guò)搜索功能有點(diǎn)和后臺(tái)管理不一樣
這一次我定義了一個(gè)show數(shù)組
點(diǎn)擊搜索之后,調(diào)用函數(shù)來(lái)進(jìn)行搜索,把搜索出來(lái)的結(jié)果存放在show中
所以我們展示的一直都是show數(shù)組
由于三個(gè)頁(yè)面都用到了搜索框
所以我把搜索框多帶帶做成了一個(gè)組件
并沒(méi)有引入到main.js中使其成為全局組件
因?yàn)槲覀兿M亲鳛镾howBlogs、ShowEssays、ShowArticles這三個(gè)組件的子組件存在的,方便調(diào)用父組件提供的方法
import mySearch from "./mySearch";
每個(gè)組件都引入一次
點(diǎn)擊搜索時(shí),向父組件發(fā)射搜索框里的內(nèi)容,并調(diào)用父組件的方法
//mySearch.vue methods:{ search() { this.$emit("search",this.content) } }
在父組件中
methods:{ searchfor(s) { this.show = (this.blogs.filter(item => { if (item.title.includes(s)) { return item; } })); }}
針對(duì)每個(gè)組件,搜索框的顏色不一樣
這里用$route.path來(lái)判斷
寫(xiě)在搜索框的組件里
用path來(lái)決定使用哪種樣式
具體文章或雜談
獲取后端送來(lái)的數(shù)據(jù)(字符串)
調(diào)用simpleMDE的原型方法將其轉(zhuǎn)換為html格式
this.contentMarkdown=SimpleMDE.prototype.markdown(this.theOne.content)
用v-html展示出來(lái)
評(píng)論功能
建立輸入框,供讀者發(fā)布評(píng)論
每篇文章或者雜談都有屬于自己的comments數(shù)組
只需要將這個(gè)新的評(píng)論存進(jìn)去就可以
pushComment() { if (this.comment.name && this.comment.content) { var comment = { name: this.comment.name, content: this.comment.content, date: Math.random() .toString(36) .substr(2) }; this.theOne.comments.push(comment); this.$axios.post(`/data/${this.kind}/${this.$route.params.id}`, { id: this.$route.params.id, title: this.theOne.title, content: this.theOne.content, comments: this.theOne.comments }); } this.comment.name = ""; this.comment.content = ""; }
這里在存入前,先定義了一個(gè)局部變量,把輸入框的值賦值給它
再把這個(gè)局部變量存進(jìn)去
如果直接把輸入框的值存進(jìn)去,那么雙向綁定依舊存在
輸入框內(nèi)容修改,已經(jīng)存進(jìn)去的評(píng)論也會(huì)跟著變
點(diǎn)擊跳轉(zhuǎn)外部鏈接
至此,我的個(gè)人博客項(xiàng)目算是完成了
還有很多需要優(yōu)化的地方,比如管理頁(yè)面的密碼認(rèn)證,頁(yè)面布局的合理性與美觀,移動(dòng)端響應(yīng)式設(shè)計(jì),今后的上線部署等等
不過(guò)也算完成了一開(kāi)始預(yù)期的目標(biāo)了,學(xué)過(guò)的東西都派上了用場(chǎng)
繼續(xù)努力學(xué)習(xí)~
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/114604.html
摘要:前文上篇中篇地址現(xiàn)在只剩下把東西展示出來(lái)了頁(yè)面這里有四種頁(yè)面其實(shí)是四個(gè)組件文章,雜談,收藏,具體的文章或雜談前三個(gè)雖然布局一樣,但功能有細(xì)微差別,同時(shí)考慮到以后可能要針對(duì)不同種類(lèi)做不同的布局方法我還是定義了三個(gè)組件以及具體的那個(gè)可以看到它們 前文 上篇:https://segmentfault.com/a/11...中篇:https://segmentfault.com/a/11......
摘要:前文上篇中篇地址現(xiàn)在只剩下把東西展示出來(lái)了頁(yè)面這里有四種頁(yè)面其實(shí)是四個(gè)組件文章,雜談,收藏,具體的文章或雜談前三個(gè)雖然布局一樣,但功能有細(xì)微差別,同時(shí)考慮到以后可能要針對(duì)不同種類(lèi)做不同的布局方法我還是定義了三個(gè)組件以及具體的那個(gè)可以看到它們 前文 上篇:https://segmentfault.com/a/11...中篇:https://segmentfault.com/a/11......
摘要:前文上篇中篇地址現(xiàn)在只剩下把東西展示出來(lái)了頁(yè)面這里有四種頁(yè)面其實(shí)是四個(gè)組件文章,雜談,收藏,具體的文章或雜談前三個(gè)雖然布局一樣,但功能有細(xì)微差別,同時(shí)考慮到以后可能要針對(duì)不同種類(lèi)做不同的布局方法我還是定義了三個(gè)組件以及具體的那個(gè)可以看到它們 前文 上篇:https://segmentfault.com/a/11...中篇:https://segmentfault.com/a/11......
摘要:前言學(xué)習(xí)前端也有一段時(shí)間了做個(gè)個(gè)人博客網(wǎng)站吧正好總結(jié)練習(xí)一下這段時(shí)間的所學(xué)文章很長(zhǎng),會(huì)拆成三篇來(lái)講項(xiàng)目地址效果后臺(tái)管理系統(tǒng)前端頁(yè)面架構(gòu)可以看到,在整個(gè)項(xiàng)目中,沒(méi)有頁(yè)面的跳轉(zhuǎn)只有前后端的數(shù)據(jù)交換,所有的頁(yè)面更新都是組件更新和數(shù)據(jù)更新后端只對(duì)數(shù) 前言 學(xué)習(xí)前端也有一段時(shí)間了做個(gè)個(gè)人博客網(wǎng)站吧正好總結(jié)練習(xí)一下這段時(shí)間的所學(xué)文章很長(zhǎng),會(huì)拆成三篇來(lái)講 項(xiàng)目github地址:https://git...
摘要:前言學(xué)習(xí)前端也有一段時(shí)間了做個(gè)個(gè)人博客網(wǎng)站吧正好總結(jié)練習(xí)一下這段時(shí)間的所學(xué)文章很長(zhǎng),會(huì)拆成三篇來(lái)講項(xiàng)目地址效果后臺(tái)管理系統(tǒng)前端頁(yè)面架構(gòu)可以看到,在整個(gè)項(xiàng)目中,沒(méi)有頁(yè)面的跳轉(zhuǎn)只有前后端的數(shù)據(jù)交換,所有的頁(yè)面更新都是組件更新和數(shù)據(jù)更新后端只對(duì)數(shù) 前言 學(xué)習(xí)前端也有一段時(shí)間了做個(gè)個(gè)人博客網(wǎng)站吧正好總結(jié)練習(xí)一下這段時(shí)間的所學(xué)文章很長(zhǎng),會(huì)拆成三篇來(lái)講 項(xiàng)目github地址:https://git...
閱讀 2883·2021-09-22 15:20
閱讀 2958·2021-09-22 15:19
閱讀 3448·2021-09-22 15:15
閱讀 2382·2021-09-08 09:35
閱讀 2372·2019-08-30 15:44
閱讀 3004·2019-08-30 10:50
閱讀 3707·2019-08-29 16:25
閱讀 1585·2019-08-26 13:55