Ts.ED, basit bir kurulumla ölçeklenebilir sunucu tarafı uygulamaları oluşturmaya yönelik bir Node.js çerçevesidir. TypeScript ile geliştirilen Ts.ED , uygulamalarınızı nesne yönelimli programlama, işlevsel programlama veya dekoratörlerle oluşturmanıza olanak tanır. Tamamen hazır proje arasında seçim yapabilir veya projenizi kendiniz özelleştirebilirsiniz.

Bu yazıda, basit bir blog yazısı veritabanı oluşturarak Ts.ED ve MySQL ile sunucu taraflı bir uygulamanın nasıl oluşturulacağını öğreneceğiz. Bu öğreticiyi takip etmek için makinenizde aşağıdakilerin kurulu olması gerekir:

  • Node.js v14.x
  • MySQL veritabanı
  • postacı

Ts.ED geliştiricileri, hızlı bir şekilde kurulum yapmanıza yardımcı olacak zengin belgeler sağladı. Eğitime başlamadan önce kesinlikle kontrol etmenizi tavsiye ederim. Ayrıca, bu öğreticinin tam kodu Git Hub'da mevcuttur . Takip etmek için klonlamaktan çekinmeyin. Başlayalım!

İçindekiler

Ts.ED avantajları

Kodlamaya başlamadan önce, Ts.ED'nin web geliştiricileri için harika bir Node.js çerçevesi olmasının bazı nedenlerini ele alalım. Birincisi, OpenSpec ve JSON Schema şikayetleriyle REST API'lerini daha hızlı oluşturmanıza olanak tanır. Zengin CLI aracı, önceden yapılandırılmış bir sunucu oluşturmanıza olanak tanıyarak size biraz zaman kazandırır ve yığınınızı oluşturmak için aralarından seçim yapabileceğiniz birçok eklentiye sahiptir.

Ts.ED, sınıf tabanlı bir çerçevedir, bu nedenle denetleyiciler, borular ve ara yazılımlar bir sınıf olarak oluşturulur. Son olarak, uygulamalarınızı test etmeyi çok daha kolay hale getiren bazı yerleşik özelliklere sahiptir. Öğreticide ilerlerken, bu özellikleri çalışırken göreceğiz. Başlayalım!

Yeni bir proje iskelesi

Yeni projemizi kurmak için öncelikle aşağıdaki komutla Ts.ED CLI'yi kurmamız gerekecek:

 npm install -g @tsed/cli

Kurulum tamamlandıktan sonra bir klasör oluşturun ve aşağıdaki komutla yeni bir proje başlatın:

 mkdir tsed-demo && cd tsed-demo
tsed init.

Yukarıdaki komut, tsed-demo adında yeni bir klasör oluşturacaktır. tsed init . komutu, istediğiniz konfigürasyonları seçmenizi isteyecektir. Aşağıdakileri seçin:

  • Hedef platform: Ekspres
  • Proje için mimari: Ts.ED
  • Kural dosyası stili: Ts.ED'yi seçin
  • Projeniz için gereken özellikler: Veritabanı
  • Veritabanı için ORM: TypeORM
  • Kurulacak TypeORM: MySQL
  • Paket yöneticisi: İplik

Ts.ED, klasörün kök dizininde . init komutunda. Yarn, uygulamayı çalıştırmak için gereken paketleri kurarken bekleyin; kurulum tamamlandığında, Ts.ED aşağıdaki klasör yapısını oluşturacaktır:

 tsed-demo
┣ düğüm_modülleri
┣ kaynak
┃ ┣ yapılandırma
┃ ┃ ┣ envs
┃ ┃ ┃ ┗ index.ts
┃ ┃ ┣ kaydedici
┃ ┃ ┃ ┗ index.ts
┃ ┃ ┗ index.ts
┃ ┣ kontrolörler
┃ ┃ ┗ dinlenme
┃ ┃ ┃ ┣ HelloWorldController.ts
┃ ┃ ┃ ┗ index.ts
┃ ┣ veri kaynakları
┃ ┃ ┗ MysqlDatasource.ts
┃ ┣ Server.ts
┃ ┗ index.ts
┣ .DS_Store
┣ .barrelsby.json
┣ .dockerignore
┣ .gitignore
┣ Docker dosyası
┣ BENİOKU.md
┣ docker-compose.yml
┣ paket.json
┣ process.config.js
┣ tsconfig.compile.json
┣ tsconfig.json
┗ iplik.kilit

