資訊專欄INFORMATION COLUMN
摘要：接下來在控制臺跑起來看看瀏覽器訪問成功輸出到這里項(xiàng)目就已經(jīng)初步搭建起來了。到這里整個(gè)項(xiàng)目已經(jīng)搭建起來了，大功告成。引用模塊引入路由模塊設(shè)置視圖文件目錄設(shè)置模板引擎為設(shè)置模板引擎為配置靜態(tài)資源目錄第一次寫文章，請多加指教。
俗話說好記性不如爛筆頭，在看了兩天文檔后，在這里準(zhǔn)備把自己學(xué)到的東西寫成文章記錄下來。
安裝全局模塊npm install -g express express-generator suptervisor // express-generator Express 應(yīng)用生成器 // suptervisor 監(jiān)視你對代碼的改動(dòng)，并自動(dòng)重啟 Node.js ,必須全局安裝快速生成項(xiàng)目
express -e blog // -e 使用ejs 模板引擎生成項(xiàng)目手動(dòng)創(chuàng)建項(xiàng)目 1.安裝依賴
npm init npm install express ejs --save
// 項(xiàng)目結(jié)構(gòu) blog ├─app.js // 入口文件 ├─package.json // 項(xiàng)目依賴配置 ├─node_modules // 存放項(xiàng)目的依賴庫 ├─public // 靜態(tài)文件資源目錄 │ ├─images │ ├─js │ └─styles └─views // 視圖文件（ejs模板 或jade 模板）2.編寫入口文件
// 引用模塊
var express = require("express");
var path = require("path");
var ejs = require("ejs");
var app = express();
app.set("views", path.join(__dirname,"views")); // 設(shè)置視圖文件目錄
app.set("view engine" , "ejs"); //設(shè)置模板引擎為ejs
app.use( express.static(path.join(__dirname, "public")) ); // 配置靜態(tài)資源目錄
// 路由規(guī)則
app.get("/", function(request, response){
response.send("Hello Node.js")
});
app.listen(3000); // 監(jiān)聽 3000 端口
console.log("server started at port 3000");
3.修改模板后綴
默認(rèn)ejs模板只支持渲染以ejs為擴(kuò)展名的文件，可能在使用的時(shí)候會(huì)覺得它的代碼書寫方式很不爽還是想用html的形式去書寫。
在這里可以使用engine 注冊模板引擎的函數(shù)，讓他處理指定后綴名的文件
/*
* 將上面的 app.set("view engine" , "ejs")
* 修改成
* */
app.set("view engine" , "html"); //修改模板文件的后綴名為html
app.engine(".html" , ejs.__express); //"__express"，ejs模塊的一個(gè)公共屬性，表示要渲染的文件擴(kuò)展名。
接下來在控制臺跑起來看看
瀏覽器訪問 http://localhost:3000 成功輸出
到這里項(xiàng)目就已經(jīng)初步搭建起來了。
4.路由模塊化在根目錄新建routes 文件夾
// routes/index.js
var express = require("express");
var router = express.Router(); //使用 express.Router 類創(chuàng)建模塊化、可掛載的路由句柄
// 訪問根路由 渲染 index 模板
router.get("/", function (req, res) {
res.render("index");
});
module.exports = router;
添加模板, 在views文件夾下新建 index.html 模板 （就一普通html文件）
修改入口文件app.js
// 引入 路由模塊
var router = require("./routes/index");
app.use("/", router);
將寫在app.js 中的路由刪掉。
到這里整個(gè)項(xiàng)目已經(jīng)搭建起來了，大功告成。
//app.js
// 引用模塊
var express = require("express");
var path = require("path");
var ejs = require("ejs");
var app = express();
var port = process.env.PORT || 3000;
// 引入 路由模塊
var router = require("./routes/index");
app.use("/", router);
// 設(shè)置視圖文件目錄
app.set("views", path.join(__dirname,"views"));
// app.set("view engine" , "ejs"); //設(shè)置模板引擎為ejs
app.set("view engine" , "html"); //設(shè)置模板引擎為html
app.engine(".html" , ejs.__express);
app.use( express.static(path.join(__dirname, "public")) ); // 配置靜態(tài)資源目錄
app.listen(port);
console.log("server started at port " + port);
ps: 第一次寫文章，請多加指教。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/81529.html
摘要：自動(dòng)化構(gòu)建工具使用簡言現(xiàn)在不管是做前端還是后端的，不可避免的是要跟打交道的而且這么容易開發(fā)難道我們不想自己隨手寫點(diǎn)什么這類比較前衛(wèi)的框架早就深度集成了很多前端的東西現(xiàn)在，就讓我們手動(dòng)為也插上的翅膀吧。 gulp自動(dòng)化構(gòu)建工具使用 簡言 現(xiàn)在不管是做前端還是后端的，不可避免的是要跟html打交道的；而且Node這么容易開發(fā)web；難道我們不想自己隨手寫點(diǎn)什么？Express這類比較前衛(wèi)的...
摘要：本項(xiàng)目持續(xù)更新中，開源免費(fèi)與各位愛好技術(shù)達(dá)人共勉，注現(xiàn)階段仍在開發(fā)中。。。。。 NodeJS+Express+MongoDb開發(fā)的個(gè)人博客 NodeJS+Express搭建個(gè)人博客-環(huán)境搭建（一）NodeJS+Express搭建個(gè)人博客-gulp自動(dòng)化構(gòu)建工具使用（二）NodeJS+Express搭建個(gè)人博客-Express+Mongodb組合架構(gòu)介紹（三）NodeJS+Express...
摘要：從前端小白到精通首先需要自行下載安裝安裝地址我的版本是，安裝之后，需要安裝依賴以及生成調(diào)試工具，親測對版本比較敏感，只兼容低版本的所以調(diào)試可以用或者用軟件進(jìn)行調(diào)試安裝調(diào)試鏈接，下載包，忘記了模板引擎用的是，喜歡用其實(shí)一樣，只是語法有 從前端小白到精通express 首先需要自行下載安裝nodejs nodejs安裝地址//我的版本是4.7.0， 安裝nodejs之后，需要npm in...
閱讀 2071·2023-04-25 22:42
閱讀 2280·2021-09-22 15:16
閱讀 3540·2021-08-30 09:44
閱讀 544·2019-08-29 16:44
閱讀 3368·2019-08-29 16:20
閱讀 2577·2019-08-29 16:12
閱讀 3447·2019-08-29 16:07
閱讀 721·2019-08-29 15:08
