А
Но этот вариант отлично ложиться на моц сервис. У нас нода это bff к сервисам. На нем нукст и обращения к апи других сервисов
пишу более развёрнуто полное решение
1. подключаем обёртки серверного и клиентского апи
nuxt.config.js
plugins: [
'~/plugins/api-context.server.js' // подключится на только для серверной части
, '~/plugins/api-context.client.js' // подключится на только для клиентской части
],
2. Клиентское апи забирает данные по http через axios
api-context.client.js
export default (context, inject) => {
inject('api', async (controller, method, params) => {
...
return await context.$axios['$' + (params ? 'post' : 'get')]('/api/' + controller + '/' + method, params);3. Серверное апи подключает файл соответствующего контроллера, передаёт ему соединение MySQL и выполняется непосредственно на сервере.
api-context.server.js
export default (context, inject) => {
inject('api', async (controller, method, params) => {
...
let db = await db_pool.getConnection();
let api = require('~/api/' + controller);
...
let result = await api[method](db, params);
...
return result;4. Для обработки клиентских запросов поднимется соответствующее serverMiddleware
nuxt.config.js
serverMiddleware: [
...
{path: '/api', handler: body_parser.json()},
{path: '/api', handler: (req, res, next) => {
const url = require('url');
req.query = url.parse(req.url, true).query;
next();
}},
...
{path: '/api', handler: '~/serverMiddleware/api-server.js'},
...
5. api-server для клиентских запросов выглядит примерно так
/serverMiddleware/api-server.js
export default async(req, res, next) => {
...
let db = await db_pool.getConnection();
let url = parseAndCheck(req._parsedUrl.pathname);
url = url.split('/');
let method = url.pop();
let controller = url.join('/');
let api = require('~/api/' + controller);
let result = await api[method](db, req.params);
res.end(JSON.stringify(result));
...6. Пример контроллера:
/api/items.js
let index = async db => {
let [results, schema] = await db.query(`SELECT * FROM items`);
return {items: results, schema: db.schemaFromQuery(schema)};
};
export {index}7. вызов контроллера в компоненте
/components/Items.vue
<template>
<div>
<b-button @click.prevent="$fetch">Refresh</b-button>
<b-table :items="items"></b-table>
</div>
</template>
<script>
export default {
data () {
return {
items: []
}
}
, async fetch () {
let res = await this.$api('items', 'index');
this.items = res.items;
}
}
</script>
Сейчас при заходе на страницу и серверном рендеренге, http запросы никуда отправляться не будут, Нода напрямую вызовет метод контроллера, который сделает запрос к MySQL, а при нажатии на кнопку Refresh, уйдёт запрос
/api/items
и serverMiddleware вернёт данные по http