Nodejs 手動搭建 Express 項目

Eric 發布于2019-08-20 14:18 / 841人閱讀

摘要：接下來在控制臺跑起來看看瀏覽器訪問成功輸出到這里項目就已經初步搭建起來了。到這里整個項目已經搭建起來了，大功告成。引用模塊引入路由模塊設置視圖文件目錄設置模板引擎為設置模板引擎為配置靜態資源目錄第一次寫文章，請多加指教。

俗話說好記性不如爛筆頭，在看了兩天文檔后，在這里準備把自己學到的東西寫成文章記錄下來。

安裝全局模塊

npm install -g express express-generator suptervisor 

// express-generator  Express 應用生成器
// suptervisor  監視你對代碼的改動，并自動重啟 Node.js ,必須全局安裝

快速生成項目

express -e blog   // -e 使用ejs 模板引擎生成項目

手動創建項目 1.安裝依賴

npm init 
npm install express ejs --save

// 項目結構

blog
├─app.js        // 入口文件
├─package.json  // 項目依賴配置
├─node_modules  // 存放項目的依賴庫
├─public        // 靜態文件資源目錄
│  ├─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"));  // 設置視圖文件目錄

app.set("view engine" , "ejs"); //設置模板引擎為ejs

app.use( express.static(path.join(__dirname, "public")) );  // 配置靜態資源目錄


// 路由規則
app.get("/", function(request, response){
    response.send("Hello Node.js")
});

app.listen(3000);    // 監聽 3000 端口

console.log("server started at port 3000");

3.修改模板后綴

默認ejs模板只支持渲染以ejs為擴展名的文件，可能在使用的時候會覺得它的代碼書寫方式很不爽還是想用html的形式去書寫。
在這里可以使用engine 注冊模板引擎的函數，讓他處理指定后綴名的文件

/*
* 將上面的 app.set("view engine" , "ejs")
* 修改成
* */

app.set("view engine" , "html"); //修改模板文件的后綴名為html
app.engine(".html" , ejs.__express);   //"__express"，ejs模塊的一個公共屬性，表示要渲染的文件擴展名。

接下來在控制臺跑起來看看

瀏覽器訪問 http://localhost:3000 成功輸出

到這里項目就已經初步搭建起來了。

4.路由模塊化

在根目錄新建routes 文件夾

// routes/index.js  

var express = require("express");
var router = express.Router();   //使用 express.Router 類創建模塊化、可掛載的路由句柄

// 訪問根路由 渲染 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 中的路由刪掉。

到這里整個項目已經搭建起來了，大功告成。

//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);
// 設置視圖文件目錄
app.set("views", path.join(__dirname,"views"));  

// app.set("view engine" , "ejs"); //設置模板引擎為ejs
app.set("view engine" , "html"); //設置模板引擎為html
app.engine(".html" , ejs.__express);

app.use( express.static(path.join(__dirname, "public")) );  // 配置靜態資源目錄
app.listen(port);
console.log("server started at port " + port);

ps: 第一次寫文章，請多加指教。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81529.html

NodeJS+Express搭建個人博客-gulp自動化構建工具使用（二）

摘要：自動化構建工具使用簡言現在不管是做前端還是后端的，不可避免的是要跟打交道的而且這么容易開發難道我們不想自己隨手寫點什么這類比較前衛的框架早就深度集成了很多前端的東西現在，就讓我們手動為也插上的翅膀吧。 gulp自動化構建工具使用簡言現在不管是做前端還是后端的，不可避免的是要跟html打交道的；而且Node這么容易開發web；難道我們不想自己隨手寫點什么？Express這類比較前衛的...

Yangder 2019-06-26 17:47 評論0 收藏0
NodeJS+Express搭建個人博客-環境搭建（一）

摘要：本項目持續更新中，開源免費與各位愛好技術達人共勉，注現階段仍在開發中。。。。。 NodeJS+Express+MongoDb開發的個人博客 NodeJS+Express搭建個人博客-環境搭建（一）NodeJS+Express搭建個人博客-gulp自動化構建工具使用（二）NodeJS+Express搭建個人博客-Express+Mongodb組合架構介紹（三）NodeJS+Express...

Clect 2019-06-26 17:47 評論0 收藏0
express中間層搭建前端項目1

摘要：從前端小白到精通首先需要自行下載安裝安裝地址我的版本是，安裝之后，需要安裝依賴以及生成調試工具，親測對版本比較敏感，只兼容低版本的所以調試可以用或者用軟件進行調試安裝調試鏈接，下載包，忘記了模板引擎用的是，喜歡用其實一樣，只是語法有從前端小白到精通express 首先需要自行下載安裝nodejs nodejs安裝地址//我的版本是4.7.0，安裝nodejs之后，需要npm in...

stefanieliang 2019-08-22 18:03 評論0 收藏0