• app / router
  • http / https
  • get / post
  • upload / download
  • cors / proxy

Create instances and routes

const express = require('express')
const app = express() // Create an instance
const router = express.Router() // Create a route
app.use('/', router) // Load the route
module.exports = app
Copy the code

Start the service

// http
const http = require('http')
http.createServer(app).listen(3002)
// https
const https = require('https')
const pem = require('selfsigned').generate()
https.createServer({ key: pem.private, cert: pem.cert }, app).listen(3003)
Copy the code

Managed static files

app.use(express.static(path.join(__dirname, 'public')))
/ / or
app.use('/static', express.static(path.join(__dirname, 'public')))
Copy the code

A GET request

  • The front end
<input name="username" id="username" />
<button onclick="getSearch()">/search? username=</button>
<button onclick="getQuery()">/query/:username</button>
<script>
    function getSearch() {
        fetch(`/get/search? username=${username.value}`)
            .then(res= > res.json())
            .then(console.log, console.error)
    }
    function getQuery() {
        fetch(`/get/query/${username.value}`)
            .then(res= > res.json())
            .then(console.log, console.error)
    }
</script>
Copy the code
  • The back-end
const getRouter = express.Router()
app.use('/get', getRouter)

getRouter.get('/search'.(req, res) = > {
    const { originalUrl, query } = req
    res.json({ originalUrl, query })
})

getRouter.get('/query/:username(\\w{0,})'.(req, res) = > {
    const { originalUrl, query, params } = req
    res.json({ originalUrl, query, params })
})
Copy the code

A POST request

  • The front end
<button onclick="postSearch()">/search</button>
<button onclick="postUpdate()">/update/:username</button>
<script>
    function postSearch() {
        fetch('/post/search', {
            method: 'POST'.headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username: username.value })
        })
            .then(res= > res.json())
            .then(console.log, console.error)
    }
    function postUpdate() {
        fetch(`/post/update/${username.value}`, { method: 'POST' })
            .then(res= > res.json())
            .then(console.log, console.error)
    }
</script>
Copy the code
  • The back-end
const postRouter = express.Router()
app.use('/post', postRouter)
// 'Content-Type': 'application/json'
postRouter.use(express.json())
// 'Content-Type': 'application/x-www-form-urlencoded'
postRouter.use(express.urlencoded({ extended: false }))

postRouter.post('/search'.(req, res) = > {
    const { originalUrl, body } = req
    res.json({ originalUrl, body })
})

postRouter.post('/update/:username(\\w{0,})'.(req, res) = > {
    const { originalUrl, params, body } = req
    res.json({ originalUrl, params, body })
})
Copy the code

Upload a file

  • The front end
<form action="#" id="form" autocomplete="off">
    <input type="file" name="avatar" id="avatar" accept=".png,.jpeg,.jpg" />
    <input type="file" name="photos" id="photos" multiple />
    <button type="button" onclick="uploadSingle()">/single</button>
    <button type="button" onclick="uploadMultiple()">/multiple</button>
    <button type="button" onclick="uploadFields()">/fields</button>
    <button type="button" onclick="uploadCheck()">/check</button>
    <button type="button" onclick="uploadStorage()">/diskStorage</button>
</form>
Copy the code
  • The back-end
const uploadRouter = express.Router()
app.use('/upload', uploadRouter)
// 'Content-Type': 'multipart/form-data'
const multer = require('multer')
Copy the code

A single file

  • The front end
<script>
    function uploadSingle() {
        fetch('/upload/single', {
            method: 'POST'.body: new FormData(form)
        })
            .then(res= > res.json())
            .then(console.log, console.error)
    }
</script>
Copy the code
  • The back-end
const uploadMemory = multer()
uploadRouter.post('/single', uploadMemory.single('avatar'), (req, res) = > {
    const { originalUrl, body, file } = req
    res.json({ originalUrl, body, file: { ...file, buffer: The '*'}})})Copy the code

Multiple files

  • The front end
<script>
    function uploadMultiple() {
        fetch('/upload/multiple', {
            method: 'POST'.body: new FormData(form)
        })
            .then(res= > res.json())
            .then(console.log, console.error)
    }
</script>
Copy the code
  • The back-end
uploadRouter.post('/multiple', uploadMemory.array('photos'.3), (req, res) = > {
    const { originalUrl, body, files } = req
    res.json({
        originalUrl,
        body,
        files:
            Array.isArray(files) &&
            files.map(file= > ({ ...file, buffer: The '*'})}})))Copy the code

Upload different form items

  • The front end
