Рубрики
Без рубрики

Как построить серверное приложение CMS

Jake Lumetta Как построить серверу Serverless CMS-Angthe Appthis Tutorial Tutorial Tutorial для моего предыдущего учебника о том, как построить серверу BERSEL CMS VEUE.js, и показывает, как построить серверное приложение CMS-CMS Отказ Helloquence на Unsplashangular, разработанный и поддерживаемый Google инженерами, имеет

Автор оригинала: FreeCodeCamp Community Member.

Джейк Луметта

Этот учебник является последующим моим Предыдущее руководство О том, как построить серверу Serverless CMS-Powered Vue.js и показывает, как построить серверубное усиление CMS-And.

Угловые, разработанные и поддерживаются инженерами Google, нашли место в разделе «Динамические веб-приложения» и является все более возобновлением языка. Это прочный и всеобъемлющий язык для предельной разработки, который является тестированием единиц, что делает его языком выбора для многих разработчиков. Угловой упрощает опыт работы в интерфейне, расширяя синтаксис HTML, чтобы позволить вам быстро создавать возможности управления контентом.

Из-за простоты углов разработчики все чаще используют его, чтобы добавить возможности CMS к веб-сайтам.

Для пользователей WordPress один популярный способ интеграции возможностей управления контентом – это работать с помощью WP-API-угловой библиотеки, которая позволяет взаимодействовать с API WordPress и угловыми приложениями. Если вы используете WordPress в качестве платформы CMS, используя угловую и API WordPress, могут уменьшить время нагрузки для содержимого на вашей странице.

Для тех, которые не используют WordPress, появляется новая порода CMS на базе API, которые значительно упрощают вещи. Мы обсудим один пример здесь.

В этой статье мы будем использовать Buttercms В качестве альтернативы WordPress и приведен пример бескливых CMS на основе SaaS, который предоставляет размещенную панель инструментов CMS и API содержимого, которые вы запрашиваете из вашего углового приложения. Это означает, что вам не нужно раскрутить любую новую инфраструктуру, чтобы добавить CMS в ваше угловое приложение.

Этот учебник будет продемонстрировать, как построить угловое приложение CMS, которое имеет маркетинговые страницы (тематические исследования клиентов), блог и FAQ, все включенные в действие через API. Сервера не нужны!

Установка

Во-первых, вы начнете, установив угловые CLI.

npm install -g @angular/cli

Настройка нового углового проекта с использованием угловых CLI. По умолчанию Angular-CLI использует стиль CSS, поэтому добавление --Style = SCSS Флаг сообщает Angular CLI для использования SCSS.

ng new hello-buttercms-project --style=scsscd hello-buttercms-project

Установите угловые материалы и угловые пакеты, связанные с угловым материалом.

npm install --save @angular/material @angular/cdknpm install --save @angular/animations

Установите ButterCMS. Запустите это в вашей командной строке:

npm install buttercms --save

Масло также может быть загружено с помощью CDN:

Быстро начать работу

Откройте проект в вашем редакторе кода по выбору. Под SRC/приложением создайте каталог под названием _Сервисы

Мы создадим файл под названием buttercms.service.js Отказ Это позволяет вам иметь свой токен API в одном месте и не случайно изменить его.

import * as Butter from 'buttercms';
export const butterService = Butter('b60a008584313ed21803780bc9208557b3b49fbb');

Вы импортируете этот файл в любой компонент, где вы хотите использовать ButterCMS.

Для быстрого хватания перейдите к SRC/App/Hello-You/Hello-You.component.ts и импорт преувеличение

import {butterService} from '../_services';

Внутри Helloyooucomponent Создание методов:

fetchPosts() {  butter.post.list({    page: 1,    page_size: 10  })  .then((res) => {    console.log('Content from ButterCMS')    console.log(res)  })}

Теперь вызовите этот метод, когда компонент загружен, добавив его в ОНИНИТ Крюк жизненного цикла:

ngOnInit() {  this.fetchPosts();}

Этот запрос API выбирает образец пост блога. Ваша учетная запись поставляется с одним примерным постом, который вы увидите в ответе. Если вы получите ответ, это означает, что теперь вы можете подключиться к API.

