Actix-Web(Rust)으로 웹 페이지 만들기

개요
이 튜토리얼에서는 Rust 프로그래밍 언어를 기반으로 하는 안정적인 프레임워크인 actix를 사용하여 간단한 웹사이트를 구축할 것입니다.
간단한 웹사이트를 서점이라고 합니다. 책 색인을 위한 간단한 웹사이트입니다.

Rust는 젊은 언어입니다. Java 배경에서 온 것은 정말 대단했습니다. Rust를 선택했을 때 저는 그 언어와 사랑에 빠졌고 모든 것을 녹으로 구축하고 싶은 생각이 들었습니다.

웹사이트를 구축하기 위한 멋진 프레임워크가 Rust에 있지만 아직 단점이 없기 때문에 Actix를 선택합니다.

뛰어들어 화물(화물 새 서점)이 있는 빈 프로젝트를 만듭니다. 화물.toml을 열고 다음 종속성을 추가합니다.actix-web="3"
actix-files="0.4.0"
serde_json = "1.0.53"
handlebars = { version = "4.1.4", features = ["dir_source"] }

actix-web은 actix 웹 프레임워크에 액세스하는 데 도움이 됩니다.
actix-files는 프로젝트에 정적 파일을 추가하는 데 도움이 됩니다.
핸들바는 웹 페이지용 템플릿을 만드는 데 도움이 되는 템플릿 엔진입니다.

핸들바 사용하기
main.rs에 아래 코드를 붙여넣습니다.

use actix_files::{Files, NamedFile};
use actix_web::{web, App, HttpResponse, HttpServer, Result};
use handlebars::Handlebars;
use serde_json::json;

async fn index(hb: web::Data<Handlebars<'_>>) -> HttpResponse {
    let data = json!({
        "project_name": "Book Store",
        "books":[
            {
                "name":"Harry Potter",
                "author":"J K Rowlings",
                "image_path":"/static/image/download.jpeg"
            },
            {
                "name":"Lord of the ring",
                "author":"Tolken",
                "image_path": "/static/image/lord_of.jpeg"
            },
            {
                "name":"Americanah",
                "author":"Chimamada Adichie",
                "image_path":"/static/image/americanah.jpeg"
            },
            {
                "name":"Elon Musk",
                "author":"#####",
                "image_path":"/static/image/elon.jpeg"
            },
        ]


    });

    let body = hb.render("index", &data).unwrap();
    HttpResponse::Ok().body(body)


}


핸들바는 json을 사용하기 전에 로드하고 컴파일하는 데 도움이 됩니다. json으로 생성된 데이터는 우리 프로젝트에서 사용됩니다.

메인 함수에서 핸들바를 초기화하고 templates_directory를 등록해야 합니다.

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    let mut handlebars = Handlebars::new();
    handlebars
        .register_templates_directory(".html", "./static/")
        .unwrap();
    let handlebars_ref = web::Data::new(handlebars);

    println!("listening on port 8080");
    HttpServer::new(move || {
        App::new()
            .app_data(handlebars_ref.clone())
            .service(Files::new("/static", "static").show_files_listing())
            .route("/", web::get().to(index))
    })
    .bind("127.0.0.1:9090")?
    .run()
    .await
}


루트 폴더에 static이라는 디렉토리를 만들고 그 안에 이미지와 css 파일을 위한 두 개의 폴더를 만듭니다. 디렉토리 안에 index.html을 만들고 아래 코드를 붙여넣습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>{{project_name}}</title>
    <link rel="stylesheet" href="static/css/index.css" type="text/css">
  </head>
  <body>
    <h1>{{project_name}}</h1>
    <section class="books">
      {{#each books}}
        <article class="book">
          <h3>{{this.name}}</h3>
          <img src="{{this.image_path}}" />
            <h4>Author: {{this.author}}</h4>
        </article>
      {{/each}}
    </section>
  </body>
</html>


핸들바는 json에서 생성된 데이터를 html 템플릿으로 렌더링하는 데 도움이 되며 {{project_name}}가 프로젝트 이름이 됩니다. {{#each books}}는 json을 반복하여 각 색인에 대해 별도의 태그를 작성하지 않고도 책 색인을 생성하는 데 도움이 됩니다.

완료되면 터미널에서 화물 실행을 실행하고 127.0.0.1:9090으로 페이지에 액세스합니다.



github to download the full code으로 이동하십시오.

이 기사가 유용하고 $1 worth of cryptocurrency, you can do it here and I will really appreciate 으로 저에게 팁을 주고 싶다면 .

감사

좋은 웹페이지 즐겨찾기