Я использую довольно простое приложение Mongo Node Express для обслуживания сайта.
В настоящее время, когда пользователь входит в систему, ему предоставляется его панель управления.Экспресс-приложение направляется на контроллер, чтобы показать пользователя и получает всю информацию о пользователе.Панель инструментов - это EJS-представление со всей логикой для отображения каждого бита информации.
Я бы хотел, чтобы каждый контейнер или раздел страницы обслуживался отдельными конечными точками API, вместо того, чтобы заполнять все в вызове для загрузкипользовательский сайт.
Для произвольного примера, давайте предположим, что пользователь имеет вещи , которые имеют стили , а пользователь имеет оборудование , которое имеет поставщиков .Пользователь, вещь, поставщик, оборудование и поставщик - все это схемы Мангуста.Таким образом, когда мы отображаем пользовательский сайт, мы запрашиваем у mongodb и заполняем его вещи и вещи. Стили, а также их экипировку и оборудование. Поставщики (предположим, что мы уже используем любую логику, необходимую для ограничения возвращаемого значения).информация о том, что актуально для пользователя).
Представление панели пользователя содержит контейнер с информацией о пользователе, контейнер с информацией о вещах (с подробной информацией об их стилях, возможно, сгруппированных по стилям), а также контейнер с информацией об оборудовании с подробной информацией.для поставщиков.
Я придумал это, и он делает только такие простые вещи, как группировка результатов и изменение классов для div, но я думаю, что это показывает идею дифференциации.
fakeuser.ejs
<% include ../partials/header %>
<div class="container-fluid">
<div id="things">
<h2>Things by Style</h2>
<% const splitthings = user.things.reduce(function(acc, item) {
var key = item.style.design; // arbitrarily groupby thing.style.design
acc[key] = acc[key] || [];
acc[key].push(item);
return acc;
}, {});
for (var key in splitthings) {
if (splitthings.hasOwnProperty(key)) {
splitthings[key].sort(function(a,b){
return a.count-b.count; // sort by thing.count
}); %>
<div>
<h4><%= key %></h4>
<% splitthings[key].forEach(function(thing){ %>
<p>blah blah <%= thing.title %> blah blah <%= thing.count %> blah blah </p>
<% } %>
</div>
<% }} %>
</div>
<div id="equipment">
<h2>Equipment</h2>
<% const splitequipment = user.equipment.reduce(function(acc, item) {
var key = item.supplier.name; // arbitrarily groupby equpiment.suppplier.name
acc[key] = acc[key] || [];
acc[key].push(item);
return acc;
}, {});
for (var key in splitequipment) {
let size = key=="Some Special" : 'large' ? 'small';
if (splitequipment.hasOwnProperty(key)) {
splitequipment[key].sort(function(a,b){
return a.count-b.count; // sort by equipment.count
}); %>
<div>
<h4 class="<%= size %>"><%= key %></h4>
<% splitequipment[key].forEach(function(eq){
let bg = "primary"
switch (eq.someproperty) {
case 'ege':
bg = "secondary";
break;
case 'aar':
case 'xyz':
case 'eee':
bg = "success"
break;
case 'zzz':
bg = "warning"
break;
default:
bg = "light"
}
%>
<div class="bg-<%=bg %>">
<p>blah blah <%= eq.title %> blah blah <%= eq.something %> blah blah </p>
</div>
<% } %>
</div>
<% }} %>
</div>
<div id="user">
<h2>User Info</h2>
<div>
<h4><%= user.name %></h4>
<p><%= user.arbitraryinfo %></p>
</div>
</div>
</div>
<% include ./partials/footer %>
Мой вопрос по существу: Можем ли мы вместо этого делать простые вызовы API для получения данных для каждого контейнера? Как, например, мы можем заполнить контейнер Equipment из вызова, чтобы сказать /api/user/:userid/equipmentpartial (при условии, что мы установили эту конечную точку для возврата действительного HTML).И следуйте этому: Хотели бы мы это сделать? Кажется, что было бы замечательно, если бы мы хотели вернуть материал, который находится в отдельном API или явно не связан с пользователем, куда он мог бы быть возвращенкак часть объекта пользователя;однако, это может быть ненужным или плохим также.Я просто не знаю.
Если бы мы хотели показать все оборудование (не только оборудование пользователя) на этой странице, я не уверен, как бы я это сделал ... за исключением того, чтобы получить все оборудование издругой сервис в API, а затем передать его на вид.Что если бы мы хотели, скорее всего, показать рекомендуемое оборудование или рекомендуемое поставщики ?Я предполагаю, что нам нужен контейнер, который в основном говорит: «Привет, есть ли какие-либо функции x? Если это так, я полностью их покажу»
Я могу и смогу включить эти данные, когда добавлюих объекту при рендеринге fakeuser.ejs из контроллера.
otherfakeuser.ejs
<% include ./partials/header %>
<div>
<div id="thing">
same
</div>
<div id="user">
same
</div>
<div id="featured">
<% featured.forEach(function(feat) {
// I can include featured as a separate array
// object that is passed to fakeuser.ejs %>
<h2><%= feat.name %></h2>
<% } %>
</div>
<div>
<% include ./partials/footer %>
Однако я не уверен, что мне следует это делать.На самом деле, когда я начинаю добавлять вещи в этот момент, я вижу, как это может быть скользкий уклон, почему бы просто не получить всю информацию и передать ее на панель пользователя и показать мелочи.В конце концов, страница будет медленнее, если я приложу много информации, и я знаю , чтобы прекратить добавлять вещи.Однако, это вероятно после того, как я вошел в плохую привычку (если это не путь).
Поэтому я спрашиваю, как мы можем заполнить частичное из отдельной конечной точки API.
otherfakeuser.ejs
<% include ./partials/header %>
<div>
<div id="thing">
same
</div>
<div id="user">
same
</div>
<div id="featured">
<% somehow load /api/featured/equipment %>
</div>
<div>
<% include ./partials/footer %>
Я попытался выяснить это, но я бью стену.Если я добавляю конечную точку к контейнеру и на странице загружаю js, страница перезагружается только до новой конечной точки (которая обычно недопустима, потому что это означает быть частью веб-страницы, а не целой).И, что более важно, никакие мои тесты и выполнение этой работы не ответят на вопрос о , должно ли это быть сделано .