Добавить маркетинговые страницы

Настройка страниц CMS-Powered – это трехэтапный процесс:

  1. Определите тип страницы
  2. Создать страницу
  3. Интегрироваться в ваше приложение

Определить страницу

Во-первых, создайте тип страницы, чтобы представлять страницы исследования случаев клиента. Далее определите поля, которые вы хотите для ваших клиентов. С определенным типом страницы вы можете создать первую страницу исследования. Укажите имя и URL страницы, а затем заполните содержимое страницы.

С определенной вашей страницей API ButterCMS API вернет его в формате JSON, как это:

{    "data": {      "slug": "acme-co",      "fields": {        "facebook_open_graph_title": "Acme Co loves ButterCMS",        "seo_title": "Acme Co Customer Case Study",        "headline": "Acme Co saved 200% on Anvil costs with ButterCMS",        "testimonial": "
We've been able to make anvils faster than ever before! — Chief Anvil Maker
\r\n
\"\"
",        "customer_logo": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV",        }     }  }

В этом руководстве используются угловые рамки и угловые CLI для генерации всех компонентов и упаковки нашего приложения.

Давайте доберемся до кода.

Создать новый проект

ng new buttercms-project --style=scsscd buttercms-projectnpm install --save @angular/material @angular/cdknpm install --save @angular/animationsnpm install -S buttercmsng serve

Ваш localhost: 4200 должен быть готов обслуживать свою угловую страницу.

Создать TeampScript для экспорта услуги ButterCMS

Под SRC/приложение Создайте каталог под названием _services Отказ Создайте файл под названием buttercms.service.js Отказ

import * as Butter from 'buttercms';export const butterService = Butter('your_api_token');

Обновите компонентные маршруты

Эти компоненты генерируются угловыми CLI, используя:

NG G компонент NT>

Под SRC/приложение Создайте файл под названием приложение. Module.ts.

import {NgModule} from '@angular/core';import {RouterModule, Routes} from '@angular/router';import {CustomerComponent} from './customer/listing/customer.listing.component';import {FaqComponent} from './faq/faq.component';import {BlogPostComponent} from './blog-post/listing/blog-post.component';import {HomeComponent} from './home/home.component';import {CustomerDetailsComponent} from './customer/details/customer.details.component';import {BlogPostDetailsComponent} from './blog-post/details/blog-post.details.component';import {FeedComponent} from './feed/feed.component';import {HelloYouComponent} from './hello-you/hello-you.component';
const appRoutes: Routes = [    {path: 'customer', component: CustomerComponent},    {path: 'customer/:slug', component: CustomerDetailsComponent},    {path: 'faq', component: FaqComponent},    {path: 'blog', component: BlogPostComponent},    {path: 'blog/:slug', component: BlogPostDetailsComponent},    {path: 'rss', component: FeedComponent},    {path: 'hello-you', component: HelloYouComponent},    {path: 'home', component: HomeComponent},    {path: '**', redirectTo: 'home'}];
@NgModule({    imports: [RouterModule.forRoot(appRoutes)],    exports: [RouterModule]})export class AppRoutingModule {}

Настройте страницу списка клиентов

Под Приложения/Клиент Тип: отрицание g составная часть

В файле Приложения/Клиент/Листинг/Customer.Listing.comPonent.ts :

  1. Импорт преувеличение
  2. В ОНИНИТ Крюк, используйте преувеличение Чтобы получить список клиентов
  3. Результаты хранения на страницах Переменная и разметки (HTML) будут обновлены с данными
import {Component, OnInit} from '@angular/core';import {butterService} from '../../_services';
@Component({    selector: 'app-customer',    templateUrl: './customer.listing.component.html',    styleUrls: ['./customer.listing.component.scss']})
export class CustomerComponent implements OnInit {  public pages: any[];  constructor() { }
ngOnInit() {  butterService.page.list('customer_case_study')    .then((res) => {      this.pages = res.data.data;  }); }}

Показать результаты в customer.listing.component.html.

  ;Customers                      
                      
            
              {{page.fields.seotitle}}            
            
              {{page.fields.headline}}            
          
              
        
    whatshot

Настройте страницу детализации клиента

Под Приложения/Клиент , введите отрицание G Подробности компонента Отказ