En önemli dosyaları gözden geçirelim:

  • Server.ts : Uygulamayı çalıştırmak için gerekli tüm yapılandırmaların yapılandırıldığı ana sunucu yapılandırma dosyası
  • index.ts : Uygulamanın önyüklendiği kök dosya
  • src/config : Her Ts.ED projesi için yapılandırma klasörü
  • src/datasource : Seçilen veritabanı yönetim sistemi için yapılandırma
  • src/controllers/rest : Kontrolörler klasörü. Varsayılan olarak, Ts.ED, denetleyicilerdeki rotalara erişmek için /rest uç noktasını dinler

Veri kaynağını güncelleyin

Oluşturulan proje ile oluşturalım ve veritabanımıza bağlanalım. MySQL kabuğunu aşağıdaki komutla açın:

 mysql -u kök -p

Ardından, aşağıdaki komutla bir blog veritabanı oluşturun:

 VERİTABANI OLUŞTUR blogu;

Şimdi src/datasources/MysqlDatasource.ts dosyasını açın ve veri kaynağını aşağıdaki kod parçacığıyla güncelleyin:

 ...
dışa aktarma const MysqlDataSource = new DataSource({
  yazın: "mysql",
  varlıklar: [],
  ana bilgisayar: "yerel ana bilgisayar",
  bağlantı noktası: 3306,
  kullanıcı adı: "VERİTABANI KULLANICI Adınız",
  şifre: "VERİTABANI KULLANICI Adınız",
  veritabanı: "blog",
  senkronize et: doğru,
});
...

Yukarıdaki yapılandırmada, veri kaynağının değerini veritabanımızın değerine değiştirdik. Ts.ED'nin veritabanımız için tablolar oluşturmasına izin vermek için synchronize: true ekledik.

Varlık modelini oluşturun

Blog veritabanımız için bir varlık modeli oluşturalım. Aşağıdaki komutla bunu kolayca yapabiliriz:

 tsed oluşturmak

Sağlayıcılar listesinden model seçin. Komut, src klasöründe bir models/BlogService.ts dosyası oluşturmalıdır. Ardından, aşağıdaki kod parçasıyla bir model oluşturun:

 {Özellik}'i "@tsed/schema"dan içe aktarın;
{Column, Entity, PrimaryGeneratedColumn, CreateDateColumn, UpdateDateColumn}'u "typeorm"dan içe aktarın;

@Varlık()
dışa aktarma sınıfı BlogModel {
  @Mülk()
  @PrimaryGeneratedColumn()
  kimlik: dize;

  @Kolon()
  başlık: dize;

  @Kolon()
  içerik: dize;

  @Kolon()
  coverImage: dize;

  @Kolon()
  @CreateDateColumn()
  oluşturulduğunda: Tarih;

  @Kolon()
  @UpdateDateColumn()
  güncellenme Tarihi: Tarih;
}

Bir varlık oluşturmak için Entity ve Column dekoratörlerini içe aktardık. PrimaryGeneratedColumn varlık için bir birincil anahtar oluşturur ve CreateDateColumn ve UpdateDateColumn tarihi oluşturur, otomatik olarak oluşturur, tarihlendirir ve günceller.

Ardından, BlogModel veri kaynağındaki entities dizisinde kullanılabilir hale getirmeniz gerekir:

 dışa aktarma const MysqlDataSource = new DataSource({
  ...
  varlıklar: [BlogModel],
  ...
});

Multer'ı yapılandır

Şimdi Multer'ı, kullanıcıların veritabanına kaydedilen her blog için kapak resimlerini yüklemesine izin verecek şekilde yapılandıralım. Ts.ED, bu kurulum için konfigürasyona zaten sahiptir. Basitçe Server.ts dosyasına gidin ve aşağıdaki kod parçacığıyla Multer'ı yapılandırmalara ekleyin :

 ...
"multer" dan { diskStorage } içe aktarın;

