Gin + Vue 踩坑

最新推荐文章于 2024-09-22 10:57:42 发布
最新推荐文章于 2024-09-22 10:57:42 发布
阅读量514 收藏 1
点赞数
分类专栏： 交易
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nia305/article/details/117804345
版权

文章目录

用到的组件

  1. Vue
  2. Gin
  3. Gin-Swagger
  4. Bootstrap-Vue
  5. Element-UI-Vue
  6. Echarts && Echarts-Vue

Vue

刚接触前端的框架，会有很多弄不懂，搞不明白的地方，比如说怎么安装，代码结构如何，怎么开发，怎么调试，怎么跟自己的后端服务通讯等等，最好的方式就是在Git上面找一些好的项目来参照，像Gin-Vue-Admin, vue-realworld-example-app这些都是很好的例子。

Gin

Golang的Web框架，之前用的都是Beego，对比下，感觉Gin的文档稍微简单一些，好上手一些，想偷个懒，也用用新的框架练练手。

Gin-Swagger

这个Web API Docs用下来挺好用，主要的文档模式是Swagger，Gin-Swagger会帮助我们生成对应API的json和yaml文件
在这里插入图片描述
而且能在网页上直接看到实现过的API，还有试一试功能，Postman这一步就暂时可以省略了，调试的时候稍微方便一些。
在这里插入图片描述
类似这样的界面。

Bootstrap-Vue & Element-UI-Vue

这两个库都是能在Vue里面import使用的，这两个库主要是使用里面现成的布局、控件等样式，对于我自己不太会前端的来说，这两个库简直是福音。Echarts && Echarts-Vue 是用来作图的，这个前端库也是很好用的一个库。可以绘制多种多样的图表，文档也很清晰好用。

遇到的一些问题[TODO]

Web Api 文档问题

main.go文件只能放在项目的根目录下面，我使用了Go-CLI，这个库一般会把main.go放在cmd/目录下，但是这样Swagger就不能正确地解析到api、参数等信息，构造出来的json/yaml是空的。

左边导航栏滚动不独立

