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 &copy; 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

好的,我来帮您组织这个完整的配置中间件实现。

  1. 首先创建 internal/logic/config/config.go:
package configimport ("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中没有数据,从数据库获取并存入Redisif 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.Maperr := g.DB().Model("web_config").Scan(&configs)if err != nil {return nil, err}// 存入Redisif 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
}
  1. 创建 internal/middleware/config.go:
package middlewareimport ("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()
}
  1. cmd/cmd.go 中注册中间件:
package cmdimport ("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)// ... 其他路由配置 ...
}
  1. 在控制器中使用配置:
package frontimport ("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()
}

功能说明:

  1. 配置服务层 (logic/config)

    • 提供配置获取的核心逻辑
    • 实现 Redis 缓存机制
    • 当 Redis 无数据时自动从数据库同步
    • 支持配置的自动更新
  2. 中间件 (middleware/config)

    • 在每个请求开始时加载配置
    • 将配置信息注入到请求上下文
    • 处理错误情况并返回适当的响应
  3. 路由注册 (cmd/cmd.go)

    • 全局注册配置中间件
    • 确保所有请求都能访问配置信息

使用方式:

  1. 在模板中使用:
<title>{{.configs.title}}</title>
<meta name="keywords" content="{{.configs.keywords}}">
  1. 在控制器中使用:
configs := g.RequestFromCtx(ctx).GetCtxVar("configs").Map()
title := configs["title"]

注意事项:

  1. 确保 Redis 配置正确
  2. 数据库中需要有对应的 web_config 表
  3. 建议添加配置更新接口,更新后清除 Redis 缓存
  4. 可以根据需要调整 Redis 缓存时间

这样的设计可以:

  • 减少数据库访问压力
  • 提高配置访问速度
  • 保持配置的一致性
  • 方便在整个应用中使用配置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1309.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

充电宝哪个最好最耐用?2024盘点五款优质充电宝,附选购指南!

充电宝哪个最好最耐用?在电子设备日益普及的今天&#xff0c;充电宝成为了我们生活中的必需品&#xff0c;它不仅能够解决手机电量不足的燃眉之急&#xff0c;更是旅行、工作时的得力助手。然而&#xff0c;面对市场上众多品牌和型号的充电宝&#xff0c;如何挑选出既优质又耐…

五指cms安装

我在安装五指cms的过程中发现一个问题&#xff0c;我看到的大部分的安装指导并没有详细的告诉大家该怎样做。所以我写这篇博客来进行一个比较详细的指导。 第一步&#xff1a;解压我们的wuzhicms文件并将其移动到phpstudy的WWW文件目录下。 第二步&#xff1a; 在phpstudy配置…

新手学习大模型(LLM),应该从哪个模型开始

建议先从主流的Qwen2、Llama3.1上手&#xff0c;先快速体验提示词工程&#xff0c;然后再学习LLM模型架构&#xff0c;尝试RAG&#xff0c;跑LORA微调脚本。 进一步的学习目标: 学习如何从零训练大模型(1B左右规模&#xff0c;预训练SFTDPO)&#xff0c;打通整个流程。 钻研…

什么开放式耳机好用?开放式耳机品牌十大排名揭秘误区

对于很多消费者来说&#xff0c;了解什么开放式耳机好用是购买决策的关键。开放式耳机品牌十大排名可以为我们提供一些参考&#xff0c;但在这个过程中&#xff0c;我们也需要警惕一些误区。其中就包括一些关于开放式耳机的谣言&#xff0c;比如对耳朵有伤害、完全不漏音、是否…

javascript-Web APLs (三)

事件流 指的是事件完整执行过程中的流动路 说明&#xff1a;假设页面里有个div&#xff0c;当触发事件时&#xff0c;会经历两个阶段&#xff0c;分别是捕获阶段、冒泡阶段 简单来说&#xff1a;捕获阶段是 从父到子 冒泡阶段是从子到父 实际工作都是使用事件冒泡为主 事件…

Vue 组件基础(五)

一、Vue 组件的基础概念 组件(Component)是Vue最强大的功能之一。组件可以扩展HTML元素&#xff0c;封装可重用的代码。在较高层面上&#xff0c;组件是自定义元素&#xff0c;Vue的编译器为它添加特殊功能。每个组件负责一部分特定的任务&#xff0c;比如&#xff1a;显示一个…

大数据计算里的Broadcast Hash Join/Shuffle Hash Join/Sort Merge Join

文章目录 Broadcast Hash Join场景 Shuffle Hash Join场景 Sort Merge Join场景 Broadcast Hash Join 场景 大表和小小表&#xff0c;直接把B表加载到内存&#xff0c;然后读块1内容和内存中数据匹配 Shuffle Hash Join 场景 大表和小表JOIN &#xff0c;小表分块后能加载…

Docker打包自己项目推到Docker hub仓库(windows10)

