Node.js 搭建Web

時間 2019-11-09

標籤 node.js node 搭建 web 欄目 Node.js 简体版

原文原文鏈接

Expressjavascript

Express 是整個 Node.js 之中最爲常見的一個框架（開發包），能夠幫助咱們快速構建一個WEB項目。（http://expressjs.com）css

1.在 F 盤新建 nodejsdemo，cd nodejsdemo ，執行html

npm install express

F:\nodejsdemo，可想象爲 Eclipse 的工做區，一個工做區可定義多個項目。java

2.建立express項目，在 F:\nodejsdemo 中有了 myprojuect 文件夾，目錄詳細以下node

F:\nodejsdemo>express -e myproject

   create : myproject
   create : myproject/package.json
   create : myproject/app.js
   create : myproject/public
   create : myproject/public/javascripts
   create : myproject/public/images
   create : myproject/public/stylesheets
   create : myproject/public/stylesheets/style.css
   create : myproject/routes
   create : myproject/routes/index.js
   create : myproject/routes/user.js
   create : myproject/views
   create : myproject/views/index.ejs

   install dependencies:
     $ cd myproject && npm install

   run the app:
     $ node app

app.js 做爲了整個程序運行的主文件，即：只須要執行它，就能夠運行 HTTP Serverweb

app.set('port', process.env.PORT || 3000);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

此時，Http服務將在 3000 端口監聽用戶請求。啓動服務器方式以下express

F:\nodejsdemo\myproject>node app.js
Express server listening on port 3000

打開瀏覽器輸入：http://localhost:3000/，會發現 Http 服務報錯缺乏 ejs，ejs 在 app.js 有定義，下載 ejsnpm

F:\nodejsdemo>npm install ejs

再次打開http://localhost:3000/，顯示正常，默認的頁面保存在 myproject/views 中。json

node_modules 存放全部項目的依賴庫設計模式

package.json 項目依賴配置和開發者信息

app.js 程序啓動文件

public 靜態文件（css、js、img）

routes 路由文件（MVC 中的C，controller）

views 頁面文件（ejs 模板）

2.安裝 supervisor

爲了方便開發，不用每次修改 app.js 以後都從新啓動，安裝 supervisor 執行 supervisor app.js ，會自動加載新的 app.js 。

F:\nodejsdemo>npm install -g supervisor

3.ejs

ejs 是 web 的模板引擎之一，EJS 是一個Javascript模板庫，用來從 Json 數據中生成 HTML 字符串。可方便的給用戶明確、維護性良好的HTML結構。

保存全部頁面都保存在 views 中，此時的 index.ejs 是一個HTML頁面，若要修改成 html 格式則須要配置模板

1）在 app.js 定義加載的模塊，並增長相關配置

var ejs = require('ejs');
app.engine('html',ejs.__express);
app.set('view engine', 'html');    //修改 app.set('view engine', 'html');

2）index.ejs 名改成 index.html

創建登陸功能：login.html、welcome.html，注意：全部的文件格式必須爲 UTF-8

index.html

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <p><a href="login">用戶登陸</a></p>    
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
   <h1><%= title %></h1>
<form method="post">
    用 戶：<input type="text" name="userid" id="userid"><br>
    密 碼：<input type="password" name="password" id="password"><br>
    <input type="submit" value="登陸">
    <input type="reset" value="重置">
</form>
</body>
</html>

welcome.html

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>歡迎<%=user.userid%>光臨！</h1>
    <h1><a href="logout">註銷</a></h1>
  </body>
</html>

在每個頁面之中並無定義直接的連接，由於 Node.js 依然屬於 MVC 設計模式範疇，因此針對 MVC 的實現，此處所編寫的所有都屬於映射名稱，全部的映射路徑都須要經過 app.js 進行相應的路由配置。

配置 app.js

app.get('/', routes.index);            //進入首頁
app.get('/login', routes.login);    //此處還需配置 routes/index.js 
app.post('/login', routes.doLogin);    //post請求，表單提交。
app.get('/logout', routes.logout);    //註銷  (經過logout找到routes/index.js中exports.logout，完成頁面跳轉。)
app.get('/welcome', routes.welcome);//歡迎

routes/index.js 配置相關的回調函數

exports.index = function(req, res){
  res.render('index', { title: '首頁' });
};
exports.login = function(req, res){
  res.render('login', { title: '登陸' });    //res.render--跳轉至login頁面
};
exports.doLogin = function(req, res){
    var user = {userid:'admin',password:'123456'};    // 定義用戶密碼
    if(req.body.userid==user.userid && req.body.password==user.password){
        res.redirect('welcome?uid='+user.userid);    // 重定向    res.redirect--app.js必須配置/welcome(app.get('/welcome', routes.welcome))
    }else{
        res.render('login', { title: '從新輸入' });
    }
};
exports.logout = function(req, res){
  res.render('index', { title: '註銷' });
};
exports.welcome = function(req, res){
  //若是是地址欄參數可 req.query.參數名稱 接收
  var user = {userid:req.query.uid};
  res.render('welcome', { title: '歡迎', user: user });
};