Node.js 的 30 天學習日記--第二十四天

Node.js 學習第二十四天

如果在看的過程中有任何錯誤歡迎寫 E-MAIL： pp840405@gmail.com 提醒我錯誤。

POST AJAX JSON 格式

改成傳送 JSNO 格式。
因為有這兩段資料才可以用 form 表單跟 JSON 格式

1
2
3
4
//內容支援JSON格式
app.use(bodyParser.json());
//解析表單內容({物件設定})
app.use(bodyParser.urlencoded({extended:false}));

更改 all.js 的內容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//抓DOM元素
var send = document.getElementById('send');
var content = document.getElementById('content');

send.addEventListener('click',function(e){
    e.preventDefault();
    //撈content值
    var str = contet.value;
    //開啟XML設定
    var xhr = new XMLHttpRequest();
    //POSY模式 指定/searchAJAX路由
    xhr.open('post','/searchAJAX');
    //傳送格式
    xhr.setRequestHeader('Content-type','application/json');
    //傳送JSON字串格式 
    var data = JSON.stringify({"content":str,"list":[1,2,3]});
    //傳送資料
    xhr.send(data);
    //console看資料
    xhr.onload = function(){
        console.log(xhr.responseText);
    }
})

postman 測試 JSON 格式， x-www-form-urlencoded 改成 raw 任何格式再把 Text 改成 JSON 。
範例

Router 進階設定

以路徑來講一個使用者頁面會分成照片、自我介紹、設定、工具..等，之類的東西每個又是一個頁面那如果把那些路徑都寫在同一支 JS 檔案下面那資料量會很雜，因為你不一定只有使用者頁面肯定會有購物車或者登入頁面，所以這次學的是如何把每個路由都分開管理。

  1. 首先用一支乾淨的 app.js 設定。

    1
    2
    3
    var express = require('express');
    var app = express();
    app.listen(3000);

  2. 比如你 127.0.0.1:3000/user 這個路由下面有 proflie 跟 photo 路徑那就先新增一個資料夾 routes 好方便管理各種路由，然後在新增一支 user.js 管理 user 路由的 JS 檔案。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //一樣要開啟 express 功能 
    var express = require('express');
    //開啟Router功能
    var router = express.Router();

    //用這功能來GET
    //因為是user下面的路徑所以不用在這邊指定user
    router.get('/profile',function(req,res){
        res.send('你進入到profile頁面');
        console.log('有人造訪profile頁面');
    });
    router.get('/photo',function(req,res){
        res.send('你進入到photo頁面');
        console.log('有人造訪photo頁面');
    });

    //放到exports
    module.exports = router;

  3. 之後在 app.js 新增，完成後在去執行檔案看是否成功。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //原本有的
    var express = require('express');
    var app = express();
    //新增後
    //接收在routes料夾的user檔案
    var user = require('./routes/user');

    //開始跑user底下的資料是否跟使用者輸入的網址符合
    app.use('/user',user);

    //原本有的
    app.listen(3000);

express-generator

這是快速建立應用程式架構。
下面連結都有說明如何安裝與指令。
express-generator

  1. 先全域安裝 express-generator 

    1
    npm install express-generator -g

  2. 建立 EJS 服務跟創建 project 資料夾

    1
    express -e project

  3. CMD 移動到 project 資料夾與安裝模組

    1
    2
    cd project
    npm install

  4. 執行它的功能與檢視 127.0.0.1:3000 (預設3000埠)

    1
    npm start

說明裡面的 app.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
39
40
41
42
43
44
45
46
47
48
49
var express = require('express');
var path = require('path');
//單獨放icon使用
var favicon = require('serve-favicon');
//紀錄資料日誌
var logger = require('morgan');
//接收cookie資料做解析
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
//管理routes
var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

package.json 的一些資料說明
1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "name": "project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
      //可以設計指令 這是開啟下面路徑的服務
    "start": "node ./bin/www",
    //自訂指令 npm run starts 做開啟，內建省略 run
    "starts":"node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "~4.15.5",
    "morgan": "~1.9.0",
    "serve-favicon": "~2.4.5"
  }
}

結語

基本上 express 的功能就到這個段落，下一個是把前面學的做整合，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。