一、Node.js的安裝
node.js的安裝可以參考W3Cschol上的教程,內容比較全,windows和linux環境下的安裝教程都有,鏈接是:W3Cschool Node.js安裝教程
二、Node.js Express 框架
Express 簡介
Express是一個簡潔而靈活的node.js Web應用框架, 提供了一系列強大特性幫助你創建各種Web應用,和豐富的HTTP工具。
使用Express可以快速地搭建一個完整功能的網站。
Express 框架核心特性包括:
- 可以設置中間件來響應HTTP請求。
- 定義了路由表用于執行不同的HTTP請求動作。
- 可以通過向模板傳遞參數來動態渲染HTML頁面。
安裝 Express
Express中文官網:Express中文網
$ npm install express --save
$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save
以上命令會安裝Express和幾個比較重要的模塊
使用Express 應用生成器構建項目工程
通過應用生成器工具 express 可以快速創建一個應用的骨架。
通過如下命令安裝:
$ npm install express-generator -g
安裝好后開始構建我們的第一個應用
$ express myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.jade
create : myapp/views/layout.jade
create : myapp/views/error.jade
create : myapp/bin
create : myapp/bin/www
安裝依賴包:
$ cd myapp
$ npm install
啟動myapp
(
在開發的時候,每次修改文件,都需要重啟 express 服務,比較麻煩。使用nodemon,修改文件后可以自動重啟 express 服務。
使用方法可以參考:http://www.lxweimin.com/p/c5baef64563a
)
// 第一種啟動方法
npm start
// linux
$ DEBUG=myapp npm start
// windows
set DEBUG=myapp & npm start
啟動成功后,瀏覽器輸入 http://localhost:3000/ 就可以看到應用了(默認是3000端口,后面再改)
通過 Express 應用生成器創建的應用一般都有如下目錄結構:
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
7 directories, 9 files
三、Express 應用生成器創建的應用項目結構
1、bin/www
/bin/www 是應用的主入口。應用的真正入口是app.js文件,所以www文件先把app.js文件引進來,其余的內容主要就是創建了一個node HTTP server。(在這里修改端口)
// 默認是3000端口,這里改成了80端口
var port = normalizePort(process.env.PORT || '80');
app.set('port',port);
2、app.js
app.js是框架的主要文件,主要干的內容如下:
- 創建Express對象,引入一些常用包
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
- 引入routes文件夾里面的處理URL路由的文件,并且關聯路由路徑與引入文件
// 引入路由處理文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
// 關聯
app.use('/', indexRouter );
app.use('/users', usersRouter );
- 處理錯誤的http請求
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
- 設置模板位置和模板引擎(Express創建時模板引擎默認是jade,也可以自定義模板引擎,我這里修改成ejs,當然前提是按照ejs的依賴,后面有進一步說明)
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
四、ejs模板引擎與jade模板引擎
1、jade
jade模板引擎,Express創建項目時默認是jade模板引擎,但是感覺jade并不是很適合我個人的習慣,所以沒怎么用jade。以下是關于jade的一些內容介紹文章地址(僅供參考)
jade官網
http://www.expressjs.com.cn/guide/using-template-engines.html
https://cnodejs.org/topic/5368adc5cf738dd6090060f2
2、ejs
ejs官網
環境剛搭建時是沒有ejs模板引擎的依賴的,通過以下代碼即可完成安裝
npm install ejs --save
安裝完成后,修改app.js里面的模板引擎為ejs,即可使用ejs
在views文件夾下新建index.ejs文件,當前目錄下以的xxx.jade文件可以刪除了
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet" type="text/css" hresf="/style/sheets/style.css">
</head>
<body>
<h1><%= title %></h1>
<p>Welcom <%= title %></p>
</body>
重新啟動項目,訪問項目,就能出現Express的歡迎語頁面(不截圖了)