SlideShare a Scribd company logo
1 of 48
Download to read offline
2017.01.26 EXPRESSJS &TESTING
Ivan Wei
⾃自由職業者 -
 在哪都在⼯工作
歐酷網路路 -

 後端架構⼯工程師
時間軸科技 -
 網站⼯工程師
cmder ( Open source )
BASH ON UBUNTU ON WINDOWS
BASH ON UBUNTU ON
WINDOWS
• Windows 10 ( 64-bit )
• OS build 14393 or later
• 安裝⼿手冊 (符合條件就安裝吧)
NODE FRAMEWORKS
• Express
• koa.js
• hapi
• ThinkJS
• Nodal
• Feathers
• ItemsAPI
• KeystoneJS
• Kraken
• LEAN-STACK
• LoopBack
• MEAN
• Sails
• …
為什什麼⼤大家都⽤用 EXPRESS
基本款該有都有,不該有都沒有
更更多的 NODE FRAMEWORKS
http://nodeframework.com/
HI, EXPRESS
⽅方法⼀一
1. npm install express-generator -g
2. express --view=jade [myapp]
3. cd myapp
4. npm start
⽅方法⼆二
⾃自⼰己來來
動⼿手玩 EXPRESS
git init
• 初始化 Git 資料 ( 會增加 .git 資料夾 )
• git branch 、 git diff [file1 file2] 、 git add files 、
git commit ‘new branch name’ 、 git push
npm init ( 內容⾃自⼰己打 )
• 初始化 package.json
• 預設 npm start、 npm test ( npm run [script] )
建立 app.js
const express = require('express');
const app = express();
const http = require('http');
const port = 3000;
http.createServer(app)
.listen(port, function() {
console.log('App listening on port ' + port + '!'); // Server 啟動後吐回⽬目前的 PORT 碼
});
我們有⼀一個 Node Server
node app.js
可是…
我要這做什什麼?
Controllers / Routers
• 建立⼀一個 controllers / routers 資料夾
• 之後什什麼 Router 都放進去
建立 index.js
const express = require('express');
const router = express.Router();
router.get('/', function(req, res) {
res.end(‘It works’);
});
module.exports = router;
更更新 app.js
const express = require('express');
const app = express();
const http = require('http');
const port = 3000;
const index = require(‘./controllers/index');
app.use('/', index);
http.createServer(app)
.listen(port, function() {
console.log('App listening on port ' + port + '!'); // Server 啟動後吐回⽬目前的 PORT 碼
});
看⾒見見希望了了
Views
• 建立⼀一個 views 資料夾
• 之後什什麼 HTML / Jade (Pug) / EJS 都放進去
建立 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container" class="col">
<p>You are amazing</p>
<p>Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.</p>
</div>
</body>
</html>
更更新 controllers/index.js
const express = require('express');
const router = express.Router();
router.get('/', function(req, res) {
const options = {
root: './views/'
}
res.sendFile('index.html', options);
});
module.exports = router;
神啊!能讓 HTML
不這麼變扭嗎
有的!Jade (Pug) / EJS / …
接下來來以 Jade (Pug) 為例例
建立 views/index.jade
doctype html
html(lang='en')
head
title Jade
body
h1 Jade - node template engine (#{title})
#container.col
pYou are amazing
p
| Jade is a terse and simple
| templating language with a
| strong focus on performance
| and powerful features.
更更新 app.js
const express = require('express');
const app = express();
const http = require('http');
const port = 3000;
const index = require(‘./controllers/index');
app.use('/', index);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
http.createServer(app)
.listen(port, function() {
console.log('App listening on port ' + port + '!'); // Server 啟動後吐回⽬目前的 PORT 碼
});
更更新 controllers/index.js
const express = require('express');
const router = express.Router();
router.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
module.exports = router;
中間換
場時間
寫個 API 測試很簡單
⾸首先要安裝…
npm install should supertest --save-dev
npm install mocha -g
名稱 ⽤用途 設定檔
Mocha.js 測試發動機 mocha.opts
Should.js 稽核⼈人員
supertest 模擬 http request
建立 test/mocha.opts
--timeout 500000
--require should
--reporter spec
--ui bdd
--recursive ./app.js
然後…
直接看 CODE 吧!
(這裡)
Q&A
最後記得交作業
作業
• https://github.com/IvanWei/Homework-20170126
• 交作業期限:2017/02/02
謝謝⼤大家

More Related Content

What's hot

百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
taobao.com
 
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
Simon Su
 
第三方内容开发最佳实践
第三方内容开发最佳实践第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
 
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
 
淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
 

What's hot (20)

百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
 
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
 
快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架快快樂樂學 Angular 2 開發框架
快快樂樂學 Angular 2 開發框架
 
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
 
webpack 入門
webpack 入門webpack 入門
webpack 入門
 
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
 
第三方内容开发最佳实践
第三方内容开发最佳实践第三方内容开发最佳实践
第三方内容开发最佳实践
 
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
 
前端MVVM框架安全
前端MVVM框架安全前端MVVM框架安全
前端MVVM框架安全
 
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
 
Koa 正在等一個人
Koa 正在等一個人Koa 正在等一個人
Koa 正在等一個人
 
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
 
ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索ASP.NET Core 6.0 全新功能探索
ASP.NET Core 6.0 全新功能探索
 
現代 IT 人一定要知道的 Ansible 自動化組態技巧
現代 IT 人一定要知道的 Ansible 自動化組態技巧現代 IT 人一定要知道的 Ansible 自動化組態技巧
現代 IT 人一定要知道的 Ansible 自動化組態技巧
 
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
 
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
 
SQL Server 資料庫版本控管
SQL Server 資料庫版本控管SQL Server 資料庫版本控管
SQL Server 資料庫版本控管
 
淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践
 
Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南
 

Similar to Class 20170126

Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
 
Build desktop app_by_xulrunner
Build desktop app_by_xulrunnerBuild desktop app_by_xulrunner
Build desktop app_by_xulrunner
Rack Lin
 
NodeJS快速服务端开发 朝沐金风 Shanghai
NodeJS快速服务端开发 朝沐金风 ShanghaiNodeJS快速服务端开发 朝沐金风 Shanghai
NodeJS快速服务端开发 朝沐金风 Shanghai
Jackson Tian
 
Node js实践
Node js实践Node js实践
Node js实践
myzykj
 
2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt
tka
 
HTML5概览
HTML5概览HTML5概览
HTML5概览
Adam Lu
 
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
Jackson Tian
 
docker intro
docker introdocker intro
docker intro
koji lin
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctech
Kai Cui
 

Similar to Class 20170126 (20)

NodeJS基礎教學&簡介
NodeJS基礎教學&簡介NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
 
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境從頭打造 C#、.NET 與 ASP.NET Core 開發環境
從頭打造 C#、.NET 與 ASP.NET Core 開發環境
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
打開窗,讓大象跨進來 - Microsoft HDInsight
打開窗,讓大象跨進來 - Microsoft HDInsight打開窗,讓大象跨進來 - Microsoft HDInsight
打開窗,讓大象跨進來 - Microsoft HDInsight
 
Build desktop app_by_xulrunner
Build desktop app_by_xulrunnerBuild desktop app_by_xulrunner
Build desktop app_by_xulrunner
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门
 
NodeJS快速服务端开发 朝沐金风 Shanghai
NodeJS快速服务端开发 朝沐金风 ShanghaiNodeJS快速服务端开发 朝沐金风 Shanghai
NodeJS快速服务端开发 朝沐金风 Shanghai
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
 
Node js实践
Node js实践Node js实践
Node js实践
 
Node分享 展烨
Node分享 展烨Node分享 展烨
Node分享 展烨
 
2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt
 
Full stack-development with node js
Full stack-development with node jsFull stack-development with node js
Full stack-development with node js
 
Node.js 進攻桌面開發
Node.js 進攻桌面開發Node.js 進攻桌面開發
Node.js 進攻桌面開發
 
HTML5概览
HTML5概览HTML5概览
HTML5概览
 
Gops2016 云端基于Docker的微服务与持续交付实践
Gops2016 云端基于Docker的微服务与持续交付实践Gops2016 云端基于Docker的微服务与持续交付实践
Gops2016 云端基于Docker的微服务与持续交付实践
 
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
 
Open Street Map安裝指引 (Ubuntu 12.04)
Open Street Map安裝指引 (Ubuntu 12.04)Open Street Map安裝指引 (Ubuntu 12.04)
Open Street Map安裝指引 (Ubuntu 12.04)
 
docker intro
docker introdocker intro
docker intro
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctech
 

Recently uploaded

10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
PUAXINYEEMoe
 
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
michaelell902
 

Recently uploaded (6)

taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdftaibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
 
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
 
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
taibif_資料標準概念介紹_20240509_20240509_20340509.pdftaibif_資料標準概念介紹_20240509_20240509_20340509.pdf
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
 
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
 
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
 
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
 

Class 20170126