...
@Yapılandırma({
  ...
  çok: {
    depolama: diskStorage({
      hedef: birleştirme(process.cwd(), "./public/uploads"),
      dosya adı: (req, dosya, cb) => {
        const ext = dosya.mimetype.split('/')[1];
        cb(null, `${generateName(15)}-${Date.now()}.${ext}`);
      }
    })
  },
  ...

Multer kullanarak dosya yüklemenin birkaç yolu vardır. Bu gösteri için dosyaları disk deposunda saklayacağız. Proje kurulumu sırasında Ts.ED tarafından bizim için otomatik olarak yüklenen diskStorage Multer'dan içe aktardık.

Daha sonra dosya sisteminde dosyanın sunucuda saklanacağı konumu belirledik ve bir generateName işlevi oluşturarak dosyanın dosya adını değiştirdik. generateName işlevi, yüklenen her dosya için 15 rastgele dize karakteri oluşturur ve dosya adına dosyanın yüklendiği tarihi ekler.

Şimdi, aşağıdaki kod parçacığıyla createName işlevini generateName :

 function createName(uzunluk: sayı) {
  izin ver = '';
  const karakterler = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const karakterlerUzunluk = karakterler.uzunluk;
  for (let i = 0; i < uzunluk; i++) {
    str += karakter.charAt(Math.floor(Math.random() * karakterUzunluk));
  }
  dönüş yolu;
}

Diğer Multer seçeneklerini Ts.ED belgelerinde görebilirsiniz.

Uygulama hizmetini oluşturun

Oluşturulan model varlığı ile aşağıdaki create komutunu kullanarak bir servis oluşturalım:

 tsed oluşturma hizmeti

Ardından hizmet blogunu adlandırın ve enter tuşuna basın. Ts.ED, bir BlogService.ts dosyasıyla services adlı başka bir klasör oluşturacaktır. Şimdi dosyayı aşağıdaki kod parçasıyla güncelleyin:

 { Enjekte Edilebilir } "@tsed/di" den içe aktarın;
{ Inject } dosyasını "@tsed/di"den içe aktarın;
{ MYSQL_DATA_SOURCE } dosyasını "../datasources/MySqlDataSource" içinden içe aktarın;
"typeorm"dan { DataSource } içe aktarın;
{ BlogModel } öğesini "../models/BlogModel" içinden içe aktarın;

@Enjekte edilebilir()
dışa aktarma sınıfı BlogService {
    yapıcı(@Inject(MYSQL_DATA_SOURCE) özel dataSource: DataSource) { }

    zaman uyumsuz getAll(): Söz<BlogModel[]> {
        dönüş bekle this.dataSource.getRepository(BlogModel).find();
    }

    zaman uyumsuz oluştur(blog: BlogModel): Söz<BlogModel> {
        dönüş this.dataSource.getRepository(BlogModel).save(blog);
    }


    zaman uyumsuz getById(id: dize): Söz <any> {
        dönüş this.dataSource.getTreeRepository(BlogModel).findOne({ burada: { id } });
    }

    zaman uyumsuz güncelleme (id: dize, blog: BlogModel): Söz <any> {
        dönüş this.dataSource.getRepository(BlogModel).update(id, blog);
    }

    zaman uyumsuz silme (kimlik: dize): Söz <any> {
        dönüş this.dataSource.getRepository(BlogModel).delete(id);
    }

}

Yukarıdaki kod parçasında, Inject dekoratörünü kullanarak veri kaynağımızı yapıcıya enjekte ettik. Orada, DataSource sınıfından getRepository yöntemine erişim sağlayan ve ardından veritabanımızda CRUD işlemlerini gerçekleştirmek için ihtiyaç duyduğumuz yöntemleri sağlayan bir örnek değişken oluşturduk.

Uygulama denetleyicileri oluşturun

Şimdi bu uygulama için oluşturduğumuz CRUD servisini kullanabilmek için API rotalarımıza ihtiyacımız var. Bunu yapmak için aşağıdaki komutla bir controller oluşturmamız gerekiyor:

 tsed oluşturma denetleyicisi

Denetleyici blog , tercih edilen yönetici olarak rest seçin, kök uç nokta olarak /blog seçin ve enter düğmesine basın. Ts.ED, denetleyicinin klasörü içinde bir BlogService dosyası oluşturacaktır.

Ardından, aşağıdaki kod parçacığıyla BlogService için denetleyici oluşturun:

 "@tsed/di" öğesinden { Controller, Inject } içe aktarın;
"@tsed/schema"dan { Al, Gönder, Koy, Sil } içe aktar;
{ BlogService } öğesini "src/services/BlogService" öğesinden içe aktarın;
{ BlogModel } öğesini "src/models/BlogModel" içinden içe aktarın;
"@tsed/platform-params" dan { BodyParams, PathParams } içe aktarın;
"@tsed/common"dan { MultipartFile, PlatformMulterFile } içe aktarın;

@Controller("/blog")
dışa aktarma sınıfı BlogController {
  yapıcı(@Inject(BlogService) özel blogService: BlogService) { }

  @Almak("/")
  get(): Söz<BlogModel[]> {
    this.blogService.getAll() döndür;
  }

  @Postalamak("/")
  create(@MultipartFile("file") dosyası: PlatformMulterFile, @BodyParams() blog: BlogModel): Söz<BlogModel> {
    blog.blogImage = dosya.dosyaadı;
    this.blogService.create(blog) döndür;
  }

  @Get("/:id")
  getOne(@PathParams("id") id: string): Promise<BlogModel> {
    this.blogService.getById(id) döndür;
  }

  @Put("/:id")
  update(@PathParams("id") kimliği: string, @BodyParams() blog: BlogModel): Söz<BlogModel> {
    this.blogService.update(id, blog);
  }

  @Delete("/:id")
  sil(@PathParams("id") id: string): Promise<BlogModel> {
    this.blogService.delete(id) döndür;
  }
}

Yukarıdaki kod parçacığında, BlogController BlogController BlogService sınıfını enjekte ettik ve sınıfa özel bir örnek oluşturarak BlogService içinde tanımlanan yönteme erişim sağladık.

Ardından GET , POST , PUT ve DELETE dekoratörlerini kullanarak uygulama için CRUD rotalarını tanımladık. Ts.ED bize PathParams ve BodyParams olmak üzere iki dekoratör daha sağlıyor. Bu iki dekoratör, istek gövdesinden ve istek parametrelerinden gelen verileri ayrıştırmamızı sağlar.

Ardından Multer ile dosya yüklemek için Ts.ED tarafından sağlanan MultipartFile ve PlatformMulterFile dekoratörlerini içe aktardık.

Statik dosyalar sunun

Uygulamamızdaki kapak resimlerini ve dosyaları sunmak için uygulamayı statik dosyalara hizmet edecek şekilde yapılandırmamız gerekiyor. Bunu, aşağıdaki kod parçacığıyla Server.ts dosyasında da yapacağız:

 ...
@Yapılandırma({
  ...
  statik: {
    "/statik": [
      {
        kök: `./public`,
        // İsteğe bağlı
        kanca: "$beforeRoutesInit" // Statiği beklenen kancaya yükleyin. Varsayılan: $afterRoutesInit
        // ... statik seçenekler
      }
    ]
  }
  ...

Ts.ED, statik dosyaları yapılandırmak için statics nesnesini kullanır. Bu nesne, gerekli bağımsız değişken olarak bir URL yolu alır. Böylece, statik dosyalara /static yolundan erişiriz. URL yolu ayrıca bir diziyi anahtar/değer çiftleri olarak alır. Bu dizide statik dosyaların konumunu belirledik. Bu gösteri için, onları birazdan oluşturacağımız ortak klasörde istiyoruz.

Şimdi, projenin kök dizininde bir public klasör oluşturun. Dokümanlarda daha fazla statik seçenek bulabilirsiniz.

Uygulamayı test edin

Şimdi Postman kullanarak uygulamamızı test edelim. Bundan önce, sunucuyu aşağıdaki komutla başlatın:

 iplik başlangıcı

Yukarıdaki komut, sunucuyu Ts.ED projeleri için yapılandırılan varsayılan bağlantı noktası olan 8083 numaralı bağlantı noktasında başlatacaktır. Ardından, Postman'i açın ve aşağıdaki ekran görüntüsünde gösterildiği gibi rota oluşturmayı test edin:

Postacı Testi Rota Oluştur

public olanı açar ve klasörleri yüklerseniz, uploads kapak resmini görmelisiniz:

Herkese Açık Yüklemeler Klasörü Kapak Resmi

Ardından, aşağıda gösterildiği gibi tüm blogları almak için get-all al yolunu test edin:

Test Tüm Rota Bloglarını Al

Diğer yolları denemekten çekinmeyin.

Çözüm

Bu eğitimde, basit bir blog veritabanı uygulaması oluşturarak Ts.ED'yi araştırdık. Ts.ED, ölçeklenebilir sunucu tarafı uygulamaları oluşturmaya yönelik modern bir Node.js çerçevesidir.

Ts.ED ile sunucu taraflı uygulamaları kolaylıkla ve hızla geliştirebilirsiniz. Herhangi bir ilk sunucu yapılandırması yapmak zorunda kalmadan web siteleri ve bloglar gibi küçük ölçekli uygulamalar oluşturabilir ve yönetebilirsiniz. Resmi belgelerden Ts.ED hakkında daha fazlasını okumaktan çekinmeyin. Mutlu kodlama!

LogRocket Blog'da ilk olarak Ts.ED ve MySQL kullanarak sunucu taraflı uygulama nasıl oluşturulur yazısı çıktı.