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

一、背景

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python 逻辑回归:理论与实践

文章目录 1. 介绍1.1 什么是逻辑回归&#xff1f;1.2 逻辑回归的应用领域 2. 逻辑回归的原理2.1 Sigmoid 函数2.2 决策边界2.3 损失函数 3. 逻辑回归的实现3.1 数据准备3.2 创建逻辑回归模型3.3 模型训练3.4 模型预测3.5 模型评估 4. 可视化决策边界4.1 绘制散点图4.2 绘制决策…

TortoiseGit安装

1、TortoiseGit简介 TortoiseGit是基于TortoiseSVN的Git版本的Windows Shell界面。它是开源的&#xff0c;可以完全免费使用。 TortoiseGit 支持你执行常规任务&#xff0c;例如commit、显示日志、区分两个版本、创建分支和标签、创建补丁等。 2、TortoiseGit下载 (1)Tortois…

RocketMQ第一课-快速实战以及集群架构搭建

一、RocketMQ产品特点 1、RocketMQ介绍 ​ RocketMQ是阿里巴巴开源的一个消息中间件&#xff0c;在阿里内部历经了双十一等很多高并发场景的考验&#xff0c;能够处理亿万级别的消息。2016年开源后捐赠给Apache&#xff0c;现在是Apache的一个顶级项目。 ​ 早期阿里使用Act…

【如何训练一个中译英翻译器】LSTM机器翻译seq2seq字符编码(一)

系列文章 【如何训练一个中译英翻译器】LSTM机器翻译seq2seq字符编码&#xff08;一&#xff09; 【如何训练一个中译英翻译器】LSTM机器翻译模型训练与保存&#xff08;二&#xff09; 【如何训练一个中译英翻译器】LSTM机器翻译模型部署&#xff08;三&#xff09; 训练一个…

手机变局2023:一场瞄准产品和技术的“思维革命”

以折叠屏冲高端&#xff0c;已成为中国手机厂商们的共识。 在这个苹果未涉足的领域&#xff0c;国产手机厂商们加快脚步迭代推新&#xff0c;积极抢占机遇。但平心而论&#xff0c;虽然国产折叠屏机型众多&#xff0c;但市场上始终缺乏一款突破性的产品作为标杆&#xff0c;为…

Spring Boot 中的日志

一、日志有什么用&#xff1f; 日志是程序的重要组成部分&#xff0c;想象一下&#xff0c;如果程序报错了&#xff0c;不让你打开控制台看日志&#xff0c;那么你能找到报错的原因吗&#xff1f; 答案是否定的&#xff0c;写程序不是买彩票&#xff0c;不能完全靠猜&#xf…

【前端知识】React 基础巩固(三十一)——store数据的订阅和Redux的优化

React 基础巩固(三十一)——store数据的订阅和Redux的优化 一、store数据的订阅 store/index.js const { createStore } require("redux");// 初始化数据 const initialState {name: "test",title: "hello redux", };function reducer(state …

Mybatis的基本操作--增删改查

目录 查看数据 无参数 一个参数 多个参数 添加数据 修改数据 删除数据 查看数据 分三种情况&#xff1a;无参&#xff0c;有一个参数&#xff0c;有多个参数的情况。 &#xff08;这里的详细操作步骤是博主的上一篇博客写的&#xff1a;初识Mybatis&#xff0c;并创建第…

QT【day1】

登录框&#xff1a; #include "mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent) {//窗口设置this->setFixedSize(600,600); //大小this->setWindowTitle("MUMU"); //文本内容this->setWindowOpacity(0.8); //透…

ArgoCD结合Gitlab交付项目到kubernetes集群

ArgoCD结合Gitlab交付项目到kubernetes集群 作者:行癫(盗版必究) 一:环境准备 1.kubernetes集群环境 2.HA_Argocd环境 3.Gitlab集群环境 二:项目配置 1.配置Gitlab 创建仓库,并写入yaml文件,利用yaml构建application;此案例结合了NFS实现持久化存储

前端随笔:HTML/CSS/JavaScript和Vue

前端随笔 1&#xff1a;HTML、JavaScript和Vue 最近因为工作需要&#xff0c;需要接触一些前端的东西。之前虽然大体上了解过HTML、CSS和JavaScript&#xff0c;也知道HTML定义了内容、CSS定义了样式、JavaScript定义了行为&#xff0c;但是却没有详细的学习过前端三件套的细节…

linux驱动开发入门(学习记录)

2023.7.6及7.7 概述了解 一 1.驱动框架 2. 字符设备 块设备&#xff0c;存储相关 网络设备驱动 不一定属于某一种类型二 1.获取外设或传感器数据&#xff0c;控制外设&#xff0c;数据会提交给应用程序 2.编写一个驱动&#xff0c;及测试应用程序 app。驱动和应用完全分开 3.驱…

Vue中TodoLists案例_底部交互

与上一篇Vue中TodoList案例_底部统计有俩个文件变化了 App.vue&#xff1a;定义了一个方法checkAllTodo&#xff0c;实现全选和取消全选&#xff0c;并将方法传给儿子组件MyFooter <template><div id"root"><div class"todo-container">…

springboot使用

ResponseBody ResponseBody 相当于调用 HttpServletResponse 的 getWriter() 输出&#xff0c; // 中文会乱码 response.getWriter().write("中文");ResponseBody 不仅仅简化写入到 response 中的过程&#xff0c;还将编码的问题解决了 response默认返回 字符串 的…

【多选框、表格全选】element el-checkbox、el-table

话不多说 先看效果&#xff1a; 多选框&#xff1a; 表格全选&#xff1a; <template><div><div class"titleLabel"><div class"lineStyle"></div>统计部门</div><div style"display: flex"><e…

Camtasia2023电脑录屏视频自动生成字幕软件

制作视频通常需要添加字幕&#xff0c;添加字幕比较麻烦的是让字幕和声音同步&#xff0c;使用好的软件可以大大提高剪辑效率&#xff0c;让视频更快制作完成。本文将给大家介绍录制视频自动生成字幕的软件设置字幕语音同步教程。 一、录屏视频自动生成字幕的软件 Camtasia是…

第一启富金:现货黄金市场等待央行决议 非美商品‘弱不禁风’

第一启富金基本面分析&#xff1a; 中国纸黄金交易通显示&#xff0c;全球最大黄金上市交易基金(ETF)截至07月22日持仓量为919.00吨&#xff0c;较上日增持5.20吨&#xff0c;本月止净减持2.90吨。 在俄罗斯上周退出黑海谷物协议&#xff0c;摧毁了乌克兰通往基辅的一条出口路线…

Json数据类型

原学习视频&#xff1a; 3.JSON文件操作_哔哩哔哩_bilibili Python提供了json包对JSON文件提供了读写操作 JSON查看器&#xff1a;JSON Viewer 实例演示&#xff1a;

redis(8):java连接redis

1 Jedis所需要的jar包依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>3.1.0</version></dependency> 2 Jedis常用操作 2.1 测试连通性 package com.example.demo;import redis.…

Vite + Vue3 + Ts 【免key、免账号实战本地运行GPT】

&#x1f414; 前期回顾 Vue3 Ts Vite —— 封装庆祝彩屑纷飞 示例_彩色之外的博客-CSDN博客封装 彩屑纷飞 示例https://blog.csdn.net/m0_57904695/article/details/131718019?spm1001.2014.3001.5501 目录 &#x1f30d; 公网 &#x1f6f9; 本地 &#x1fa82; 源码 &…