使用 Express Generator

Express Application Generator 能夠快速建立一個Express應用框架。

npm install express-generator -g
express myapp --view=pug
cd myapp
npm install

# Run the myapp on Windows
SET DEBUG=myapp:* & npm start

# Run myapp on Linux/Mac OS X
DEBUG=myapp:* npm start

去http://localhost:3000/ 看看剛才建立的Express應用長什麼樣。

新增nodemon

在開發的時候，每次修改檔案，都需要重啟 express 服務，比較麻煩。使用nodemon，修改檔案後可以自動重啟 express 服務。

npm install --save-dev nodemon

修改 package.json 的 scripts 內容：

"scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  }

之後，使用 SET DEBUG=myapp:* & npm run devstart 啟動 express 服務。這樣在開發過程中修改檔案的時候，express服務就會自動重啟，非常方便。

生成的文件目錄結構

/myapp
    app.js
    /bin
        www
    package.json
    /node_modules
        [about 4,500 subdirectories and files]
    /public
        /images
        /javascripts
        /stylesheets
            style.css
    /routes
        index.js
        users.js
    /views
        error.pug
        index.pug
        layout.pug
 

www file

/bin/www 是應用的主入口。應用的真正入口是app.js檔案，所以www檔案先把app.js檔案引進來，其餘的內容主要就是建立了一個node HTTP server。

app.js

這個可是主要檔案，得好好嘮嘮，在app.js裡面，主要做了這些事兒：

1.引入之前使用npm install下載的包，並建立express物件：

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();

2.使用上面引入的包：

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

3.引入routes資料夾裡面的檔案，這些檔案主要處理URL路由。

var index = require('./routes/index');
var users = require('./routes/users');

4.關聯路由路徑與引入的檔案：

app.use('/', index);
app.use('/users', users);

5.設定模板，views 設定了模板的位置；view engine設定了要使用的模板引擎。

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

6.最後處理錯誤的http請求：

//設定跨域訪問
router.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
// 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');
});

routes資料夾

以users.js為例，首先載入express，通過express獲取到router物件。使用router物件指定路由的方法和路徑。由於在app.js已經指定 /users 到本檔案，因此當瀏覽器請求/user時，會執行下面的回撥函式。

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

回撥函式有第三個引數next，主要用於中介軟體中，即將資料傳遞到下一個方法去處理。

接下來寫一下可能遇到的問題：

1、自定義埠：

2、package.json: script：{鍵值：可執行指令碼語句}   使用：npm run 鍵值  這裡藉助nodemon實現熱啟動

3、view資料夾可以放前端渲染模板，前後分離可忽略。

4、routes為渲染路由  下面是為其配置同意字首 

接下來就是熟悉資料庫 這裡我選用的mongodb，你也可以其他sql，

伺服器搭建完成，接下來就是如何與資料庫打交道了，

那麼首先我們得先了解mongodb資料庫，下篇待續