<script>
    function uploadFields() {
        fetch('/upload/fields', {
            method: 'POST'.body: new FormData(form)
        })
            .then(res= > res.json())
            .then(console.log, console.error)
    }
</script>
Copy the code
  • The back-end
uploadRouter.post(
    '/fields',
    uploadMemory.fields([
        { name: 'avatar'.maxCount: 1 },
        { name: 'photos'.maxCount: 3}]),(req, res) = > {
        const { originalUrl, body, files } = req
        res.json({
            originalUrl,
            body,
            files: Object.keys(files).reduce(
                (obj, key) = > ({
                    ...obj,
                    [key]: files[key].map(file= > ({
                        ...file,
                        buffer: The '*'}))}), {})})Copy the code

Check the file

  • The front end
<script>
    function uploadCheck() {
        fetch('/upload/check', {
            method: 'POST'.body: new FormData(form)
        })
            .then(res= > res.json())
            .then(console.log, console.error)
    }
</script>
Copy the code
  • The back-end
const uploadCheck = multer({
    limits: { fileSize: 1048576 }, // 1MB
    fileFilter(req, file, cb) {
        if(! ['image/jpeg'.'image/png'].includes(file.mimetype)) {
            return cb(new Error('File format is incorrect'))
        }
        cb(null.true)
    }
}).any()

uploadRouter.post(
    '/check'.(req, res, next) = > {
        uploadCheck(req, res, err= > {
            // Custom error handling
            if (err instanceof multer.MulterError) {
                err.code === 'LIMIT_FILE_SIZE'
                    ? res.json({ errMsg: 'File is too large' })
                    : next(err)
            } else if (err) {
                res.json({ errMsg: err.message })
            } else {
                next()
            }
        })
    },
    (req, res) = > {
        const { originalUrl, body, files } = req
        res.json({
            originalUrl,
            body,
            files:
                Array.isArray(files) &&
                files.map(file= > ({ ...file, buffer: The '*'})}})))Copy the code

Save the file

  • The front end
<script>
    function uploadStorage() {
        fetch('/upload/diskStorage', {
            method: 'POST'.body: new FormData(form)
        })
            .then(res= > res.json())
            .then(console.log, console.error)
    }
</script>
Copy the code
  • The back-end
const uploadDisk = multer({
    storage: multer.diskStorage({
        destination: path.join(__dirname, 'files'),
        filename(req, file, cb) {
            cb(null, file.originalname)
        }
    })
})

uploadRouter.post('/diskStorage', uploadDisk.any(), (req, res) = > {
    const { originalUrl, body, files } = req
    res.json({ originalUrl, body, files })
})
Copy the code

The download file

  • The front end
<form action="#" id="form" autocomplete="off">
    <button type="submit" formaction="/download/attachment" formmethod="POST">
        formaction /attachment
    </button>
    <button type="button" onclick="downloadFile()">fetch /file</button>
</form>
Copy the code
  • The back-end
const downloadRouter = express.Router()
app.use('/download', downloadRouter)

const filePath = path.join(__dirname, 'public/verifyCode.jpg')
Copy the code

Form

  • The back-end
/ * *@type {express.RequestHandler} * /
const sendAttachment = (req, res) = > {
    res.download(filePath, 'downloadAttachment.jpg')
}
downloadRouter.route('/attachment').post(sendAttachment).get(sendAttachment)
Copy the code

Fetch

  • The front end
<script>
    function downloadFile() {
        fetch('/download/file', { method: 'POST' })
            .then(res= > res.blob())
            .then(genFile, console.error)
    }
</script>
Copy the code
  • The back-end
/ * *@type {express.RequestHandler} * /
const sendFile = (req, res) = > {
    res.sendFile(filePath)
}
downloadRouter.route('/file').post(sendFile).get(sendFile)
Copy the code

Cross domain

  • CORS
app.use(require('cors') ())// res.setHeader('Access-Control-Allow-Origin', '*')
Copy the code
  • Proxy
const proxyRouter = express.Router()
app.use('/proxy', proxyRouter)

proxyRouter.get('/'.(req, res) = > {
    https.get('https://juejin.cn'.rst= > {
        let rawData = ' '
        rst.setEncoding('utf-8')
        rst.on('data'.chunk= > (rawData += chunk))
        rst.on('end'.() = > res.send(rawData))
    })
})
Copy the code

Error handling

app.use((err, req, res, next) = > {
    if (res.headersSent) {
        return next(err)
    }
    res.status(500).send(err.message)
})
Copy the code