惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

B
Blog
V
Vulnerabilities – Threatpost
Apple Machine Learning Research
Apple Machine Learning Research
V
V2EX
博客园 - 叶小钗
阮一峰的网络日志
阮一峰的网络日志
人人都是产品经理
人人都是产品经理
Latest news
Latest news
博客园 - 三生石上(FineUI控件)
美团技术团队
aimingoo的专栏
aimingoo的专栏
Google Online Security Blog
Google Online Security Blog
Security Archives - TechRepublic
Security Archives - TechRepublic
T
Threatpost
Y
Y Combinator Blog
T
Tailwind CSS Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
A
Arctic Wolf
C
Cyber Attacks, Cyber Crime and Cyber Security
小众软件
小众软件
Recent Commits to openclaw:main
Recent Commits to openclaw:main
T
Tenable Blog
W
WeLiveSecurity
L
LINUX DO - 热门话题
D
Docker
Cyberwarzone
Cyberwarzone
量子位
A
About on SuperTechFans
The Last Watchdog
The Last Watchdog
雷峰网
雷峰网
C
CERT Recently Published Vulnerability Notes
P
Palo Alto Networks Blog
The Hacker News
The Hacker News
Blog — PlanetScale
Blog — PlanetScale
P
Proofpoint News Feed
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
F
Full Disclosure
The Cloudflare Blog
T
The Blog of Author Tim Ferriss
T
The Exploit Database - CXSecurity.com
Engineering at Meta
Engineering at Meta
O
OpenAI News
Hacker News - Newest:
Hacker News - Newest: "LLM"
Scott Helme
Scott Helme
IT之家
IT之家
S
Secure Thoughts
MongoDB | Blog
MongoDB | Blog
L
Lohrmann on Cybersecurity
博客园 - 司徒正美
Google DeepMind News
Google DeepMind News

Mobility

从薅 token 到管 skill:我的 pks 工具落地实践 把笔记、微信读书、知乎装进 Obsidian:我基于llm-wiki知识中枢搭建实录 免费AI视频生成器:我如何用零成本做出带旁白字幕的多场景AI视频 Agnes免费模型真能白嫖视频?我改造了ViMax来试试 教你薅token(二):构建agent无关的skills管理工作流 教你薅token:构建agent无关的AI工作流 用 AI Agent 完成 Hexo 主题迁移:从 Next 到 Butterfly 的全自动化实践 Vercel封禁163邮箱后,我是怎么恢复博客的 用LLM管理安全开发规范:一次llm-wiki实践 hexo多语言方案总结及最佳实践 知乎增强工具-评论时间精确到秒 怎么理解数据库的四个隔离级别 kubernetes是什么-实用向教程 怎么更科学的用知乎摸鱼 读书笔记《系统之美》,如何面对现实中的复杂问题 分布式系统设计中的通用方法 高并发解决方案很难吗?轻松聊清楚高并发设计 SSP,DSP,RTB,ADX都是什么? 讲讲互联网广告的概念与发展 从redolog,undolog到隔离级别,刨根问底,讲清楚事务和ACID java项目低学习成本使用kubernetes的实践经验 剧变中的2021-一个中年工程师的年终总结 kubernetes环境下做金丝雀发布的一种思路 prometheus教程: 一篇文章讲懂prometheus 实现一个简单的java版本高性能获取ip地址所属国家工具 iterm2配置ssh书签, 实现记住密码和自动登录 怎样做一个好的技术分享 云原生究竟是什么 读书笔记 稻盛和夫《干法》-思考应该怎样去工作 review的个人价值 户口?大厂?高薪?生活?聊聊应届程序员的职业选择 RPC接口将所有输入输出封装成类是合理设计吗 程序员做业务开发的价值 设计模式的原则,设计模式究竟是什么 我提升开发效率的经验 通过合理的设计降低软件开发复杂度 信息传播过程中的衰减 看房小记-2020北京学区 读书感悟:文明、现代化、价值投资与中国 读书笔记-我曾走在崩溃的边缘 [翻译][关于分布式架构和系统设计]分布式系统的模式-综述 redis的对象 redis里的数据结构 设计模式备忘录 聊聊程序员的职业生涯,我对程序员这个职业的理解 通过mysql批量操作不生效问题聊聊java里mysql的batch 【实践经验】单元测试怎么写 关于rocketmq的readQueue和writeQueue 数据分析的利器-clickhouse介绍 通过位运算转换大小写 activemq多线程消费的不同处理方式 高并发下作余额扣减的一些经验 java细节:三目运算符和自动拆箱 设计一个开源的北京地铁路线规划小工具 java版本 redis cluster的数据迁移 jstorm源码解析之循环任务AsyncLoopThread activemq特性之持久化 activemq的安装及基本使用 activemq系列-概述 hexo教程:博客系统搭建及部署到github jstorm的监控metrics数据输出到第三方存储介质 camel系列之camel debugger的使用 jstorm源码解析之bolt异常处理 log4j动态添加appender 【翻译】java里编写基准测试的一些经验 java线程池:获取运行线程数并控制线程启动速度 maven里的mirror和repository: 配置多repository 使用maven shade plugin 打可执行Jar包 activemq plugin开发指南及示例 通过加入classpath的形式实现命令行运行java程序时引入第三方jar包 解决fatjar的 “java.lang.SecurityException: Invalid signature file digest for Manifest main attributes” 问题 通过实际操作理解redis cluster原理 一种实现在hbase中存储set的思路 log4j2.xml配置示例及与log4j的区别 不实现equals方法的情况下比较java list 使用lua脚本和jedis实现redis的hmsetnx命令,操作hash表时不覆盖原有数据 vitualbox虚拟机安装centos 7 及ssh访问、自启动等配置 在java独立进程(standalone app)中嵌入hawtio监控 java日志系统简介: 从tomcat大量打印debug日志说起 Java kryo/protobuf/protostuff序列化 or Json 性能对比 java分布式锁入门实战 leetcode第三题: 输出不包含重复字母的最长子串 java多线程实现三个字母顺序输出 一次kafka空间激增排查:kafka的数据压缩、批量发送等 java里128有何魔力? 聊聊Integer的缓存 storm/jstorm生态与周边工具,storm连接activemq,kafka,hdfs等 jstorm UI 介绍 五分钟学会写storm代码: jstorm/storm编码原理与普通java程序的区别 activemq web console的权限配置 storm ui 中一些关键属性的含义 activemq 5.6 连接池的内存泄露问题 关于apache camel的消息转发效率 一篇不错的lda模型入门文档 wordcount代码 hadoop基本的学习资料
Vaadin框架教程:Java工程师的前端开发秘籍
流沙 · 2024-03-06 · via Mobility

