功能一：發布評論，如下圖

功能描述：點擊上面的發布按鈕，可以發布評論，評論中要有發布人的姓名，回復給誰，發布的內容，以及發布的時間

問題描述：每一條留言下面都可以發布評論，因為發布一條評論需要記錄很多信息（回復人，留言人，時間，內容，點贊...），想著信息多，為了方便管理，我把他們存放在一個對象中,並將這個對象，放在了data中，結果等我發布信息的時候，就會發現，如果我發布一條信息後，再去發另外一條信息，就會修改我上面一條發布的信息，並且我不能清空輸入框中的信息

解決思路：其實這個問題我一開始還挺困惑的，因為我每發布一條信息都會將其push到我的渲染列表中的，而且它也可以正常渲染，那為什麽會出現上面的問題呢？主要原因就是出現在我把信息都存放到了對象中，所以我每次向渲染列表中push的其實是一個對象，這樣因為對象引用的關系，自然一個改變其他的都會改變了

解決辦法：

1、不要把需要記錄的數據存放在對象中，將其拿出來，比如內容就content:" ",記錄

2、那麽多信息都拿出來看著比較難受，因為有些是固定的，有寫時點擊發布按鈕的時候才需要，所以我只把必須放在data中的屬性放在data中，然後再data外面用一個屬性去記錄這些需要的值，在提交的時候，提交的也是外面的這個對象，那麽我每次在重新發布留言的時候就不會出現上面的問題了

主要知識點：如果兩個對象的引用相同，那麽一個對象的屬性值改變，也會改變另一個對象的屬性值

功能二、點贊功能

功能描述：

1、同一個人可以給多條評論點贊，但是每條評論同一個人只能點贊一次，不可重復點贊

2、該登錄者點過贊的，點贊圖標為紅色，鼠標移入提示已點贊，沒有點贊的，點贊圖標為黑色，鼠標移入提示點贊

3、點贊之後，後面的數字會+1

這個不難實現，稍微需要動點腦子的地方是：怎樣知道該登錄者是否已經點贊，如果已經點贊，再次點擊點贊圖標，不讓數據增加

解決辦法：

1、每一條評論用一個數組記錄點贊人的姓名，每次點贊的時候查找這個數組中是否有登錄者的名字，如果已經存在，就不執行操作，不存在的時候再執行操作

2、提示點贊或已點贊，這個我是用title屬性實現的（不難，就不再詳細說了）

功能三、顯示評論發表的時間

功能描述：如果發布的時間在一個小時內，那麽評論上顯示的時間是：n分鐘前，如果是超過一個小時，直接顯示發布的日期（年月日）

解決思路：

1、後端記錄每條評論發布的時間

2、用當前時間減去發布的時間，並做一些處理

3、開啟一個定時器，每一秒調用一次時間處理函數

關鍵代碼如下：

1. methods:{
2. setInt(){
3. clearInterval(this.timer)
4. this.timer = setInterval(this.time,1000)
5. },
6. time(time){
7. let nowTime = new Date()
8. let lastTime = new Date(time)
9. let t = Math.floor((nowTime - lastTime)/1000)
10. let Day = Math.floor(t/86400)
11. let Hour = Math.floor(t%86400/3600)
12. let Min = Math.floor(t%86400%3600/60)
13. let str = ‘‘
14. if(Day<1&&Hour<1){
15. str = String(Min)
16. }else{
17. let year = lastTime.getFullYear()
18. let month = lastTime.getMonth()+1
19. let day = lastTime.getDate()
20. str = year+"年"+getTwo(month)+"月"+day+"日"
21. }
22. function getTwo(n){
23. return n<10?‘0‘+n:‘‘+n
24. }
25. return str
26. }
27. }

前端博站項目中遇到的問題總結