AdonisJS 알아보기: 모델 팩터리 및 에지 템플릿

트위터에서 나를 팔로우하세요:

모델 팩토리 대 데이터베이스 시딩

데이터베이스는 있지만 데이터가 없습니다. 이를 변경하는 한 가지 방법은 데이터베이스에 직접 데이터를 수동으로 입력하는 것입니다.

그러나 해당 데이터를 삭제하고 더 많은 것을 원하면 무엇이 추가됩니까? 매번 데이터베이스로 이동하는 것은 큰 시간 손실이 될 것이며 보안 문제가 될 수도 있습니다.

이를 수행하는 "프로"방법은 공장 및 파종기를 사용하는 것입니다. 이들의 차이점은 Model Factory 객체가 가짜 Model 데이터 작성자이고 Seeder는 하나의 테이블에서 실제 데이터를 생성해야 할 때 사용된다는 것입니다.

Model Factory의 예는 하나 이상의 가짜 사용자를 정의하고 생성하는 UserFactory입니다.

데이터베이스 시드의 예는 테이블 국가를 실제 국가 이름으로 채우는 CountrySeeder입니다. 그런 다음 시더는 예를 들어 테스트 단계 전 및/또는 프로덕션에 배포하기 전에 다른 시간에 실행할 수 있습니다.

우리의 작은 웹 앱에서. 테스트 목적으로 가짜 게시물을 만들어야 합니다. 이 경우 Model Factory가 우리의 솔루션이 될 것입니다.

모델 공장

Model Factory를 생성하려면 다음을 열어야 합니다: database/factories/index.ts

import Factory from '@ioc:Adonis/Lucid/Factory'
import Post from 'App/Models/Post'

export const PostFactory = Factory
  .define(Post, ({ faker }) => {
    return {
      title: faker.lorem.sentence(),
      content: faker.lorem.text(),
    }
  })
  .build()

따라서 Post 가짜 제목과 가짜 콘텐츠를 정의하는 새 Factory 개체를 만듭니다. 이 코드는 가짜 데이터를 생성하지 않으며 가짜 데이터가 생성되는 방식만 정의합니다.

데이터를 생성하려면 PostFactory.create() 또는 PostFactory.createMany(x)를 실행해야 합니다.

단순화를 위해 특정 경로를 방문할 때 해당 코드를 실행합니다.

start/routes.ts 파일을 열고 다음 경로를 추가해 보겠습니다.

Route:get('/create-posts', async () => {
    await PostFactory.createMany(5)
})

그래서 우리가 '/create-posts' 경로를 방문했을 때. PostFactory는 5개의 가짜 게시물을 생성합니다.

좋은. 이제 브라우저를 열고 가짜 게시물을 생성할/create-posts로 이동합니다.

게시물 테이블의 내용을 보려면 루트 '/' 인덱스 경로를 방문하여 게시물 생성을 확인할 수 있습니다.

public async index ({}: HttpContextContract) {
    const posts = await Post.all()
    return posts
  }

게시물 원시 데이터입니다. 해당 값을 올바르게 표시하는 보기를 만들어 보겠습니다.

Edge 템플릿 보기 생성

Adonis에는 이미 html/js 템플릿을 렌더링하는 모듈이 포함되어 있습니다. 그 모듈은 Edge라고 부릅니다. Edge 파일은 런타임 시 표현식 값으로 대체되는 표현식 자리 표시자가 있는 템플릿입니다.

개념을 이해하는 가장 좋은 방법은 개념을 만드는 것입니다. resources/views 아래에 post라는 폴더 이름을 만들고 post 아래에 index.edge라는 파일 이름을 만듭니다.

리소스/보기/게시물/index.edge

@each (post in posts)
   <h2>{{ post.title }}</h2>
   <p>{{ post.content }}</p>
   <hr>
@endeach

이 html Edge 템플릿 구문은 게시물 목록을 반복하며 각 게시물에 대해 게시물 제목과 게시물 콘텐츠를 표시합니다.


마지막 단계에서 이 템플릿을 표시하려면 PostsController 인덱스 작업을 수정해야 합니다.

public async index (ctx: HttpContextContract) {
    const posts = await Post.all()
    return ctx.view.render('post/index', {posts})
}

렌더링 방법 구문에 유의하십시오. render(template_name, {data_object})

3부 끝

오늘은 여기까지입니다. 더 많은 Adonis를 기대해 주세요.

아무것도 놓치지 않는 가장 좋은 방법은 Twitter에서 저를 팔로우하는 것입니다.