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,
// }
最終展示
其他文章
Ant design pro (一) 環境搭建篇
Ant Design Pro (二) 添加頁面+使用mock(無model)
示例程式