您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

Gin与Vue3实现RESTful前后端分离

时间:2022-03-30 14:51:01  来源:  作者:GolangVue

Gin

package mAIn

import (
   "Github.com/gin-gonic/gin"
   "log"
   ".NET/http"
)

func main() {
   log.SetFlags(log.LstdFlags | log.Lshortfile)
   App := gin.Default()
   app.Use(cors) //这是设置中间件,其目的是响应跨站请求
   app.GET("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 201}) //根据返回的code值区别不同的请求,201是GET
   })
   app.POST("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 202}) //根据返回的code值区别不同的请求,202是POST
   })
   app.PUT("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 203}) //根据返回的code值区别不同的请求,203是PUT
   })
   app.DELETE("/api", func(c *gin.Context) {
      view(c)
      c.JSON(200, gin.H{"code": 204}) //根据返回的code值区别不同的请求,204是DELETE
   })
   _ = app.Run("0.0.0.0:8888")
}

func view(c *gin.Context) {
   _ = c.Request.ParseForm() //解析form数据
   values1 := c.Request.Form //获取到get、post的数据
   log.Println(values1)
   values2 := c.Request.PostForm //只获取到post数据
   log.Println(values2)
}

func cors(c *gin.Context) {
   // Access-Control-Allow-Origin,标识允许哪个域的请求,*代表所有的域请求
   c.Header("Access-Control-Allow-Origin", "*")
   // 响应首部 Access-Control-Allow-Methods 在对 preflight request.(预检请求)的应答中明确了客户端所要访问的资源允许使用的方法或方法列表。
   // 例如Access-Control-Allow-Methods: POST, GET, OPTIONS,使用*代表所有
   c.Header("Access-Control-Allow-Methods", "*")
   // 响应OPTIONS请求
   if c.Request.Method == "OPTIONS" {
      c.JSON(http.StatusOK, nil)
   }
}

Vue3

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
  <hr>
<!--  测试GET请求-->
  <button class="btn btn-primary btn-block" @click="test11">jqueryGET</button>
  <!--  测试POST请求-->
  <button class="btn btn-primary btn-block" @click="test12">jqueryPOST</button>
  <!--  测试PUT请求-->
  <button class="btn btn-primary btn-block" @click="test13">jqueryPUT</button>.
  <!--  测试DELETE请求-->
  <button class="btn btn-primary btn-block" @click="test14">jqueryDELETE</button>
  <hr>
</template>
<script>
import $ from "jquery" //引入jquery

export default {
  name: 'AboutView',
  components: {},
  methods: {
    test11() {
      //通过ajax发送GET请求
      $.ajax({
            url: "http://172.16.0.251:8888/api",
            type: "GET",
            data: {"id": "101"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
    test12() {
      //通过ajax发送post请求
      $.ajax({
            url: "http://172.16.0.251:8888/api",
            type: "POST",
            data: {"username": "zhangsan", "password": "123456"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
    test13() {
      //通过ajax发送put请求
      $.ajax({
            url: "http://172.16.0.251:8888/api?id=101",
            type: "PUT",
            data: {"username": "zhangsan", "password": "56789"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
    test14() {
      //通过ajax发送delete请求
      $.ajax({
            url: "http://172.16.0.251:8888/api",
            type: "DELETE",
            data: {"id": "101"},
            success: result => {
              console.log(result);
            }
          }
      )
    },
  }
}
</script>

效果

Gin与Vue3实现RESTful前后端分离

发送请求


Gin与Vue3实现RESTful前后端分离

结果响应


Gin与Vue3实现RESTful前后端分离

状态显示



Tags:Vue3   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
SpringBoot3+Vue3 开发高并发秒杀抢购系统
开发高并发秒杀抢购系统:使用SpringBoot3+Vue3的实践之旅随着互联网技术的发展,电商行业对秒杀抢购系统的需求越来越高。为了满足这种高并发、高流量的场景,我们决定使用Spring...【详细内容】
2024-01-14  Search: Vue3  点击:(93)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  Search: Vue3  点击:(45)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  Search: Vue3  点击:(76)  评论:(0)  加入收藏
Vue3 学习笔记,如何使用 Watch 监听数据变化
大家好,本篇文章我们继续学习和 Vue 相关的内容,今天我们归纳总结下如何使用 watch 监听组件中的数据变化,以及 computed 和 watch 的区别。什么是 watch,以及如何使用?watch 是...【详细内容】
2023-12-14  Search: Vue3  点击:(173)  评论:(0)  加入收藏
Vue3 学习笔记,如何理解 Computed 计算属性
大家好,本篇文章我们继续学习和 Vue 相关的内容,今天我们归纳总结下什么是 computed 计算属性、如何使用和应用场景,以及 computed 和 Method 事件的区别和应用场景。什么是 co...【详细内容】
2023-12-11  Search: Vue3  点击:(208)  评论:(0)  加入收藏
Vue3 学习笔记,如何定义事件以及如何理解响应式
如何定义事件在 Vue 中,可以使用 v-on 指令来绑定事件监听器。下面是一个示例,在点击按钮时触发事件处理程序:<template> <div> <button v-on:click="incrementCounter">{{...【详细内容】
2023-12-06  Search: Vue3  点击:(139)  评论:(0)  加入收藏
最全Vue3开源管理系统汇总
搭建一个后台管理,从零开始开发,其实并不容易,在众多开源管理后台中,Vue3是一个备受瞩目的选择。它是一个现代化的前端框架,具有高效、灵活、易用等特点,今天,要为大家介绍几款开源...【详细内容】
2023-11-24  Search: Vue3  点击:(216)  评论:(0)  加入收藏
Vue3问题:如何实现El-table内容超出省略提示?第三条很少有人会
一、需求分析,问题描述1、需求一个表格,分表头、表体、表尾三部分。当每个单元格的内容过长超出时,需要省略,用省略号代替超出的部分。同时,当鼠标移入上去时,会在上方弹出一个小...【详细内容】
2023-11-23  Search: Vue3  点击:(97)  评论:(0)  加入收藏
Spring Boot + Vue3 前后端分离 实战wiki知识库系统
下栽の地止:https://www.itwangzi.cn/2508.html Spring Boot + Vue3 前后端分离 实战wiki知识库系统在当今的Web应用开发中,前后端分离已经成为了一种主流的开发模式。Spring...【详细内容】
2023-11-18  Search: Vue3  点击:(147)  评论:(0)  加入收藏
深入详解Vue3中的Mock数据模拟
Vue3 前端开发时,需要api请求模拟和数据模拟,我将在接下来的时间写Mock模拟和json-server模拟。两种比较流行的模式,现在先介绍mock模式。使用NPM安装Mock.js库Mock.js是一个轻...【详细内容】
2023-11-07  Search: Vue3  点击:(158)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(14)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(17)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(23)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(29)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(37)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(27)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(77)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(85)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(45)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(76)  评论:(0)  加入收藏
站内最新
站内热门
站内头条