LancCJ(陈健)的博客

本文来源本文来自官网Vaadin using-web-components 本教程将教您如何使用Web组件并与之交互。我们将构建一个小型UI，将人员添加到数据网格中。 大多数Web组件（如Vaadin组件集）都作为ES模块分发。要有效地使用它们，您需要拥有Webpack，Parcel或Rollup等构建工具。如果您已有一个处理ES模块的现有项目，请随时直接跳到步骤1。 第0步：构建工具 Step 0: Build tooling创建和初始化项目 Create and init project首先创建一个新文件夹并在其中初始化NPM。 123$ mkdir webcomponents$ cd webcomponents$ npm init -y (1) -y标志默认为所有NPM init问题回答“是”。如果要自定义答案，请忽略它。 然后，安装Webpack和插件： 1$ npm install --save-dev webpack webpack-dev-server webpack-cli html-webpack-plugin 项目结构 Project structure ...

本文来源本文来自官网Vaadin quick start tutorial该文章看下来就是从官方的starter页面下载一个界面然后按照流程简单修改下代码然后实现一个todo list的小APP，讲解了事件监听的东西，没有啥难点，最后提供了些学习链接 在这个2分钟的教程中，您将学习如何构建一个小型但功能齐全的Vaadin应用程序。这个简单的示例将教您基于组件的开发和监听事件的基础知识。 youtube视频地址 您将构建的应用程序是经典的Todo应用程序。 先决条件 Prerequisites本教程假设您在计算机上进行了以下设置：Java 8或更高版本像IntelliJ，Eclipse或Netbeans这样的IDEMaven的 下载并导入 Download and import the app starter 下载起动器 下载完启动器后，解压缩该文件并在IDE中打开它。确保您可以通过运行spring-boot：run Maven目标来启动项目。如果您在导入或运行应用程序时需要帮助，可以找到有关IntelliJ，Eclipse和Netbeans的详细说明。 准备项目 Prepare ...

本文来源本文来自官网vaadin-key-concepts本人以便阅读理解以便做记录，一开始自己翻译但是水平有限顾谷歌翻译到此处，该文章主要是介绍vaadin这个框架的一些基本概念还有简单的使用方法，然后在文章中列举了一些相关资料的链接让新手可以快速的了解该框架，总体阅读下来觉得其实也很简单，只是中文资料比较少一起能讨论的人也比较少，在这里也想和大家一期探讨这个框架所以有需要的话后续创建一个微信群一期讨论下，我也是新手才学习这个东西。 本文旨在给Vaadin新人快速熟悉，让新手对基本概念及一些相关链接深入了解有一个快速的预览，在开发vaadin应用的时候也是一个快速的参考。如果你还没有vaadin应用，可以从该地方配置下载starter page. 基本概念 Core concepts 任何对象都是组件 Everything is a component 应用内需要一个按钮那么就编写new Button()需要一个文本输入框?那就编写new TextField()通过使用已经存在的组件和布局构建自己的组件和视图。使用注解@Route("path") 来进行导航跳 ...

教程简介新公司习惯使用Vaddin这套UI框架，而先前都是专注在Bootstrap或者基于Vue的UI框架或者其他主流框架，现今内部约定只能用这个，那么只能学习下这个东西了，说实在话心里很排斥继续学习这个UI框架，因为主流目前都是Vue这种了，再学这种的意义不是很大且浪费精力再研究一个未知的框架，且公司内部没有该框架的专业人士能够精通此UI框架，所以后续项目存在的风险其实还是很大的，不像其他框架的文献参考资料很多社区也很活跃，但是没办法，只能用这个，好吧认了，那就当一门新技术学习下并且记录下学习过程吧！没准能够发现新大陆。 学习资料说明本教程针对vaddin10 LTS这个版本进行学习，其他版本暂不考虑，除非公司有特殊的需求满足不了，其他版本不考虑了。所有学习的资料均来自Vaddin官网,我实在找不到活跃的社区学这一门技术，可怜的中文资料都没有，全TM是E文的，虽然E文的也可以但是作为一个中国人还是喜欢看中文的资料更加亲切，好吧认了 学习大纲和路径规划本人从Vaddin官网列出的课程然后逐一的进行学习该独门绝技，🐎蛋内心暗骂。 接下来就是在工作之余每天更新下学习情况然后把自己学习过程 ...

身为一位程序员而且是多年工作的程序员，自身开发编程必须有一套专业的规范，可惜小子不才编写不出😄，在此分享下阿里出品的开发规范，本人里面的大部分平时也没注意过，受益匪浅，少举几例让大家尝尝吧 命名风格121.强制】代码中的命名均不能以下划线或美元符号开始，也不能以下划线或美元符号结束。 反例：_name / __name / $Object / name_ / name$ / Object$ 121.强制】代码中的命名均不能以下划线或美元符号开始，也不能以下划线或美元符号结束。 反例：_name / __name / $Object / name_ / name$ / Object$ 122.【强制】代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用。正例：alibaba / taobao / youku / hangzhou 等国际通用的名称，可视同英文。 反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int ...

