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

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

news 文章来源：https://blog.csdn.net/wtt234/article/details/131921380 2025/5/22 20:46:11

一、背景

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

Docker:开启应用程序开发新篇章的利器

Docker&#xff1a;开启应用程序开发新篇章的利器 引言&#xff1a;1. Docker 的基本概念2. Docker 的优势3. Docker 在应用程序开发中的实际应用如何创建docker镜像如何部署docker镜像结论&#xff1a; 引言&#xff1a; 在现代软件开发领域中&#xff0c;容器化技术正在迅猛…...

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

Python面向对象（三）（继承、封装）

面向对象的三大特性 面向对象编程&#xff0c;是许多编程语言都支持的一种编程思想。 简单理解是&#xff1a;基于模板&#xff08;类&#xff09;去创建实体&#xff08;对象&#xff09;&#xff0c;使用对象完成功能开发。 面向对象包含3大主要特性&#xff1a; 封装 封…...

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

Redis Stream 流的深度解析与实现高级消息队列【一万字】

详细介绍了 Redis 5.0 版本新增加的数据结构Stream的使用方式以及原理&#xff0c;如何实现更加可靠的消息队列。 文章目录 Stream 概述2 Stream基本结构3 存储数据3.1 Entry ID3.2 数量限制 4 获取数据4.1 范围查询4.2 独立消费消息4.2.1 非阻塞使用4.2.2 阻塞的使用 4.3 消费…...

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

一个灵活、现代的Android应用架构

一个灵活、现代的Android应用架构 学习Android架构的原则&#xff1a;学习原则&#xff0c;不要盲目遵循规则。 本文旨在通过示例演示实际应用&#xff1a;通过示范Android架构来进行教学。最重要的是&#xff0c;这意味着展示出如何做出各种架构决策。在某些情况下&#xff0…...

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

redis高级篇 springboot+redis+bloomfilter实现过滤案例

一 bloomfilter的作用 1.1 作用 Bloomfilter&#xff1a;默认是有0组成bit数组和hash函数构成的数据结构&#xff0c;用来判断在海量数据中是否存在某个元素。 应用案例&#xff1a;解决缓存穿透。Bloomfilter放在redis前面&#xff0c;如果查询bf中没有则直接返回&#xff…...

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

mybatis学习笔记之在WEB中应用MyBatis

文章目录 数据库表的设计和准备数据环境搭建前端页面编写后端代码实现后端代码目录dao层servicewebpojoUtils 数据库表的设计和准备数据 环境搭建 在pom.xml中配置依赖&#xff08;logback、mybatis、mysql、servlet&#xff09; 注意引入tomcat 前端页面编写 <!DOCTYPE …...

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

宿主可以访问公网 Docker容器里无法访问 Temporary failure in name resolution

宿主可以访问公网 Docker容器里无法访问 Temporary failure in name resolution 容器参数 docker-compose.yml 的 dns我也设置&#xff0c;按理来说应该可以访问&#xff0c;然而就是不断的按在地上摩擦 web:build: .restart: alwaysports:- "6699:80"dns:- 114.11…...

编程日记 2023/7/27 2:31:36

CentOS7系统MBR、GRUB2、内核启动流程报错问题

目录 &#x1f969;Linux启动流程 &#x1f969;MBR修复 &#x1f36d;1、模拟损坏 &#x1f36d;2、重启测试 &#x1f36d;3、修复MBR &#x1f36d;4、测试系统 &#x1f969;GRUB2修复 &#x1f36d;1、模拟损坏 &#x1f36d;2、修复GRUB2 &#x1f36d;3、测试系统 &…...

编程日记 2023/7/27 2:30:34

剑指YOLOv5改进最新MPDIoU损失函数(23年7月首发论文)：超越现有多种G/D/C/EIoU，高效准确的边界框回归的损失，高效涨点

💡本篇内容：剑指YOLOv5改进最新MPDIoU损失函数(23年7月首发论文)：超越现有多种G/D/C/EIoU，高效准确的边界框回归的损失，高效涨点 💡🚀🚀🚀本博客 改进源代码改进 适用于 YOLOv5 按步骤操作运行改进后的代码即可 💡：重点：该专栏《剑指YOLOv5原创改进》只更新…...

编程日记 2023/7/27 2:29:32

CAN bus off ——ISO11898

什么是can bus off&#xff1f; CAN总线关闭&#xff08;CAN bus off&#xff09;是指CAN节点进入一种错误状态&#xff0c;无法继续正常的数据通信。当一个CAN节点的错误计数器超过了设定的阈值时&#xff0c;该节点将进入CAN总线关闭状态。在这种状态下&#xff0c;该节点将停…...

编程日记 2023/7/27 2:28:31