使用Go语言创建HTTP服务器并展示网页-编程知识

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

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

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

// main.gopackage mainimport ("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;  
}

项目结构如下