207 похожих чатов

Реализация Nuxt Advanced SSR: 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

2 ответов

13 просмотров

Кеширование, очереди, сервисы?

Ужос

Похожие вопросы

Обсуждают сегодня

Добрый вечер. Есть вопрос, а может и предложение. Был у меня диалог в другой группе о делфи и я задался вопросом: "А нельзя ли в делфи цвет //коментария и {комментария} сде...
Kraszx
24
Всем привет! Подскажи, пожалуйста, как передать в TComboBox сразу значение и id записи. На Delphi я делал так: ComboBox1.Items.AddObject('Какое-то значение', Pointer(id запис...
Евгений
13
Мдя, прикол, боевая сборка запускается (именно под отладчиком) после F9 примерно полторы минуты (97 секунд если быть точным). Начал копать - проблема детектится сразу - зависа...
Александр (Rouse_) Багель
38
Здравствуйте, вопрос по структурам данных. Были у вас случаи, когда пришлось писать деревья или двунаправленные списки?
/ /
50
Товарищи, кто работа с iphelper? Или может я в самой логике ошибки фигачу, не пойму.... var ifTable : PMIB_IFTABLE; size, corSize: DWORD; Buffer ...
Warfarellen
4
я так понимаю, я так подозреваю, что создание такого плагина для человека, кто умеет писать плагины для делфи потребует минут 5-10 времени. но это мое подозрение. хотелось бы ...
Kraszx
7
Коллеги, добрый вечер. Создаю коллекцию от TFPGMap, ключ - перечисление, значение - целое. Нужно отсортировать коллекцию по значению. Как это можно сделать?
Kirill Filippenok
11
Скажи а ты когда этот канал создавал ты уже дельфи не любил, или это со временем пришло?
Роман Лях (rgreat)
18
Ребята, всем привет. Подскажите, пожалуйста, можно ли как-то через бота понять, что этого бота добавили в группу\канал и выдали ему права администратора?
Artem Stormageddon
9
Привет, такой вопросик появился кажется ли вам что Rust слишком сложный/строгий для высокоуровневого программирования и слишком "безопасный"/строгий для низкоуровневого?
Крокант
10
Карта сайта