Rumah > Artikel > pembangunan bahagian belakang > Golang melaksanakan dinding foto

Golang melaksanakan dinding foto

WBOYasal: 2023-05-13 10:36:07546semak imbas

Dengan populariti Internet mudah alih, permintaan orang ramai untuk foto semakin meningkat. Sama ada acara, perjalanan atau parti, mengambil gambar adalah amat diperlukan. Cara memaparkan foto ini juga menjadi kebimbangan. Satu aplikasi yang melaksanakan fungsi dinding foto telah wujud Hari ini kami akan memperkenalkan proses pelaksanaan dinding foto menggunakan bahasa golang.

1. Ciri bahasa Golang

golang ialah bahasa sumber terbuka yang dibangunkan oleh Google. Ciri-ciri utama adalah seperti berikut:

Kecekapan: Kelajuan kompilasi Golang sangat pantas dan mempunyai kelebihan yang ketara berbanding dengan C++ dan Java.
Pengurusan memori: Pengurusan memori Golang dilengkapkan secara automatik oleh pengkompil dan pengaturcara tidak perlu mengurus memori secara manual.
Pengaturcaraan serentak: golang menyediakan sokongan kuat untuk pengaturcaraan serentak, yang boleh memaksimumkan prestasi aplikasi dengan lebih baik dalam kes CPU berbilang teras atau berbilang pelayan.
Kesederhanaan: Sintaks bahasa golang adalah ringkas dan mudah difahami, membolehkan pengaturcara bermula dengan lebih pantas.

2. Idea Reka Bentuk

Apabila melaksanakan fungsi dinding foto, kita perlu mengambil kira aspek berikut:

Muat naik foto: Pengguna perlu dapat Apabila memuat naik foto anda sendiri, anda juga perlu boleh menandai foto untuk pengelasan dan paparan yang mudah.
Paparan foto: Foto yang dimuat naik hendaklah dikelaskan dan dipaparkan mengikut teg, dan pengguna boleh memilih teg untuk dilihat.
Storan pangkalan data: Dinding foto perlu menyimpan data foto yang dimuat naik oleh pengguna, dan kami perlu menggunakan pangkalan data untuk penyimpanan data.

3. Pelaksanaan Teknikal

Persediaan Alam Sekitar

Sebelum kita mula, kita perlu menyediakan persekitaran. Kami boleh memuat turun pakej pemasangan golang dari laman web rasmi golang Selepas pemasangan selesai, masukkan kod berikut dalam terminal untuk mengesahkan sama ada pemasangan berjaya:

$ go version

Reka bentuk pangkalan data

Kami memerlukan Reka bentuk pangkalan data untuk menyimpan imej yang dimuat naik oleh pengguna, jadi kami perlu mereka bentuk jadual yang mengandungi medan berikut:

nama (nama foto)
tag (tag)

Medan di atas ialah maklumat foto yang perlu kami simpan.

Kami perlu melaksanakan fungsi memuat naik foto pada klien supaya pengguna bebas memuat naik foto dan menandakannya. Pertama, kita perlu melaksanakan fungsi muat naik foto pada halaman hujung hadapan, yang boleh dilaksanakan menggunakan API Fail HTML5. Berikut ialah contoh kod:

<!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>

Di bahagian pelayan, kita perlu menggunakan pakej http yang disediakan oleh golang untuk melaksanakan fungsi muat naik foto. Berikut ialah contoh kod:

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("上传成功"))
}

Dalam kod di atas, kami menggunakan os.OpenFile() untuk menyimpan foto yang dimuat naik pada cakera setempat pelayan, dan kemudian memasukkan maklumat foto ke dalam pangkalan data.

Kami memaparkan foto dalam kategori berdasarkan tag foto yang dimuat naik oleh pengguna. Di bahagian pelayan, kita perlu menanyakan pangkalan data, menapis foto dengan tag tertentu, dan mengembalikannya kepada pelanggan untuk paparan. Berikut ialah contoh kod:

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)
}

Dalam kod di atas, kami mula-mula menanyakan pangkalan data berdasarkan teg yang diminta oleh pengguna dan mendapatkan senarai laluan foto yang memenuhi syarat. Kemudian tukar senarai laluan foto ke dalam format json dan kembalikan kepada klien.

Di halaman hadapan, kami boleh menggunakan perpustakaan Masonry.js untuk melaksanakan reka letak dinding foto Berikut ialah kod sampel:

<!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>

Dalam pelanggan, kami menghantar permintaan ajax untuk mendapatkan senarai foto tag yang ditentukan. Kemudian senarai foto dijana secara dinamik ke dalam nod foto dan perpustakaan Masonry.js digunakan untuk melaksanakan reka letak gaya dinding foto.

5. Ringkasan

Dalam pelaksanaan ini, kami menggunakan bahasa golang untuk melaksanakan fungsi dinding foto. Dengan melaksanakan proses memuat naik dan memaparkan foto, kami mengetahui tentang sokongan bahasa golang untuk operasi fail dan operasi pangkalan data. Sebagai bahasa pengaturcaraan yang baru muncul, golang bukan sahaja mempunyai kelebihan dalam kesederhanaan dan kecekapan sintaks, tetapi juga menyokong pengaturcaraan serentak, dan mempunyai tempat tersendiri dalam senario aplikasi yang menangani konkurensi tinggi dan jumlah data yang besar. Pada masa hadapan, kita boleh terus belajar, meneroka dan mengaplikasikan bahasa golang secara mendalam.

Atas ialah kandungan terperinci Golang melaksanakan dinding foto. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Centos 7 pasang golangArtikel seterusnya：Centos 7 pasang golang

Artikel berkaitan

Lihat lagi