Greetlist
关注
专栏目录
基于Go语言Gin+Vue+ElementUI的前后端分离敏捷开发框架
weixin_50196917的博客
03-05 1936
是一款基于Golang、Gin、Xorm、Vue、ElementUI、MySQL等技术栈开发平台框架，拥有完善的(RBAC)权限架构和基础核心管理模块，为了缩短研发周期，系统框架集成了代码生成器，内置平台自定义研发的模板引擎，可以一键CRUD生成整个模块的全部代码，本框架为一站式系统框架开发平台，可以帮助开发者提升开发效率、降低研发成本，同时便于后期的系统维护升级。......
基于Go语言Gin+Vue+ElementUI的前后端分离后台管理系统
weixin_50196917的博客
03-05 1477
是一款基于Golang、Gin、Xorm、Vue、ElementUI、MySQL等技术栈开发平台框架，拥有完善的(RBAC)权限架构和基础核心管理模块，为了缩短研发周期，系统框架集成了代码生成器，内置平台自定义研发的模板引擎，可以一键CRUD生成整个模块的全部代码，本框架为一站式系统框架开发平台，可以帮助开发者提升开发效率、降低研发成本，同时便于后期的系统维护升级。...
go embed 实现gin + vue静态资源嵌入
禹鼎侯的博客
05-25 4192
golang1.16出来以后，早就有打算把项目的前端代码打包更换成embed。在此之前，使用的是进行的打包。但是今天打包时却报了个错：而且通过各种手段尝试均无果之后，果断把决定立即将其更换为embed进行资源嵌入管理。但是在折腾的时候，其实也是遇到了不少的坑，在这里总结一下。关于embed，具体的功能这里就不多做介绍了，网上有一堆资料，但是这些资料并不能解决我的问题，我翻阅了无数的网页，也没有找到一个能确切解决我的问题的方案。因此决定自己记录一下。
探索 Gin-Vue-Admin：一款优雅的前后端分离框架
gitblog_00575的博客
08-16 794
探索 Gin-Vue-Admin：一款优雅的前后端分离框架 gin-vue-admingin+gorm+jwt+vue, implemented as dependency injection项目地址:https://gitcode.com/gh_mirrors/ginv/gin-vue-admin 项目介绍 在众多的全栈开发框架中，Gin-Vue-Admin以其独特的魅力脱颖而出，为开发者提供...
go快速开发框架gin+vue快速开发后台管理(前后端分离)，极快接口api生成器，快到不写一行代码，10秒接口就可以调用
GoFLy开发者的博客
06-03 5739
​用 Go 语言基于Gin、Vue、Typescript、vite、Arco Design、MySQL等框架精心打造的一款模块化、插件化、高度自动化、高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统。本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器一键生成管理后台的前后端代码，快速开发或生成api接口代码和接口文档、测试api接口等编辑，完全自主研发了自定义GO后端服务模板和前端Vue自定义模板
Go实战Gin+Vue+微服务打造秒杀商城第五课 gin+vue实战
fegus的博客
05-27 6131
gin+vue实战 后端： 用户管理 用户列表 登录/登出 商品管理 商品的增上改查 活动管理 商品关联 成功率 redis队列，不成功的回到队列继续，成功的从队列删除 结束难点： 代码和部署完全隔离 怎么避免雪崩 根据后端承载能力，进行限流和过载保护 使用redis承载海量QPS mysql性能瓶颈 可扩展行（机器的扩展等） 长连接 秒杀业务逻辑： 接入层功能： 实战技术选型 一、实战名称：gin+vue3+微服务打造秒杀商城 二、技术选型 1.前端：vue3，antdv，v
基于Gin+Vue3前后端分离权限管理系统源码+项目说明+数据库.zip
07-25
基于Gin+Vue3前后端分离权限管理系统源码+项目说明+数据库.zip 【项目资源介绍】 平台简介 * 前端技术栈 TypeScript、Vue3、Element-Plus、Vite、Pinia * 后端技术栈 Golang、Gin、Gorm、MySQL、Redis、Casbin ...
Gin+Vue+微服务打造秒杀商城-Go课程
06-28
分享课程——Gin+Vue+微服务打造秒杀商城-Go，完整版视频教程下载，附课件、代码。 本课从Gin基础讲起，涉及模板渲染、中间件、数据绑定及验证、gorm等模块，实战部分更是直接上当今流行、具含金量的微服务+高并发...
go+gin+vue3 后台管理系统.zip
12-31
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 Vue3，springboot，element-ui使用技巧，实战应用...
Go实战Gin+Vue+微服务打造秒杀商城配套代码
05-27
本项目是基于Go语言的Gin框架，配合前端Vue.js技术栈，以及微服务架构设计的秒杀商城系统。通过这个实战项目，我们可以深入学习如何利用现代Web开发工具和技术来构建一个高性能、高并发的电商应用。以下是相关知识点...
基于Gin+Vue+Element UI的Go语言前后端分离权限管理系统设计源码
最新发布
09-28
该源码项目采用Gin+Vue+Element UI技术栈，实现了一个前后端分离的权限管理系统。项目包含254个文件，涵盖185个Go源文件、16个模板文件、15个YAML配置文件等，支持Go、JavaScript、Shell、CSS、HTML等多种编程语言。...
gin-vue-admin：基于gin + vue构建的后台管理系统框架，集成的jwt鉴权，权限管理，动态路由，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器，通用工作流等基础功能，五分钟一套CURD前纵向代码，目前已支持VUE3，欢迎issue和pr〜
02-02
|简体中文 项目文档 ： : （贡献者： 和 ） 前端UI框架： 后台框架： 1.基本介绍 1.1项目介绍 测试用户名：admin 测试密码：123456 Gin-vue-admin是一个基于vue和gin开发的全栈前分离的后台管理系统，集成jwt鉴权，动态路由，动态菜单，casbin鉴权，表单生成器，代码生成器等功能，提供多种示例文件，让您把更多时间专注于业务开发上。 1.2贡献指南 嗨！首先感谢您使用gin-vue-admin。 Gin-vue-admin是一套为后台管理平台准备的一个完整的前分离分离式样式的开源框架，逐步快速构建后台管理系统。 Gin-vue-admin的成长离不开大家的支持，如果你愿意为gin-vue-admin贡献代码或提供建议，请阅读以下内容。 1.2.1问题规范 问题仅用于提交Bug或功能以及设计相关内容，其他内容可能会被直接关闭。如果您在使用时产生了疑问，请到Slack或里咨询。 在提交问题之前，请搜索相关内容是否已被提出。 1.2.2拉取要求规范 请先叉一个到自己的项目下，不要直接在仓库下建分支。 commit信息要以[文件名]: 描述
宝塔面板部署Vue+Gin项目（吐血整理，各种踩坑）
m0_64091529的博客
01-26 1490
部署Vue+Gin项目（吐血整理，各种踩坑）
Go项目实践二(gin+vue)
PG_shen的博客
12-13 1745
Go项目实践二(gin+vue) 1. 目录结构 . ├── README.md ├── common # 通用 │ ├── datasource # 数据源 │ ├── logger # 日志 │ ├── middleware # gin中间件 │ ├── req # 请求 │ ├── resp # 响应 │ ├── retu
Gin 打包vue或react项目输出文件到程序二进制文件
LeoForBest的博客
09-16 1150
前后端分离已成为行业主流，vue或react等项目生成的文件独立在一个单独目录，与后端项目无关。 实际部署中，通常前面套一个nginx，根据请求返回静态资源或者代理到后端go服务上。 安装配置一套环境繁琐，加上有时需要部署在windows上，希望借助go的夸平台编译运行+embed嵌入文件能力，实现单个文件部署即可。
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-7.GO语言做通用CRUD接口-2
最强的森的博客
07-26 611
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-7.GO语言做通用CRUD接口-2 相关文章： 技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境 技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-2.启动项目 技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-3.接收json数据 技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网
一个基于Gin + Vue 开发前后端分离的微型进存销系统，专为小微企业量身定制
m0_68103752的博客
09-22 978
一款专为小微企业量身定制的简易进存销管理系统。它采用了现代 Web 开发框架 Gin 和 Vue.js，不仅提供了流畅的用户体验，还保证了系统的高性能与易维护性。
解决vue.js 模板和jinja 模板冲突问题
24号同学的博客
01-18 4715
jinjia和vue.js默认的模板转义符都是{{}}目前的解决办法是修改vue.js的转义符,将原来的{{}}替换为其他标签,我改为{[]}版本1.x和2.x方法如下// 1.x Vue.config.delimiters = ['{[', ']}'] // 2.x new Vue({ delimiters: ['{[', ']}'] })
使用Golang的Gin框架和vue编写web应用
weichuangxxb的博客
09-12 7091
背景: 之前使用Golang的Gin框架进行一些运维内部后端的API接口开发，对外提供提供json类型的数据响应，但是该种方式在浏览器访问数据时数据格式不友好(由于是API接口，一般需要使用postman之类的工具来验证接口返回数据)，后来尝试了使用Golang的template模板来结合html进行数据渲染，但也发现比较缺乏美感。之后决定使用前端框架来渲染后端数据，由于vue框架的各种优势，比...
gin+vue动态路由
09-11
Gin是一个Go语言编写的HTTP Web框架，它是一个类似于Martini但拥有更好性能的API框架，...请注意，实现Gin+Vue的动态路由时，需要在Vue应用中根据动态路由参数向Gin后端发起相应的API请求，以获取数据并更新到组件中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值