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.Unmarshal
与json.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>