iT邦幫忙

DAY 12
0

網頁設計師指南——從前端到後端系列 第 12

網頁設計師指南——從前端到後端(十二)API

做好「喜歡」的愛心按鈕之後,接下來我們要實作這個功能了。不過因為我們這個動作是要用 Ajax 來驅動的(當然啦,這年頭這種功能不是 Ajax 做的還能看嗎?),所以我們要先準備好 API。

我們準備要用的網址是 /api/account/like/:artwork

功能也很好寫,

首先,我們在 artwork這邊的 schema 加上 like 的欄位

var schema = new Schema({
    title     : { type: String },
    content   : { type: String },
    picture   : { type: String },
    like      : { type: Number, default: 0},
    updated_at: { type: Date,  default: Date.now },
});

在 user 這邊加上 likes 的欄位

var schema = new Schema({
    // 省略

    likes        : [ { type: ObjectId, ref: 'Artwork' } ],

});

這樣我們就準備好讓資料庫接受資料了

接著寫新的 route。

router.get('/like/:artwork', function(req, res, next) {
  artworkId = req.params.artwork
  Artwork.findById(artworkId, function(err, artwork) {
    if(err) return next(err);
    if(!artwork) return next(new Error('NOTFOUND'))

    artwork.update({$inc: {like: 1}})

    req.user.likes.addToSet(artwork.id)
    req.user.save(function(err, result) {
      if(err) return next(err);
      res.send(204)
    });
  })
});

其實最重要的是

artwork.update({$inc: {like: 1}})

req.user.likes.addToSet(artwork.id)

我們在 artwork 這邊只加數字,因為對於作品來說是多少人喜歡比較重要。而 user 這邊,我們會想看我喜歡過什麼,所以要把作品ID 記下來。

那剛剛 router 的網址怎麼只有 /like/:artwork 呢?怎麼跟說好的不一樣?

這就是 express 的 router 的好用之處了,因為 /api 跟 /account 勢必要寫很多次, express 的 router 系統透過多層 middleware 的方式,讓我們不要重複打那麼多字。只要

apiRouter.use('/account', router)

app.use('/api', apiRouter);

這個方式,我們就能得到 /api/account/like/:artwork 這個 route了。


上一篇
網頁設計師指南——從前端到後端(十一)SVG
下一篇
網頁設計師指南——從前端到後端(十三)AngularJS
系列文
網頁設計師指南——從前端到後端15

尚未有邦友留言

立即登入留言