当前位置： 首页 > news >正文

golang+layui提升界面美化度--[推荐]

news 2025/9/17 18:25:28

一、背景

golang+layui提升界面美化度--[推荐]；

golang后端写的页面很难看，如何好看点呢，那就是layui

https://layui.dev/

也是一个简单上手容易使用的框架，类似jquery，对于后端开发来说满足使用需求

二、使用注意点；

1.go代码中设置--设置静态资源目录

	// 初始化默认静态资源r.StaticFS("/videos", http.Dir("./videos"))

这里面设置静态资源，你理解为就是这个目录一设置，相当于对外共享了“目录”，外面的人可以通过浏览器可以直接访问这里面的任何资源。


func main() {r := gin.Default()r.LoadHTMLGlob("templates/*")// 初始化默认静态资源r.StaticFS("/videos", http.Dir("./videos"))//windows 和linux下的路径稍微不同names, _ := ListDir()//names, _ := ListDirllinux()r.GET("/index", func(c *gin.Context) {//c.HTML(http.StatusOK, "index.html", gin.H{"names": names})c.HTML(http.StatusOK, "index.html", gin.H{"names": names})})r.GET("/GetFile/:name", DowFile)//r.Run()r.Run("0.0.0.0:8080")
}

 2.然后去下载软件包，解压后放入这个videos目录下

 

 go代码中就是这样目录情况

 

3.html页面中引用layui的css和js内容

 

   <link rel="stylesheet" href="/videos/layui/css/layui.css"><script src="/videos/layui/layui.js"></script>
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/videos/layui/css/layui.css"><script src="/videos/layui/layui.js"></script></head>

 

4.然后就是可以在“Layui - 极简模块化前端 UI 组件库”

https://layui.dev/

找你需要的组件直接放在*.html页面相应的内容即可

5.给标签设置内容

 渲染到页面上的内容就是变换程圆角内容了

 

 

总结：在go的gin中设置静态资源目录，把layui解压放入这个静态资源目录，然后在我们自己写的html中引用css样式以及js文件即可，然后去他的页面中复制你喜欢的样式放到页面的任何位置即可。

相关文章：

golang+layui提升界面美化度--[推荐]

一、背景 golanglayui提升界面美化度--[推荐]&#xff1b; golang后端写的页面很难看&#xff0c;如何好看点呢&#xff0c;那就是layui https://layui.dev/ 也是一个简单上手容易使用的框架&#xff0c;类似jquery&#xff0c;对于后端开发来说满足使用需求 二、使用注意点…...

编程日记 2023/7/27 2:58:10

42. 接雨水

题目介绍 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3…...

编程日记 2023/7/27 2:57:08

Python学习阶段路线和内容

Python学习阶段路线和内容 这是我的看法和认识&#xff0c;供参考。 Python学习路线主要分为三个阶段&#xff1a;入门阶段、提高阶段和深入阶段。 入门阶段 入门阶段需要学习Python的基本语法&#xff0c;掌握变量和数据类型、条件语句和循环语句、函数和模块等内容。并通过…...

编程日记 2023/7/27 2:56:07

RocketMQ教程-安装和配置

Linux系统安装配置 64位操作系统&#xff0c;推荐 Linux/Unix/macOS 64位 JDK 1.8 Maven3.0 yum 安装jdk8 yum 安装maven 1.下载安装Apache RocketMQ RocketMQ 的安装包分为两种&#xff0c;二进制包和源码包。 点击这里 下载 Apache RocketMQ 5.1.3的源码包。你也可以从这…...

编程日记 2023/7/27 2:55:06

【LeetCode】55.跳跃游戏

题目 给定一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。 数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标。 示例 1&#xff1a; 输入&#xff1a;nums [2,3,1,1,4] 输出&#xff1a;true 解释&#xff1a;可以…...

编程日记 2023/7/27 2:54:05

Docker学习路线12：开发者体验

到目前为止&#xff0c;我们只讨论了使用Docker来部署应用程序。然而&#xff0c;Docker也是一个极好的用于开发应用程序的工具。可以采用一些不同的建议来改善开发体验。 在应用程序中使用docker-compose以方便开发。使用绑定挂载将本地代码挂载到容器文件系统中&#xff0c;…...

编程日记 2023/7/27 2:53:03

后端服务迁移方案及过程记录

阶段时序动作双写数据对比1新rdb集群上线双写数据对比2新服务上线&#xff0c;无流量双写数据对比2后端自己发起的流程比如job&#xff0c;新服务上线一份新的&#xff0c;独立运行双写数据对比2消费二方mq&#xff0c;新服务使用新的消费组消费原有消息双写数据对比3新旧服务比…...

编程日记 2023/7/27 2:52:02

StAX解析

StAX解析 StAX解析介绍 StAX解析与SAX解析类似&#xff0c;也是基于事件驱动的&#xff0c;不同之处在于StAX采用的是拉模式&#xff0c;应用程序通过调用解析器推进解析的进程&#xff0c;可以调用next()方法来获取下一个解析事件(开始文档&#xff0c;结束文档&#xff0c;开…...

编程日记 2023/7/27 2:51:01

