Angular整合strapi CMS

发表于 更新于 分类于 阅读次数： 本文字数： 4.5k 阅读时长 ≈ 4 分钟

1. 前言

对于我们这些开发人员来说，启动一个新的web项目可能是一项乏味的工作。一些普通的增删改查都要自己亲自动手去写，那效率着实是大打折扣的。

一些技术选型工作要一次一次地被重复考虑.

  • 前端应该使用什么技术？
  • 我应该在后端使用什么技术？
  • 什么数据库是最好的？

因为现在所有的Javascript技术，如React、Angular和Vue，在构建Web应用程序时都非常流行，所以我们可以很快得到第一个问题的答案。
但是后端呢？我应该使用NodeJS还是.NET Core？
使用关系数据库还是非关系数据库更好？
后端解决方案Strapi已经找到了所有这些问题的答案。

在本文中，我们将使用Strapi和Angular构建一个简单的web应用程序。

2. 什么是Strapi?

Strapi是一个开源的headless接口优先（API-first）的内容管理系统，让开发人员可以自由选择他们喜欢的工具和前端框架。凭借丰富的插件和built-in功能，Strapi为开发人员提供了自定义和可扩展性的能力。Strapi还提供了一个API，可以通过REST或GraphQL轻松访问，这对开发人员非常友好。

3. 安装Strapi

请参考我的博客文章安装strapi和使用

安装完strapi后需要创建一些Content-type用于测试

4. 创建Angular应用

关于如何创建Angular应用的详细解释可以参考我的博客创建Angular项目.

这里只列出简单步骤:

使用以下命令安装 Angular CLI：

1
2
3

npm install -g @angular/cli

创建并运行新的 Angular 应用程序：

1
2
3
4
5

ng new blog-web 
cd blog-web 
ng serve

如果您导航到http://localhost:4200/您将能够看到新的应用程序。

5. 创建用于访问strapi数据的服务

现在，我们可以开始设计应用程序并从API访问数据。首先，我们将创建服务和API调用以从 Strapi 获取数据。进入src文件夹并运行以下命令：

1
2
3
4
5

mkdir services
cd services
ng g s post

Angular CLI 将创建post服务，以便我们准备好编码。environment.ts我们将在其中输入我们的 API URL。

1
2
3
4
5
6
7

export const environment = {

  production: false,
  apiUrl: "http://localhost:1337"
};

导航到post服务并插入以下代码：

post.service.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class PostService {
  
  constructor(private http: HttpClient) { }

  getAllPosts() {
    return this.http.get(`${environment.strapiUrl}/posts`).pipe(map(res => res));
  }

  getPost(postId: any) {
    return this.http.get(`${environment.strapiUrl}/posts/${postId}`).pipe(map(res => res));
  }
}


我们创建了两种方法：一种用于获取所有页面，一种用于通过 id 获取页面。

注意：使用前HttpClient我们需要注册app-module.ts

转到 app-module.ts
导入HttpClientModule自@angular/common/http,

1
2
3

import { HttpClientModule } from '@angular/common/http';

将其添加到@NgModule.imports数组中：

1
imports:[HttpClientModule,  ...]

接下来，我们将创建post-component包含帖子样式和功能的内容

1
ng g c post

将以下代码插入到 post 组件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div *ngIf="posts" class="row">
  <div  *ngFor="let post of posts" class="col-lg-4 col-md-4 col-sm-6">
      <div class="post-item">
          <a class="post-link">
              <img class="img-fluid" src="http://localhost:1337{{post.content.CoverImage[0].url}}" alt="" /></a>
          <div class="post-caption">
              <div class="post-caption-heading">{{post.content.Title}}</div>
              <div class="post-caption-subheading text-muted">{{post.content.Value}}</div>
          </div>
      </div>
  </div>
</div>

post.component.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#post .post-item {
  max-width: 25rem;
}

#post .post-item .post-caption {
  padding: 1.5rem;
  text-align: center;
  background-color: #f6f6f6;
}

#post .post-item .post-caption .post-caption-heading {
  font-size: 1.5rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  margin-bottom: 0;
}

#post .post-item .post-caption .post-caption-subheading {
  font-style: italic;
  font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

post.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { Component, OnInit } from '@angular/core';
import { PostService } from 'services/post.service';

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.scss']
})
export class PostComponent implements OnInit {
  posts: any = [];
  constructor(private postSvc: PostService) { }

  ngOnInit() {
    this.postSvc.getAllPosts().subscribe(res => {
      console.log("posts", res);
      this.posts = res;
    });
  }
}

因为我们正在使用引导程序类，所以我们也需要将引导程序包含到我们的项目中。我们可以通过添加以下内容来做到这一点index.html：

1
2
3

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.min.css">

现在, 我们成功构建了一个简单的博客应用程序以Strapi为内容管理系统, 动态的显示博客了。

6. 参考文档

How to fast build Web Application with Strapi + Angular