1.安裝Node.js環(huán)境
可以官網(wǎng)下載后安裝
2.安裝Express
node安裝完成之后凯肋,打開命令行工具,執(zhí)行下面的命令安裝Express
npm install express-generator -g
Express安裝完成后碟摆,輸入"express --version"命令沪哺,如果安裝沒問題就可以打印出Express的版本號
image.png
3.創(chuàng)建項目
安裝完成后带饱,我們進入到想要創(chuàng)建項目的目錄,執(zhí)行下面的命令使用ejs模板引擎創(chuàng)建一個Express項目
express --view=ejs Freedom.Client
image.png
3.1 安裝依賴
使用"npm install"安裝項目依賴的基礎(chǔ)模塊
image.png
最終項目結(jié)構(gòu)如下圖
image.png
3.2 啟動項目
進入到項目目錄下劫拗,使用下面的命令啟動該項目
set DEBUG=freedom.client:* & npm start
image.png
瀏覽器中輸入http://localhost:3000就可以看到創(chuàng)建的Client項目了
image.png
4.使用ejs渲染html文件
在命令行工具中使用ctrl + c停止項目间校,然后使用vscode編輯器打開Client項目,編輯app.js中的代碼页慷,設(shè)置html為模板引擎
// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'ejs');
app.set('views',path.join(__dirname , 'views') );// 設(shè)置靜態(tài)文件目錄
app.engine('.html', require('ejs').__express); //設(shè)置ejs渲染html
app.set('view engine', 'html');//設(shè)置html為模板引擎 注意這里是html
我們在views文件夾下新增一個index.html文件憔足,這個html文件可以通過文章最后面的git倉庫獲取到
最后編輯routes\index.js文件,讓首頁路由到剛才創(chuàng)建的index.html文件
/* GET home page. */
router.get('/', function(req, res, next) {
// res.render('index', { title: 'Express' });
res.render('index.html');
});
運行項目酒繁,刷新瀏覽器滓彰,可以看到輸出的就是index.html文件了
image.png