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

news2024/10/5 19:15:01

一、背景

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文件即可,然后去他的页面中复制你喜欢的样式放到页面的任何位置即可。

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

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

相关文章

input 框如何移动光标,设置光标位置?

获取 input 光标位置 const inputDom document.getElementById("input") const selectionStart inputDom.selectionStart设置 input 光标 inputDom.focus() // focus() 异步&#xff0c;所以加了 setTimeout setTimeout(() > {const nextSelection selection…

Linux进程概念(续)

引入 我们先来看一段代码 #include<stdio.h> #include <unistd.h>int g_val200;//全局变量 int main() {int resfork();if(res>0)//father{printf("我是父进程。我的全局变量 g_val%d,他的地址是 %p\n",g_val,&g_val);}else if(res0)//子进程{g…

day38-Mobile Tab Navigation(手机tab栏导航切换)

50 天学习 50 个项目 - HTMLCSS and JavaScript day38-Mobile Tab Navigation&#xff08;手机tab栏导航切换&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"…

Cesium态势标绘专题-多边形(标绘+编辑)

标绘专题介绍:态势标绘专题介绍_总要学点什么的博客-CSDN博客 入口文件:Cesium态势标绘专题-入口_总要学点什么的博客-CSDN博客 辅助文件:Cesium态势标绘专题-辅助文件_总要学点什么的博客-CSDN博客 本专题没有废话,只有代码,代码中涉及到的引入文件方法,从上面三个链…

mybatis_使用

第一步&#xff1a; 编写接口 第二步&#xff1a; 编写对应的mapper中的sql语句 第三步&#xff1a; 测试 CRUD <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http…

喜报 | 擎创科技入选2023中国金融科技竞争力百强榜

2023中关村金融科技论坛——第七届金融科技与金融安全峰会已圆满落幕。本次峰会主要围绕银行科技、保险科技、新一代信息技术、互联网3.0展开专题论坛&#xff0c;共有千余位金融机构和科技公司相互分享研究成果、探索前沿知识、交流实践经验。 会议上正式公布了“2023中国金融…

C++ 引用型别未定义

什么是引用型别未定义呢&#xff1f;&#xff08;首先是基本数据类型的&#xff09; 在使用函数的时候&#xff0c;我们在给函数传参的时候可能会传入一个左值也可能是右值。当我们使用如下函数funtion的时候&#xff0c;会在控制台打印什么样的结果呢&#xff1f;&#xff08;…

fastadmin框架重定向

由于&#xff0c;我们一打开fastadmin框架就进入到前端页面很麻烦&#xff0c;下面这种方法可以解决这个问题。 首先我们找到这个路径 找到重定向&#xff0c; application》index》controller》index 原本文件是这个样子&#xff1a; <?phpnamespace app\index\controll…

Redisson实现简单消息队列:优雅解决缓存清理冲突

在项目中&#xff0c;缓存是提高应用性能和响应速度的关键手段之一。然而&#xff0c;当多个模块在短时间内发布工单并且需要清理同一个接口的缓存时&#xff0c;容易引发缓存清理冲突&#xff0c;导致缓存失效的问题。为了解决这一难题&#xff0c;我们采用Redisson的消息队列…

SuperCLUE中文大模型排行榜(2023年7月)

中文通用大模型综合性测评基准&#xff08;SuperCLUE&#xff09;&#xff0c;是针对中文可用的通用大模型的一个测评基准。 它主要要回答的问题是&#xff1a;在当前通用大模型大力发展的情况下&#xff0c;中文大模型的效果情况。包括但不限于&#xff1a;这些模型哪些…

思科设备静态路由配置

一、静态路由基本知识 路由器的主要功能就是用来转发IP 数据包以使数据包到达正确的目的主机。可以想象数据包到达路由器就像一辆汽车开到十字路口&#xff0c;路由表就类似路标&#xff0c;列出可能到达的目的地&#xff0c;以及应该选择哪条路到达目的地。 路由器必须要有相应…

Cesium态势标绘专题-圆形(标绘+编辑)

标绘专题介绍:态势标绘专题介绍_总要学点什么的博客-CSDN博客 入口文件:Cesium态势标绘专题-入口_总要学点什么的博客-CSDN博客 辅助文件:Cesium态势标绘专题-辅助文件_总要学点什么的博客-CSDN博客 本专题没有废话,只有代码,代码中涉及到的引入文件方法,从上面三个链…

Set集合类详解(附加思维导图)

目录 一、Set集合思维导图 二、set集合类常用方法 2.1、HashSet集合常用方法 2.2、TreeSet集合的使用 三、HashSet、LinkedHashSet、TreeSet的使用场景 四、list和set集合的区别 一、Set集合思维导图 二、set集合类常用方法 2.1、HashSet集合常用方法 ①&#xff1a;add…

Docker安装Elasticsearch相关软件安装

Docker安装Elasticsearch相关软件安装 本文将介绍通过 Docker 的方式安装 Elasticsearch 相关的软件。 1、Docker安装Elasticsearch 1.1 搜索镜像 $ docker search elasticsearch $ docker search elasticsearch:7.12.11.2 拉取镜像 $ docker pull elasticsearch:7.12.11.…

# jellyfin安装设置使用散记

jellyfin安装设置使用散记 文章目录 jellyfin安装设置使用散记0 软件简介1 安装2 视频转码问题2.1 局域网转码情况测试&#xff08;不同网段&#xff09;2.2 局域网jellyfin app默认转码问题解决2.3 外网转码情况测试 3 一些坑4 插件5 最后 0 软件简介 Jellyfin 是一个自由的软…

ConcurrentHashMap 相比于 HashMap 的优势

ConcurrentHashMap 使用每个链表头节点作为锁对象, 把一把大锁转换成多把小锁, 大大缩小了锁冲突的概率 HashTable 是给整个 Hash 表加锁, 因此只要有线程抢到了锁其他线程就得阻塞等待. ConcurrentHashMap 是对每个链表加锁, 因此只要不是对同一个链表进行修改就不会阻塞, 大…

linux 查看网卡,网络情况

1&#xff0c;使用nload命令查看 #yum -y install nload 2&#xff0c; 查看eth0网卡网络情况 #nload eth0 Incoming也就是进入网卡的流量&#xff0c;Outgoing&#xff0c;也就是从这块网卡出去的流量&#xff0c;每一部分都有下面几个。 – Curr&#xff1a;当前流量 – Avg…

vue中重新获取数据导致页面加长,要求在页面更新之后浏览器滚动条滚动到之前浏览记录的位置。以及获取当前页面中是哪个元素产生滚动条的方法。

目前的页面样式为&#xff1a; 代码是&#xff1a; <section id"detailSection"><el-tableref"multipleTable":data"logDetailList"style"width: 650px;margin:20px auto;"id"dialogDetail":show-header"fals…

13 QT资源文件导入

导入资源: 1&#xff1a;将资源文件放入到项目目录下 2&#xff1a;添加资源文件 2.1&#xff1a;右键项目->添加新文件->Qt->Qt Resource file ->给资源文件命名 ex: res ->生成res.qrc 3&#xff1a;编辑资源文件 3.1&#xff1a;添加前缀 3.2&#xff1a;…

荧光效率的测试原理-荧光量子效率测试系统

荧光染料是一种新型染料,它既有常规染料的着色特性,又能发射出荧光,使得织物的饱和度和鲜艳度提高,广泛用于纺织、服装等领域。目前,荧光染料在防伪、分子探针等方面的应用也方兴未艾。由于荧光染料在科技和人们的生活中得到了越来越多的应用,对其测配色的研究也引起了颜色学家…