后端工程师开发前端的痛点,通常来说莫过于太过繁琐,经常要为了一些很小的事查半天。Vaadin很好的解决了这个痛点,为后端工程师提供易上手、方便使用的前端代码编写解决方案,今天我们就来了解一下。

大家好,今天跟大家介绍一个对后端工程师特别有价值的工具——Vaadin。

说起来,上手前端基本的html, css开发,确实并不难,但是如果只会这些基本的东西,开发起来会很繁琐。如果想要使用前端生态中的各种轮子,虽说便利度提升了,但学习成本也会同步上升。所以,如果不是职业的全栈工程师,只是作为一个后端,想临时写点前端代码,比如自己想做点小项目,通常来说都会有个很痛苦的过程。

Vaadin很好的解决了这个痛点。通过vaadin包装好的常用前端组件,我们几乎可以零学习成本的编写出功能完备、不太难看的页面。对于后端背景的程序员来说,无疑会大幅度降低自己做些小项目的成本。

Vaadin提供的功能,就是可以直接用java代码来写页面。Vaadin提供了多种输入框、表单等等封装好的前端样式,而且与springboot做了深度的融合,使用起来非常方便。

Vaadin的实际原理并不复杂,主要是基于服务端渲染,即在后端生成最终的html代码,交给浏览器。服务端渲染,这个并不罕见,与客户端渲染的优势和劣势,我们在这里不多讲。当然,对于vaadin来说,使用服务端渲染,似乎也没什么好说的,毕竟是写的后端代码,直接在后端做渲染,是个再正常不过的实现路径。Vaadin的引擎对前后端之间的交互做了封装,所以对使用者来说,前后端之间的交互是无感的,在页面层,我们也可以正常的调用后端service.

下面是我写的一段代码示例,可以更直观的感受Vaadin的作用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@Route(value = "path", layout = MainView.class)
@PageTitle("路径规划")
public class PathView extends VerticalLayout {

@Autowired
private PathService pathService;

public PathView() {
TextField start = new TextField();
TextField end = new TextField();
HorizontalLayout path = new HorizontalLayout();
path.add(start, end);
Button pathCalculate = new Button("calculate path");

VerticalLayout result = new VerticalLayout();
TextField transferNum = new TextField();
TextField distance = new TextField();
Text stations = new Text("");
result.add(
new H3("换乘数: "),
transferNum,
new H3("总距离 :"),
distance,
new H3("途径站点详情:"),
stations
);

pathCalculate.addClickListener(click -> {
PathInfoVO pathResult = pathService.getPath(start.getValue(), end.getValue());
System.out.println(pathResult);
stations.setText(StringUtils.join(pathResult.getDetail(), ","));
transferNum.setValue(String.valueOf(pathResult.getTransferNum()));
distance.setValue(String.valueOf(pathResult.getDistance()));
});

add(
new Text("hello world"),
path,
pathCalculate,
result
);
}
}

这段代码中,我们完全使用java代码对页面中的各个组件进行了编排,包括button的click函数,也是使用java开发者习惯的方式定义,并且能够直接调用其他后端service, 可以说是几乎零学习成本了。

详细代码和运行效果,可以到 项目地址中查看。

如果你对Vaadin感兴趣,或者有任何问题或想法,欢迎在评论区交流。一起探索如何更好地利用Vaadin,提升我们的开发效率吧!

原文地址: https://lichuanyang.top/posts/43947/