from	
  basic	
  to	
  middle
clonnhttp://about.me/clonn
Expressjs
Thursday, September 5, 13
Caesar Chi
clonncd
Thursday, September 5, 13
• node
• npm
• git
• grunt.js (optional)
Material
Thursday, September 5, 13
• http://expressjs.com
• https://github.com/visionmedia/express/wiki
Thursday, September 5, 13
• npm install -g express
• maybe you will use “sudo”
• make express work well
Basic
Thursday, September 5, 13
• express as cli
• -e (ejs), -j (jshtml), -H (hogan)
• -c (css)
• -h (call help)
• -v (version)
• -s (session)
Basic
Thurs...
• express as cli
• -e (ejs), -j (jshtml), -H (hogan)
• -c (css)
• -h (call help)
• -v (version)
• -s (session)
Basic
Thurs...
• express as cli
• -e (ejs), -j (jshtml), -H (hogan)
• -c (css)
• -h (call help)
• -v (version)
• -s (session)
Basic
Thurs...
• express as cli
• -e (ejs), -j (jshtml), -H (hogan)
• -c (css)
• -h (call help)
• -v (version)
• -s (session)
Basic
Thurs...
• express as cli
• -e (ejs), -j (jshtml), -H (hogan)
• jade (as default)
Basic
Thursday, September 5, 13
• express as cli
• -e (ejs), -j (jshtml), -H (hogan)
• jade (as default)
Basic
They are Template engine
Thursday, Septembe...
• Why need template engine?
Basic
Thursday, September 5, 13
• Why need template engine?
Basic
•user-data
•cargo-list
•cache-store
Thursday, September 5, 13
• Why need template engine?
Basic
•user-data
•cargo-list
•cache-store
Thursday, September 5, 13
• Why need template engine?
Basic
•user-data
•cargo-list
•cache-store We need Template engine
Thursday, September 5, 13
We need
Template engine
MVC (i hate u)
Because
Thursday, September 5, 13
• express as cli
• -css (default css)
• stylus (as default)
Basic
Thursday, September 5, 13
• express as cli
• -css (default css)
• stylus will compile to pure CSS in static
folder
Basic
Thursday, September 5, 13
• run express cli
• express [-option] [application_name]
Basic
Thursday, September 5, 13
• run express cli
• express [-option] [application_name]
Basic
Thursday, September 5, 13
• run express cli
• express [-option] [application_name]
Basic
Thursday, September 5, 13
• run express cli
Basic
Thursday, September 5, 13
• run express cli
Basic
Thursday, September 5, 13
• run express cli
Basic
Thursday, September 5, 13
• run express cli
Basic
Thursday, September 5, 13
Now you know
Express-cli
as well
Thursday, September 5, 13
• folder structure
Content
Thursday, September 5, 13
• folder structure
Content
npm package config
Thursday, September 5, 13
• folder structure
Content
init file (app.js)
Thursday, September 5, 13
• folder structure
Content
static folder
Thursday, September 5, 13
• folder structure
Content
route setting
Thursday, September 5, 13
• folder structure
Content
view folder
Thursday, September 5, 13
it is basic
Express
folder structure
Thursday, September 5, 13
• Setting in Express
• app.listen
Middle
Thursday, September 5, 13
• Setting in Express
• app.configure
Middle
read environment variable
Thursday, September 5, 13
• Setting in Express
• app.set, app.get
• app.enable, app.disable
Middle
http://expressjs.com/api.html#app-settings
Thursd...
• Setting in Express
• app.use
Middle
middleware
route
view
Thursday, September 5, 13
• Setting in Express
• app.use
Middle
middleware
route
view
app.use, will execute every route
Thursday, September 5, 13
• Setting in Express
• app.get,
• app.post,
• app.delete,
• app.update
Middle
middleware
route
view
Thursday, September 5,...
• Setting in Express
• app.all
• app.get,
• app.post,
• app.delete,
• app.update
Middle
middleware
route
view
Thursday, Se...
• Setting in Express
• app.locals
Middle
•user-data
•cargo-list
•cache-store
if those parameters are default
Thursday, Sep...
it is middleware
Express
app original method
Thursday, September 5, 13
• req get parameter
• req.params
Request
id = 3
Thursday, September 5, 13
• req get parameter
• req.query
Request
getId = 30
Thursday, September 5, 13
• req get parameter
• req.body
Request
Thursday, September 5, 13
• req get parameter
• req.body
Request
Thursday, September 5, 13
• req get parameter
• req.files
Request
Thursday, September 5, 13
• req get cookie
• req.cookies (read cookie)
Request
Thursday, September 5, 13
• req about HEADER (read only)
• req.get, req.header
• req.is
• req.ip, req.ips
• req.host (req.subdomains)
• req.protocol...
• req about HEADER (read only)
• req.xhr
Request
Thursday, September 5, 13
• req about HEADER (read only)
• req.xhr
Request
Thursday, September 5, 13
• req about HEADER (read only)
• req.xhr
Request
Thursday, September 5, 13
Request is
READ only
in ExpressJS
Thursday, September 5, 13
• res about HEADER
• res.status (res.statusCode)
Response
(code only)
Thursday, September 5, 13
• res about HEADER
• res.clearCookie
Response
Thursday, September 5, 13
• res about HEADER
• res.set, res.header
Response
Thursday, September 5, 13
• res about parameters
• res.locals (app.locals is different)
Response
life cycle is only in url period.
Thursday, Septemb...
• res client render
• res.redirect
Response
Thursday, September 5, 13
• res client render
• res.json, res.send
Response
HEADER: application/json
Thursday, September 5, 13
• res client render
• res.download
Response
Thursday, September 5, 13
• res client render
• res.render
Response
Thursday, September 5, 13
Response write data
in Express
Thursday, September 5, 13
more?
Thursday, September 5, 13
change middleware
https://github.com/visionmedia/express/wiki
Thursday, September 5, 13
cross domain access
http://stackoverflow.com/questions/11181546/node-js-express-cross-domain-scripting
Thursday, September ...
co-work with angularjs
https://github.com/btford/angular-socket-io-im
Thursday, September 5, 13
future!!!
Thursday, September 5, 13
express 4.x roadmap.
https://github.com/visionmedia/express/wiki/4.x-roadmap
Thursday, September 5, 13
Q & A?
Thursday, September 5, 13
Advertising
Thursday, September 5, 13
http://nodejs.tw/
Thursday, September 5, 13
http://book.nodejs.tw/
Thursday, September 5, 13
http://nodeknockout.nodejs.tw/
2013/Nov/8 - 10
Thursday, September 5, 13
Upcoming SlideShare
Loading in...5
×

