上篇:https://segmentfault.com/a/11...
中篇:https://segmentfault.com/a/11...html
github地址:https://github.com/ssevenk/ss...vue
如今只剩下把東西展現出來了ios
這裏有四種頁面(實際上是四個組件):
文章,雜談,收藏,具體的文章或雜談
前三個雖然佈局同樣,但功能有細微差異,同時考慮到之後可能要針對不一樣種類作不一樣的佈局方法
我仍是定義了三個組件
ShowBlogs、ShowEssays、ShowArticles
以及具體的那個
TheOnegit
能夠看到它們共用一個擡頭的logo和導航欄
因此我把這一塊部分寫進front
組件裏
剩下的部分用路由決定展現哪個組件github
使用嵌套路由axios
這個很簡單,就在最開始請求後端獲取到數據後segmentfault
created() { this.getData(); }, methods: { getData() { this.$axios.get("/data/blog").then(res => { this.blogs = res.data; this.show = this.blogs; }); }
用v-for
將router-link
循環出來
每個數據都是一個link
,能夠跳轉到具體的內容頁面後端
<router-link class='ShowBlogs-blog' :to="{ name:'TheOne',params:{ kind:'blog',id:item._id }}" tag="li" v-for="item in show.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="item._id" > <span>{{ item.date }}</span> {{ item.title }} </router-link>
在上面的代碼中你應該注意到了,看到了一個很熟悉的東西數組
show.slice((currentPage-1)*pageSize,currentPage*pageSize)
這是咱們在後臺管理系統中用過的分頁
這裏再也不贅述markdown
不過搜索功能有點和後臺管理不同
這一次我定義了一個show
數組
點擊搜索以後,調用函數來進行搜索,把搜索出來的結果存放在show
中
因此咱們展現的一直都是show
數組
因爲三個頁面都用到了搜索框
因此我把搜索框單獨作成了一個組件
並無引入到main.js
中使其成爲全局組件
由於咱們但願它是做爲ShowBlogs、ShowEssays、ShowArticles這三個組件的子組件存在的,方便調用父組件提供的方法
import mySearch from "./mySearch";
每一個組件都引入一次
點擊搜索時,向父組件發射搜索框裏的內容,並調用父組件的方法
//mySearch.vue methods:{ search() { this.$emit('search',this.content) } }
在父組件中
<mySearch @search="searchfor"></mySearch> methods:{ searchfor(s) { this.show = (this.blogs.filter(item => { if (item.title.includes(s)) { return item; } })); }}
針對每一個組件,搜索框的顏色不同
這裏用$route.path
來判斷
寫在搜索框的組件裏
用path
來決定使用哪一種樣式
<input type="text" v-model="content" :class="classipt" placeholder="請輸入關鍵詞搜索"> <button @click="search" :class="classbtn">
獲取後端送來的數據(字符串)
調用simpleMDE
的原型方法將其轉換爲html格式
this.contentMarkdown=SimpleMDE.prototype.markdown(this.theOne.content)
用v-html
展現出來
<div id='markdownArticle' v-html="contentMarkdown"></div>
創建輸入框,供讀者發佈評論
每篇文章或者雜談都有屬於本身的comments
數組
只須要將這個新的評論存進去就能夠
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 = ""; }
這裏在存入前,先定義了一個局部變量,把輸入框的值賦值給它
再把這個局部變量存進去
若是直接把輸入框的值存進去,那麼雙向綁定依舊存在
輸入框內容修改,已經存進去的評論也會跟着變
點擊跳轉外部連接
<li class='ShowBlogs-article' v-for="item in show.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="item._id" @click="jumpTo(item.link)" > jumpTo(link) { // window.location.href=link //當前窗口打開 window.open(link)}
至此,個人我的博客項目算是完成了還有不少須要優化的地方,好比管理頁面的密碼認證,頁面佈局的合理性與美觀,移動端響應式設計,從此的上線部署等等不過也算完成了一開始預期的目標了,學過的東西都派上了用場繼續努力學習~