Ant Design Pro (三) Golang+Gin后端简单实现

最新推荐文章于 2025-09-11 07:56:14 发布

原创最新推荐文章于 2025-09-11 07:56:14 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#golang #Ant Design Pro #Gin

web-Test 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用Golang的Gin框架搭建RESTful API服务，包括GET和POST请求处理，以及如何在Ant Design Pro中配置代理并禁用mock接口。

1. Golang Gin后端代码

package main

import (
	"encoding/json"
	"fmt"
	"github.com/gin-gonic/gin"
	"net/http"
	"time"
)
type Response struct {
	Success bool `json:"success"`
	Data    interface{} `json:"data"`
}

type DataRequest struct {
	Text string `json:"text,omitempty" form:"text"`
}

type DataResponse struct {
	Text string `json:"text,omitempty"`
}

func (d DataRequest) String() string {
	bs, _ := json.Marshal(&d)
	return string(bs)
}

func Failed(c *gin.Context, errString string) {
	c.JSON(http.StatusOK, &Response{
		Success: false,
		Data: errString,
	})
}

func Success(c *gin.Context, Data interface{}) {
	c.JSON(http.StatusOK, &Response{
		Success: true,
		Data: Data,
	})
}

func GetData(c *gin.Context) {
	var req DataRequest
	var err = c.BindQuery(&req)
	if nil != err {
		fmt.Println("Get Data Error: ", err)
		Failed(c, err.Error())
	} else {
		fmt.Println("Get Data Request: ", req)
		Success(c, &DataResponse{
			Text: fmt.Sprintf("Get Data Request Is: %s, Reback Is: %s", req.Text, time.Now().String()),
		})
	}
}

func PostData(c *gin.Context) {
	//data, _ := ioutil.ReadAll(c.Request.Body)
	//fmt.Printf("ctx.Request.body: %v\n", string(data))
	var req DataRequest
	var err = c.BindJSON(&req)
	if nil != err {
		fmt.Println("Post Data Error: ", err)
		Failed(c, err.Error())
	} else {
		fmt.Println("Post Data Request: ", req)
		Success(c, &DataResponse{
				Text: fmt.Sprintf("Post Data Request Is: %s, Reback Is: %s", req.Text, time.Now().String()),
			})
	}
}

func InitRouter(host string) error {
	gin.SetMode("release")
	r := gin.Default()
	//r.Use(Cors())
	r.GET("/", func(c *gin.Context) {
		Failed(c, "unknown error")
	})

	r.GET("/api/getData", GetData) // 获取库区列表
	r.POST("/api/postData", PostData) // 获取库区列表

	return r.Run(host) // listen and serve on 0.0.0.0:8080
}


func main() {
	InitRouter(":8080")
}

2. ant design pro 修改代理，并注释掉mock的调用接口

1) 将config/proxy.ts 修改如下， target 中IP为自己所在电脑IP

/**
 * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
 * -------------------------------
 * The agent cannot take effect in the production environment
 * so there is no configuration of the production environment
 * For details, please see
 * https://pro.ant.design/docs/deploy
 */
export default {
  dev: {
    '/api/': {
      target: 'http://192.168.3.3:8080',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  test: {
    '/api/': {
      target: 'http://192.168.3.3:8080',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  pre: {
    '/api/': {
      target: 'http://192.168.3.3:8080',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
};

2) 注释掉mock 测试接口导出

 mock/demo.ts

// import {Request,Response} from "express";

// const getData = async (req:Request,res:Response)=>{
//     const result = {
//         success:true,
//         data:{
//             "text": "MOck Get Test"
//         }
//     };
//     return res.json(result);
// }

// const postData = async (req:Request,res:Response)=>{
//     console.log(req)
//     const result = {
//         success:true,
//         data:{
//             "text": "MOck Post Test"
//         }
//     };
//     return res.json(result);
// }

// export default {
//     'GET /api/getData':getData,
//     'POST /api/postData':postData,
// }