Node.js開發框架Express4.x
阿新 • • 發佈：2021-01-29
建立express專案
- 建立專案
express -e nodejs-demo - 進入專案目錄，建立
package-lock.json
cd nodejs-demo && npm install - 啟動專案
npm start
Express
-
bin, 存放啟動專案的指令碼檔案
-
node_modules, 存放所有的專案依賴庫。
-
public，靜態檔案(css,js,img)
-
routes，路由檔案(MVC中的C,controller)
-
views，頁面檔案(Ejs模板)
-
package.json，專案依賴配置及開發者資訊
-
app.js，應用核心配置檔案
app.js // 載入依賴庫 var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); // 載入路由控制 var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); // 建立專案例項 var app = express(); // 定義EJS模板引擎和模板檔案位置，也可以使用jade或其他模板引擎 app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); //定義日誌和輸出級別 app.use(logger('dev')); //定義資料解析器 app.use(express.json()); app.use(express.urlencoded({ extended: false })); //定義cookie解析器 app.use(cookieParser()); //定義靜態檔案目錄 app.use(express.static(path.join(__dirname, 'public'))); //匹配路徑和路由 app.use('/', indexRouter); app.use('/users', usersRouter); //404錯誤處理 // catch 404 and forward to error handler app.use(function (req, res, next) { next(createError(404)); }); //開發環境和生產環境，500錯誤處理 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; -
./bin/www檔案
#!/usr/bin/env node //專案啟動程式碼 //www檔案也是node的指令碼，用於分離配置和啟動程式 /** * Module dependencies. * 依賴載入 */ var app = require('../app'); var debug = require('debug')('nodejs-demo:server'); var http = require('http'); /** * Get port from environment and store in Express. * 定義啟動埠 */ var port = normalizePort(process.env.PORT || '3000'); app.set('port', port); /** * Create HTTP server. * 建立HTTP服務例項 */ var server = http.createServer(app); /** * Listen on provided port, on all network interfaces. * 啟動網路服務監聽埠 */ server.listen(port); server.on('error', onError); server.on('listening', onListening); /** * Normalize a port into a number, string, or false. * 埠標準化函式 */ function normalizePort(val) { var port = parseInt(val, 10); if (isNaN(port)) { // named pipe return val; } if (port >= 0) { // port number return port; } return false; } /** * Event listener for HTTP server "error" event. * HTTP異常事件處理函式 */ function onError(error) { if (error.syscall !== 'listen') { throw error; } var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port; // handle specific listen errors with friendly messages switch (error.code) { case 'EACCES': console.error(bind + ' requires elevated privileges'); process.exit(1); break; case 'EADDRINUSE': console.error(bind + ' is already in use'); process.exit(1); break; default: throw error; } } /** * Event listener for HTTP server "listening" event. * 事件繫結函式 */ function onListening() { var addr = server.address(); var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port; debug('Listening on ' + bind); } -
Bootstrap介面框架
<!DOCTYPE html> <html> <head> <title> <%= title %> </title> <!-- Bootstrap介面框架 可以手動下載Bootstrap庫放到專案中 也可以使用Bootcss社群提供的CDN源載入Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <div class="well jumbotron"> <h1> <%= title %> </h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </body> </html>