Node.js+Express 進行web開發環境搭建

一、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的歡迎語頁面(不截圖了)

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容