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

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

news 2026/4/8 3:58:15

一、背景

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

Python脚本打包成.exe方法

利用 pyinstaller打包 先安装这个库 pip install pyinstaller安装完成后&#xff0c;就可台利用pyinstaller进行打包了 在脚本文件的目录下切到cmd中&#xff0c;执行以下 pyinstaller -F tcping.py-F参数&#xff1a; 表示覆盖打包&#xff0c;不管我们打包几次&#xff0c;都…...

编程新知 2026/4/8 3:37:12

从银行转账到会话管理：用C#时间戳实战防重放攻击与用户超时注销

从银行转账到会话管理&#xff1a;用C#时间戳实战防重放攻击与用户超时注销 在金融级应用开发中&#xff0c;时间戳从来不只是简单的时间表示。当用户A在网银发起一笔转账时&#xff0c;系统如何确认这个请求不是黑客截获后重放的旧数据包&#xff1f;当用户B离开电脑半小时后返…...

编程新知 2026/4/8 3:07:39

国内垃圾分选设备厂家与市场发展趋势分析

国内垃圾分选设备市场概况目前&#xff0c;国内垃圾分选设备市场正在经历快速发展。随着环保意识的提升以及国家相关政策的推动&#xff0c;垃圾分类和资源回收成为社会各界关注的焦点。我们注意到&#xff0c;近年来&#xff0c;许多城市相继实施了垃圾分类政策&#xff0c;这…...

编程新知 2026/4/8 1:36:58

新能源汽车，车载充电机仿真模型（基于PWM整流器）。输出功率3.3kw，前级PFC采用双闭环控制，电流畸变率小。后级采用移相全桥开环控制。 运行环境有matlab_simulink和plecs

新能源汽车&#xff0c;车载充电机仿真模型&#xff08;基于PWM整流器&#xff09;。输出功率3.3kw&#xff0c;前级PFC采用双闭环控制&#xff0c;电流畸变率小。后级采用移相全桥开环控制。 运行环境有matlab/simulink和plecs针对新能源汽车车载充电机&#xff08;OBC&#x…...

编程新知 2026/4/8 1:06:20

1984-2024年中国10米分辨率城市土地利用栅格数据（商业、公服、居住等9类）

城市土地利用是刻画城市扩张与功能空间演化的重要基础信息。长时序、高分辨率且具有跨期可比性的城市土地利用数据&#xff0c;已成为城市扩张诊断、空间结构演化研究、国土空间规划评估与生态环境效应分析的重要支撑。而现有城市土地利用数据往往存在时间跨度不足、历史时期分…...

编程新知 2026/4/7 23:22:39

实例】四相机测量项目源码使用海康SDK及C#+halcon实现的通俗易懂教程：连接相机、模板匹...

四相机测量项目源码&#xff0c;海康相机SDK&#xff0c;C#halcon&#xff0c;写得比较通俗易懂&#xff0c;四相机四种测量模式&#xff0c;某工厂产线曾使用的项目。 主要功能有连接海康相机采图&#xff0c;模板匹配&#xff0c;圆形拟合&#xff0c;直线拟合&#xff0c;像…...

编程新知 2026/4/7 22:39:48

MCP协议v3.1兼容性落地难题全解析，深度解读2026主流框架适配方案与避坑清单

第一章&#xff1a;MCP协议v3.1核心语义演进与兼容性挑战本质MCP&#xff08;Model Control Protocol&#xff09;v3.1并非简单功能叠加&#xff0c;而是围绕“语义可验证性”与“执行上下文感知”两大原则重构协议内核。其核心语义层引入了显式状态约束断言&#xff08;State …...

编程新知 2026/4/7 22:19:34

3步实现Android Studio全界面汉化：让开发者效率提升40%的中文语言包方案

3步实现Android Studio全界面汉化&#xff1a;让开发者效率提升40%的中文语言包方案 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePack …...

编程新知 2026/4/7 20:01:23

客户决策链地图怎么画：老板、采购、技术、项目、法务分别怎么看你

在很多B2B企业的表达体系里&#xff0c;“客户”这个词经常被用得过于整齐。 官网会写“服务行业客户”&#xff0c;销售会说“面向大型企业”&#xff0c;PPT会写“解决复杂需求”。这些话都没问题&#xff0c;但它们通常默认一个前提&#xff1a;客户像一个人一样在决策。而真…...

编程新知 2026/4/7 19:55:17

二维码逆向工程：从01二进制到可扫描二维码的完整流程

二维码逆向工程&#xff1a;从01二进制到可扫描二维码的完整流程 二维码已成为现代生活中不可或缺的信息载体&#xff0c;但你是否想过&#xff0c;一串简单的0和1如何转化为可扫描的二维码&#xff1f;本文将带你深入探索二维码的逆向工程世界&#xff0c;从二进制数据处理到图…...

编程新知 2026/4/7 19:38:58