go设置后端启动_使用 Go Wails 框架来构建桌面应用(Go+Vue.js)
转自 Go 开发者论坛:https://learnku.com/go/t/36913
我们正在 翻译 Go 官方 Blog 快来加入我们吧。
众所周知,Go 主要用于构建 API、web 后端和 CLI 工具。但有趣的是,Go 可以用在我们没有预料到的地方。
例如,我们可以使用 Wails 框架用 Go 和 Vue.js 构建一个桌面应用程序。
这是一个新框架,还在测试阶段,但我很惊讶,用它可以很容易的开发,建立应用程序。
Wails 提供了将 Go 代码和 web 前端打包成单一二进制文件的能力。Wails CLI 通过处理项目创建、编译和打包,使您可以轻松地完成这项工作。
应用程序
我们将构建一个非常简单的应用程序来实时显示我的机器的 CPU 使用情况。如果你有时间,喜欢 Wails,你可以想出一些更有创意和更复杂的东西。
安装
Wails CLI 可以使用 go get
安装。安装之后,你应该使用 wails setup
命令进行设置。
go get github.com/wailsapp/wails/cmd/wails
wails setup
然后让我们用 cpustats
来启动我们的项目:
wails init
cd cpustats
我们的项目包括 Go 后端和 Vue.js 前端。main.go
将是我们的入口点,我们可以在其中包含任何其他依赖项,还有 go.mod
文件来管理它们。frontend
文件夹包含 Vue.js 组件,webpack 和 CSS。
概念
有两个主要组件用于在后端和前端之间共享数据:绑定和事件。
绑定是一个单一的方法,它允许你向前端公开(绑定)你的 Go 代码。
此外,Wails 还提供了一个统一的事件系统,类似于 Javascript 的本地事件系统。这意味着从 Go 或 Javascript 发送的任何事件都可以由任何一方接收。数据可以随任何事件一起传递。这允许你做一些优雅的事情,比如让后台进程在 Go 中运行,并通知前端任何更新。
后端
让我们先开发一个后端部分,获取 CPU 使用情况,然后使用 bind
方法将其发送到前端。
我们将创建一个新的包,并定义一个类型,我将公开(绑定)到前端。
pkg/sys/sys.go:
package sysimport ("math""time""github.com/shirou/gopsutil/cpu""github.com/wailsapp/wails"
)// Stats .
type Stats struct {log *wails.CustomLogger
}// CPUUsage .
type CPUUsage struct {Average int `json:"avg"`
}// WailsInit .
func (s *Stats) WailsInit(runtime *wails.Runtime) error {s.log = runtime.Log.New("Stats")return nil
}// GetCPUUsage .
func (s *Stats) GetCPUUsage() *CPUUsage {percent, err := cpu.Percent(1*time.Second, false)if err != nil {s.log.Errorf("unable to get cpu stats: %s", err.Error())return nil}return &CPUUsage{Average: int(math.Round(percent[0])),}
}
如果你的结构体有一个 WailsInit
方法,Wails 将在启动时调用它。这允许您在主应用程序启动之前进行一些初始化。
在 main.go
中引入 sys
这个包,绑定 Stats
实例返回给前端:
package mainimport ("github.com/leaanthony/mewn""github.com/plutov/packagemain/cpustats/pkg/sys""github.com/wailsapp/wails"
)func main() {js := mewn.String("./frontend/dist/app.js")css := mewn.String("./frontend/dist/app.css")stats := &sys.Stats{}app := wails.CreateApp(&wails.AppConfig{Width: 512,Height: 512,Title: "CPU Usage",JS: js,CSS: css,Colour: "#131313",})app.Bind(stats)app.Run()
}
前端
我们从 Go 绑定了 stats
实例,它可以在前端被 window.backend.Stats
调用。如果我们想调用 GetCPUUsage()
函数 ,它会给我们返回一个应答。
window.backend.Stats.GetCPUUsage().then(cpu_usage => {console.log(cpu_usage);
})
要将整个项目构建成单一的二进制文件,我们应该运行 wails build
,可以添加 -d
标志来构建一个可调试的版本。它将创建一个名称与项目名称匹配的二进制文件。
让我们通过简单地在屏幕上显示 CPU 使用值来测试它是否工作。
wails build -d
./cpustats
事件
我们使用绑定将 CPU 使用值发送到前端,现在让我们尝试不同的方法,让我们在后台创建一个计时器,它将使用事件方法在后台发送 CPU 使用值。然后我们可以订阅 Javascript 中的事件。
在 Go 中,我们可以在 WailsInit
函数中实现:
func (s *Stats) WailsInit(runtime *wails.Runtime) error {s.log = runtime.Log.New("Stats")go func() {for {runtime.Events.Emit("cpu_usage", s.GetCPUUsage())time.Sleep(1 * time.Second)}}()return nil
}
在 Vue.js 中,我们可以在组件挂载(或任何其他地方)时订阅此事件:
mounted: function() {wails.events.on("cpu_usage", cpu_usage => {if (cpu_usage) {console.log(cpu_usage.avg);}});
}
测量条
如果使用一个测量条来显示 CPU 的使用情况就好了,因此我们将包含一个第三方依赖项,只需使用 npm
即可:
npm install --save apexcharts
npm install --save vue-apexcharts
然后导入 main.js
文件:
import VueApexCharts from 'vue-apexcharts'Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)
现在,我们可以使用 apexcharts 显示 CPU 使用情况,并通过从后端接收事件来更新组件的值:
<template><apexchart type="radialBar" :options="options" :series="series"></apexchart>
</template><script>
export default {data() {return {series: [0],options: {labels: ['CPU Usage']}};},mounted: function() {wails.events.on("cpu_usage", cpu_usage => {if (cpu_usage) {this.series = [ cpu_usage.avg ];}});}
};
</script>
要更改样式,我们可以直接修改 src/assets/css/main
,或者在组件中定义它们。
最后,构建并运行
wails build -d
./cpustats
结论
我真的非常喜欢在工作中使用 Wails
,它的事件让你控制应用程序的状态变得非常简单。
在 wails.app 或 Github 获取该项目。
完整代码在这里。
转自 Go 开发者论坛:https://learnku.com/go/t/36913
我们正在 翻译 Go 官方 Blog 快来加入我们吧。
go设置后端启动_使用 Go Wails 框架来构建桌面应用(Go+Vue.js)相关推荐
- go设置后端启动_今日头条内涵段子使用Go语言构建千亿级微服务架构实践
今日头条从内涵段子开始,从日均千万,到亿万,再到百亿级,再到千亿级流量,头条APP不断进化,成为一个TMD小巨头之一.本篇文章讲述头条架构的微服务变迁史. 今日头条在2015年中期前,使用的开发语言大 ...
- go设置后端启动_为什么 Rubyists 应该考虑学习 Go
点击上方蓝色"Go语言中文网"关注我们,领全套Go资料,每天学习 Go 语言 如今,越来越少的 Web 开发人员开始专注于 Ruby 之类的单一语言.我们针对不同的工作使用不同的工 ...
- go设置后端启动_开源一个go的H5游戏服务端开发框架
本人也是因为go的魅力从原来的node.js转go开发的,但并没有放弃node.js开发.node.js开发起来极为舒服,谁用谁知道.go的性能,并发,静态编译速度还是更令人着迷,在云计算,区块链等未 ...
- go设置后端启动_名企实习项目|后端开发岗go微服务实战项目启动,大牛导师带你拿offer!...
「DAC实习项目早知道」 今天是第2期实习项目推送 --go微服务实战项目-- 岗位职责 Position Description 1.负责协助高质量的设计和编码: 2.主要语言为Golang: 3. ...
- go设置后端启动_名企实习项目 | 后端开发岗go微服务实战项目启动,大牛导师带你拿offer!...
「DAC实习项目早知道」 今天是第2期实习项目推送 --go微服务实战项目-- 微服务是近年来非常流行的架构,是后端开发工程师必备技能. 什么是微服务? 微服务(Microservices Archi ...
- 联想计算机usb启动怎么办,联想电脑bios怎么设置USB启动_电脑基础知识_IT计算机_专业资料...
联想电脑bios怎么设置USB启动_电脑基础知识_IT计算机_专业资料 (4页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分 联想电脑bios ...
- 计算机的硬盘 u盘启动,【电脑bios设置硬盘启动】电脑bios设置光驱启动_电脑bios设置u盘启动...
2017-11-14 17:02:44 浏览量:94932 怎么在BIOS里设置硬盘启动?电脑在启动时会从硬盘寻找引导文件,从而启动系统,如果硬盘不是第一启动项,或者有两个硬盘,就会导致系统无法启动, ...
- vue理由设置_在你的下一个Web应用中使用Vue.js的三个理由
Vue.js是那么地易上手,它在提供了大量开箱即用的功能的同时也提供了良好的性能.请继续阅读以下事例及代码片段以便更加了解Vue.js. 选择一个JavaScript框架真是太难了--因为有太多的框架 ...
- go设置后端启动_Go语言基础(十四)
Go语言基础(十四) 一.Redis 二.NSQ 三.Go module 四.Context......0 一.Redis Redis是一个key-value存储系统.和Memcached类似,它支持 ...
最新文章
- python3 连接redis密码中特殊字符问题
- .NET应用程序中异步调用Web Service的几种方法 come from: veryhappy(wx.net)
- 中文简体字-繁体字转换 WEB 服务(源代码)
- Java整数类的compareTo()方法和示例
- 生成jacoco报告_测开技能之如何利用ant jacoco 合并覆盖率报告
- Mysql MMM 高可用
- Arcgis Android API开发之离线地图
- asBroadcastStream
- struts2学到屎挫死-深入Struts2(2)--Action
- “996”引众怒,互联网疯狂的后遗症
- 场景文字识别论文阅读
- 用view-source:查看网页源代码
- android 耳机孔 红外,手机遥控器,3.5mm耳机接口红外遥控改造解析
- Rclone的介绍和使用
- 使用二维数组和函数解决八皇后问题(c++)
- 【人事管理系统2.0 Linq to SQL】企业人事管理系统
- 蒉莺春:京东开放平台和阿里系气质不一样
- 2021届 大疆一面 嵌入式软件
- Raphael绘制流程图(一),添加可拖动的图形
- 32套企业店铺展示微信小程序源码模板集合
热门文章
- Web前端工作笔记006---各种弹框框架
- java零碎要点012---linux Centos下编译、运行、调试java程序
- Dubbo学习笔记002---安装Zookeeper_并且安装Dubbo的管理控制台
- BUFF 在C++ 中取其中一部分 并且写到固定的目录下
- c++ assert() 使用方法
- Java代码怎么取消订阅功能,RxJava2 中多种取消订阅 dispose 的方法梳理( 源码分析 )...
- html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
- 迷宫求解 java_迷宫求解算法(java版)
- linux登录用户目录,linux命令
- comment.html手机文件,comment.html