使用Go语言创建HTTP服务器并展示网页

使用Go语言创建一个简单的服务器时可以先建立一个项目根目录，随后在根目录中建立一个用于存放静态文件（HTML/CSS/JavaScript）的文件夹 GGboy，接下来输入命令初始化Go模块

go mod init GGboy // 项目名称是 GGboy

在出现 go.mod 文件后即可开始编写 main.go 文件，该文件用于创建和启动HTTP服务器

// main.go

package main

import (
	"log"      // 记录日志信息的包
	"net/http" // 网络请求包
)

func main() {
	// 定义静态文件目录, 用来存放.html和.css、.javascript文件的文件夹
	dir := "C:\\.......\\GGboy"

	// 设置路由
	http.Handle("/", http.FileServer(http.Dir(dir)))

	// 打开8080端口
	log.Println("打开端口:8080")
	if err := http.ListenAndServe(":8080", nil); err != nil {
		log.Fatal(err)
	}
}

编写好后即可输入命令运行HTTP服务器，但目前前端页面还没有写，项目还无法运行。

接下在GGboy文件夹中创建 index.html, 编写酷炫的HTML页面，在页面中插入图片及Go语言介绍，为字体进行css优化

<!-- index.html -->
<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>GGboy</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <header>  
        <h1 class="colorful-title">欧耶!原来是GGboy</h1>  
    </header>  
    <main>  
        <section class="image-gallery">  
        </section> 
        <section class="character-info">  
            <h2>猪猪侠介绍</h2>  
            <p id="pigHeroIntro">猪猪侠是一个勇敢而聪明的超级英雄，他总是勇敢地面对挑战，用他的智慧和力量保护他的朋友和家园。他有一颗善良的心，总是乐于助人，深受大家的喜爱。</p>  
            <h3>Go语言介绍</h3>  
            <p id="goLangIntro">  
                Go语言是一种由猪猪侠新的语言，一种并发的、带垃圾回收的、快速编译的语言。它具有以下特点：  
                <br>  
                1. 它可以在一台计算机上用几秒钟的时间编译一个大型的Go程序。  
                <br>  
                2. Go语言为软件构造提供了一种模型，它使依赖分析更加容易，且避免了大部分C风格include文件与库的开头。  
                <br>  
                3. Go语言是静态类型的语言，它的类型系统没有层级。因此用户不需要在定义类型之间的关系上花费时间，这样感觉起来比典型的面向对象语言更轻量级。  
                <br>  
                4. Go语言完全是垃圾回收型的语言，并为并发执行与通信提供了基本的支持。  
                <br>  
                按照其设计，Go打算为多核机器上系统软件的构造提供一种方法。  
                <br>  
                Go语言是一种猪猪型语言，它结合了解释型语言的游刃有余，动态类型语言的开发效率，以及静态类型的安全性。它也打算成为现代的，支持网络与多核计算的语言。要满足这些目标，需要解决一些语言上的问题：一个富有表达能力但轻量级的类型系统，并发与垃圾回收机制，严格的依赖规范等等。这些无法通过库或工具解决好，因此Go也就应运而生了。  
            </p>  
        </section> 
    </main>  
    <script src="script.js"></script>
    <button onclick="window.location.href='https://www.csdn.net/';">快来点击小猪猪</button> 
</body>  
</html>

在同文件夹中创建 script.js 文件，用来插入图片，在图片无法加载时显示错误提示

// script.js
document.addEventListener('DOMContentLoaded', function() {  
    const imageGallery = document.querySelector('.image-gallery');  
    const imageUrls = [  
        'https://tse3-mm.cn.bing.net/th/id/OIP-C.X7-Eyw-eFgdmIMxulVXRfAHaHa?rs=1&pid=ImgDetMain',  
        'https://tse4-mm.cn.bing.net/th/id/OIP-C.lDpdCQhVNxV6HO8qkgb3cwHaHD?w=510&h=486&rs=1&pid=ImgDetMain',  
        'https://tse2-mm.cn.bing.net/th/id/OIP-C.wLioQHhuKBlwpNl24hTLZwAAAA?w=400&h=408&rs=1&pid=ImgDetMain',  
        'https://tse1-mm.cn.bing.net/th/id/OIP-C.yTP33CZBMdATDzYMH58QyQHaHa?rs=1&pid=ImgDetMain'
    ];  
  
    imageUrls.forEach(function(imageUrl) {  
        const img = document.createElement('img');  
        img.src = imageUrl;  
        img.alt = 'GGboy靓照';  
        imageGallery.appendChild(img);  
    });  
});

在同文件夹中创建 styles.css 文件，用于优化图片及页面中的字体

/* styles.css */

body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 0;  
    background-color: #f2f2f2;  
}  
  
header {  
    background-color: #333;  
    color: white;  
    text-align: center;  
    padding: 20px;  
}  

@keyframes blink {  
    0% { opacity: 1; }  
    50% { opacity: 0; }  
    100% { opacity: 1; }  
}
  
.colorful-title {  
    font-size: 48px;  
    text-transform: uppercase;  
    letter-spacing: 2px;  
    animation: color-change 3s infinite;  
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);  
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent; 
    color: transparent;   
    animation: blink 1s linear infinite;
}  
  
@keyframes color-change {  
    0% {background-position: 0 0;}  
    50% {background-position: 100% 0;}  
    100% {background-position: 0 0;}  
}  
  

.image-gallery {  
    display: flex;  
    justify-content: space-between;
    align-items: center; 
    flex-wrap: nowrap; 
    padding: 10px; 
}  
  
.image-gallery img {  
    flex: 0 0 auto; 
    max-width: 20%; 
    margin: 0 10px; 
}

@keyframes colorChange {  
    0% { color: #ff0000; }
    20% { color: #00ff00; } 
    40% { color: #0000ff; } 
    60% { color: #ffff00; } 
    80% { color: #ff00ff; } 
    100% { color: #ff0000; } 
}  
  
#goLangIntro {  
    font-family: 'Arial', sans-serif;  
    font-size: 16px;  
    line-height: 1.6;  
    color: #333; 
    text-align: justify;  
    animation: colorChange 0.5s linear infinite;  
}  
  
#pigHeroIntro {  
    font-family: 'Arial', sans-serif;  
    font-size: 16px;  
    line-height: 1.6;  
    color: #333; 
    text-align: justify;  
    animation: colorChange 0.5s linear infinite;  
}

项目结构如下