집 > 기사 > 백엔드 개발 > Golang은 포토월을 구현합니다.

Golang은 포토월을 구현합니다.

WBOY원래의: 2023-05-13 10:36:07494검색

모바일 인터넷이 대중화되면서 사진에 대한 사람들의 수요가 늘어나고 있습니다. 행사든, 여행이든, 파티든 사진 촬영은 빼놓을 수 없습니다. 이 사진들을 어떻게 전시할 것인가도 관심사가 되었습니다. 포토월 기능을 구현하는 어플리케이션이 나왔습니다. 오늘은 golang 언어를 이용하여 포토월을 구현하는 과정을 소개하겠습니다.

1. golang 언어의 특징

golang은 Google에서 개발한 오픈 소스 언어입니다. 주요 기능은 다음과 같습니다:

효율성: Golang의 컴파일 속도는 매우 빠르며 C++ 및 Java에 비해 상당한 이점이 있습니다.
메모리 관리: Golang의 메모리 관리는 컴파일러에 의해 자동으로 완료되므로 프로그래머가 수동으로 메모리를 관리할 필요가 없습니다.
동시 프로그래밍: golang은 동시 프로그래밍에 대한 강력한 지원을 제공하므로 멀티 코어 CPU 또는 여러 서버의 경우 애플리케이션 성능을 더 잘 발휘할 수 있습니다.
단순성: golang 언어의 구문은 간결하고 이해하기 쉽기 때문에 프로그래머가 더 빠르게 시작할 수 있습니다.

2. 디자인 아이디어

포토월 기능을 구현할 때 다음 측면을 고려해야 합니다.

사진 업로드: 사용자는 자신의 사진을 업로드할 수 있어야 하며, 또한 다음을 수행할 수 있어야 합니다. 쉽게 분류하고 표시할 수 있도록 사진에 태그를 지정하세요.
사진 표시: 업로드된 사진은 태그별로 분류되어 표시되어야 하며, 사용자는 태그를 선택하여 볼 수 있습니다.
데이터베이스 저장: 포토월은 사용자가 업로드한 사진 데이터를 저장해야 하며, 데이터 저장을 위해 데이터베이스를 사용해야 합니다.

3. 기술적 구현

환경 설정

시작하기 전에 먼저 환경을 준비해야 합니다. golang 공식 웹사이트에서 golang 설치 패키지를 다운로드할 수 있습니다. 설치가 완료된 후 터미널에 다음 코드를 입력하여 설치 성공 여부를 확인할 수 있습니다.

$ go version

Database design

저장할 데이터베이스를 설계해야 합니다. 사용자가 업로드한 이미지이므로 다음 필드를 포함하는 테이블을 디자인해야 합니다.

id(사진 ID, 기본 키)
name(사진 이름)
path(사진 경로, 사진이 저장되는 경로) 서버)
tag(태그)

Above 필드는 우리가 저장해야 하는 사진 정보입니다.

사진 업로드

사용자가 자유롭게 사진을 업로드하고 태그할 수 있도록 클라이언트에 사진을 업로드하는 기능을 구현해야 합니다. 먼저 HTML5 File API를 사용하여 구현할 수 있는 프런트 엔드 페이지에 사진 업로드 기능을 구현해야 합니다. 다음은 코드 예시입니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>照片上传</title>
    </head>
    <body>
        <input type="file" id="file">
        <input type="text" id="tag">
        <button onclick="upload()">上传</button>
    </body>
    <script>
        function upload() {
            var file = document.getElementById("file").files[0];
            var tag = document.getElementById("tag").value;
            var formData = new FormData();
            formData.append("file", file);
            formData.append("tag", tag);
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/upload", true);
            xhr.onload = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert("上传成功");
                } else {
                    alert("上传失败");
                }
            }
            xhr.send(formData);
        }
    </script>
</html>

서버 측에서는 golang에서 제공하는 http 패키지를 사용하여 사진 업로드 기능을 구현해야 합니다. 다음은 샘플 코드입니다.