apps/customer/details/customer.details.component.ts

Создать страницу клиента

  1. Импорт преувеличение
  2. В ОНИНИТ Крюк, используйте преувеличение Чтобы получить страницу клиента, учитывая слизняку в пути URL
  3. Результаты хранения в переменной странице и разметке (HTML) будут обновлены с помощью данных клиента
import {Component, OnInit} from '@angular/core';import {Observable} from 'rxjs/Observable';import {ActivatedRoute} from '@angular/router';import {butterService} from '../../_services';import {map, take} from 'rxjs/operators';
@Component({  selector: 'app-customer-details',  templateUrl: './customer.details.component.html',  styleUrls: ['./customer.details.component.scss']})
export class CustomerDetailsComponent implements OnInit {  constructor(protected route: ActivatedRoute) { }
  protected slug$: Observable;  public page: any;
  ngOnInit() {    this.slug$ = this.route.paramMap    .pipe(      map(params => (params.get('slug')))   );
    this.slug$.pipe(      take(1))        .subscribe(slug => {          butterService.page.retrieve('customer_case_study', slug)            .then((res) => {              this.page = res.data.data;            }).catch((res) => {            console.log(res);          });        });      }    }

Показать результаты в customer.details.component.html.

  
    
      
              
      
        {{page.fields.headline}}      
      
Testimonials

Теперь вы можете перейти на страницу клиента через список всех страниц клиентов или напрямую через URL.

Добавить базу знаний

Настройте поля содержимого

Предположим, вы хотите добавить CMS на страницу FAQ статического часто задаваемого задачи с заголовком и списком вопросов с ответами.

Создание вашего контента динамически с маслом – это двухэтапный процесс:

  1. Настройка пользовательских полей контента в масле
  2. Интегрировать поля в ваше приложение

Чтобы настроить пользовательские поля содержимого, сначала войдите в приборную панель масла.

Создайте новое рабочее пространство или нажмите на существующий. Рабочие пространства позволяют вам организовать поля контента дружелюбным способом для редакторов контента и не влиять на разработку или API. Например, веб-сайт недвижимости может иметь рабочее пространство под названием «Свойства» и другое под названием «О странице».

Как только вы находитесь в рабочем пространстве, нажмите кнопку, чтобы создать новое поле контента. Выберите тип «объекта» и назовите поле «FAQ заголовок».

После сохранения добавьте другое поле, но на этот раз выберите «Коллекция» типа и название поля FAQ товаров Отказ

На следующем экране установите два свойства для предметов в коллекции.

Теперь вернитесь к своему рабочему пространству и обновите свои товары и задаваемые вопросы.

Интеграция вашего приложения

Создать FAQ компонент

Под Приложения Тип: NG G. Component FAQ

apps/faq/faq.component.ts

Настройте OnInit Hook для загрузки FAQ

import {Component, OnInit} from '@angular/core';import {butterService} from '../_services';
@Component({  selector: 'app-faq',  templateUrl: './faq.component.html',  styleUrls: ['./faq.component.scss']})
export class FaqComponent implements OnInit {  constructor() {}
  public faq: any = {      items: [],      title: 'FAQ' };
ngOnInit() {  butterService.content.retrieve(['faq_headline', 'faq_items'])    .then((res) => {      console.log(res.data.data);      this.faq.title = res.data.data.faq_headline;      this.faq.items = res.data.data.faq_items;    });  }}

Показать результат

                        
;          {{item.question}}       
       
         {{item.answer}}       
        <;/mat-card>          
       whatshot

Значения, введенные в приборной панели масла, немедленно обновляют содержимое в нашем приложении.

Блог

Чтобы отобразить сообщения, вам нужно создать /Блог Маршрут в вашем приложении и извлечении постов в блоге от API масла, а также /блог/: слизняки Маршрут для обработки отдельных постов.

Смотрите ссылку API для дополнительных опций, таких как фильтрация по категориям или автору. Ответ также включает в себя некоторые метаданные, которые мы будем использовать для пагинации.

Настройте домашнюю страницу блога

Под Приложения/Blog-Post , введите: NG G Список компонентов Отказ

apps/blog-post/listing/blog-post.listing.component.ts

