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

Go模板后端渲染时vue单页面冲突处理

news 2026/5/19 6:46:12

go后端模版语法是通过 {{}} ，vue也是通过双花括号来渲染的，如果使用go渲染vue的html页面的时候就会报错，因为分别不出来哪个是vue的，哪个是go的，既可以修改go的模板语法

template.New("output").Delims("{%", "%}")

也可以修改vue的

new Vue({delimiters: ['${', '}'],el: '#vue-app',
})

但是由于我在golang的编辑器中，在html文件类型改为go模板时，不想看到语法报错，所以就修改vue的。并且由于我的组件多，且复用的html多，所以我需要抽离公共的部分。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js Delimiters Example</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><component-one></component-one><component-two></component-two>
</div><script>// 定义 mixinvar myMixin = {data: function () {return {message: 'Hello from mixin!'}}}// 定义组件 ComponentOneVue.component('component-one', {mixins: [myMixin],data: function () {return {message: 'Hello from mixin1111!'}},template: '<div>${ message }</div>',delimiters: ['${', '}'] // 设置分隔符});// 定义组件 ComponentTwoVue.component('component-two', {mixins: [myMixin],template: '<div>${ message }</div>', // 使用相同的分隔符delimiters: ['${', '}'] // 设置分隔符});new Vue({el: '#app'});
</script></body>
</html>

这种已经可以实现，但是每个组件的template可能是一样的，并且也不是上面那种简单没有class等信息的，所以需要抽离，所以就变成了下面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js Delimiters Example</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><component-one></component-one><component-two></component-two>
</div><script>// 定义 mixinvar myMixin = {data: function () {return {message: 'Hello from mixin!'}}}// 复杂的共享模板字符串var sharedTemplate = `<div class="my-component"><p>${message}</p><!-- Add your complex HTML structure and styles here --></div>`;// 定义组件 ComponentOneVue.component('component-one', {mixins: [myMixin],template: sharedTemplate,delimiters: ['${', '}'] // 设置分隔符});// 定义组件 ComponentTwoVue.component('component-two', {mixins: [myMixin],template: sharedTemplate, // 使用相同的分隔符delimiters: ['${', '}'] // 设置分隔符});new Vue({el: '#app'});
</script></body>
</html>

