go语言渲染js go语言渲染
81.go + vue实现web应用程序
前端框架越来越丰富,前后端分离已经是大多数软件团队采取的模式了。vue使用的场景也越来越多。
创新互联公司是一家集网站建设,贵南企业网站建设,贵南品牌网站建设,网站定制,贵南网站建设报价,网络营销,网络优化,贵南网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
go本来使用template模板来进行前端的表现,现在可以用vue来分担很大一部分工作了。
通常直接使用go语言写后端,然后使用静态模板加载渲染前端,前端获取后端提供的数据是使用{{ }}符号,2个套在一起的花括号。这个也是vue使用的数据表现方式。
如果go+vue来协同工作的话,需要对vue进行一点设置。比如把{{ }}的方式改为[[ ]]的方式。
首先我们要知道,vue的使用,需要在页面中加载vue.js或vue.min.js
纯静态网页使用vue是这样的(给个html例子)
然后我们实现一个go的简单web服务和模板页面
这个go服务器通过端口 1989 展示服务器页面,提供了一个静态文件路径 htmlpage,我们把vue.js和index.html文件都放置在htmlpage路径里。
go服务器还用模板给前台页面提供了一个News结构的数据,数据包括:Title,Content,Author的值。
在index.html页面中,加载vue.js的时候需要带上静态路径 htmlpage
在 new 一个 vue 变量的时候,必须有一句来设置包裹数据的符号,我们这里设置这个符号为[[ ]]
同时,所有需要由 vue 渲染的数据,都写成类似这样的样子
在 go + vue 方式下的完整模板文件 index.html
此页面中{{ }}包裹的数据是由go从后端提供的数据( 例如:{{.Title}}),而[[ ]]包裹的数据,是vue渲染的数据。
只是把 Vue里的数据,改为由go后端提供即可。
好吧,作者已经在向月亮示爱了。呵呵 _
运行一下程序,看修改模板后的效果。
怎样保证js在页面元素渲染完后再执行?
vue.js则需要结合watch和nextTick方法来使用。具体方法如下。
具体步骤:
1.在页面加载一个数据列表完成之后,页面自动滚动定位到中间某个列表元素,需要在列表数据渲染完成,计算列表高度,再控制定位到指定行。首先介绍下一开始尝试没有生效的方案,这也是大家最容易出现错误的地方,vue.js提供的mounted函数,表示挂载到实例上去之后调用该钩子。
2.运行之后,发现mounted执行的时候,获取到的height值不对,打个断点也可以发现,此时页面没有渲染完成,列表块还是一片空白。
3.此时查询官方api文档发现,有一个nextTick方法,意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。使用之后发现,还是不能解决我所需要的效果。
4.继续查询api文档发现,watch方法,用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调,再次尝试,运行后发现还是不行。
5.最终把watch和nextTick组合一起
watch:{ showList:function(){ this.goPrice(0); }}
showList对应表格页面的绑定变量
tr v-for="(item,index) in showList"
6.运行后发现,已经达到了预期的效果。
7.最后说明下,有时候我们会想到使用setTimeout的方式来实现,使用这种方式需要设置个超时执行时间,由于渲染时间无法确定,有快有慢,就会出现不稳定的现象。
go模板文件引入js路径问题
Go语言模板文件可以引入js文件或css文件,但是在引入的过程中,需要注意以下几点:
1. 引入的文件路径应该是相对路径,而不是绝对路径。
2. 在引入js文件时,需要使用{{ url }} 模板函数,用来拼接路径, 这样可以更好的兼容不同的路径。
3. 如果是在统一的文件夹中的js文件,最好使用{{ static }}模板函数,这样可以更好的节省路径长度。
4. 在引用js文件时,需要在页面底部,可以使用{{ template }}模板函数,这样可以保证js文件在页面加载完成之前就被加载。
总之,使用Go语言模板文件引入js文件,需要注意路径的相对性,并且使用模板函数来拼接路径,这样可以更好的兼容不同的路径,从而保证引用js文件的正确性。
文章标题:go语言渲染js go语言渲染
文章路径:http://pwwzsj.com/article/ddiopcg.html