Gin与Vue3实现RESTful前后端分离 _Vue3

Gin【Gin与Vue3实现RESTful前后端分离】package mainimport ("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><button class="btn btn-primary btn-block" @click="test11">jqueryGET</button><button class="btn btn-primary btn-block" @click="test12">jqueryPOST</button><button class="btn btn-primary btn-block" @click="test13">jqueryPUT</button>.<button class="btn btn-primary btn-block" @click="test14">jqueryDELETE</button><hr></template><script>import $ from "jquery" //引入jqueryexport 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>效果