目標：延續會員系統，製作一個簡單的留言板，只有留言功能!

1. 建立 table 表 comments，欄位：id、username、content
2. 製作留言區塊：若有登入就在首頁的部分呈現留言區
3. 新增路由：app.post('comments', commentController.add)
4. 實作 commentController 與 commentModel
5. 調整首頁路由：app.get('/', commentController.index)

// step2 製作留言區
<h1>簡易會員系統</h1>
<% if (username) { %>
  <a href="/logout">登出</a>
  <form action="/comments" method="POST">
    <textarea name="content"></textarea>
    <input type="submit">
  </form>
<% } else { %>
  <a href="/register">註冊</a>
  <a href="/login">登入</a>
<% } %>

// step3 
// index.js 
const commentController = require('./controllers/comment')
app.post('/comments', commentController.add)

step4、寫入留言功能

// controller 部分
// 寫入留言功能
const commentController = {
  add: (req, res) => {
    const {username} = req.session
    const {content} = req.body
    if (!username || !content) {
      return res.redirect('/') // 先不做錯誤處理
    }
    commentModel.add(username, content, err => {
      return res.redirect('/')
    })
  }
}

// commentModel 裡的 add method
  add: (username, content, cb) => {
    db.query('insert into comments (username, content) values (?, ?)',
      [username, content],
      (err, result) => {
        if (err) return cb(err)
          return cb(null, result)
      }
    )
  }

撈出留言

// comment in model
  getAll: (cb) => {
    db.query(
      `SELECT U.nickname, C.content
       FROM comments as C
       LEFT JOIN users as U on U.username = C.username
       `,
      (err, results) => {
        if (err) return cb(err)
          return  cb(null, results)
      }
    )
  }

調整首頁路由，處理相對應的 controller，讓 index.ejs 可以拿到所有的評論

// comment.js in Controllers
  index: (req, res) => {
    commentModel.getAll((err, results) => {
      if (err) {
        console.log(err)
      }
      res.render('index', {
        comments: results // 將 result 用 comments 的名稱帶入
      })
    })
  }

畫面呈現

// index.ejs
<% comments.forEach(function(comment) { %>
  <div>
    <h2><%= comment.nickname %></h2>
    <p><%= comment.content %></p>
  </div>
<% })%>

小結

1. 結合會員系統與註冊系統，會這兩個一般的應用沒有問題 !

code

// index.js
const commentController = require('./controllers/comment')

app.get('/', commentController.index)
app.post('/comment', commentController.add)

// controller
const commentController = {
  add:(req, res) => {
    const {username} = req.session
    const {content} = req.body
    if (!username || !content) {
      return res.redirect('/')
    }
    commentModel.add(username, content, err => {
      return res.redirect('/')
    })
  },
  index: (req, res) => {
    commentModel.getAll((err, results) => {
      if (err) {
        console.log(err)
      }
      res.render('index', {
        comments: results
      })
    })
  }
}
module.exports = commentController
// model
const commentModel = {
  add: (username, content, cb) => {
    db.query(
      'insert into comments (username, content) values(?, ?)',
       [username, content],
       (err, result) => {
        if (err) return cb(err)
        return cb(null, result)
       }
    )
  },
  getAll: (cb) => {
    db.query(`select U.nickname, C.content from comments as C left join users as U on U.username = C.username`),
    (err, result) => {
      if (err) return cb(err)
      return cb(null, result)
    }
  }
}
module.exports = commentModel
// views
1. index.ejs

/*
<% if (username) { %>
  <a href="/logout">登出</a>
  <form action="/comments" method="POST">
    <textarea name="content"></textarea>
    <input type="submit">
  </form>
<% } else { %>
  <a href="/register">註冊</a>
  <a href="/login">登入</a>
<% } %>

<% comments.forEach(function(comment) { %>
  <h2><%= comment.nickname %> </h2>
  <p><%= comment.content %></p>
<% })%>
*/