2. 程式人生 > >nodejs漸入佳境[15]-express框架

nodejs漸入佳境[15]-express框架

阿新 • • 發佈：2018-12-01

最簡單的伺服器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
const express = require('express');

var app = express();


//返回html格式
app.get('/',(req,res)=>{
  res.send('<h1>Hello world</h1>');
});

//返回json格式
app.get('/fast',(req,res)=>{
  res.send({
      name:'json',
      likes:[
 

        'reading',
        'coding'
      ]
  });
});
//監聽埠
app.listen(3000);

訪問：
localhost:3000
localhost:3000/fast

訪問靜態檔案

建立public/help.html

1
2
3
4
5
6
7
8
9
10
 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta
 
 charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Hello Jonson</h1>
  </body>
</html>

express.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
const express = require('express');

var app = express();
 


// 引數是一個middleware
app.use(express.static(__dirname +'/public'));
//返回html格式
app.get('/',(req,res)=>{
  res.send('<h1>Hello world</h1>');
});

//返回json格式
app.get('/fast',(req,res)=>{
  res.send({
      name:'json',
      likes:[
        'reading',
        'coding'
      ]
  });
});
//監聽埠,  第二個回撥是開啟伺服器後呼叫
app.listen(3000,()=>{
  console.log('hello jonson');
});

訪問：
http://localhost:3000/help.html
會開啟public/help.html的頁面並顯示出來。

動態注入 express template engines

1
 
npm install --save hbs

新建views/about.hbs:

1
2
3
4
5
6
7
8
9
10
11
 
<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>{{currentYear}}</h1>
    <footer>{{pageTitle}}</footer>
  </body>
</html>

express.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
const express = require('express');
const hbs = require('hbs');
var app = express();

app.set('view engine','hbs');




// 引數是一個middleware
app.use(express.static(__dirname +'/public'));
//返回html格式
app.get('/',(req,res)=>{
  res.send('<h1>Hello world</h1>');
});

//返回json格式
app.get('/fast',(req,res)=>{
  res.send({
      name:'json',
      likes:[
        'reading',
        'coding'
      ]
  });
});

//動態傳遞引數。
app.get('/about',(req,res)=>{
  res.render('about.hbs',{
    pageTitle:'About Page',
    currentYear:new Date().getFullYear()
  });
});
//監聽埠,  第二個回撥是開啟伺服器後呼叫
app.listen(3000,()=>{
  console.log('hello jonson');
});

訪問：
localhost/about

模版封裝

新建：views/partial/footer.hbs:

1
2
3
 
<Header>
    <footer>{{pageTitle}}</footer>
<Header>

view/abut.hbs:

1
2
3
4
5
6
7
8
9
10
11
 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>{{currentYear}}</h1>
      {{> footer}}
  </body>
</html>

express.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
const express = require('express');
const hbs = require('hbs');
var app = express();

hbs.registerPartials(__dirname + '/views/partials');
app.set('view engine','hbs');
// 引數是一個middleware
app.use(express.static(__dirname +'/public'));


//返回json格式
app.get('/about',(req,res)=>{
  res.render('about.hbs',{
    pageTitle:'About Page',
    currentYear:new Date().getFullYear()
  });
});
//監聽埠,  第二個回撥是開啟伺服器後呼叫
app.listen(3000,()=>{
  console.log('hello jonson');
});

訪問：
localhost/about

express middleware

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
const express = require('express');
const hbs = require('hbs');
const fs = require('fs');
var app = express();


hbs.registerPartials(__dirname + '/views/partials');
app.set('view engine','hbs');
// 引數是一個middleware
app.use(express.static(__dirname +'/public'));
//返回html格式
app.get('/',(req,res)=>{
  res.send('<h1>Hello world</h1>');
});

//自定義middleware
app.use((req,res,next)=>{
  var now = new Date().toString();
  var log = `${now}:${req.method} ${req.url}`;
  console.log(log);
  fs.appendFile('server.log',log+'\n',(err)=>{});
  next();

});
//返回json格式
app.get('/fast',(req,res)=>{
  res.send({
      name:'json',
      likes:[
        'reading',
        'coding'
      ]
  });
});

//返回檔案，about.hbs在views資料夾下
app.get('/about',(req,res)=>{
  res.render('about.hbs',{
    pageTitle:'About Page',
    currentYear:new Date().getFullYear()
  });
});
//監聽埠,  第二個回撥是開啟伺服器後呼叫
app.listen(3000,()=>{
  console.log('hello jonson');
});

image.png

相關推薦

nodejs漸入佳境[15]-express框架

最簡單的伺服器 12345678910111213141516171819202122 const express = require('express');var app = express();//返回html格式app.get('/',(req,res)=>{

nodejs漸入佳境[27]-express+mongodb+middleware實現密碼雜湊

