Vaadin学习-项目结构篇

838 阅读2分钟

最近看了几章节《practice vaadin》的说明,有点跃跃欲试。想看看用vaadin能否还原出正宗的前端项目,而不仅仅的只是停留在教学的阶段。在github上找到了一个纯js的项目,用来学习练手还是挺好的。感谢大佬开源的项目“中国象棋 - in html5”
github.com/itlwei/ches…

由于经验不足,刚开始的时候,不知道html,dom和js是如何协同,很多都靠猜,然后改成java代码去尝试,多多少少也磨出了一些头绪。首页已经转换成功了,并且引入了声音和画布,更多的功能还在慢慢的添加,应该更多只是机械的作业吧。万事开头难,后面应该会慢慢快一些吧。 大佬在项目中引入了AI的一些算法,还没有去研究。

项目结构说明

maven工程采用标准的springboot项目结构,把原项目的静态文件都拷贝到了resources目录下。src下创建backbend和frontend,作为前后端分离。由于PWA的图标要求至少512*512,所以我在网上找了一个新的图标加入到了静态文件中。 Snip20221020_1.png

排坑经历

遇到的几个坑是:

  1. 静态文件需要放置到项目的resources/META_INF/resources下,文件引入路径则直接使用“/img/a.png”等。同时也要调整原css文件等文件路径

  2. 如果引入了vaadin directory中的组件,则需要在pom.xml文件中添加仓库 http://vaadin.com/nexus/content/repositories/vaadin-addons/

  3. vaadin flow标准的Element中没有audio和canvas,需要用户自定义,或者使用vaadin directory中别人分享的组件。 (我是使用vaadin的TAG注解自定义的audio和canvas,官网有文档告诉如何创建组件,后面有空再翻译说明)

效果对比

原作效果预览图 itlwei.github.io/Chess/

下面是使用Vaadin重写html5后的效果图,可以确认vaadin完全可以还原出原作的效果。并在原来的基础上实现了PWA,能够将chrome应用安装到电脑桌面 image.png

image.png

后续再更新。。。。。。