前段时间经常需要在本地调试开发环境的接口，由于每次都从浏览器里把接口信息复制到接口测试工具里感觉很麻烦，就想着写一个工具直接解析接口信息并发送请求。然后想到了一个方式，在浏览器中将接口复制为fetch请求，之后解析fetch请求并转成http请求，发送http请求拿到请求结果之后转成json展示出来。
技术选型
Wails: 一个可让您使用 Go 和 Web 技术编写桌面应用的项目。
开发
创建项目
- 安装
Wails使用以下命令安装Wails， 安装前需要确定已安装Go 1.18+和NPM (Node 15+)
go install github.com/wailsapp/wails/v2/cmd/wails@latest
- 初始化项目
wails init -n myproject -t vue
-t vue在作用是web部分使用vue框架。 Wails支持Svelte,React,Vue,Preact,Lit,Vanilla框架。
初始化之后项目结构如下：
结构说明：
- 在
main.go文件中编写程序的标题和窗口大小
- 编写解析
fetch的方法
在app.go文件中编写ParseRunFetch方法解析从浏览器复制的fetch并转成http请求。思路是通过字符串替换将fetch请求字符串转成json，从json中拿到请求信息组装成http请求。
// 请求结构体，用于接收`fetch`请求字符串转成的`json`
type ReqJson struct {
Url string `json:"url"`
Header struct {
Method string `json:"method"`
Body string `json:"body"`
Headers map[string]string
} `json:"header"`
}
// 解析`fetch`字符串并转成`http请求`, 发送`http请求`并返回请求结构
func (a *App) ParseRunFetch(fetch_str string) string {
// 将fetch字符串转成json格式
jsonStr := strings.Replace(fetch_str, "fetch(", "{\"url\": ", 1)
jsonStr = strings.Replace(jsonStr, ");", "}", 1)
jsonStr = strings.Replace(jsonStr, "{", "\"header\":{", 2)
jsonStr = strings.Replace(jsonStr, "\"header\":", "", 1)
// 将json转成ReqJson对象
var reqJson ReqJson
err := json.Unmarshal([]byte(jsonStr), &reqJson)
if err != nil {
return err.Error()
}
// 构建http请求
req, err := http.NewRequest(reqJson.Header.Method, reqJson.Url, bytes.NewBuffer([]byte(reqJson.Header.Body)))
if err != nil {
return err.Error()
}
for k, v := range reqJson.Header.Headers {
req.Header.Add(k, v)
}
client := &http.Client{}
resp, err := client.Do(req)
if err != nil {
return err.Error()
}
defer resp.Body.Close()
body, err := io.ReadAll(resp.Body)
if err != nil {
return err.Error()
}
return string(body)
}
- 将
ParseRunFetch方法传递到web程序，使之可以在vue中调用wailsjs/go/main目录下的这两个文件用于绑定go和web中的方法，使之可以相互调用。
App.js: 绑定同目录下go.main.js中的方法
go.main.js: 导出go程序中的方法
- 开发页面
在
vue程序中引入json-editor-vue3依赖，以便展示请求的结果。在HelloWorld.vue中可以编写应用的页面。代码如下：
<script setup>
import { reactive } from "vue";
// 引入go中的ParseRunFetch方法
import { ParseRunFetch } from "../../wailsjs/go/main/App";
import JsonEditorVue from "json-editor-vue3";
const data = reactive({
inputData: "",
resultData: "",
});
const parseRunFetch = async () => {
ParseRunFetch(data.inputData)
.then((result) => {
data.resultData = JSON.parse(result);
})
.catch((errStr) => {
data.resultData = errStr;
});
}
</script>
<template>
<main style="padding: 15px">
<div style="height: 260px">
<textarea v-model="data.inputData" rows="5" class="text-input"></textarea>
</div>
<div
style="
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
"
>
<button class="btn boom" @click="parseRunFetch">
<span>运行</span>
</button>
</div>
<div style="height: 550px">
<JsonEditorVue style="height: 100%" v-model="data.resultData" />
</div>
</main>
</template>
<style scoped>
.btn {
width: 180px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
cursor: pointer;
user-select: none;
letter-spacing: 0.5rem;
text-indent: 0.5rem;
border-radius: 15px;
box-sizing: border-box;
}
.boom {
background-color: #16a085;
color: #fff;
position: relative;
z-index: 1;
}
.boom::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 2px solid #16a085;
border-radius: 20px;
transform-origin: center;
}
.boom:hover::before {
transform: scale(1.25);
transition: all ease-out 0.5s;
border: 1px solid #96f3e0;
opacity: 0;
}
</style>
运行及打包
wails dev：运行程序wails build：打包程序
程序截图
从浏览器网络中将接口复制成fetch格式，放入程序输入框中，点击运行，请求结果会展示在下方。
出现的问题
在HelloWorld.vue中导入json-editor-vue3依赖后，出现白屏。打开控制台调试时发现如下报错信息：
解决方式：
安装@originjs/vite-plugin-commonjs插件，在vite.config.js配置，如下：
结语
春有百花秋有月，夏有凉风冬有雪。
莫将闲事挂心头，便是人间好时节。 -- 《颂古五十五首·春有百花秋有月》
