Могу ли я в Nuxt universal mode (не spa) запускать свои middleware и делать запросы к MYSQL? Как именно?

Question

[Роман]

Если я установил Nuxt как Universal - это значит я могу использовать бэкенд или не могу? И если могу - то как именно например сделать запрос к базе данных?

Еще пробовал установить с Express (выбрал опцию при установке Nuxt) но когда пытаюсь встроить middleware в server/index.js - там какие-то непонятные ошибки - простых примеров не нашел...

Объясните пожалуйста как именно я могу использовать серверную часть в Nuxt.js чтобы работать с базой данных (mysql)?

Я поначалу думал сделать отдельно Express на другом порту, но сейчас решил что это будет костыль - наверное можно же как-то иначе? Типа Nuxt way.

Answer 1

[Redrik_Shuhart]

Я только изучаю JS и NUXT, но в рамках самообучения сделал так.
Прошу более опытных указать на ошибки:

// nuxt.config.js
...
  serverMiddleware: [
    '~api/api'
  ],
...

//api.js

import {pool} from "./db";

const express = require('express');
const app = express();

app.get('/valute', function (req, res) {
  const sql = "SELECT * FROM `valute-xml`";

  pool.query(sql, function (error, results, fields) {
    if (error) throw error;
    res.json(results);
  });
});

//db.js

const mysql = require('mysql2');

const pool = mysql.createPool({
  connectionLimit: 100,
  host: '',
  user: '',
  password: '',
  database: ''
});

export {pool}

Потом уже с помощью axios обращаюсь, например, к localhost:3000/api/valute

Comments

[Роман]

Спасибо бро!

Тоже пришел к чему-то такому.

У меня теперь другая печалька - я-то думал что можно как-то напрямую передать данные из serverMiddleware в Vue, но судя по всему единственный вариант - это через http (как в твоем примере).

Ииэхххх... :/

[Redrik_Shuhart]

А зачем? Если надо заполнить хранилище Vuex перед отображением страницы, то можно сделать так:

// ~/store/index.js

export const actions = {
  async nuxtServerInit({dispatch}) {
     try {
       await dispatch('valute/fetchValutes')
     } catch (e) {
       throw e
     }
}

// ~/store/valute.js
export const state = () => ({
  valutes: []
})

export const mutations = {
  setValutes(state, payload){
    state.valutes = payload
  }
}

export const actions = {
  async fetchValutes({commit}) {
    try {
      const valutes = await this.$axios.$get('http://localhost:3000/api/valute')
      commit('setValutes', valutes)
    } catch (e) {
      throw e
    }
  },
}

А на странице сразу выводишь информацию из хранилища

[Роман]

Redrik_Shuhart, да, спасибо, хороший код.

Но просто я думал что можно обойтись без GET-запросов вовсе, ну, как-то там передать данные "внутри" Nuxt ))) (я пока еще плохо представляю структуру потоков данных внутри Nuxt universal)

Answer 2

[Александр Аксентьев]

Nuxt это фронтенд и серверный рендеринг. (серверный рендеринг != бекенд)

Задачи бекенда он не выполняет и не сделан для этого.

Я поначалу думал сделать отдельно Express на другом порту,

так и работает, апи на отдельном домене/порту, nuxt сам по себе и обращается к апи. Апи может быть на чем угодно сделано, а не только на JS.

Comments

[Роман]

Мне тут подсказали уже:

https://nuxtjs.org/api/configuration-servermiddleware/

похоже на то, что бэк организовать прям на наксте - возможно

...но это не точно))

Попробую - потом расскажу что получилось а что нет))

Иначе нифига не понятно - зачем тогда при установке можно выбрать Express или Koa

[Александр Аксентьев]

Роман, это никак не делает из nuxt бекенд. По прежнему nuxt максимум в качестве прокси между апи и фронтом стоит. Может что-то немного подправить в процессе запросов. Middleware это не способ реализации бекендовости уж точно.