[MCU]AUTOSAR COM STACK - CAN协议栈

各层PDU PDU&#xff1a;Protocal Data Unit&#xff0c;协议数据单元&#xff0c;由SDU和PCI组成&#xff1b; I-PDU&#xff1a;Interaction Layer PDU&#xff0c;数据交互层PDU&#xff1b;N-PDU&#xff1a;NetWork Layer PDU&#xff0c;网络层PDU&#xff0c;通常用的…...

编程日记 2023/7/27 2:50:00

React：从 npx开始

使用 npm 来创建第一个 recat 文件&#xff08; react-demo 是文件名&#xff0c;可以自定义&#xff09; npx create-react-app react-demo npx是 npm v5.2 版本新添加的命令&#xff0c;用来简化 npm 中工具包的使用 原始&#xff1a; 全局安装npm i -g create-react-app 2 …...

编程日记 2023/7/27 2:48:58

力扣热门100题之接雨水【困难】

题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3…...

编程日记 2023/7/27 2:47:57

Stable-Diffusion-Webui部署SDXL0.9报错参数shape不匹配解决

问题 已经在model/stable-diffusion文件夹下放进去了sdxl0.9的safetensor文件&#xff0c;但是在切换model的时候&#xff0c;会报错model的shape不一致。 解决方法 git pullupdate一些web-ui项目就可以&#xff0c;因为当前项目太老了&#xff0c;没有使用最新的版本。...

编程日记 2023/7/27 2:46:54

Springboot @Async 多线程获取返回值

Springboot Async 多线程获取返回值 需求背景 最近需要用到多线程, 自己维护线程池很麻烦, 正好看到Springboot集成线程池的例子, 这里自己做了个尝试和总结, 记录一下, 也分享给需要的朋友; 不考虑事务的情况下, 这个多线程实现比较简单, 主要有以下几点: 在启动类加上Enab…...

编程日记 2023/7/27 2:45:52

怎样接入chatGPT

官网链接&#xff1a; OpenAI platform...

编程日记 2023/7/27 2:44:51

Docker consul容器服务更新与发现

Docker consul容器服务更新与发现 一、什么事服务注册与发现二、什么是consul三、consul部署1、consul服务器2、registrator服务器3、consul-template 一、什么事服务注册与发现 服务注册与发现是微服务架构中不可或缺的重要组件。起初服务都是单节点的&#xff0c;不保障高可…...

编程日记 2023/7/27 2:43:50

[算法很美打卡] 多维数组篇 (打卡第一天)

文章目录 顺时针打印二维数组0所在的行列清零 顺时针打印二维数组 package 每日算法学习打卡.算法打卡.七月份.七月二十六号;public class test1 {public static void main(String[] args) {int[][] matrix {{1,2},{5,6},{9,10},{13,14},};print(matrix);}static void print(i…...

编程日记 2023/7/27 2:42:49

微服务系列（1）-who i am？

微服务系列&#xff08;1&#xff09;-我是谁 应用架构的演化 简单来说系统架构可以分为以下几个阶段&#xff1a;复杂的臃肿的单体架构-SOA架构-微服务 单体架构及其所面临的问题 在互联网发展初期&#xff0c;用户数量少&#xff0c;流量小&#xff0c;硬件成本高。因此…...

编程日记 2023/7/27 2:41:47

记录这这段时间发生的事情。

当做后端的时候总是被骂做前很丑。成为一个UI设计师与后端工程师才会更加完美。 尝试着做一个主页面。 创建了一个主页面 的表格index。 收录了希望发送到主页的&#xff0c;的帖子。 并且&#xff0c;可以填写是否可以。 一个看起来不错的主页。 标题设计的左右框。 这种框…...

编程日记 2023/7/27 2:40:46

发布npm包流程

发布npm包的步骤如下&#xff1a; 在终端中通过 npm init 命令创建一个新的npm包&#xff0c;按照提示填写包的信息&#xff0c;如包名称、版本、描述、作者、许可证等。 在包的根目录下创建一个 index.js 文件&#xff0c;编写你的代码。 确认你已经注册了npm账号&#xff0…...

编程日记 2023/7/27 2:39:45

面试官：Redis 为什么变慢了？怎么解决？

一、Redis为什么变慢了 二、Redis如何优化 三、Redis变慢了排查步骤 一、Redis为什么变慢了 1.Redis真的变慢了吗&#xff1f; 对 Redis 进行基准性能测试 例如&#xff0c;我的机器配置比较低&#xff0c;当延迟为 2ms 时&#xff0c;我就认为 Redis 变慢了&#xff0c;…...

编程日记 2023/7/27 2:38:44

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/9/6 15:40:21

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/9/9 23:12:32

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/9/10 3:41:08

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/9/2 16:07:10

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/9/14 3:12:46

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/9/13 17:42:33

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2025/9/5 8:48:52

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

编程新知 2025/9/7 8:49:16

Ubuntu系统复制（U盘-电脑硬盘）

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

编程新知 2025/9/13 17:36:53

【深度学习新浪潮】什么是credit assignment problem？

Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...

编程新知 2025/9/9 10:06:25