搭建基於node Express框架執行環境,並使用html引擎
- 安裝express generator生成器
- 通過生成器自動建立專案
- 配置分析
第一步：安裝
npm i -g [email protected]查詢使用安裝成功，一定要輸入express --version，輸入express -v是不行的
express --version第二步：通過express server命令快速生成專案
express server預設生產的專案目錄如下:
bin 就是可執行檔案; 後期我們通過node www 就可以啟動這個服務
public 就是一些靜態資源
routes 路由，這個路由就是我們瀏覽器訪問的地址
views 檢視，express 官方推薦使用jade語法
app.js 是入口檔案
package.json 專案依賴
app.js檔案釋義
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'); /** 載入index路由模組 */ var index = require('./routes/index'); /** 載入user路由模組 */ var users = require('./routes/users'); var app = express(); // view engine setup /** 設定訪問的目錄 設定views頁面在哪放著 */ app.set('views', path.join(__dirname, 'views')); /** 設定引擎是jade引擎 */ app.set('view engine', 'jade'); // 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()); /** 設定靜態檔案目錄 path.join方法就是把兩個變數連線要一塊 __dirnam就是獲取當前目錄 */ app.use(express.static(path.join(__dirname, 'public'))); /** 表示當我們訪問/的時候就去載入index的路由 */ app.use('/', index); /** 當訪問/user的時候,就去訪問users的路由 */ app.use('/users', users); /** 這通過不同的模組和訪問地址來加以區分, 這樣的化業務模組會做的更加細分 */ // catch 404 and forward to error handler /** 全域性對404的攔截 */ app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); // 如果next拿不到引數它就會用err這個引數,如果拿到的話它就不會用 }); // error handler /** 對error的處理 */ 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'); // 一旦報錯以後就會渲染這個error的頁面 }); module.exports = app;
cd server進入server目錄
執行 node bin/www
說明我們的頁面已經訪問到了，上面我們說了，如果我們訪問的是/就會預設訪問index
這時因為routes/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;
這時它會去render index頁面,也就是views下的index.jade，這時不用再去設定views資料夾路徑了，因為app.js裡面已經設定過了
app.set('views',path.jpin(__dirname, 'views')); 所以在routes/index.js路由裡面直接runder('index')就可以找到index.jade了,它傳的變數是Express，所以index.jade裡面拿到的是Express
extends layout
block content
h1= title
p Welcome to #{title}
————————————————————————————————————————————————————————
如果大家不想使用jade語法，也可以使用html
安裝 ejs
npm i ejs --save在app.js中引入ejs
var ejs = require('ejs');並設定
app.engine('.html',ejs.__express)並且將app.js中的app.set('view engine', 'jade');模板引擎改為app.set('view engine', 'html');模板引擎
在views下建一個index.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<h2>
hello,Express is very Good!
</h2>
</body>
</html>執行 node server/bin/www
————————————————————————————————————————————————————————