編寫 src/utils/index.js 文件
直接給代碼如下：
export default {
goodTime (str) {
let now = new Date().getTime()
let oldTime = new Date(str).getTime()
let difference = now - oldTime
let result = ''
let minute = 1000 * 60
let hour = minute * 60
let day = hour * 24
let month = day * 30
let year = month * 12
let _year = difference / year
let _month = difference / month
let _week = difference / (7 * day)
let _day = difference / day
let _hour = difference / hour
let _min = difference / minute
if (_year >= 1) {
result = '發表於 ' + ~~(_year) + ' 年前'
} else if (_month >= 1) {
result = '發表於 ' + ~~(_month) + ' 個月前'
} else if (_week >= 1) {
result = '發表於 ' + ~~(_week) + ' 周前'
} else if (_day >= 1) {
result = '發表於 ' + ~~(_day) + ' 天前'
} else if (_hour >= 1) {
result = '發表於 ' + ~~(_hour) + ' 個小時前'
} else if (_min >= 1) {
result = '發表於 ' + ~~(_min) + ' 分鐘前'
} else {
result = '剛剛'
}
return result
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
好，代碼噁心了點，我拿我以前寫的代碼改的，沒有深入優化，大家就隨便看看，大概就是這麼個東西。
寫好代碼之後，我們保存文件。但是此時，我們還不能使用我們的這個方法函數。我們必須在 main.js 中將我們的方法函數給綁定上。如下代碼：
// 引用工具文件
import utils from './utils/index.js'
// 將工具方法綁定到全局
Vue.prototype.$utils = utils- 1
- 2
- 3
- 4
還記得我們先前是如何將我們的接口請求函數給綁定上的嗎？這裏其實是採用了同樣的方法。如果不記得了，可以點擊鏈接過去看看。
好了，這樣，我們寫的這個函數，就可以隨便被我們調用了。我們再來修改一下我們上面的 index.vue 中的代碼，將 time 調整爲：
<time v-text="$utils.goodTime(i.create_at)"></time>- 1
然後，我們再來看一下實際的效果：
編寫內容頁面
照舊，先看東西，再說話：
<template>
<div>
<myHeader></myHeader>
<h2 v-text="dat.title"></h2>
<p>作者：{{dat.author.loginname}} 發表於：{{$utils.goodTime(dat.create_at)}}</p>
<hr>
<article v-html="dat.content"></article>
<h3>網友回覆：</h3>
<ul>
<li v-for="i in dat.replies">
<p>評論者：{{i.author.loginname}} 評論於：{{$utils.goodTime(i.create_at)}}</p>
<article v-html="i.content"></article>
</li>
</ul>
<myFooter></myFooter>
</div>
</template>
<script>
import myHeader from '../components/header.vue'
import myFooter from '../components/footer.vue'
export default {
components: { myHeader, myFooter },
data () {
return {
id: this.$route.params.id,
dat: {}
}
},
created () {
this.getData()
},
methods: {
getData () {
this.$api.get('topic/' + this.id, null, r => {
this.dat = r.data
})
}
}
}
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
好，我們這邊把代碼寫進 src/page/content.vue 文件。然後保存，我在我們先前的列表頁面隨便點開一篇文章，然後我們看下結果：
好，按照我們的需求已經渲染出來了。
重複一下，樣式，我就不管了，自己去寫。
說明一下里面的重點
template 部分
其他的內容，我們在列表頁面已經見過了。這裏第一次出現 <article v-html="dat.content"></article> 這個東西。
同樣是渲染內容， v-html 和 v-text 有什麼區別呢？其實區別非常簡單，v-text 會把所有的內容當成字符串給直接輸出出來。而 v-html 會把字符串給轉換爲 html 標記語言給渲染出來。這部門更多內容，請參考：https://cn.vuejs.org/v2/api/#v-html
注意了！ 我們在列表中，我們使用的是 Header 注意的組件命名方式，爲什麼我這邊用了 myHeader 注意的組件命名方式呢？
其實，我想說明的是，我們不要使用 html 本身就支持的標籤名稱來自定義我們的組件，這容易導致混亂，最好，是像內容頁裏面這樣，使用自定義的標籤名。
好吧，我承認，就是我先前寫忘掉了，不要鄙視我~~但我感覺這裏強調一下也好，省得你以後也忘記了。
script 部分
代碼基本上是一致的，重點是 id: this.$route.params.id, 這一句。
還記得我們先前是怎麼配置路由的嗎？忘記了？點擊 Vue2+VueRouter2+Webpack+Axios 構建項目實戰2017重製版（四）調整 App.vue 和 router 路由 直達。
我們是這麼配置的：
export default new Router({
routes: [
{
path: '/',
component: Index
}, {
path: '/content/:id',
component: Content
}
]
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
重點：path: '/content/:id', 中，我們使用了 :id 這個東西。這是動態路由匹配。參考文檔： 《動態路由匹配》
我們需要從我們的 url 中，來獲取我們的 id 然後根據這個 id 來進行數據的查詢。
好，想起來了。那麼我們已經在 url 包含了這個 id 了。
http://localhost:8080/#/content/58eee565a92d341e48cfe7fc- 1
如上：58eee565a92d341e48cfe7fc 這個就是 ID ，奇怪是奇怪了點，但確實就是 id。
我們如何取出來呢？
不用想很多複雜的事情，vuerouter 早就給我們準備瞭解決方法了。
我們可以在項目中打印如下代碼：
console.log(this.$route)- 1
擦，博客寫到這裏
cnodejs.org網站掛了。。。那就暫時不放我的打印結果圖了，大家可以看下官方文檔 路由信息對象的屬性
回頭，你也可以自己打印了看下，有助於你自己分析理解問題。
好了，除了上面的問題，我們再看下我們的接口數據調用，代碼如下：
this.$api.get('topic/' + this.id, null, r => {
this.dat = r.data
})- 1
- 2
- 3
等於沒什麼要說的，就是把數據拿過來了而已，需要注意的是，我們的請求的接口地址是根據 id 進行變化的。所以，我這邊採用了字符串拼接的方法，'topic/' + this.id 來得到我們真正想要請求的接口數據。