func upload(w http.ResponseWriter, r *http.Request) {
    file, handler, err := r.FormFile("file")
    if err != nil {
        fmt.Println(err)
        return
    }
    defer file.Close()
    tag := r.FormValue("tag")
    fileName := handler.Filename
    f, err := os.OpenFile("./upload/"+fileName, os.O_WRONLY|os.O_CREATE, 0666)
    if err != nil {
        fmt.Println(err)
        return
    }
    defer f.Close()
    io.Copy(f, file)
    insertData(fileName, "./upload/"+fileName, tag)
    w.Write([]byte("上传成功"))
}

위 코드에서는 os.OpenFile()을 사용하여 업로드된 사진을 서버의 로컬 디스크에 저장한 후, 사진 정보를 데이터베이스에 삽입합니다.

사진 표시

사용자가 업로드한 사진의 태그를 기준으로 카테고리별로 사진을 표시합니다. 서버 측에서는 데이터베이스를 쿼리하고, 특정 태그로 사진을 필터링하고, 표시를 위해 클라이언트에 반환해야 합니다. 다음은 샘플 코드입니다.

func getPhotos(w http.ResponseWriter, r *http.Request) {
    tag := r.FormValue("tag")
    var photos []Photo
    if tag == "" {
        db.Find(&photos)
    } else {
        db.Where("tag=?", tag).Find(&photos)
    }
    result := make([]string, len(photos))
    for i, photo := range photos {
        result[i] = photo.Path
    }
    jsonBytes, err := json.Marshal(result)
    if err != nil {
        fmt.Println(err)
        return
    }
    w.Write(jsonBytes)
}

위 코드에서는 먼저 사용자가 요청한 태그를 기반으로 데이터베이스를 쿼리하고 조건에 맞는 사진 경로 목록을 얻습니다. 그런 다음 사진 경로 목록을 json 형식으로 변환하여 클라이언트에 반환합니다.

프런트 엔드 페이지에서 Masonry.js 라이브러리를 사용하여 포토 월의 레이아웃을 구현할 수 있습니다. 다음은 샘플 코드입니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>照片墙</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
        <style>
            .photo {
                width: 200px;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <input type="text" id="tag">
        <button onclick="getPhotos()">搜索</button>
        <div id="container">
            <div class="grid-sizer"></div>
        </div>
    </body>
    <script>
        function getPhotos() {
            var tag = document.getElementById("tag").value;
            $.ajax({
                url: "/getPhotos",
                type: "GET",
                data: {"tag": tag},
                success: function (data) {
                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        html += '<div class="photo"><img src="' + data[i] + '"></div>';
                    }
                    $("#container").html(html);
                    var $container = $('#container');
                    $container.imagesLoaded(function () {
                        $container.masonry({
                            itemSelector: ".photo",
                            columnWidth: ".grid-sizer",
                            gutter: 10
                        });
                    });
                }
            });
        }
    </script>
</html>

클라이언트에서는 사진 목록을 가져오기 위해 ajax 요청을 보냅니다. 지정된 태그의 그런 다음 사진 목록이 사진 노드에 동적으로 생성되고 Masonry.js 라이브러리를 사용하여 사진 벽 스타일 레이아웃을 구현합니다.

5. 요약

이번 구현에서는 golang 언어를 사용하여 포토월 기능을 구현했습니다. 사진을 업로드하고 표시하는 프로세스를 구현함으로써 파일 작업 및 데이터베이스 작업에 대한 golang 언어의 지원에 대해 배웠습니다. 신흥 프로그래밍 언어인 golang은 구문 단순성과 효율성 측면에서 이점을 가질 뿐만 아니라 동시 프로그래밍을 지원하며 높은 동시성과 대용량 데이터를 처리하는 애플리케이션 시나리오에서 고유한 위치를 차지합니다. 앞으로도 우리는 계속해서 golang 언어를 깊이 있게 배우고, 탐구하고, 적용할 수 있습니다.

위 내용은 Golang은 포토월을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：centos 7 golang 설치다음 기사：centos 7 golang 설치