Nodejs+Express學習一（搭建最簡單網站）

時間 2019-11-09

標籤 nodejs+express nodejs express 學習搭建最簡單網站欄目網站開發简体版

原文原文鏈接

1、Nodejs與Express
這裏我只作簡單介紹，以實戰爲目的，不想說那麼多廢話。
Nodejs：運行在服務器端的javascript（若是你是新手，那麼只須要知道這個就能夠）。
Express：基於Node平臺的web開發框架（你能夠理解爲前端的「jquery」）javascript

2、建立項目
對於nodejs的安裝這裏直接跳過。
那麼咱們從建立項目開始。
本人用的IDE是WebStorm，由於上面有相似cmd的控制檯，比較方便。
下面很少說，直接開始：html

1.找個地方新建一個文件夾做爲項目根目錄，由於我是學習用的，因此項目名叫study1。
2.用WebStorm打開該項目，在控制檯中安裝初始化項目：npm init，控制檯會有幾個步驟依次完成（我是直接所有回車），須要說一下的是步驟裏有個main選項，默認爲index.js,該配置是項目入口文件，若是不想用index命名，能夠根據喜愛更改。
3.安裝express，運行命令：npm install --save express,--save會更新package.json文件，將要安裝的東西更新在package.json中。
4.安裝模板引擎，我我的不太喜歡jade，雖然它可讓我少些不少代碼，但我是個前端工程師，原生的html對我來講更親切。因此這裏選擇使用express-handlebars來做爲模板引擎，運行命令：npm install --save express-handlebars來安裝該模板引擎。
以上基本須要的東西就安裝完成了，而後請根據下面的圖來建立目前尚未的文件夾和文件：
前端

3、編寫入口文件index.jsjava

//引用express
var express = require('express');
   
//引用express-handlebars模板引擎
var hbs = require('express-handlebars').create({ 
        defaultLayout: 'main', //默認佈局模板爲main.hbs
        extname: '.hbs'         //設置文件後綴名爲.hbs
    });   
var app = express();

app.set('port',process.env.PORT || 3000);   //設置端口

//設置模板引擎爲express-handlebars
app.engine('hbs',hbs.engine);
app.set('view engine','hbs');

//使用static中間件 制定public目錄爲靜態資源目錄,其中資源不會通過任何處理
app.use(express.static(__dirname + '/public'));

//home頁路由
app.get('/', function (req, res) {
   res.render('home',{
       title:'Home Page'    //傳入頁面的title
   });
});

//about頁路由
app.get('/about', function (req, res) {
    res.render('about',{
        title:'About Page'    //傳入頁面的title
    });
});

app.listen(app.get('port'), function () {
    console.log( '服務器啓動完成，端口爲： '+app.get('port') );
});

如今咱們寫好了index.js文件，你們可能對中間件不熟悉，暫時先不用管它。如今咱們來編寫main.hbs裏的內容：node

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node Study</title>
</head>
<body>
    <header>
        <h1>歡迎來到Nodejs</h1>
    </header>
    {{{body}}}
</body>
</html>

main.hbs做爲咱們的主模板，咱們編寫的其餘頁面經過express-handlebars渲染，用{{{body}}}嵌入到main.hbs模板中造成完整的頁面。
而後咱們完成views下面的home.hbs和about.hbs（爲了簡單，將他們的內容編碼一致）：jquery

<h1>{{ title }}</h1>

這裏的title是從服務器端傳過來的：
web

好，如今咱們最簡單的網站都完成了，至於數據庫這裏就不說了，我會在學習過程當中跟進有關文章，篇文章的目的就是搭建最簡單的網站。
那麼咱們在跑一下，在控制檯中運行命令：node index.js，會看到打印出來的服務器啓動完成，端口爲： 3000。這時，咱們在瀏覽器地址欄中輸入：localhost:3000和localhost:3000/about，就會顯示出對應的頁面了：

數據庫