vue個人部落格開發記錄 實現文章點讚功能(三)

2021-10-08 09:00:23 字數 1424 閱讀 6332

1.後端

1.1 增加文章中點贊對應的規則

const articleschema = monoogse.

schema(]

,...

..省略

//新增點讚對應的規則,關聯user(使用者表)

praise:

1.2 增加對應的介面
//點讚介面

router.

post

('/praise'

,async

(req,res)

=>

= req.body

if(type ===1)

,},)

res.

status

(200).

send

('點讚成功')}

else

if(type ===-1

),})

console.

log(model)

res.

status

(200).

send

('取消點讚')}

})

2.文章詳情頁

2.1 在data中宣告isclick來控制點贊的樣式

data()

, isclick:

false

}}

2.2 觀察model的變化
watch:

} methods:

}}

2.3 點讚或取消點讚

//點讚介面

export

function

postpraise

(articleid,userid,type)

, method:

'post'})

}

="another ml-2"

>

="another-item" @click=

"praiseclick"

>

="iconfont icon-dianzan"

:class=""

/>

class=""

>點讚<

/p>

<

/div>

="another-item"

>

="iconfont icon-huifu comment"

/>

/p>

<

/div>

<

/div>

async

praiseclick()

else

}else

}

2.4 實現點讚或取消點讚的效果如下

vue開發個人部落格

整體風格上,我對設計沒有太多的見解,做的時候參考了好多網上現有的部落格,總體喜歡簡約。正好在學vue vue vue router axios element ui框架的樣式 aos.css 動畫 less media 查詢 自適應 web h5 包含技術點 axios請求封裝 aos動畫的使用 部...

個人部落格開發系列 文章實時儲存

使用websocket來進行瀏覽器與伺服器的實時通訊 服務端使用定時任務 如每天凌晨3點 將redis快取的資料儲存到mysql資料庫中 瀏覽器端初次進入新增文章頁面時,使用websocket從服務端獲取資料 先從redis中查詢,如果沒有則再從mysql資料庫中查詢 使用vue.js的watch來...

個人部落格搭建記錄

準備搭建乙個個人部落格,在過程中學習實踐前後端知識 在這個部落格中記錄進度 監督自己 大概計畫為 1.先使用django搭建後端 2.使用mysql作為資料庫 3.僅用h5 css js編寫簡單的前端介面 4.測試部署 此時可以發布部落格,檢視部落格 5.用vue.js或者bootstrap等前端框...