엔드 게임을 보았습니다. 심야에 끝나는 시간인데 만석. 대단해. 안녕하세요.

이 튜토리얼 Part5의 하위 페이지 네 번째입니다.
htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 그럼 / cs / ぇ r rn / se r ゔ r r / / xp rs s_ 때문에 js / ぢ sp ぁ y yn g_ data / Home _ Page

여기에서 catalog/에서 액세스하는 웹 페이지를 만드는 것 같습니다.

만들어야 할 것

①이미 기술하고 있는 컨트롤러 함수의 갱신
② 렌더링용 .pug 파일의 작성

catalog 루트 페이지 다시 쓰기

이 체트리얼은 Book에 대한 페이지 작성이므로 catalog/의 루트 페이지는 bookController.js에 쓰는 것 같습니다.
게다가 거기의 페이지를 이렇게 지정하고 있는 것은 routes/catalog.js의 전반에 써 있다router.get("/", book_controller.index); 이쪽의 기술.
127.0.0.1:3000/catalog/ 에 액세스하면 book_controller.index 함수로 날아가는 설정 같아요.

책의 index 페이지에 필요한 설명을 합니다.
이 페이지에는 이런 느낌.


・왼쪽에 메뉴 바(전회의 페이지로 쓴 사이드 바)
・우측은 고정 텍스트와 데이터베이스로부터 취득한 각 요소의 총수

그래서 데이터베이스에서는 각 테이블의 총수만 동적으로 취득할 수 있으면 좋을까라고 생각합니다.

여기의 처리는 동기화가 필요할 것 같습니다.
먼저 require에서 필요한 모델(book, author, genre, bookinstance)을 읽은 상태로 기술해 갑니다.
아, async도 잊지 않고 require합니다.

exports.index = function(req, res){
    async.parallel({
        book_count: function(callback){
            Book.countDocument({}, callback);
        },
        book_instance_available_count: function(callback){
            BookInstance.countDocument({status: "Available"}, callback)
        }
        //一部抜粋
    },
    function(err, results){
        res.render("index", {title: "Local Library Home", error: err, data: results})
    }
}

카운트하기 위해서는 모델에 준비되어 있는 countDocument라는 함수를 사용하면 좋을 것 같습니다.
첫 번째 인수는 쿼리입니까? status가 Available 의 것만을 카운트할 수도 있는 것 같습니다.

※python과 쓰는 방법이 다르기 때문에 조금 당황합니다(syntax error가 되어 버린다)

마지막으로 render 함수로 렌더링 템플릿에 값을 전달하여 끝.

index.pug

index 용 pug 파일입니다.
layout.pug를 상속합니다. (기술적으로는 확장인가?)

extends layout
block content

이제 상속 + content 부분만 바꾸는 것 같네요.

여기서 사용할 수 있는 변수는 title, error, data의 3개입니다.
data에는 countDocument의 값이 들어 있다고 생각합니다만 err에는 무엇이 들어 있는지 모릅니다. .
※요점 확인

이제 index.pug는 다음과 같습니다. 사경한 것입니다.

extends layout

block content
  h1= title
  p Welcome to #[em LocalLibrary], a very basic Express website developed as a tutorial example on the Mozilla Developer Network.

  h1 Dynamic content

  if error
    p Error getting dynamic content.
  else
    p The library has the following record counts:

    ul
      li #[strong Books:] !{data.book_count}
      li #[strong Copies:] !{data.book_instance_count}
      li #[strong Copies available:] !{data.book_instance_available_count} 
      li #[strong Authors:] !{data.author_count}
      li #[strong Genres:] !{data.genre_count}

※ 여기 근처의 설명은 이전 튜토리얼에도 있었지만 웃음

위의 페이지와 비교하면,,,
h1, p, li는 htmtl 태그처럼 보입니다.

#[]는 행에 포함된 태그일까요? 흠. 이해하기 어렵습니다.
em은 협력(이탤릭)
strong은 굵은 글씨처럼 보입니다.

if 분 후에는 들여쓰기가 있어 {}안의 것은 변수와 같습니다만title라든지 error라든지 없는 것은 왜,,.
=로 연결하는 것은 이렇게 안되면 안되는 것 같습니다.
o h1=title
o h1=title
xh1=title
x h1 = title

과연.
템플릿의 해설을 보고 있었을 때는 흠뻑 빠졌지만 풀어 보면 납득입니다.

계속