Обновите компонент, чтобы получить все сообщения:

  1. Импорт преувеличение
  2. Получить все пост ОНИНИИТ
import {Component, OnInit} from '@angular/core';import {butterService} from '../../_services';
@Component({  selector: 'app-blog-post',  templateUrl: './blog-post.component.html',  styleUrls: ['./blog-post.component.scss']})export class BlogPostComponent implements OnInit { public posts: any[];
 constructor() { }
ngOnInit() {  butterService.post.list({  page: 1,  page_size: 10}).then((res) => {  console.log(res.data)  this.posts = res.data.data;  }); }}

Показать результат:

 Blog Posts;          
            
;         
          
            ;          
          
            {{post.title}}          <;/div>        
;      
      
        
          
        
      
    
  
  
    whatshot

Настройка Page Post Blog

Под Приложения/Blog-Post , введите: NG G Составные детали

apps/blog-post/details/blog-post.details.component.ts

Показать один пост:

  1. Импорт преувеличение
  2. В ОНИНИТ Крюк, используйте преувеличение Чтобы получить сообщение Blog-Post, учитывая слизняку в пути URL
  3. Хранить Результаты по почте Переменная и разметки (HTML) будут обновлены с помощью данных клиента
import {Component, OnInit, ViewEncapsulation} from '@angular/core';import {Observable} from 'rxjs/Observable';import {ActivatedRoute} from '@angular/router';import {butterService} from '../../_services';import {map, take} from 'rxjs/operators';
@Component({  selector: 'app-blog-post-details',  templateUrl: './blog-post.details.component.html',  styleUrls: ['./blog-post.details.component.scss'],  encapsulation: ViewEncapsulation.None})
export class BlogPostDetailsComponent implements OnInit {
    constructor(protected route: ActivatedRoute) {    }
    protected slug$: Observable;    public post = {      meta: null,      data: null};
ngOnInit() {  this.slug$ = this.route.paramMap      .pipe(        map(params => (params.get('slug')))      );
  this.slug$.pipe(      take(1))      .subscribe(slug => {        butterService.post.retrieve(slug)          .then((res) => {            this.post = res.data;          }).catch((res) => {          console.log(res);       });   }); }}

Показать результат:

  
    
      
        
          
            {{post.data.title}}          
                    
;>
        
;        <;h4>          {{post.data.author.first_name}}     {{post.data.author.last_name}}

Теперь ваше приложение имеет рабочий блог, который можно легко обновлять в приборной панели ButterCMS.

Категории, теги и авторы

Используйте API для масла для категорий, тегов и авторов, чтобы функционировать и фильтровать контент в вашем блоге.

Перечислите все категории и получите сообщения по категории

Вызовите эти методы на Oninit () Крюк жизненного цикла:

methods: { ... getCategories() {   butter.category.list()     .then((res) => {       console.log('List of Categories:')       console.log(res.data.data)     }) }, getPostsByCategory() {   butter.category.retrieve('example-category', {       include: 'recent_posts'     })     .then((res) => {       console.log('Posts with specific category:')       console.log(res)     })   } }, created() { ... this.getCategories() this.getPostsByCategory()}
 getCategories() {  butter.category.list()  .then((res) => {   console.log('List of Categories:')   console.log(res.data.data)  }) }, getPostsByCategory() {  butter.category.retrieve('example-category', {   include: 'recent_posts'  })  .then((res) => {   console.log('Posts with specific category:')   console.log(res)  }) }},created() { … this.getCategories() this.getPostsByCategory()}

Заворачивать

Поздравляю, вы успешно повернули ваше статическое угловое приложение в приложение CMS-питание, используя API на контент и тем самым поддерживая неверную архитектуру. Ваша команда разработки может воспользоваться временными аспектами угловых аспектов, и вы сохранили еще больше времени, используя Serverless CMS.

Если вам понравилось эту статью, пожалуйста, помогите ему распространяться, хлопая ниже! Для большего количества контента следуйте нами на Твиттер а также подписываться в наш блог.

А также Если вы хотите добавить блог или Угловые CMS. на ваш сайт без вощения с WordPress, Вы должны попробовать масло CMS .

Читайте ещё по теме: