Как интегрировать express. js с вашим сайтом

Question

Я создал простую страницу веб-портфолио с html, css и javascript. Я сделал это без фреймворка вроде angular или реакции. Я использовал bootstrap только для нижнего колонтитула.

Я использовал webpack в качестве своего сборщика, и все работает идеально, но сейчас моя проблема в том, что я хочу интегрировать express. js с моим приложением и Понятия не имею, как это сделать, я заканчиваю программирование на стороне сервера с курсами Nodejs и Express от Coursera. Я искал в Google, но не нашел то, что хочу.

Answer 1

Если вы хотите предоставить доступ к своему внутреннему API для внешнего интерфейса простым способом, могу ли я предложить использовать api-mount , который основан на express под капот.

Если вам нужно настроить express, ввести дополнительное ПО промежуточного слоя или подобное - api-mount позволяет это.

Обратная сторона в том, что ваш бэкэнд не будет RESTfull, и вы будете меньше узнавать о самом express. Тем не менее, попробуйте - может вам понравится:)

Answer 2

Есть разные способы интегрировать ваш бэкэнд с вашим интерфейсом. Вы сказали, что заканчиваете курс Node JS и Express на Coursera, поэтому я предполагаю, что вы уже знаете, как настроить свой сервер и так далее.

Если вы только начинаете и просто хотите чтобы ваши данные поступали из базы данных и были заполнены в HTML, я бы взглянул на E JS. Он позволяет вам встраивать данные в страницу HTML, таким образом вы можете создать законченную страницу HTML со всеми необходимыми данными. Это отлично подходит для таких вещей, как SEO.

Другой способ - иметь на стороне клиента Javascript, который запрашивает ваш сервер через REST API, например:

In Express:

async function getSomethingFromDB(req, res) {
   const data = await getDataFromDb()

   res.send(data)
}

app.get("/something", getSomethingFromDB)

В вашем интерфейсе JS:

async function fetchDataFromBackend() {
   const res = await fetch(`/something`)
   const data = await res.json()

   return data
}

Вы можете позвонить по номеру fetchDataFromBackend, как хотите, и делать все, что вам нужно, с помощью data, например, заполнять свой веб-сайт с помощью эти данные. Этот подход отлично подходит для создания интерактивных приложений, но имеет свои проблемы с поисковой оптимизацией, и я бы посоветовал первый метод, используя этот метод, если вам потребуется AJAX на вашем веб-сайте.

Надеюсь, это поможет!

Answer 3

Установить в папку вашего внутреннего проекта в консоли: npm install express --save

var express = require('express');

var app = express();

// Configure headers y cors
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
    res.header('Allow', 'GET, POST, OPTIONS, PUT, DELETE');
    next();
});

app.use('/api', project_routes);