儲存密碼前對密碼進行hash 123456789101112131415 UserSchema.pre('save', function (next) {  var user = this;  if (user.isModified('password

用nodejs的express框架在本機搭建一臺服務器

redirect sta start moc 頁面 exe 瀏覽器 server proc [本文出自天外歸雲的博客園] 簡介 用express框架在本機搭建一個服務器，這樣大家可以通過指定的url來在你的服務器上運行相應的功能。 Express是一個基於nodejs

NodeJS簡易部落格系統（七）express框架入門學習

一、安裝及demo 如果已經裝好webstorm，直接新建專案如下： 否則cd到專案目錄下，使用npm install express --save即可完成安裝。 demo: var expr

009-通過express框架來構建nodejs伺服器

    最近一直在研究nodejs 也是花了不少時間 今天終於把伺服器弄通了玩通了 實在是不容易     //1.載入express模組 var express = require('express'); //2.建立ap

nodejs express 框架 上傳圖片，上傳頭像問題

上傳圖片總結： 必須 安裝’multer’模組 Npm I multer –S（手動輸入小寫） 第一步 App.js 裡面 掛載index路由之前寫入 app.use(express.static(path.join(__dirname, 'public'))); var mul

nodejs漸入佳境[16]-node express專案部署到heroku

原始檔 views/partials/footer.hbs: 123 <Header>    <footer>{{pageTitle}}</footer><Header> views

nodejs漸入佳境[28]-mongodb+express+middleware驗證使用者登陸資訊

登陸驗證 使用者使用郵箱和密碼登陸，與mongodb資料庫查詢 驗證使用者是否有效首先使用者存在，並且密碼匹配。 1234567891011121314151617181920 UserSchema.statics.findByCredentials = functio

nodejs漸入佳境[32]-mongodb+express+auth middleware部署到h

package.json 123456789101112131415161718192021222324252627282930313233 {  "name": "node-todo-api",  "version": "1.0.0",  

nodejs漸入佳境[31]-mongodb+express+middleware繫結使用者許可權2

繼續繫結使用者許可權，要執行操作必須要有token 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616

nodejs漸入佳境[30]-mongodb+express+middleware繫結使用者許可權

修改todos模型 增加_creator，將使用者繫結起來 123456789101112131415161718192021 //模版var Todo = mongoose.model('Todo',{    text:{    

nodejs漸入佳境[29]-mongodb+express+middleware刪除使用者許可權

刪除使用者的token 12345678910 UserSchema.methods.removeToken = function (token) {  var user = this;  return user.update({   &nb

【原創】基於NodeJS Express框架開發的一個VIP視訊網站專案及原始碼分享

專案名稱：視訊網站專案 開發語言：HTML，CSS（前端），JavaScript，NODEJS（expres）（後臺） 資料庫：MySQL 開發環境：Win7，Webstorm 上線部署環境：Linux伺服器 主要功能我們先來看一下最終的效果：使用者主頁的搭建： 實現了主頁輪播圖的顯示和切換，使用者可以從

nodejs 開發網頁（express框架）

Express是一個輕量級、簡潔、易用的Node.js Web MVC開發框架，它基於Node.js原有進行了很多Web開發所需的功能封裝... 　　安裝 npm install -g express-generator 　　-g：表示全域性安裝

nodejs express框架全域性變數設定

文章目錄 express全域性變數快取 文章參考 問題描述 設定全域性變數的辦法 案例 express全域性變數快取 文章參考 nodejs學習：express本地、響應全域性變數

微信公眾號開發後臺基本搭建(基於NodeJs的express框架)

1 申請公眾號測試賬號 1.1 驗證伺服器 輸入伺服器ip地址和埠號(只支援80埠) 在公眾號上的操作微信伺服器都會轉發到此伺服器 Token 可以隨意命名, 微信伺服器會用此token驗證你的伺服器, 驗證的時候需要根據雜湊演算法進行加

nodeJS連結mysql資料庫（express框架）

1.nodeJS需要連結mysql，首先需要匯入mysql模組，這樣nodeJS才能呼叫mysql 2.匯入mysql包命令 dos視窗下，進入建立的express專案資料夾下， npm install mysql 然後會發現，我

nodeJS之Express框架初步學習

初步學習NodeJS的express框架，覺得有必要記錄一下學習過程中遇到的問題和解決的方法，以便加深印象。 1. 寫了一個簡單的express框架的demo，在執行的時候，出現了錯誤，找不到expr

Nodejs學習文件day2———express框架及cookie、session

express框架使用安裝     npm install express express-static配置建立服務  var server=express();監聽        server.listen(8080);處理請求  server.use('地址',funct

使用Nodejs的Express框架快速地建立一個網站

Nodejs是近幾年特別火的技術，它是執行在伺服器上的JavaScript的開發平臺，在伺服器端堪與PHP、Python、Perl、Ruby平起平坐，在某些方面甚至可以做得比它們更好 廢話就不多說了，今天主要是用Nodejs的Express框架來搭建網站 工