江湖險惡,我從來都不輕易留下我的姓名。

憑你的智慧,我唬得了你嗎?

Sails練習之四

| Comments

OK, 接下來這篇Building a Sails Application: Ep5 - Handling validation errors with a flash message

作者要示範如何handle error

當我們登入註冊頁面, 然後沒有輸入任何資料, 或者資料輸入錯誤, 就按下Create Account. Sails會回傳錯誤資訊. 我們現在要handle這個錯誤, 請看以下練習

UserController.js, 修改create function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports = {
    'new': function(req, res){
        res.locals.flash = _.clone(req.session.flash);
        res.view();
        req.session.flash = {};
    },

    create: function (req, res, next) {
      User.create(req.params.all(), function userCreated(err,user){
          //if(err) return next(err);

          if(err){
            console.log(err);
            req.session.flash = {
              err: err
            }
            //if error redirect back to sign-up page
            return res.redirect('/user/new');
          }

          res.json(user);
        req.session.flash = {};
      });
    }
};

OK.

然後到new.ejs,參考底下程式碼

new.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form action="/user/create" method="POST" class="form-signin">
  <h2 class="form-signin-heading"> Create an account</h2>


  <% if(flash && flash.err){ %>
  <ul class="alert alert-success">
    <% Object.keys(flash.err).forEach(function(error){ %>
    <li><%- JSON.stringify(flash.err[error]) %></li>
    <% })%>
  </ul>
  <%}%>


  <div class="form-group">
  <input type="text" class="form-control" placeholder="your name" name="name">
  </div>

  <input type="text" class="form-control" placeholder="your title" name="title">

  <input type="text" class="form-control" placeholder="email address" name="email">

  <input type="password" class="form-control" placeholder="password" name="password">

  <input type="password" class="form-control" placeholder="password confirmation" name="confirmation">

  <input type="submit" class="btn btn-lg btn-primary btn-block" value="Create Account"/>

  <input type="hidden" name="_csrf" value="<%= _csrf %>"/>

</form>

由於我們的new.ejs裡面有用到flash這個關鍵字, 這個東西從哪邊來的呢?

這個是sails policies的一個部分

所以我們要在api\policies加上flash.js

裡面的內容為

flash.js
1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = function(req, res, next) {

  res.locals.flash = {};

  if(!req.session.flash) return next();

  res.locals.flash = _.clone(req.session.flash);

  // clear flash
  req.session.flash = {};

  next();
};

由於我們新加了flash這個policy這個限制, 我們還得告訴sails要在哪一個action使用他

所以我們開啟config/policies.js 新增以下內容

config/policies.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
   module.exports.policies = {

  /***************************************************************************
  *                                                                          *
  * Default policy for all controllers and actions (`true` allows public     *
  * access)                                                                  *
  *                                                                          *
  ***************************************************************************/

   //'*': true,
   '*': 'flash',
    user:{
        'new': "flash",
        'create': "flash"
    }
  /***************************************************************************
  *                                                                          *
  * Here's an example of mapping some policies to run before a controller    *
  * and its actions                                                          *
  *                                                                          *
  ***************************************************************************/

  巴拉巴拉

存檔, 重新啟動, 測試看看, 應該就沒問題了

這篇主要在講後端處理的技術, 以及在前端如何使用ejs的一些巧技巧

精華的部分就是在res.locals.flashreq.session.flash這兩個上面, 以及前端頁面, 像是 <% %>這樣嵌入式的ejs用法..

說實話, 我現階段還對ejs語法不是很熟, 到時候再來補齊相關資訊嚕

Comments