Как начать работу с express и nuxt / viue для этой настройки по умолчанию - PullRequest
Новая
       26

Как начать работу с express и nuxt / viue для этой настройки по умолчанию

0 голосов
/ 26 марта 2019

Как мне начать работать со следующим примером кода: 

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()

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

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }

  app.get('/route', (req, res) => { // i test this, but failed
    res.json({ message: 'yes' }) // then on .vue feel i use axios to get this localhost
   })

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

Должен ли я создать какой-нибудь маршрутизатор внутри функции запуска?Как экспортировать их в nuxt и получить данные в файле .vue?

1 Ответ

0 голосов
/ 26 марта 2019

у вас есть 2 варианта: togheter express и Nuxt, сделать live express в каталоге сервера или использовать nuxt pure в качестве внешнего интерфейса (awesomesite.com) и express pure как api (api.awesomesite.com) в любом из двух случаев. жизнь становится проще, если вы используете axios и настраиваете их в файле nuxt.config.js, 

 axios: {
    baseURL: process.env.AXIOS_SERVER
    // See https://github.com/nuxt-community/axios-module#options
  },

после этого вы используете axios как обычно в своих компонентах для связи со стороной сервера.

Я пытаюсь использовать экспресс-вставку с nuxt. Для этого я предпочитаю создать структуру внутри директории сервера 

/server
  /router
   index.js
  index.js
  globals.js

маршрутизатор / index.js 

const router = require('express').Router()

router.post('/your-route', function (req, res, next) {
  //todo this route
});
router.post('/other-route', function (req, res, next) {
  //todo this route
});
module.exports.router = router;

Сервер / index.js 

const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
{ router } = require('./router') //the router!!!

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
app.use('/', router) // '/' or '/api' depends to you

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  const { host, port } = nuxt.options.server

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    await nuxt.ready()
  }


  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

в компоненте vue вы можете использовать AXIOS просто так: 

  methods: {
    async send() {
      this.waiting = true
      await this.$axios({
        method: 'post',
        url: '/your-route',
        data: this.form
      })
        .then(res => {
          this.success = true
          this.error = false
          this.onReset()
        })
        .catch(e => {
          this.error = true
          this.success = false
        })
      this.waiting = false
    }
}
...