goframe开发一个企业网站 前端界面 拆分界面7
将页面拆出几个公用部分
在resource/template/front创建meta.html header.html footer.html
meta.html
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>{{.configs}} {{.configs.title}}|{{.configs.webname}}</title>
<meta name="keywords" content="{{.configs.keywords}}">
<meta name="description" content="{{.configs.description}}">
<!-- Favicons -->
<!-- Google Fonts -->
<link href="/resource/front/static/css/css2_swap.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="">
<link href="/resource/front/static/css/css2-Comfortaawght700_swap.css" rel="stylesheet">
<link href="/resource/front/static/css/css2-Poppinswght300400_swap.css" rel="stylesheet">
<link href="/resource/front/static/css/css2-Poppinswght100200300400_swap.css" rel="stylesheet">
<link href="/resource/front/static/css/css2-Robotoitalwght0100030004000500070009001900_swap.css" rel="stylesheet">
<link href="/resource/front/static/css/css2-Playball_swap.css" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="/resource/front/static/css/font-awesome.min.css" rel="stylesheet">
<link href="/resource/front/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/resource/front/static/css/bootstrap-icons.css" rel="stylesheet">
<link href="/resource/front/static/css/aos.css" rel="stylesheet">
<link href="/resource/front/static/css/glightbox.min.css" rel="stylesheet">
<link href="/resource/front/static/css/swiper-bundle.min.css" rel="stylesheet">
<!-- Main CSS File -->
<link href="/resource/front/static/css/styles.css" rel="stylesheet">
</head>
header.html
<div id="preloader"></div>
<header id="header" class="single-page-header header d-flex align-items-center">
<div class="container container-xl d-flex align-items-center justify-content-between">
<a href="" class="logo d-flex align-items-center">
<h1><span></span><span>{{.configs.webname}}</span></h1>
</a>
<nav id="navbar" class="navbar">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/service">服务</a></li>
<li class="dropdown"><a href="#"><span>项目</span>
<i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="/projects">Projects</a></li>
<li><a href="/project-details">Project Details</a></li>
</ul>
</li>
<li><a href="/about">关于</a></li>
<li><a href="/price">价格</a></li>
<li><a href="/testimonials">客户评价</a></li>
<li class="dropdown"><a href="#"><span>用户</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="/login">登陆</a></li>
<li><a href="/register">注册</a></li>
<li><a href="/faq">常见问题</a></li>
<li><a href="/team">团队</a></li>
<li><a href="/coming-soon">Coming Soon</a></li>
<li><a href="/terms">服务条款</a></li>
<li><a href="/policy">隐私条款</a></li>
<li><a href="/sample">Sample Page</a></li>
</ul>
</li>
<li><a href="/blogs">新闻</a></li>
<li><a href="/contact" class="main-button">联系我们</a></li>
</ul>
</nav><!-- navbar-->
<i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
<i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
</div>
</header><!-- End Header -->
footer.html
<!-- Footer -->
<footer id="footer" class="main-footer">
<div class="container">
<div class="footer-content">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 footer-column">
<div class="logo-widget footer-widget">
<a href="" class="logo d-flex align-items-center">
<h1><span>{{.configs.webname}}</span></h1>
</a>
<div class="text">
<p>Lorem ipsum dolor amet consectetur adi pisicing elit sed eiusm tempor incididunt ut labore dolore magna aliqua enim ad minim veniam quis.nostrud exercita.laboris nisi ut aliquip ea commodo conse quatuis aute irure.</p>
</div>
<ul class="footer-social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 offset-lg-2 footer-column">
<div class="service-widget footer-widget">
<div class="footer-title">Services</div>
<ul class="list">
<li><a href="#">Web Design</a></li>
<li><a href="#">App Developemnt</a></li>
<li><a href="#">Cloud Services</a></li>
<li><a href="#">Domain adn Hosting</a></li>
<li><a href="#">Seo Optimization</a></li>
<li><a href="#">Social Media</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 footer-column">
<div class="contact-widget footer-widget">
<div class="footer-title">Contacts</div>
<div class="text">
<p>{{.configs.province}}</p>
<p>{{.configs.address}}</p>
<p>{{.configs.phone}}</p>
<p>{{.configs.email}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- main-footer end -->
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 column">
<div class="copyright">Copyright © 2024.{{.configs.companyname}} All rights reserved.</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 column">
<ul class="footer-nav">
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Footer -->
这样修改不用每页都去改写相关的部分。公用部分减少了代码编写的繁杂。
将前端公用的数据写入到redis
好的，我来帮您组织这个完整的配置中间件实现。
- 首先创建
internal/logic/config/config.go:
package config
import (
"context"
"github.com/gogf/gf/v2/frame/g"
)
type sConfig struct{}
var Service = new(sConfig)
// GetConfigs 获取所有配置
func (s *sConfig) GetConfigs(ctx context.Context) (g.Map, error) {
// 从Redis获取配置
configs, err := g.Redis().Do(ctx, "HGETALL", "web_config")
if err != nil {
return nil, err
}
// 如果Redis中没有数据，从数据库获取并存入Redis
if configs.IsEmpty() {
return s.syncConfigsToRedis(ctx)
}
return configs.Map(), nil
}
// syncConfigsToRedis 同步配置到Redis
func (s *sConfig) syncConfigsToRedis(ctx context.Context) (g.Map, error) {
// 从数据库获取配置
var configs g.Map
err := g.DB().Model("web_config").Scan(&configs)
if err != nil {
return nil, err
}
// 存入Redis
if len(configs) > 0 {
_, err = g.Redis().Do(ctx, "HMSET", "web_config", configs)
if err != nil {
return nil, err
}
// 设置过期时间（例如24小时）
_, err = g.Redis().Do(ctx, "EXPIRE", "web_config", 24*3600)
if err != nil {
return nil, err
}
}
return configs, nil
}
- 创建
internal/middleware/config.go:
package middleware
import (
"web/internal/logic/config"
"github.com/gogf/gf/v2/frame/g"
"github.com/gogf/gf/v2/net/ghttp"
)
func Config(r *ghttp.Request) {
ctx := r.GetCtx()
configs, err := config.Service.GetConfigs(ctx)
if err != nil {
r.Response.WriteJson(g.Map{
"code": -1,
"message": err.Error(),
})
return
}
// 将配置存储到请求中，供后续使用
r.SetCtxVar("configs", configs)
r.Middleware.Next()
}
- 在
cmd/cmd.go中注册中间件:
package cmd
import (
"web/internal/middleware"
"github.com/gogf/gf/v2/frame/g"
"github.com/gogf/gf/v2/net/ghttp"
)
func initRouter() {
s := g.Server()
// 注册全局中间件
s.Use(middleware.Config)
// ... 其他路由配置 ...
}
- 在控制器中使用配置:
package front
import (
"github.com/gogf/gf/v2/frame/g"
"github.com/gogf/gf/v2/container/gvar"
)
type Controller struct{}
func (c *Controller) getConfigs(ctx g.Ctx) g.Map {
configs := g.RequestFromCtx(ctx).GetCtxVar("configs")
return configs.Map()
}
功能说明：
-
配置服务层 (logic/config)
- 提供配置获取的核心逻辑
- 实现 Redis 缓存机制
- 当 Redis 无数据时自动从数据库同步
- 支持配置的自动更新
-
中间件 (middleware/config)
- 在每个请求开始时加载配置
- 将配置信息注入到请求上下文
- 处理错误情况并返回适当的响应
-
路由注册 (cmd/cmd.go)
- 全局注册配置中间件
- 确保所有请求都能访问配置信息
使用方式：
- 在模板中使用：
<title>{{.configs.title}}</title>
<meta name="keywords" content="{{.configs.keywords}}">
- 在控制器中使用：
configs := g.RequestFromCtx(ctx).GetCtxVar("configs").Map()
title := configs["title"]
注意事项：
- 确保 Redis 配置正确
- 数据库中需要有对应的 web_config 表
- 建议添加配置更新接口，更新后清除 Redis 缓存
- 可以根据需要调整 Redis 缓存时间
这样的设计可以：
- 减少数据库访问压力
- 提高配置访问速度
- 保持配置的一致性
- 方便在整个应用中使用配置