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

15分钟学 Go 第 43 天:前端与Go的结合

第43天:前端与Go的结合

目标:了解Go如何与前端交互,前端使用Vue.js

在现代Web开发中,Go语言常用于后端开发,而Vue.js是一个流行的前端框架,用于构建用户界面。结合二者,可以构建高效、可维护的全栈应用。本节内容将详细介绍Go与Vue.js的交互方式,包括基本概念、架构设计、实战代码示例、以及详细的运行流程图。

1. 理解Web架构

在开始之前,我们需要理解Web应用的基本架构。通常,Web应用由前端、后端和数据库三部分组成:

  • 前端:负责与用户的交互,通常使用HTML、CSS和JavaScript(在此案例中,是Vue.js)。
  • 后端:处理业务逻辑和数据存储,负责响应前端请求。在本节中,我们使用Go作为后端语言。
  • 数据库:存储应用数据,可以使用各种类型的数据库(如MySQL、PostgreSQL)。

以下是一个典型的Web应用架构图:

+--------------+     +---------------+     +-------------+
|   前端(Vue)  | <-> |    后端(Go)    | <-> |  数据库      |
+--------------+     +---------------+     +-------------+

2. Go与Vue.js的交互方式

Go与Vue.js的交互主要通过HTTP协议进行。以下是常用的交互方式:

  • RESTful API:使用HTTP请求(GET、POST、PUT、DELETE)来进行数据的增删改查。
  • JSON数据格式:前端和后端通过JSON格式进行数据交换,方便解析和处理。

3. 项目准备

在开始编码之前,请确保已经安装了以下环境:

  • Go语言(版本1.15及以上)
  • Node.js(用于包管理和Vue.js)
  • Vue CLI(用于创建Vue项目)

4. 创建项目

4.1 创建Go后端
  1. 创建后端目录
mkdir go-vue-backend
cd go-vue-backend
go mod init go-vue-backend
  1. 创建main.go文件
package mainimport ("encoding/json""net/http"
)type Message struct {Text string `json:"text"`
}func helloHandler(w http.ResponseWriter, r *http.Request) {w.Header().Set("Content-Type", "application/json")json.NewEncoder(w).Encode(Message{Text: "Hello from Go!"})
}func main() {http.HandleFunc("/api/hello", helloHandler)http.ListenAndServe(":8080", nil)
}
4.2 创建Vue前端
  1. 创建Vue项目
vue create go-vue-frontend
cd go-vue-frontend
  1. 修改src/App.vue
