refirio.org

Memo

■Express

Nuxt.js でバックもフロントもこれ一本 - Qiita
https://qiita.com/kawaMk4/items/298f95f751540b96d39b

※Expressを使えば、サーバサイドプログラムもJavaScriptで作成できる
※Ajaxでのデータ取得は必須と言ってもいい機能なので、axiosははじめからインストールしておくと良いかも

>cd C:\localhost\home\refirio_org\public_html\memos\nuxtjs
>npx create-nuxt-app express

create-nuxt-app v2.15.0
    Generating Nuxt.js project in express
  Project name express
  Project description My astonishing Nuxt.js project
  Author name refirio
  Choose programming language JavaScript
  Choose the package manager Npm						… yarn から Npm に変更した
  Choose UI framework None
  Choose custom server framework Express					… None から Express に変更した
  Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
  Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
  Choose test framework None
  Choose rendering mode Universal (SSR)
  Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

>cd express
>npm run dev

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): server\**\*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server/index.js`
i Preparing project for development                                   00:11:05
i Initial build may take a while                                      00:11:05
√ Builder initialized                                                 00:11:05
√ Nuxt files generated                                                00:11:05

√ Client
  Compiled successfully in 7.50s

√ Server
  Compiled successfully in 8.05s

i Waiting for file changes                                            00:11:15

 READY  Server listening on http://localhost:3000                     00:11:15


以下にアクセスすると「express My spectacular Nuxt.js project」というデフォルトページが表示される
http://localhost:3000/■APIを作成

C:\localhost\home\refirio_org\public_html\memos\nuxtjs\express\server\api.js
const express = require('express')
const router = express.Router()

router.get('/test', (req, res, next) => {
    const param = { test: 'success' }
    res.header('Content-Type', 'application/json; charset=utf-8')
    res.send(param)
})

module.exports = router


C:\localhost\home\refirio_org\public_html\memos\nuxtjs\express\server\index.js
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()

const apiRouter = require('./api')						… 追加

// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'

async function start () {
  // Set api route
  app.use('/api', apiRouter)							… 追加

  // Init Nuxt.js
  const nuxt = new Nuxt(config)


以下にアクセスすると「{"test":"success"}」というデフォルトページが表示される
http://localhost:3000/api/test■Vue.js（フロント）から上記サーバサイドのAPI（Express）を呼び出し

Nuxt.jsとaxiosでエラーTypeError: Cannot read property '$get' of undefined - Qiita
https://qiita.com/HorikawaTokiya/items/e24c6aaf173d0237525e

axios をインストール

>npm install --save @nuxtjs/axios


nuxt.config.js の最後に modules と axios のブロックを追加

C:\localhost\home\refirio_org\public_html\memos\nuxtjs\express\nuxt.config.js
  },
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
  }
}


index.vue の template に response の表示場所を追加し、
script に data と mounted のブロックを追加する

C:\localhost\home\refirio_org\public_html\memos\nuxtjs\express\pages\index.vue
      <h2 class="subtitle">
        My astonishing Nuxt.js project
      </h2>
      <p>API response: {{ response }}</p>

  },
  data: function() {
    return {
      response: null
    }
  },
  mounted: function() {
    this.$axios
      .$get('/api/test')
      .then(response => {
        this.response = response.test
      })
      .catch(error => {
        console.log(error)
      })
  }
}


以下で起動すると、APIのレスポンス内容が画面に表示される

>npm run dev
Memo

Advertisement
