express組件學習

時間 2019-12-14

標籤 express 組件學習简体版

原文原文鏈接

1、expresshtml

能夠作：web application、api...git

特性：github

適合寫簡單的路由系統
集成不少模板引擎
中間件系統

2、請求與響應web

var express = require('express');

var app = express();

//聽說第二個參數是一箇中間件方法
app.get('/', function(req, res) {
    //學會查api來學習更多知識，學會學習官方api文檔
    var resObj = req.method;
    //send能夠發送字符串、json（包含自動stringify）對象和數組
    res.send(resObj);
})

app.listen(3000);
console.log('listening to port 3000');

3、路由參數chrome

server.jsexpress

var express = require('express');

var app = express();

app.get('/profile/:id/user/:name', function(req, res) {
    console.dir(req.params);
    res.send('you requested to a profile page with the name of ' + req.params.name);
})

app.listen(3000);
console.log('listening to port 3000');

terminaljson

chromeapi

4、查詢字符串數組

server.jsapp

app.get('/', function(req, res) {
    console.dir(req.query);
    res.send('home page:' + req.query.find);
})

terminal

chrome

5、post請求和postman工具

同時處理x-www-form和json

var express = require('express');
var bodyparser = require('body-parser');

var app = express();

//create application/json parser
var jsonParser = bodyparser.json();

//create application/x-www-form-urlencoded parser
var urlencodedParser = bodyparser.urlencoded({ extended: false})

app.post('/', urlencodedParser,function (req, res) {
    console.dir(req.body);
    res.send(req.body.name);
})

app.post('/upload', jsonParser, function (req, res) {
    console.dir(req.body);
    res.send(req.body.name);
})

參考連接：github/express/body-parser

6、上傳文件

form.html

<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <h2>單圖上傳</h2>
        <input type="file" name="logo">
        <input type="submit" value="submit">
    </form>
</body>

server.js

var express = require('express');
var bodyparser = require('body-parser');
var fs = require('fs');
var multer = require('multer');
var upload = multer({ dest: 'uploads/'});
var app = express();

//create application/json parser
var jsonParser = bodyparser.json();

//create application/x-www-form-urlencoded parser
var urlencodedParser = bodyparser.urlencoded({ extended: false})

app.get('/', function(req, res) {
    console.dir(req.query);
    res.send('home page:' + req.query.find);
})

app.get('/form', function(req, res) {
    var form = fs.readFileSync('./form.html', { encoding: 'utf8'});
    res.send(form);
})

app.post('/', urlencodedParser,function (req, res) {
    console.dir(req.body);
    res.send(req.body.name);
})

app.post('/upload', upload.single('logo'),function (req, res) {
    res.send({'ret_code': 0});
})

app.listen(3000);
console.log('listening to port 3000');

結構變化

參考連接：github/express/multer

tips:

app.get('/form', function(req, res) {
    var form = fs.readFileSync('./form.html', { encoding: 'utf8'});
    res.send(form);
})

等價於

app.get('/form', function(req, res) {
    res.sendFile(__dirname + '/form.html');
})

7、模板引擎

引入

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

使用

server.js

app.get('/form/:name', function(req, res) {
    var person = req.params.name;
    res.render('form', { person: person});
    res.sendFile(__dirname + '/form.html');
})

form.ejs

<h1><%= person %></h1>

遍歷數組

<ul>
    <%= data.hobbie.forEach(function(item){ %>
        <li>
            <%= item %>
        </li>
    <%= }) %>
</ul>

公用模板

使用

<%- include('partials/header.ejs') -%>

about.ejs

<body>
    <%- include('partials/header.ejs') -%>
</body>

渲染

app.get('/about', function(req, res) {
    var data = {age: 29, job: 'programmer', hobbie: ['eating', 'fighting', 'fishing']};
    res.render('about', { data: data});
})

參考連接：ejs.co、pug

8、中間件

解釋：請求與響應之間的處理過程是中間件發揮做用的地方。

好處：共用模塊、全局性的操做

類型：

應用級中間件
路由級中間件
錯誤層次中間件
內置中間件
第三方中間件

執行順序

app.use(function(req, res, next){
    console.log('1');
    next();
    console.log('3');
})

app.use(function(req, res, next){
    console.log('2');
})

路由中間件

server.js

var indexRouter = require('./routes/index.js');
var userRouter = require('./routes/user.js');

app.use('/', indexRouter);
app.use('/users', userRouter);

./route/index.js

var express = require('express');

var router = express.Router();

router.get('/', function(req, res, next) {
    res.send('root');
})

module.exports = router;

./route/user.js

var express = require('express');

var router = express.Router();

router.get('/', function(req, res, next) {
    res.send('user');
})

module.exports = router;

體會：用中間件寫路由的好處

參考連接：express/using-middleware