go与前端的json数据交互笔记

2023-01-30 00:00:02

技术

JSON 是存储和交换文本信息的语法,类似 XML。
JSON 比 XML 更小、更快,更易解析。
JSON 易于人阅读和编写。
C、Python、C++、Java、PHP、Go 等编程语言都支持 JSON。

Go 与前端的 JSON 数据交互

golang处理json数据

encoding/json包中的json.Unmarshaljson.Marshal
json.Unmarshal:解析json的byte类型数据,转换成结构体对象
json.Marshal:将结构体对象转换成json的byte类型数据

type Message struct {
    //后面的json字段与需要对应的json格式的字段一致,不一致则json与结构体对象无法互相转换
    //例:{"address":"127.0.0.1:40000","body":"1234"}
    
    Address string `json:"address"`
    Body    string `json:"body"`
}
//(a *App)是使用wails的要求,可以无视
func (a *App) NewConnection(Msg string) string {
    //接收前端json字符串Msg
    fmt.Println("字符串", Msg)
    //结构体对象 mes
    var mes Message
    //将json字符串解析,Unmarshal解析需要先将json数据转为[]byte类型,返回值是错误类型
    //解析后转换成结构体对象mes
    err := json.Unmarshal([]byte(Msg), &mes)
    if err != nil {
        println("ERROR:", err)
    }
    fmt.Println("ERROR", err)
    fmt.Println("接收json", mes.Address)
    
    mes.Address = "111"
    mes.Body = "222"
    //Marshal将对象转换成json,返回[]byte和error
    mesJson, _ := json.Marshal(mes) 
    fmt.Println("转换json", string(mesJson))
    //返回json字符串
    return string(mesJson)

}

前端处理json数据

JSON.stringify:将json对象转换成json字符串
JSON.parse:将json字符串转换成json对象

<script setup>
import { reactive } from 'vue'
//使用wails的要求,就是直接引用go的NewConnection函数
import { NewConnection } from '../../wailsjs/go/main/App'
//消息json对象
const msg = reactive({
    address: "",
    body: ""
})
//使用const后不能改变对象,但可以改变对象的属性
//例msg=JSON.parse(result),msg不会发生变化,但可以使其属性发生变化 msg.body=222
//如要使对象能够改变,请使用let定义对象
let reply=reactive({
    address:"1",
    body:"1"
})

function newConnection() {
    //后端不能识别json对象,使用JSON.stringify将json对象转换成json字符串
    NewConnection(JSON.stringify(msg)).then(result => {
        msg.body=result
        //使用JSON.parse将json字符串转换成json对象
        reply=JSON.parse(result)
        alert(JSON.stringify(reply))
        
    })

}

</script>
<template>

    <div id="input" class="input-box">
        <input id="address" v-model="msg.address" autocomplete="off" class="input" type="text" />
        <button class="btn" @click="newConnection">连接</button>
    </div>
    <textarea id="text" v-model="msg.body" class="text"></textarea>
    <textarea id="text" v-model="reply.body" class="text"></textarea>

</template>
<style scoped>
.result {
    height: 20px;
    line-height: 20px;
    margin: 1.5rem auto;
}

.input-box .btn {
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    border: none;
    margin: 0 0 0 20px;
    padding: 0 8px;
    cursor: pointer;
}

.text {
    width: 200px;
    height: 200px;
    line-height: 30px;

}
</style>