Recommended
More Related Content
Similar to Sails workshop1
Similar to Sails workshop1 (20)
Sails workshop1
- 1. Sails WorkShop (1) 立命館大学 経営学部３回生 井口智勝
- 8. sailsとは？ 設定より規約(CoC) テスト駆動開発(TDD) Don’t repeat yourself リソース指向アーキテクチャー(ROA) REST http://sailsjs.org/#/getStarted
- 19. ページ遷移図 TOP ページ GET: / 新規 作成 GET: /user/new 詳細 GET: /user/:id 一覧 GET: /user 編集 GET: /user/edit/:id 削除 GET: /user/destroy/:id CRUD
- 22. 環境設定 npm install -g sails cd 好きなディレクトリへ sails new SailsWorkShop cd SailsWorkShop npm install その後エディタ起動
- 24. controllerとmodel sails generate api user api : controllerとmodelを作るよ！
- 25. User.js (model) schema: true, attributes: { name: { type: 'string', required: true }, title: { type: 'string' }, email: { type: 'string', email: true, required: true, unique: true }, encryptedPassword: { type: 'string' } }
- 26. module.exports = function(req, res, next){ res.locals.flash = {}; if(!req.session.flash) return next(); res.locals.flash = _.clone(req.session.flash); return next(); }; policies/flash.js作成
- 27. View作成 view/userフォルダ作成（user関連） index.ejs edit.ejs new.ejs show.ejs view/staticフォルダ作成（初期ページ） index.ejs(Topページ)
- 28. user/index.ejs <div class="container"> <h3>Users</h3> <table class="table"> <tr> <th>ID</th> <th>Name</th> <th>Title</th> <th>Email</th> <th></th> <th></th> <th></th> </tr> <% _.each(users, function(user) {%> <tr data-id="<%= user.id %>" data- model="user"> <td><%= user.id %></td> <td><%= user.name %></td> <td><%= user.title %></td> <td><%= user.email %></td> <td><a href='/user/show/<%= user.id %>' class="btn btn-sm btn-primary">Show</a></ td> <td><a href='/user/edit/<%= user.id %>' class="btn btn-sm btn-warning">Edit</a></td> <td><form action="/user/destroy/<%= user.id %>" method="POST"> <input type="hidden" name="_method" value="delete"/> <input type="submit" class="btn btn- sm btn-danger" value="Delete"/> <input type="hidden" name="_csrf" value="<%= _csrf %>"/> </form></td> <!-- <td><a href='/user/destroy/<%= user.id %>' class="btn btn-sm btn- danger">Delete</a></td> --> </tr> <% })%> </table> </div>
- 29. <form action="/user/create" method="POST" id="sign-up-form" class="form- signin"> <h2 class="form-signin-heading">Create an account</h2> <input type="text" class="form-control" placeholder="your name" name="name"/> <input type="text" class="form-control" placeholder="your title" name="title"/ > <input type="text" class="form-control" placeholder="email" name="email"/> <input type="password" id="password" class="form-control" placeholder="password" name="password"/> <input type="password" class="form-control" placeholder="password confirmation" name="confirmation"/> <br/> <input type="submit" class="btn btn-lg btn-primary btn-block" value="Create Account"/> <input type="hidden" name="_csrf" value="<%= _csrf %>"/> </form> user/new.ejs
- 30. <form action="/user/update/<%= user.id %>" method="POST" class="form-signin"> <h2>編集画面</h2> <input value="<%= user.name %>" name="name" type="text" class="form-control"/> <input value="<%= user.title %>" name="title" type="text" class="form-control"/> <input value="<%= user.email %>" name="email" type="text" class="form-control"/> <input value="編集" type="submit" class="btn btn-lg btn- primary btn-block"/> <input value="<%= _csrf %>" name="_csrf" type="hidden"/> </form> user/edit.ejs
- 31. <div class="container"> <h1><%= user.name %></h1> <h3><%= user.title %></h3> <hr> <h3>Contact: <%= user.email %> </h3> <a class="btn btn-medium btn-primary" href="/user/edit/<%= user.id%>">Edit</a> </div> user/show.ejs
- 32. <div class="container"> <div class="jumbotron"> <h1>activeOverload</h1> <h2>.....tracking app activity better than the NSA since 1899.</h2> <a href="/user/new" class="btn btn-lg btn-success">sign up now!</a> </div> </div> static/index.ejs
- 33. 設定 config/routes内 '/': { view: 'static/index' } config/policies内 // '*': true, '*': ‘flash’ config/csrf内 true config/blueprints内 action rest shortcut をtrue
- 36. C (作成)を作る CRUD
- 37. new new : function(req,res{ res.view(); }, /user/newのリクエストでここに来る。 res.view()で自動的にuser/new.ejsに飛ぶ
- 39. R (表示)を作る CRUD
- 40. index // 一覧表示。user全ての配列を取得 index: function(req, res, next){ User.find(function foundUsers (err, users){ if(err) return next(err); res.view({ users: users }); }); },
- 41. show // 個別ページ id -> そのidのuserオブジェクトをviewへ送り描画 show: function(req, res, next){ User.findOne(req.param('id'), function foundUser(err, user){ if(err) return next(err); if(!user) return next(); res.view({ user:user }); }); },
- 42. TOP ページ GET: / 新規 作成 GET: /user/new 詳細 GET: /user/:id 一覧 GET: /user CRUD ここで一回 見てみましょう！！ sails liftでOK /userを見てみよう！
- 43. U (編集)を作る CRUD
- 44. edit edit: function(req, res){ User.findOne(req.param('id'), function foundUser (err, user){ if(err) return next(err); if(!user) return next(); res.view({ user: user }); }); },
- 45. update update: function(req, res, next){ User.update(req.param('id'), req.params.all(), function userUpdated(err){ if(err){ return res.redirect('/user/edit/'+ req.param('id')); } res.redirect('/user/show/' + req.param('id')); }) },
- 46. TOP ページ GET: / 新規 作成 GET: /user/new 詳細 GET: /user/:id 一覧 GET: /user 編集 GET: /user/edit/:id CRUD ここで一回 見てみましょう！！ editを押してみよう！
- 47. D (削除)を作る CRUD
- 48. destroy destroy: function(req, res, next){ User.findOne(req.param('id'), function foundUser(err, user) { if(err)return next(err); if(!user) return next("User doesn't exist."); User.destroy(req.param('id'), function userDestroyed(err) { if(err) return next(err); }); res.redirect('/user'); }); }
- 49. TOP ページ GET: / 新規 作成 GET: /user/new 詳細 GET: /user/:id 一覧 GET: /user 編集 GET: /user/edit/:id 削除 GET: /user/destroy/:id CRUD CRUD完成！！ deleteを押してみよう！
- 51. まとめ
- 52. 今回使ったSailsのまとめ 【基本】 ・アクション定義 index: function(req, res, next){ // 操作 }
- 53. 【Model】//RESTは最初からある ・model全件返す(Modelは任意の名前) Model.find(callback(err, models)) ・１つmodelを見つける Model.findOne(req.param(‘id’), callback(err, model)) ・アップデート Model.update(req.param(‘id), req.params.all(), callback(err)) ・削除 Model.destroy(req.param(‘id), callback(err)) 今回使ったSailsのまとめ
- 54. 【View】 ・JSON返却 res.json({ hoge: hoge }); ・view描画 res.view({ hoge: hoge }); 【その他】 ・リダイレクト res.redirect(URL); ・よくあるエラー処理 if(err) return next(err) if(!model) return next(); 今回使ったSailsのまとめ