SPAの土台を作成する

クイズサイト構築の第1回目となります。

目次サイトは下記ページとなります。

Nuxt.js+expressでクイズサイトを作ってみた

準備

$ node -v
v12.4.0
$ npm -v
6.10.3
$ vue -V
2.9.6

初期構築

プロジェクトディレクトリの作成

# mkdir spa_test
# cd spa_test/

クライアントサイド – Vue.jsのインストール

# yum update
# npm install -g @vue/cli-init
# vue init webpack frontend
　→vue-router は有効化
# cd frontend/config
index.jsの以下を変更
　localhost
　node.home.local
※firewalldが動作していたらしかるべき処置をする
# npm run dev
httpアクセス
　→OK

サーバサイド – expressのインストール

# cd spa_test/
# mkdir backend
# cd backend/
# npm init
# npm install --save nodemon express body-parser cors
# vim package.json
↓に変更
  "scripts": {
    "start": "./node_modules/nodemon/bin/nodemon.js index.js"
  },
 
# vim index.js
const express = require('express')
const bodyParser = require('body-parser')
// corsポリシーに抵触するため、その対策としてcorsを利用する
const cors = require('cors')

const app = express()
app.use(bodyParser.json())
app.use(cors())

app.get('/test', function(req, res) {
  res.send({
    message: 'Hello world!'
  })
})

app.listen(process.env.PORT || 3000)

# npm start
httpで3000ポートにアクセス
　→message	"Hello world!"が表示される

リクエスト&レスポンスの動作確認

# cd ../frontend/
# npm install --save axios

# cd src/
# mkdir api
# touch api/index.js

axiosの設定をインスタンス化する

# vim api/index.js
import axios from 'axios'

export default () => {
  return axios.create({
    baseURL: `http://node.home.local:3000/`
  })
}

# vim api/methods.js
import Api from './index'

export default {
  testPosting () {
    const item = { text: 'Success!' }
    return Api().post('/test', item)
  }
  // 他の処理も追加可能
}

POST機能テストのためにfrontendのHTMLを修正

# vim frontend/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- ごちゃごちゃしていたのを全て消して、ボタンを配置 -->
    <button @click='post'>click me</button>
  </div>
</template>

<script>
import Methods from '@/api/methods'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    // サーバーから返ってくる値をログに出力したいのでasyncとawaitを行う
    async post() {
      let response = await Methods.testPosting()
      console.log(response)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

# vim backend/index.js
app.get('/test', function(req, res) {
  res.send({
    message: 'Hello world!'
  })
})

// 以下に書き換え

app.post('/test', function(req, res) {
  res.send({
    message: req.body.text
  })
})

httpの8080番にアクセスし、「click me」ボタンをクリック