我是靠谱客的博主 过时豆芽,最近开发中收集的这篇文章主要介绍html创建后自动调用js,gin html模板调用js函数,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

最近想用gin写个web服务器,发现gin提供了html模板这个功能,感觉贼方便,可以前后端一块开发了~

可是,用着用着发现一个问题,就是,不能在html模板里直接定义js函数。。。

对这个问题,我的理解是,html模板是个静态的文件,不支持js的解析。那咋办呢?

话不多说,直接上步骤~

自己写一个js文件

首先,js函数不能定义在html模板里,那就得我们单独定义一个js文件,放我们需要使用的函数。

在项目文件夹下,自己创建一个js文件夹(不一定叫js啊,叫别的也行),里面再创建一个js文件,比如我这里叫home.js,然后,就可以在这个home.js里写我们需要的js函数啦~

71d309dd520edaa15aa4bdb74fedf282.png

html模板引入自己写的js

欧克,js函数已经写好了,j接下来要做的就是,在html模板里,引用我们自己写的js文件,写法如下:

注意,到这里还没完!

增加js接口

在html模板里引用js文件之后,html模板并不是直接从本地去找这个js文件,而是通过http get请求去获取这个js文件!

给大家看一下我的gin运行日志:

243ab0a1ed7dacdb934965a428e8af78.png

home接口是我的主页,其中一个按键点击会调用js路径下home.js里面定义的函数,可以看到,当我点击这个按键的时候,就给自己发送了一个get请求,请求的就是html模板里引用的那个js文件,所以我们要给自己的程序增加一接口,来处理这个js的get请求~

很简单,加上这样一行即可:

//html模板调用的js

r.Static("/js", "js")

这里我们调用了gin框架的static方法,这个方法就是把你请求的静态文件直接返回给你。

欧克,到这里,就大功告成啦~

最后再提醒一点,浏览器是有缓存的,如果你的html模板是第一次打开,那么一定会调用这个js接口,但是调用之后,浏览器会缓存这个js文件的内容,后面就不会再调用这个接口了~所以,如果修改了js文件,想让浏览器去获取新的,一定要先清理一下缓存~

P.S.

最后,安利一下我做的goMonitor项目,就是使用gin框架做的一个简单的日志分析和性能监控平台,可以在线查看和解析日志,用折线图展示耗时、qps等数据,同时可以监控进程的cpu和内存使用情况,欢迎大家体验~

github地址:https://github.com/djq8888/goMonitor

虽然现在有很多成熟的日志分析或者监控系统,但是部署到我们既有的系统里,可能需要折腾一番,而我的这个程序,可以直接分析文本日志,所以只需要把一些关键信息打印到日志里,就可以分析并展示了,我觉的还是有意义的,哈哈~

最后

以上就是过时豆芽为你收集整理的html创建后自动调用js,gin html模板调用js函数的全部内容,希望文章能够帮你解决html创建后自动调用js,gin html模板调用js函数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(43)

评论列表共有 0 条评论

立即
投稿
返回
顶部