最近看了几章节《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，所以我在网上找了一个新的图标加入到了静态文件中。
排坑经历
遇到的几个坑是：
-
静态文件需要放置到项目的resources/META_INF/resources下，文件引入路径则直接使用“/img/a.png”等。同时也要调整原css文件等文件路径
-
如果引入了vaadin directory中的组件，则需要在pom.xml文件中添加仓库
http://vaadin.com/nexus/content/repositories/vaadin-addons/ -
vaadin flow标准的Element中没有audio和canvas，需要用户自定义，或者使用vaadin directory中别人分享的组件。 （我是使用vaadin的TAG注解自定义的audio和canvas，官网有文档告诉如何创建组件,后面有空再翻译说明）
效果对比
原作效果预览图 itlwei.github.io/Chess/
下面是使用Vaadin重写html5后的效果图，可以确认vaadin完全可以还原出原作的效果。并在原来的基础上实现了PWA，能够将chrome应用安装到电脑桌面
后续再更新。。。。。。