<template><div id="app"><h1>{{ message }}</h1><button @click="fetchMessage">Fetch Message</button></div>
</template><script>
export default {data() {return {message: ''}},methods: {fetchMessage() {fetch('http://localhost:8080/api/hello').then(response => response.json()).then(data => {this.message = data.text;});}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;
}
</style>

5. 运行项目

5.1 启动Go后端

go-vue-backend目录下运行:

go run main.go

后端服务将在8080端口启动。

5.2 启动Vue前端

go-vue-frontend目录下运行:

npm run serve

默认情况下,Vue应用将在3000端口启动。

6. 代码运行流程图

下面是代码运行的逻辑流程图,帮助理解请求的流程:

+--------------------+
|   用户点击按钮    |
+--------+-----------+|v
+--------------------+
|   fetchMessage()   |
+--------+-----------+|v
+--------------------+
|   发起HTTP请求     |
|   GET /api/hello   |
+--------+-----------+|v
+--------------------+
|   Go后端处理请求  |
+--------+-----------+|v
+--------------------+
|   返回JSON响应     |
+--------------------+|v
+--------------------+
|   Vue接收响应      |
+--------------------+|v
+--------------------+
|   更新页面内容     |
+--------------------+

7. 实战案例分析

通过我们的示例,我们实现了一个简单的前后端交互流程。让我们逐步分析实现过程中的关键点:

  1. Go后端设计

    • 使用http包创建RESTful API,处理来自前端的请求。
    • 将响应数据编码为JSON格式,并设置相应的Content-Type。
  2. Vue前端设计

    • 使用fetch API发起HTTP请求,从后端获取数据。
    • 使用Vue的 reactivity 实现数据绑定。

8. 最佳实践

在构建Go与Vue.js结合的项目时,可以遵循以下最佳实践:

  • 使用环境变量:在Go中使用环境变量来配置数据库和其他服务的参数。
  • CORS配置:确保后端API支持Cross-Origin Resource Sharing(CORS),以便Vue应用能够访问。
  • 错误处理:在后端添加错误处理,确保在发生错误时能返回合适的HTTP状态码。
  • 代码结构:保持良好的代码结构,将业务逻辑与路由处理分开。

9. 扩展功能

在上述示例的基础上,可以进行功能扩展,例如:

  • 添加更多的API端点,支持不同的CRUD操作。
  • 使用Vue Router实现多页面支持。
  • 增加状态管理(利用Vuex)来管理应用状态。

10. 总结

通过本节的学习,你应该对Go与Vue.js的基本交互有了初步的了解。我们实现了一个简单的示例,并分析了运行流程和最佳实践。通过掌握这些概念,你将在实际项目中灵活运用Go和Vue.js,构建出高效、现代的Web应用。


怎么样今天的内容还满意吗?再次感谢观众老爷的观看,关注GZH:凡人的AI工具箱,回复666,送您价值199的AI大礼包。最后,祝您早日实现财务自由,还请给个赞,谢谢!

相关文章:

15分钟学 Go 第 43 天:前端与Go的结合

第43天&#xff1a;前端与Go的结合 目标&#xff1a;了解Go如何与前端交互&#xff0c;前端使用Vue.js 在现代Web开发中&#xff0c;Go语言常用于后端开发&#xff0c;而Vue.js是一个流行的前端框架&#xff0c;用于构建用户界面。结合二者&#xff0c;可以构建高效、可维护的…...

解决SRS推送webrtc流卡顿问题

目录 1.问题描述2.原因分析3.ffmpeg去掉B帧的方法3.1 命令行推流3.2 ffmpeg源码推流 1.问题描述 使用ffmpeg通过rtmp协议推流给SRS&#xff0c;然后浏览器通过webrtc拉取播放流&#xff0c;经多次测试发现webrtc播放流总是卡顿&#xff0c;而拉取rtmp流是正常的。 2.原因分析…...

GDPU Andriod移动应用 Broadcast Receiver

聆听广播&#xff0c;跟着节拍吧。 计时器 新建一个名为PhoneStateMonitor的工程&#xff1b; 实现一个应用运行时长的计时器&#xff0c;并在界面上刷新计数器&#xff0c;要求包括&#xff1a; &#xff08;1&#xff09;在Layout中包含两个TextView控件&#xff0c;横向分…...

CSP/信奥赛C++刷题训练:经典例题 - 栈(1):洛谷P3056 :[USACO12NOV] Clumsy Cows S

CSP/信奥赛C刷题训练&#xff1a;经典例题 - 栈&#xff08;1&#xff09;&#xff1a;洛谷P3056 &#xff1a;[USACO12NOV] Clumsy Cows S 题目描述 Bessie the cow is trying to type a balanced string of parentheses into her new laptop, but she is sufficiently clums…...

WiFi一直获取不到IP地址是怎么回事?

在当今这个信息化时代&#xff0c;WiFi已成为我们日常生活中不可或缺的一部分。无论是家庭、办公室还是公共场所&#xff0c;WiFi都为我们提供了便捷的无线互联网接入。然而&#xff0c;有时我们可能会遇到WiFi连接后无法获取IP地址的问题&#xff0c;这不仅影响了我们的网络使…...

蓝牙BLE开发——iOS 每次写入数据超过200字节报错?

iOS 写入数据超过200字节报错 文章目录 iOS 写入数据超过200字节报错官方建议&#xff1a;报错问题解决 writeblecharacteristicvalue 官方建议&#xff1a; 并行调用多次会存在写失败的可能性。APP不会对写入数据包大小做限制&#xff0c;但系统与蓝牙设备会限制蓝牙4.0单次…...

Ascend Extension for PyTorch是个what?

1 Ascend Extension for PyTorch Ascend Extension for PyTorch 插件是基于昇腾的深度学习适配框架&#xff0c;使昇腾NPU可以支持PyTorch框架&#xff0c;为PyTorch框架的使用者提供昇腾AI处理器的超强算力。 项目源码地址请参见Ascend/Pytorch。 昇腾为基于昇腾处理器和软…...

学习docker第五弹-----高级篇start-Dockerfile

docker目录 1 Dockerfile是什么2 Dockerfile能干嘛3 如何书写Dockerfile3.1 Dockerfile构建过程解析3.2 小总结3.3 Dockerfile的基本知识3.5 保留字FROMMAINTAINERRUN 有两种方式EXPOSEWORKDIRENVUSERVOLUMEADDCMDENTRYPOINT 4 后记 1 Dockerfile是什么 Dockerfile顾名思义就是…...

【Elasticsearch】Elasticsearch集成Spring Boot

Elasticsearch集成Spring Boot 概述 Spring Data Elasticsearch 介绍一、环境初始化二、实战入门1、定义数据实体类2、定义Dao层3、框架集成-SpringData-集成测试-索引操作4、框架集成-SpringData-集成测试-文档操作5、框架集成-SpringData-集成测试-文档搜索 概述 Spring Data…...

HarmonyOS 移

什么是HarmonyOS HarmonyOS 中文名字是 鸿蒙操作系统 中国神话传说盘古在昆仑山开天辟地之前&#xff0c;世界是一团混沌状的元气&#xff0c;这种自然的元气叫做鸿蒙&#xff0c;那个时代成为鸿蒙时代华为公司的操作系统以鸿蒙取名&#xff0c;是不是有开天辟地之寓意&#x…...

跨子网的WinCC客户机/服务器如何实现通讯?

为了更有效地利用有限的IP地址&#xff0c;为了减少广播对网络带宽的占用从而提高带宽&#xff0c;为了实现在不同子网中应用不同的安全策略从而提高网络安全性&#xff0c;现场通常要求划分子网&#xff0c;将安全等级要求不同的计算机安置在不同的子网中&#xff0c;分开管理…...

java 面向对象高级

1.final关键字 class Demo{public static void main(String[] args) {final int[] anew int[]{1,2,3};// anew int[]{4,5,6}; 报错a[0]5;//可以&#xff0c;解释了final修饰引用性变量&#xff0c;变量存储的地址不能被改变&#xff0c;但地址所指向的对象的内容可以改变} }什…...

递推经典例题 - 爬楼梯

一、题目阅读 题目描述 一段楼梯有n级台阶。你每次可以跨一个、两个或者三个台阶。 请问走上n级台阶有几种方案&#xff1f;答案对998244353取模。 输入格式 一行一个数n。 输出格式 一行一个数&#xff0c;表示方案数。 样例 Input 1 3 Output 1 4 样例解释 1 1 1 3 1 2 …...

OpenCV视觉分析之目标跟踪(12)找到局部的最大值函数meanShift()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在反向投影图像上找到一个对象。 meanShift 是一种用于图像处理和计算机视觉领域的算法&#xff0c;特别适用于目标跟踪、图像分割等任务。该算…...

《数据治理精选案例集2.0(2024版)》592页PDF(已授权分享)

《亿信华辰数据治理精选案例集2.0》是北京亿信华辰软件有限责任公司倾力打造的专业数据治理案例集&#xff0c;汇集了100个一线政企数据治理实践案例&#xff0c;覆盖13大行业和500业务场景&#xff0c;通过深入剖析数据治理难题&#xff0c;提供了新思路和实战经验&#xff0c…...

【51单片机】LED点阵屏 原理 + 使用

学习使用的开发板&#xff1a;STC89C52RC/LE52RC 编程软件&#xff1a;Keil5 烧录软件&#xff1a;stc-isp 开发板实图&#xff1a; 文章目录 LED点阵屏显示原理74HC595 编码LED点阵屏显示笑脸LED点阵屏显示动画 LED点阵屏 点阵屏在开发板的右上角&#xff0c;注意使用前需要…...

Java基于SpringBoot+Vue的宠物共享平台的设计与实现(附源码,文档)

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

【案例】Excel使用宏来批量插入图片

一、场景介绍 我有一个excel文件&#xff0c;需要通过一列的文件名称&#xff0c;按照规则给批量上传图片附件。 原始文件&#xff1a; 成功后文件&#xff1a; 二、实现方法 1. 使用【wps】工具打开Excel文件&#xff0c;将其保存为启用宏的文件。 2.找到编辑宏的【VB编辑器…...

报名开启|开放原子大赛“Rust数据结构与算法学习赛”

开放原子大赛“Rust数据结构与算法学习赛”报名进行中&#xff0c;报名截止时间为11月17日。 为了进一步促进开源技术的发展&#xff0c;提升国内开源社区的创新能力和国际影响力&#xff0c;开放原子开源基金会与清华大学开源操作系统训练营等单位&#xff0c;共同举办本次Rus…...

[翻译] 创始人模式(Founder Mode)

Founder Mode 上周在一次YC活动中&#xff0c;Brian Chesky发表了一场在场的每个人都难以忘怀的演讲。会后&#xff0c;我与大多数创始人交流时&#xff0c;他们都表示这是他们听过的最好的演讲。连Ron Conway也第一次忘记了记笔记。我不会试图在这里复述演讲内容&#xff0c;…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...