基本样式测试
This commit is contained in:
78
main.go
78
main.go
@@ -4,73 +4,43 @@ import (
|
||||
"github.com/gin-gonic/gin"
|
||||
)
|
||||
|
||||
type Article struct {
|
||||
Title string
|
||||
Desc string
|
||||
Content string
|
||||
}
|
||||
|
||||
func main() {
|
||||
r := gin.Default()
|
||||
//html模板文件
|
||||
r.LoadHTMLGlob("templates/*")
|
||||
|
||||
// 静态资源映射
|
||||
r.Static("/static", "./static")
|
||||
|
||||
// 加载模板（支持多层目录）
|
||||
r.LoadHTMLGlob("templates/**/*")
|
||||
|
||||
// 路由
|
||||
r.GET("/", func(c *gin.Context) {
|
||||
c.String(200, "首页")
|
||||
})
|
||||
r.GET("/json", func(c *gin.Context) {
|
||||
c.JSON(200, map[string]interface{}{
|
||||
"success": "true",
|
||||
"msg": "你好gin",
|
||||
c.HTML(200, "pages/index.html", gin.H{
|
||||
"Title": "首页",
|
||||
})
|
||||
})
|
||||
|
||||
r.GET("/json2", func(c *gin.Context) {
|
||||
c.JSON(200, gin.H{
|
||||
"success": "true",
|
||||
"msg": "你好gin",
|
||||
r.GET("/about", func(c *gin.Context) {
|
||||
c.HTML(200, "pages/about.html", gin.H{
|
||||
"Title": "关于我们",
|
||||
})
|
||||
})
|
||||
|
||||
r.GET("/json3", func(c *gin.Context) {
|
||||
a := Article{
|
||||
Title: "我是一个标题",
|
||||
Desc: "描述",
|
||||
Content: "测试内容",
|
||||
}
|
||||
c.JSON(200, a)
|
||||
})
|
||||
|
||||
//响应jsonp请求 http://0.0.0.0:8080/jsonp?callback=xxx
|
||||
r.GET("/jsonp", func(c *gin.Context) {
|
||||
a := Article{
|
||||
Title: "我是一个标题",
|
||||
Desc: "描述",
|
||||
Content: "测试内容",
|
||||
}
|
||||
c.JSONP(200, a)
|
||||
})
|
||||
|
||||
r.GET("xml", func(c *gin.Context) {
|
||||
c.XML(200, gin.H{
|
||||
"success": "true",
|
||||
"msg": "你好gin，我是一个xml",
|
||||
r.GET("/articles", func(c *gin.Context) {
|
||||
c.HTML(200, "pages/articles.html", gin.H{
|
||||
"Title": "文章列表",
|
||||
"Articles": []map[string]string{
|
||||
{"Title": "Gin框架入门", "Date": "2025-11-23"},
|
||||
{"Title": "Go语言最佳实践", "Date": "2025-11-20"},
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
r.GET("news", func(c *gin.Context) {
|
||||
c.HTML(200, "news.html", gin.H{
|
||||
"title": "我是一个后台数据",
|
||||
r.GET("/contact", func(c *gin.Context) {
|
||||
c.HTML(200, "pages/contact.html", gin.H{
|
||||
"Title": "联系我们",
|
||||
})
|
||||
})
|
||||
|
||||
r.GET("goods", func(c *gin.Context) {
|
||||
c.HTML(200, "news.html", gin.H{
|
||||
"title": "我是一个商品页面",
|
||||
})
|
||||
})
|
||||
|
||||
err := r.Run()
|
||||
if err != nil {
|
||||
return
|
||||
} // listen and serve on 0.0.0.0:8080
|
||||
r.Run(":8080")
|
||||
}
|
||||
|
||||
65
static/style.css
Normal file
65
static/style.css
Normal file
@@ -0,0 +1,65 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
background: #f4f6f9;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: linear-gradient(90deg, #1e3c72, #2a5298);
|
||||
padding: 0.8rem 2rem;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.navbar .logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.navbar .logo:hover {
|
||||
transform: scale(1.1) rotate(-3deg);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.nav-links li a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.nav-links li a::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 2px;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
background-color: #ffcc00;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.nav-links li a:hover {
|
||||
color: #ffcc00;
|
||||
}
|
||||
.nav-links li a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2rem;
|
||||
}
|
||||
main h1, main h2 {
|
||||
color: #2a5298;
|
||||
}
|
||||
main p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>{{.title}}</h2>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,12 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>我是一个新闻界面</h2>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
17
templates/layout/base.html
Normal file
17
templates/layout/base.html
Normal file
@@ -0,0 +1,17 @@
|
||||
{{ define "layout/base.html" }}
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ block "title" . }}默认标题{{ end }}</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
{{ template "layout/navbar.html" . }}
|
||||
|
||||
<main>
|
||||
{{ block "content" . }}{{ end }}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
11
templates/layout/navbar.html
Normal file
11
templates/layout/navbar.html
Normal file
@@ -0,0 +1,11 @@
|
||||
{{ define "layout/navbar.html" }}
|
||||
<nav class="navbar">
|
||||
<div class="logo">🔥 NanNanWu</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/">首页</a></li>
|
||||
<li><a href="/about">关于我们</a></li>
|
||||
<li><a href="/articles">文章</a></li>
|
||||
<li><a href="/contact">联系</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{{ end }}
|
||||
@@ -1,12 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>{{.title}}</h2>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
9
templates/pages/index.html
Normal file
9
templates/pages/index.html
Normal file
@@ -0,0 +1,9 @@
|
||||
{{ define "pages/index.html" }}
|
||||
{{ template "layout/base.html" . }}
|
||||
|
||||
{{ block "title" . }}首页{{ end }}
|
||||
{{ block "content" . }}
|
||||
<h1>欢迎来到我的 Gin 网站</h1>
|
||||
<p>这里是首页内容，可以展示最新文章或公告。</p>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user