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:
2. Idea Reka Bentuk
Apabila melaksanakan fungsi dinding foto, kita perlu mengambil kira aspek berikut:
3. Pelaksanaan Teknikal
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
<!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>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("上传成功"))
}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)
}<!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>Atas ialah kandungan terperinci Golang melaksanakan dinding foto. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk menyelesaikan ralat pengecam mysql yang tidak sah
Apakah awan peribadi?
jarak huruf
Bagaimana untuk menyelesaikan tidak tersedia
Cara menggunakan spyder
Tukar warna latar belakang perkataan kepada putih
Senarai harga peringkat Douyin 1-75
Apa yang perlu dilakukan jika halaman web tidak boleh diakses
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