这种运行后你会发现，无法渲染，控制台报错
在这里插入图片描述
怎么回事，语法也没错，分隔符设置也没问题，但提示没有定义，猜测是`符号影响了(不确定，有懂的call我)，

想要解决这个问题，法一，模板中替换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js Delimiters Example</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><component-one></component-one><component-two></component-two>
</div><script>// 定义 mixinvar myMixin = {data: function () {return {message: 'Hello from mixin!'}}}// 复杂的共享模板字符串var sharedTemplate = `<div class="my-component"><p>$MESSAGE$</p><!-- Add your complex HTML structure and styles here --></div>`;// 定义组件 ComponentOneVue.component('component-one', {data: function () {return {message: 'Hello from mixin1111!'}},mixins: [myMixin],template: sharedTemplate.replace('$MESSAGE$', '${message}'),delimiters: ['${', '}'] // 设置分隔符});// 定义组件 ComponentTwoVue.component('component-two', {mixins: [myMixin],template: sharedTemplate.replace('$MESSAGE$', '${message}'), // 使用相同的分隔符delimiters: ['${', '}'] // 设置分隔符});new Vue({el: '#app'});
</script></body>
</html>

可以渲染，但是麻烦，传递几个变量就得替换几次
在这里插入图片描述
法二：和法一类似，在生成模板时处理

<body><div id="app"><component-one></component-one><component-two></component-two>
</div><script>// 定义 mixinvar myMixin = {data: function () {return {message: 'Hello from mixin!'}}}// 生成带有动态值的模板字符串function generateTemplate(message) {return `<div class="my-component"><p>${message}</p><!-- Add your complex HTML structure and styles here --></div>`;}// 定义组件 ComponentOneVue.component('component-one', {data: function () {return {message: 'Hello from mixin1111!'}},mixins: [myMixin],template: generateTemplate('${message}'),delimiters: ['${', '}'] // 设置分隔符});// 定义组件 ComponentTwoVue.component('component-two', {mixins: [myMixin],template: generateTemplate('${message}'), // 使用相同的分隔符delimiters: ['${', '}'] // 设置分隔符});new Vue({el: '#app'});
</script></body>
</html>

可以渲染，但是比较麻烦，单独传值
在这里插入图片描述

法三(推荐，简单)，模板字面量，使用vue变量的地方带上\转义，无需修改其它

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js Delimiters Example</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><component-one></component-one><component-two></component-two>
</div><script>// 定义 mixinvar myMixin = {data: function () {return {message: 'Hello from m1!',msg: 'Hello from m2!'}}}// 使用模板字面量定义模板字符串var sharedTemplate = `<div class="my-component"><p>\${message}</p><p>\${msg}</p><!-- Add your complex HTML structure and styles here --></div>`;// 定义组件 ComponentOneVue.component('component-one', {data: function () {return {message: 'Hello from mixin1111!',msg: 'Hello from mixin2222!'}},mixins: [myMixin],template: sharedTemplate,delimiters: ['${', '}'] // 设置分隔符});// 定义组件 ComponentTwoVue.component('component-two', {mixins: [myMixin],template: sharedTemplate, // 使用相同的分隔符delimiters: ['${', '}'] // 设置分隔符});new Vue({el: '#app'});
</script></body>
</html>

如下
在这里插入图片描述

然后在数据渲染时使用golang的模板语法替换数据进行渲染即可

Go模板后端渲染时vue单页面冲突处理

go后端模版语法是通过 {{}} ，vue也是通过双花括号来渲染的，如果使用go渲染vue的html页面的时候就会报错，因为分别不出来哪个是vue的，哪个是go的，既可以修改go的模板语法 template.New("output").Delims(&qu…...

编程日记 2024/1/11 12:09:00

笔记本摄像头模拟监控推送RTSP流

使用笔记本摄像头模拟监控推送RTSP流一、基础安装软件准备本文使用软件下载链接:下载地址 FFmpeg软件: Download ffmpeg 选择Windows builds by BtbN 一个完整的跨平台解决方案，用于录制、转换和流式传输音频和视频。 EasyDarwin软件：Download Easy…...

编程日记 2024/1/11 12:07:59

鸿蒙开发已解决-ArkTS编译时遇到arkts-no-obj-literals-as-types错误

文章目录项目场景：问题描述原因分析：解决方案：解决方案1解决方案2此Bug解决方案总结项目场景：在开发鸿蒙项目过程中，遇到了arkts-no-obj-literals-as-types，总结了自己和网上人的解决方案，故写下这篇文章。遇到问题： rkTS编译时遇到arkts-no-obj-literals-as-type…...

编程日记 2024/1/11 12:01:53

实现目标检测中的数据格式自由（labelme json、voc、coco、yolo格式的相互转换）

在进行目标检测任务中，存在labelme json、voc、coco、yolo等格式。labelme json是由anylabeling、labelme等软件生成的标注格式、voc是通用目标检测框（mmdetection、paddledetection）所支持的格式，coco是通用目标检测框&#xff0…...

编程日记 2024/1/11 12:00:52

一文读懂JVS逻辑引擎如何调用规则引擎：含详细步骤与场景示例

在当今的数字化时代，业务逻辑和规则的复杂性不断增加，这使得逻辑引擎和规则引擎在处理业务需求时显得尤为重要。逻辑引擎和规则引擎通过定义、解析和管理业务逻辑和规则，能够帮助企业提高工作效率、降低运营成本，并增强决策的科学…...

编程日记 2024/1/11 11:59:51

苹果应用上架是否需要软件著作权？

苹果应用上架是否需要软件著作权？ 摘要随着移动互联网的发展，苹果应用在市场上占据了很大份额。但是，很多开发者在上传苹果应用到App Store时，都会遇到一个问题，即是否需要进行软著申请？本文将深入探讨这…...

编程日记 2024/1/11 11:54:46

LDD学习笔记 -- Linux字符设备驱动

LDD学习笔记 -- Linux字符设备驱动虚拟文件系统 VFS设备号相关Kernel APIs动态申请设备号动态创建设备文件内核空间和用户空间的数据交换系统调用方法readwritelseek 写一个伪字符设备驱动在主机上测试pcd(HOST)在目标板上测试pcd(TARGET) 字符驱动程序用于与Linux内核中的设备…...

编程日记 2024/1/11 11:53:45

杰理AC63串口收发实例

在event.h文件中预定义串口消息 #define DEVICE_EVENT_FROM_MY_UART ((M << 24) | (Y << 16) | (U << 8) | \0)在app_spp_and_le.c文件里对SYS_DEVICE_EVENT做处理，添加收到DEVICE_EVENT_FROM_MY_UART消息时的处理函数my_rx_handler(); cas…...

编程日记 2024/1/11 11:45:39

麦芯(MachCore)开发教程1 --- 设备软件中间件

黄国强 2024/1/10 acloud163.com 对任何公司来说，在短时间内开发一款高质量设备专用软件，是一件不太容易做到的事情。麦芯是笔者发明的一款设备软件中间件产品。麦芯致力于给设备厂商提供一个开发工具和平台，让客户快速高效的开发自己的设备专…...

编程日记 2024/1/11 11:37:31

reset命令

作用：将当前 HEAD 重置为指定状态 Git 的四个区域 Workspace：工作区，就是你平时存放项目代码的地方;Index / Stage：暂存区，用于临时存放你的改动，事实上它只是一个文件，保存即将提交到文件列表…...

编程日记 2024/1/11 11:34:28

Linux内核--进程管理(十二)LinuxIO基础知识与概念

目录一、引言二、IO基本概念 ------>2.1、内存空间划分 ------>2.2、读写操作 ------>2.3、用户态切换到内核态的3种方式三、PIO&DMA ------>3.1、PIO 工作原理 ------>3.2、DMA 工作原理四、缓冲IO和直接IO ------>4.1、缓冲 IO ------&…...

编程日记 2024/1/11 11:33:27

gem5学习（11）：将缓存添加到配置脚本中——Adding cache to the configuration script

目录一、Creating cache objects 1、Classic caches and Ruby 二、Cache 1、导入SimObject(s) 2、创建L1Cache 3、创建L1Cache子类 4、创建L2Cache 5、L1Cache添加连接函数 6、为L1ICache和L1DCache添加连接函数 7、为L2Cache添加内存侧和CPU侧的连接函数完整代码…...

编程日记 2024/1/11 11:31:25

上海雏鸟科技无人机灯光秀跨年表演点亮三国五地夜空

2023年12月31日晚，五场别开生面的无人机灯光秀跨年表演在新加坡圣淘沙、印尼雅加达、中国江苏无锡、浙江衢州、陕西西安等五地同步举行。据悉，这5场表演背后均出自上海的一家无人机企业之手——上海雏鸟科技。在新加坡圣淘沙西乐索海滩，500架…...

编程日记 2024/1/11 11:29:23

学生备考护眼台灯怎么样选择？2024五款好用台灯安利

随着现代人生活水平的提高，人们对保护视力和眼健康的重视也日益提高。然而，长时间使用电子设备和不合适的光线环境却成为了我们眼健康的潜在威胁。所以，为了有效地保护我们的眼睛，护眼台灯成为了许多人的选择。护眼台灯作为一种能…...

编程日记 2024/1/11 11:28:23

Java学习，一文掌握Java之SpringBoot框架学习文集(6)

🏆作者简介，普修罗双战士，一直追求不断学习和成长，在技术的道路上持续探索和实践。 🏆多年互联网行业从业经验，历任核心研发工程师，项目技术负责人。 🎉欢迎 👍点赞✍评论…...

编程日记 2024/1/11 11:27:21

美团点评秋招前端测评分享

一． 选择题 1. 甲乙二人各自加工一批同样数量的零件，甲完成一半时，乙完成150个，甲全部完成时，乙完成全部的5/6，求这批零件一共有（C）个 A. 320 B. 400 C. 360 D. 420 2. 分析如…...

编程日记 2024/1/11 11:25:19

docker安装nodejs，并更改为淘宝源

拉取官方 Node.js 镜像 docker pull node:latest创建 Dockerfile，并更改 NPM 下载源为淘宝源，设置为全局持久化 # 使用最新版本的Node.js作为基础镜像 FROM node:latest# 设置工作目录为/app WORKDIR /app # 更改 NPM 下载源为淘宝源，并设置…...

编程日记 2024/1/11 11:23:15

Vue中的class和style绑定

聚沙成塔每天进步一点点本文内容 ⭐ 专栏简介动态绑定class对象语法数组语法动态绑定style对象语法多重值 ⭐ 写在最后 ⭐ 专栏简介 Vue学习之旅的奇妙世界欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习…...

编程日记 2024/1/11 11:21:13

出版实务 | 出版物的成本及其构成

文章目录出版物成本的总体构成直接成本开发成本制作成本间接成本期间费用本量利分析原则特点和作用变动成本项目固定成本项目本量利分析的基本公式及其应用定价发行折扣率销售数量单位销售收入销售收入总额单位销售税金销售税金总额变动成本总额单位变动成本固定成本总额单位…...

编程日记 2024/1/11 11:15:07

docker 部署项目的操作文档,安装nginx

目录 1 部署环境检查2 相关知识点2.1 docker默认镜像存放地址2.2 docker 的镜像都是tar 包？2.3 Docker-compose 是直接使用镜像创建容器？2.4 Docker Compose down 就是将容器删除？2.5 删除，会删除挂载嘛2.6 DockerFile 和 docker …...

编程日记 2024/1/11 11:13:05

RDMA网络调试实战：当你的应用卡顿时，如何定位是哪种Error导致了重传？

RDMA网络性能调优实战：从重传Error定位到精准修复 RDMA（Remote Direct Memory Access）技术凭借其超低延迟和高吞吐量的特性，已经成为高性能计算、分布式存储和金融交易系统的核心网络架构。但在实际生产环境中，即使是经…...

编程新知 2026/5/19 6:37:13

ESJsonFormat-Xcode与MJExtension完美结合：构建高效iOS数据模型

ESJsonFormat-Xcode与MJExtension完美结合：构建高效iOS数据模型【免费下载链接】ESJsonFormat-Xcode 将JSON格式化输出为模型的属性项目地址: https://gitcode.com/gh_mirrors/es/ESJsonFormat-Xcode ESJsonFormat-Xcode是一款专为iOS开发者打造的JSON转模…...

编程新知 2026/5/19 4:42:08

NotebookLM电影研究实战手册：3步构建专属电影知识图谱，效率提升300%

更多请点击： https://codechina.net 第一章：NotebookLM电影研究辅助 NotebookLM 是 Google 推出的基于 AI 的研究协作者，专为深度阅读、知识整合与批判性思考设计。在电影研究场景中，它能将剧本、影评、学术论文、导演访谈、历史…...

编程新知 2026/5/19 4:21:00

【深度解析】Hermes Agent 0.14：OpenAI 兼容本地代理、按需依赖加载与 AI Coding 工作流升级

摘要 Hermes Agent 0.14 是一次偏“基础设施”的重要更新：安装更简单、启动更轻量，并引入 OpenAI 兼容本地代理能力，使其更适合作为模型订阅、代码工具与本地工作流之间的 Agent 路由层。背景介绍在 AI Coding 生态中，开发者常常…...

编程新知 2026/5/19 2:53:57

别再只用MD5了！聊聊Java中MessageDigest的SHA-256、SHA-3等算法选择与实战避坑

别再只用MD5了！Java哈希算法安全升级实战指南哈希算法在现代应用开发中扮演着数据指纹的角色，但很多Java开发者仍然停留在MD5/SHA-1的舒适区。当数据库泄露事件频发、算力攻击成本不断降低时，选择正确的哈希算法已经不再是简单的技术选型问题…...

编程新知 2026/5/19 1:49:56

[2026降本增效实战] 制造业生产成本核算如何提升准确性？基于实在Agent的端到端解决方案

在2026年的工业4.0深水区，制造业的竞争早已从单纯的产能比拼转向了极致的成本精度博弈。传统的成本核算模式正面临前所未有的挑战：数据颗粒度过粗、跨系统断点频发、人工干预导致的误差难以溯源。随着大模型技术与超自动化技术的深度融合，智…...

编程新知 2026/5/19 1:29:44

基于NirDiamant/agents-towards-production项目：使用RunPod Serverless部署AI智能体实战指南

基于NirDiamant/agents-towards-production项目：使用RunPod Serverless部署AI智能体实战指南【免费下载链接】agents-towards-production End-to-end, code-first tutorials for building production-grade GenAI agents. From prototype to enterprise deployment…...

编程新知 2026/5/18 23:31:02

ARM Cortex-M调试陷阱：Flash断点残留如何导致Hard Fault

1. 项目概述：一次由断点引发的“血案”与深度剖析最近在支持一个基于NXP KW36（Cortex-M0内核）的BLE项目时，我遇到了一个极其隐蔽且令人抓狂的问题。同一批次的板子，烧录完全相同的固件，绝大多数运行正常&am…...

编程新知 2026/5/18 23:29:01

出库篇：仓库里的货往哪去？——WMS出库方式全解析，物流新人必读

仓库里的货往哪去？——WMS出库方式全解析，物流新人必读摘要：货品有进必有出。上一期我们聊了WMS中货品的四大来源（采购、生产、退货、调拨入库），这一期我们来看看货品是怎么“出”去的——销售出库、采购退…...

编程新知 2026/5/18 22:37:21

5G NR（新空口）物理层设计解析

5G NR（新空口）物理层设计解析在无线通信技术的演进过程中，5G NR（新空口）作为第五代移动通信技术的核心组成部分，其物理层设计承载着提升数据传输速率、降低时延、增强连接密度等多重目标。本文将围绕5G NR…...

编程新知 2026/5/18 22:35:13

相关文章：