express 基本

expressの基本

インストール

npm install --save express

シンプルなリクエストレスポンス

localhost:3000にアクセスすると、Hello worldの文字が

## index.js

const express = require('express')
const app = express()
const portNo = 3000

app.get('/', (req,res,next) => {

  res.send("Hello word")
})

app.listen(portNo, ()=> {
 console.log("起動しました", `localshost:3000`)
})

## app.listen(portNo)でもいける

res.send

sendメソッドにいれたモノが画面に表示されるみたい

引数にいれられるものはhtmlもいける

## htmlタグ

app.get('/', (req, res, next) => {
  res.send("<h1>hello</h1>")
})

## + で追加できる


app.get('/', (req, res, next) => {
  res.send("<h1>hello</h1>" + "<a>link</a>")
})

urlのパラメータを利用する

# リクエストからパラメーターにアクセスできる
こんな感じで定義する

app.get('/numbers/:id', (req, res, next) => {
  res.send("<h1>Number</h1>" + `<p>${req.params.id}</p>`)
})


# 下記のパスにアクセス
http://localhost:3000/numbers/2

# パラメーターの中身を取得
req.params.idで

postリクエストを受け取る

body-parserを入れる必要がある。 これがある事により、入力した値を受け取れる

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
const portNo = 3000


app.get('/',(req,res) => {
  res.send('<form method="POST">' +
    '<textarea name="body"></textarea>' +
    '<br/><input type="submit" value="送信"/>' +
    '</form>' 
  )
})
app.post('/',(req, res) => {
  const body = JSON.stringify(req.body)
  res.send('Postを受信' + body)
})


app.listen(portNo)

画像を受け取る

multerが必要

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended: true}))
const multer = require('multer')
const path = require('path')
const tmpDir = path.join(__dirname, 'tmp')
const pubDir = path.join(__dirname, 'pub')
const uploader = multer({dest: tmpDir})

const portNo = 3000


app.get('/',(req,res) => {
  res.send(
    '<form method="POST" action="/" enctype="multipart/form-data">' +
    '<input type="file" name="aFile"/>' + '<br/>' +
    '<br/><input type="submit" value="アップロード"/>' +
    '</form>' 
  )
})
app.use('/pub', express.static(pubDir))

app.post('/', uploader.single('aFile'), (req,res) => {
  console.log("画像を受け付けました")
  console.log("オリジナルファイル名:", req.file.originalname)
  console.log("保存したファイルパス", req.file.path)

  if (req.file.mimetype !== 'image/png') {
    res.send("アップロードできない")
    return
  }

  const fname = req.file.filename + '.png'
  const des = pubDir + '/' + fname
  const fs = require('fs')
  console.log("pub", pubDir)
  fs.rename(req.file.path, des, (err)=>{console.log(err)})
  res.send('ファイルを受信しました<br/>' + `<img src="/pub/${fname}">`)
})


app.listen(portNo)

静的ページにアクセス

## ディレクトリ構造

html
  index.html

index.js

## index.js
app.use('/', express.static('./html'))

参考

www.amazon.co.jp