Expressjs basic to advance, power by Node.js

2,664

Published on

introduce express framework, a node.js web framework. Anyone if you try using node.js, should be know express framework. However did you really know about Expressjs. This slide will give you a totally common sense in Expressjs.

Published in: News & Politics, Technology
2 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,664
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
98
Comments
2
Likes
14
Embeds 0
No embeds

No notes for slide

Expressjs basic to advance, power by Node.js

  1. 1. from  basic  to  middle clonnhttp://about.me/clonn Expressjs Thursday, September 5, 13
  2. 2. Caesar Chi clonncd Thursday, September 5, 13
  3. 3. • node • npm • git • grunt.js (optional) Material Thursday, September 5, 13
  4. 4. • http://expressjs.com • https://github.com/visionmedia/express/wiki Thursday, September 5, 13
  5. 5. • npm install -g express • maybe you will use “sudo” • make express work well Basic Thursday, September 5, 13
  6. 6. • express as cli • -e (ejs), -j (jshtml), -H (hogan) • -c (css) • -h (call help) • -v (version) • -s (session) Basic Thursday, September 5, 13
  7. 7. • express as cli • -e (ejs), -j (jshtml), -H (hogan) • -c (css) • -h (call help) • -v (version) • -s (session) Basic Thursday, September 5, 13
  8. 8. • express as cli • -e (ejs), -j (jshtml), -H (hogan) • -c (css) • -h (call help) • -v (version) • -s (session) Basic Thursday, September 5, 13
  9. 9. • express as cli • -e (ejs), -j (jshtml), -H (hogan) • -c (css) • -h (call help) • -v (version) • -s (session) Basic Thursday, September 5, 13
  10. 10. • express as cli • -e (ejs), -j (jshtml), -H (hogan) • jade (as default) Basic Thursday, September 5, 13
  11. 11. • express as cli • -e (ejs), -j (jshtml), -H (hogan) • jade (as default) Basic They are Template engine Thursday, September 5, 13
  12. 12. • Why need template engine? Basic Thursday, September 5, 13
  13. 13. • Why need template engine? Basic •user-data •cargo-list •cache-store Thursday, September 5, 13
  14. 14. • Why need template engine? Basic •user-data •cargo-list •cache-store Thursday, September 5, 13
  15. 15. • Why need template engine? Basic •user-data •cargo-list •cache-store We need Template engine Thursday, September 5, 13
  16. 16. We need Template engine MVC (i hate u) Because Thursday, September 5, 13
  17. 17. • express as cli • -css (default css) • stylus (as default) Basic Thursday, September 5, 13
  18. 18. • express as cli • -css (default css) • stylus will compile to pure CSS in static folder Basic Thursday, September 5, 13
  19. 19. • run express cli • express [-option] [application_name] Basic Thursday, September 5, 13
  20. 20. • run express cli • express [-option] [application_name] Basic Thursday, September 5, 13
  21. 21. • run express cli • express [-option] [application_name] Basic Thursday, September 5, 13
  22. 22. • run express cli Basic Thursday, September 5, 13
  23. 23. • run express cli Basic Thursday, September 5, 13
  24. 24. • run express cli Basic Thursday, September 5, 13
  25. 25. • run express cli Basic Thursday, September 5, 13
  26. 26. Now you know Express-cli as well Thursday, September 5, 13
  27. 27. • folder structure Content Thursday, September 5, 13
  28. 28. • folder structure Content npm package config Thursday, September 5, 13
  29. 29. • folder structure Content init file (app.js) Thursday, September 5, 13
  30. 30. • folder structure Content static folder Thursday, September 5, 13
  31. 31. • folder structure Content route setting Thursday, September 5, 13
  32. 32. • folder structure Content view folder Thursday, September 5, 13
  33. 33. it is basic Express folder structure Thursday, September 5, 13
  34. 34. • Setting in Express • app.listen Middle Thursday, September 5, 13
  35. 35. • Setting in Express • app.configure Middle read environment variable Thursday, September 5, 13
  36. 36. • Setting in Express • app.set, app.get • app.enable, app.disable Middle http://expressjs.com/api.html#app-settings Thursday, September 5, 13
  37. 37. • Setting in Express • app.use Middle middleware route view Thursday, September 5, 13
  38. 38. • Setting in Express • app.use Middle middleware route view app.use, will execute every route Thursday, September 5, 13
  39. 39. • Setting in Express • app.get, • app.post, • app.delete, • app.update Middle middleware route view Thursday, September 5, 13
  40. 40. • Setting in Express • app.all • app.get, • app.post, • app.delete, • app.update Middle middleware route view Thursday, September 5, 13
  41. 41. • Setting in Express • app.locals Middle •user-data •cargo-list •cache-store if those parameters are default Thursday, September 5, 13
  42. 42. it is middleware Express app original method Thursday, September 5, 13
  43. 43. • req get parameter • req.params Request id = 3 Thursday, September 5, 13
  44. 44. • req get parameter • req.query Request getId = 30 Thursday, September 5, 13
  45. 45. • req get parameter • req.body Request Thursday, September 5, 13
  46. 46. • req get parameter • req.body Request Thursday, September 5, 13
  47. 47. • req get parameter • req.files Request Thursday, September 5, 13
  48. 48. • req get cookie • req.cookies (read cookie) Request Thursday, September 5, 13
  49. 49. • req about HEADER (read only) • req.get, req.header • req.is • req.ip, req.ips • req.host (req.subdomains) • req.protocol, (req.secure -> 'https' == req.protocol;) Request Thursday, September 5, 13
  50. 50. • req about HEADER (read only) • req.xhr Request Thursday, September 5, 13
  51. 51. • req about HEADER (read only) • req.xhr Request Thursday, September 5, 13
  52. 52. • req about HEADER (read only) • req.xhr Request Thursday, September 5, 13
  53. 53. Request is READ only in ExpressJS Thursday, September 5, 13
  54. 54. • res about HEADER • res.status (res.statusCode) Response (code only) Thursday, September 5, 13
  55. 55. • res about HEADER • res.clearCookie Response Thursday, September 5, 13
  56. 56. • res about HEADER • res.set, res.header Response Thursday, September 5, 13
  57. 57. • res about parameters • res.locals (app.locals is different) Response life cycle is only in url period. Thursday, September 5, 13
  58. 58. • res client render • res.redirect Response Thursday, September 5, 13
  59. 59. • res client render • res.json, res.send Response HEADER: application/json Thursday, September 5, 13
  60. 60. • res client render • res.download Response Thursday, September 5, 13
  61. 61. • res client render • res.render Response Thursday, September 5, 13
  62. 62. Response write data in Express Thursday, September 5, 13
  63. 63. more? Thursday, September 5, 13
  64. 64. change middleware https://github.com/visionmedia/express/wiki Thursday, September 5, 13
  65. 65. cross domain access http://stackoverflow.com/questions/11181546/node-js-express-cross-domain-scripting Thursday, September 5, 13
  66. 66. co-work with angularjs https://github.com/btford/angular-socket-io-im Thursday, September 5, 13
  67. 67. future!!! Thursday, September 5, 13
  68. 68. express 4.x roadmap. https://github.com/visionmedia/express/wiki/4.x-roadmap Thursday, September 5, 13
  69. 69. Q & A? Thursday, September 5, 13
  70. 70. Advertising Thursday, September 5, 13
  71. 71. http://nodejs.tw/ Thursday, September 5, 13
  72. 72. http://book.nodejs.tw/ Thursday, September 5, 13
  73. 73. http://nodeknockout.nodejs.tw/ 2013/Nov/8 - 10 Thursday, September 5, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×