前端博站專案中遇到的問題總結
說明:是針對我做的專案的總結,避免以後重複犯錯,可能對於看到的您並沒有太大作用哦!
專案中實現的功能有很多,只記錄稍微複雜點的
功能一:釋出評論,如下圖
功能描述:點選上面的釋出按鈕,可以釋出評論,評論中要有釋出人的姓名,回覆給誰,釋出的內容,以及釋出的時間
問題描述:每一條留言下面都可以釋出評論,因為釋出一條評論需要記錄很多資訊(回覆人,留言人,時間,內容,點贊...),想著資訊多,為了方便管理,我把他們存放在一個物件中,並將這個物件,放在了data中,結果等我釋出資訊的時候,就會發現,如果我釋出一條資訊後,再去發另外一條資訊,就會修改我上面一條釋出的資訊,並且我不能清空輸入框中的資訊
解決思路:其實這個問題我一開始還挺困惑的,因為我每釋出一條資訊都會將其push到我的渲染列表中的,而且它也可以正常渲染,那為什麼會出現上面的問題呢?主要原因就是出現在我把資訊都存放到了物件中,所以我每次向渲染列表中push的其實是一個物件,這樣因為物件引用的關係,自然一個改變其他的都會改變了
解決辦法:
1、不要把需要記錄的資料存放在物件中,將其拿出來,比如內容就content:" ",記錄
2、那麼多資訊都拿出來看著比較難受,因為有些是固定的,有寫時點擊發布按鈕的時候才需要,所以我只把必須放在data中的屬性放在data中,然後再data外面用一個屬性去記錄這些需要的值,在提交的時候,提交的也是外面的這個物件,那麼我每次在重新發布留言的時候就不會出現上面的問題了
主要知識點:如果兩個物件的引用相同,那麼一個物件的屬性值改變,也會改變另一個物件的屬性值
功能二、點贊功能
功能描述:
1、同一個人可以給多條評論點贊,但是每條評論同一個人只能點贊一次,不可重複點贊
2、該登入者點過讚的,點贊圖示為紅色,滑鼠移入提示已點贊,沒有點讚的,點贊圖示為黑色,滑鼠移入提示點贊
3、點贊之後,後面的數字會+1
這個不難實現,稍微需要動點腦子的地方是:怎樣知道該登入者是否已經點贊,如果已經點贊,再次點選點贊圖示,不讓資料增加
解決辦法:
1、每一條評論用一個數組記錄點贊人的姓名,每次點讚的時候查詢這個陣列中是否有登入者的名字,如果已經存在,就不執行操作,不存在的時候再執行操作
2、提示點贊或已點贊,這個我是用title屬性實現的(不難,就不再詳細說了)
功能三、顯示評論發表的時間
功能描述:如果釋出的時間在一個小時內,那麼評論上顯示的時間是:n分鐘前,如果是超過一個小時,直接顯示釋出的日期(年月日)
解決思路:
1、後端記錄每條評論釋出的時間
2、用當前時間減去釋出的時間,並做一些處理
3、開啟一個定時器,每一秒呼叫一次時間處理函式
關鍵程式碼如下:
methods:{
setInt(){
clearInterval(this.timer)
this.timer = setInterval(this.time,1000)
},
time(time){
let nowTime = new Date()
let lastTime = new Date(time)
let t = Math.floor((nowTime - lastTime)/1000)
let Day = Math.floor(t/86400)
let Hour = Math.floor(t%86400/3600)
let Min = Math.floor(t%86400%3600/60)
let str = ''
if(Day<1&&Hour<1){
str = String(Min)
}else{
let year = lastTime.getFullYear()
let month = lastTime.getMonth()+1
let day = lastTime.getDate()
str = year+"年"+getTwo(month)+"月"+day+"日"
}
function getTwo(n){
return n<10?'0'+n:''+n
}
return str
}
}