一、启用Hyper-V和容器特性 1.应用和功能 2.点击程序和功能 3.启用或关闭Windows功能 4.开启Hyper-V 和 容器特性 记得重启生效&#xff01;&#xff01;&#xff01; 二、安装WSL2&#xff1a;写文章-CSDN创作中心https://mp.csdn.net/mp_blog/creation/editor/143057041 三…

谷粒商城のsentinelzipkin

文章目录 前言一、Sentinel1、什么是Sentinel2、项目配置3、使用案例3.1、流控3.2、降级3.3、黑白名单设置 二、Zipkin1、什么是Zipkin2、项目配置3、整合案例 前言 本篇介绍Spring Cloud Ali的sentinel组件&#xff0c;用于对微服务的熔断降级&#xff0c;以及链路追踪zipkin的…

Prism 七区域上下文关联

还是从头开始来。 1、区域上下文。 1.1、通过NuGet添加Prism.DryIoc。如下图。 1.2、新建WPF项目WpfApp1&#xff0c;创建Views和ViewModels文件夹&#xff0c;将MainWindow.xaml文件移动到 Views文件下&#xff0c;在ViewModels文件夹下添加MainWindowViewModel.cs文件。 …

UOS 安装usb wifi 网卡驱动

电脑上装安uos后发现usb网卡驱动不见了&#xff0c;网卡长下面这个样子&#xff0c;但是官方没有驱动 驱动网址选5300 https://www.ezcast.com/app/ezcast/wifi-adapter/windows 这时我们 lsusb找到相关设备&#xff0c;发现是Realtek 的设备 要在 Ubuntu 上安装 Realtek 0bda…

开放式耳机什么品牌质量好?5款排行榜里的开放式蓝牙耳机

​开放式耳机目前非常流行&#xff0c;它们以时尚、美观和舒适著称&#xff0c;迅速赢得了众多用户的喜爱&#xff0c;成为了耳机市场的新宠。与传统的入耳式耳机相比&#xff0c;开放式耳机佩戴更稳固&#xff0c;对耳朵也更为温和。尽管有些人认为它们价格不菲&#xff0c;甚…

二:Linux学习笔记(第一阶段)-- Linux命令

目录 Linux注意事项&#xff1a; Linux目录 Linux系统基础命令 1. 文件和目录操作 2. 文件查看和编辑 3. 文件权限和所有权 4. 系统信息 5. 网络命令 6. 文件查找 7. 压缩和解压缩 8. 系统管理 Linux注意事项&#xff1a; 严格区分大小写一切皆文件windows下的程序不…

【网络】Wireshark工具介绍和下载地址

https://www.wireshark.org/ 下载地址 介绍地址 Wireshark is a network protocol analyser. It can be used to capture packets from a network connection. Wireshark是一个网络协议分析器。它可以用来捕获来自网络连接的数据包。 1.1. What is Wireshark? Wireshark is…

CSS例子: 横向排列的格子

效果 HTML <view class"content"><view class"item" v-for"item of 5">{{item}}</view></view> CSS .content {height: 100vh;display: flex;flex-direction: row; flex-wrap: wrap;align-content: flex-start;backgro…

STM32的TIM中Prescaler和ClockDivision有什么用以及计数器溢出时间计算

我们在stm32中需要使用到时钟&#xff0c;在设置时容易把Prescaler和ClockDivision混淆&#xff0c;为什么有时候ClockDivision不需要设置呢&#xff1f;一下是解释&#xff1a; 1. Prescaler&#xff08;预分频器&#xff09; 功能&#xff1a;Prescaler 的作用是降低定时器的…

A011-基于SpringBoot的视频点播系统设计与实现

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装视频点播系统软件来发挥其高效地信息处理的作用&#xff0c…

高阶数据结构--图(graph)

图&#xff08;graph&#xff09; 1.并查集1. 并查集原理2. 并查集实现3. 并查集应用 2.图的基本概念3. 图的存储结构3.1 邻接矩阵3.2 邻接矩阵的代码实现3.3 邻接表3.4 邻接表的代码实现 4. 图的遍历4.1 图的广度优先遍历4.2 广度优先遍历的代码 1.并查集 1. 并查集原理 在一…

MySQL FIND_IN_SET 函数详解

文章目录 1. 基本语法2. 使用场景3. 实战示例3.1 基础查询示例3.2 与其他函数结合使用3.3 动态条件查询 4. 性能考虑5. 常见问题和解决方案5.1 大小写敏感问题5.2 空值处理5.3 模糊匹配 6. 总结 1. 基本语法 FIND_IN_SET 函数的基本语法如下&#xff1a; FIND_IN_SET(str, st…

AI产品经理全攻略:策略制定、开发过程与商业化路径【AI产品经理必读书籍】

通过《AI产品经理手册》&#xff0c;将可以了解不同类型的AI&#xff0c;如何将AI整合到产品或业务中&#xff0c;以及支持创建AI产品或将AI集成到现有产品所需的基础设施。熟悉实践管理AI产品开发流程、评估和优化AI模型&#xff0c;以及应对与AI产品相关的复杂伦理和法律问题…