Webstorm 新建 Express 專案結構分析

Cacra發表於2018-07-25
WebORMExpress

根據Webstorm新建Express的專案結構，對Express各個模組間功能和資料夾合作進行分析。

參考文章：
https://www.jianshu.com/p/02273a225e3e

1.新建Express專案目錄：

這裡寫圖片描述

  • bin：啟動配置檔案，在 www 裡修改執行埠號
  • node_modules:存放所有的專案依賴庫，就像java存放架包
  • public：用於存放靜態資原始檔 圖片，CSS，JAVASCRIPT檔案..
  • routers：路由檔案相當於springmvc中的Controller，ssh中的action
  • views：存放頁面的地方
  • package.json：專案依賴配置及開發者資訊。
  • app.js：應用核心配置檔案，專案入口。

2.app.js配置詳解

可以參考文章：
http://www.cnblogs.com/fhen/p/5257467.html
https://blog.csdn.net/qq_31411389/article/details/54019267

// 1. 匯入相關模組
var createError = require('http-errors');  //引用
var express = require('express');   //引用express
var path = require('path');   // 伺服器路徑
var cookieParser = require('cookie-parser');   //解析cookie
var bodyParser = require('body-parser');   // 解析request，respond引數
var logger = require('morgan');   //日誌功能，需要手動配置

var indexRouter = require('./routes/index');   //註冊路由的位置
var usersRouter = require('./routes/users');

// 2. 註冊var app = express()
var app = express();

// 3. 使用app.set 設定 express 內部的一些引數
// view engine setup
app.set('views', path.join(__dirname, 'views'));   //設定模板資料夾的路徑
app.set('view engine', 'ejs');   //設定檢視模板為ejs

// 4. 使用app.use 來註冊函式，可以簡單的認為是向task的陣列進行push操作
app.use(logger('dev'));   //設為開發模式 輸出資訊
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended:false }))
app.use(express.static(path.join(__dirname, 'public')));   //靜態資原始檔夾為public

app.use('/', indexRouter);   //設定url為 /引向index路由
app.use('/users', usersRouter);   //設定url為 /user引向user路由

// catch 404 and forward to error handler 捕獲404錯誤資訊
app.use(function(req, res, next) {
  next(createError(404));
});

// 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');
});

module.exports = app;

3.routes(index.js和user.js)

這個主要是配置完app.js之後，如何使用，主要涉及路由級中介軟體的使用。

# 1. index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

# 2. users.js
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;

4 . Express專案執行的總體的過程和邏輯大致可以分為三步：

綜合上面知識，可以看出一個頁面的執行過程和邏輯大致分為三步，路由中介軟體(index.js)的書寫同時中介軟體的模板(index.ejs)要寫好、最後由app.js配置和呼叫路由中介軟體。

1.app.js配置

var indexRouter = require('./routes/index');   //註冊路由的位置
var usersRouter = require('./routes/users');

app.use('/', indexRouter);   //設定url為 /引向index路由
app.use('/users', usersRouter);   //設定url為 /user引向user路由

2.routes 呼叫路由級中介軟體

# 1. index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

# 2. users.js
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;

3.views 模板渲染

# index.ejs 模板
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

express框架學習筆記：
https://www.cnblogs.com/liujiale/p/6023367.html
https://blog.csdn.net/qq_31411389/article/category/6371088
http://www.cnblogs.com/ostrich-sunshine/p/6756147.html
http://www.cnblogs.com/ostrich-sunshine/p/7474471.html
http://www.cnblogs.com/ostrich-sunshine/category/977656.html

相關文章