简介现在docker部署越来越流行，目前都是脚本化进行部署，很希望通过图形化界面进行管理，抛开命令行的方式，对于我这样的懒人来说就需要这么一个平台去管理，所以选Portainer来助我一臂之力 资源准备 一台洁净无瑕的服务器 手头有阿里云的服务器一枚 CentOS 7.6 64位 聪明的头脑+勤劳的双手 配置服务器 防火墙设置 安装docker通过SSH先连接到自己的Linux服务器 安装一些必要的系统工具： 1sudo yum install -y yum-utils device-mapper-persistent-data lvm2 添加软件源信息： 1sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 更新 yum 缓存： 1sudo yum makecache fast 安装 Docker-ce： 1sudo yum -y install docker-ce 启动 Docker 后台服务 1sudo systemctl st ...

文章简介项目中用到了清华紫光高拍仪(G550)来实现点击按钮进行拍照，然后将拍摄的照片上传到后台数据库中进行保存。而这样在页面调用硬件的功能往往需要通过调用ActiveXObject,这是IE的东西，其他非IE内核的浏览器还没办法去调用，只能通过安装插件来调用。更加不幸的是，在Chrome 41,FireFox 52 这两个版本后禁用了NPAPI，什么意思呢，就是你去安装插件的时候直接提示没认证这一类，没法安装。针对部分项目实在需要这样调用硬件，我们只能使用老的浏览器来实现了，假如大家还有其他办法在高版本上面调用，麻烦一定要告诉我，在这里谢谢了！！ 这次我主要来实现下清华紫光高拍仪(G550)载IE，Chrome V41 64位 (链接:https://pan.baidu.com/s/1d49BQ2 密码:mfwb),FireFox V52 64位(链接:https://pan.baidu.com/s/1htNuphU 密码:blby)上面实现调用。 两款高拍仪展示 G550 S710 准备下这次的软件及资料G550 链接:https://pan.baidu.com/s/ ...

看此文章需要对MongDB有基础知识什么是配置服务，路由服务，分片服务的概念。本次带来在Windows平台上搭建MongoDB分片副本集的操作过程。最后有 视频提供，很贴心！ 搭建MongoDB的架构图，来源网络 本次我的三台机器情况是Windows 7 SP1 64位，都是虚拟机来着，IP分别是10.211.55.19,10.211.55.22,10.211.55.23 提一点：系统不是SP1的话打不开MongoDB会报错api-ms-win-crt-runtime缺失这个报错在视频中就出现了，依据视频的方式解决即可。 我在生产环境的Windows Server 2008R2 中uechuxian这个问题，先打了SP1的升级包然后安装Vc库解决的,这个网上也有相关的信息 目录软件准备搭建的目录准备及软件(以下目录及配置文件 链接:https://pan.baidu.com/s/1qZ1yJyG 密码:7s4y 文本命令)目录结构说明 ——config 配置服务文件夹 –data 配置服务数据存储文件夹 –log 配置服务日志文件夹 ——shard1 分片1服务文件 ...

命令设置需要分片存储的数据库和数据库(database)里面的集合(table)连接随便一个 路由服务节点 1mongo.exe 10.211.55.19:20000 切换admin数据库 1use admin 设置具体哪个数据库数据存储需要分片,指定testdb分片生效 1db.runCommand( { enablesharding :"testdb"}); 一个数据库不是所有的集合都需要分片的，所以还需要设置具体哪个集合(我们俗称的表),设置下存储的片键，这里是设置为id 1db.runCommand( { shardcollection : "testdb.table1",key : {id: 1} } ) 切换到testdb数据库 1use testdb; 往table1里面插入数据 123for(var i=0;i<=100;i++){ db.table1.save({id:i,"test1":"testval1&qu ...

分片1(shard1)服务命令行启动我们依次的在三台机器上面执行启动命令,此处我们执行事先准备的bat 1C:\mongo\soft\bin\mongod.exe --shardsvr --replSet shard1 -f C:\mongo\shard1\configchard1.conf 分片2(shard2)服务命令行启动我们依次的在三台机器上面执行启动命令,此处我们执行事先准备的bat 1C:\mongo\soft\bin\mongod.exe --shardsvr --replSet shard2 -f C:\mongo\shard2\configchard2.conf 分片3(shard3)服务命令行启动我们依次的在三台机器上面执行启动命令,此处我们执行事先准备的bat 1C:\mongo\soft\bin\mongod.exe --shardsvr --replSet shard3 -f C:\mongo\shard3\configchard3.conf 路由(monogs)服务命令行启动我们依次的在三台机器上面执行启动命令,此处我们执行事先准备的bat 1C ...