移动web开发工具HTML5 Builder新增特性

在，超过10亿人在使用移动智能电话，有人预测，这一数字在2015年也将会翻一倍。在这种愈发明显的趋势下，开发者面临的挑战就是怎么样利用最合理的工作量和工作成本，在最短的时间内，解决面临的问题。用户使用HTML5 Builder，可以使用网络标准，只需要单一的代码基就可以同时构建web和移动应用，并通过桌面和移动web浏览器来交付应用。除此之外，使用者也是可以通过苹果，安卓，黑莓等的移动应用商店来交付并可直接在设备上运行的原生应用。

在这种情况下，HTML5 Builder就是用户web和移动开发者的力量倍增器，使得用户能够在更多的时间内，用更少的工作量就能够部署到更多的平台。

以下为HTML5 Builder 的特点

第一、只需一次创建用户应用，并将其部署到多个web和移动平台即可;

为每个移动平台和和规格创建应用，使用HTML5 Builder，用户可使用单一的HTML5、CSS3、JavaScript和PHP代码基开发使用者的应用一次，只需一次点击就可部署到多个移动操作系统、设备和Web浏览器。

第二、使用单一可视化框架增进开发速度;

使用HTML5 Builder，用户不必需要学习新的编程语言或撰写代码，也不用知道怎样使用jQuery或移动JavaScript库。HTML5 Builder内置了几百个可重用、可拖拽的组件，用户可按需使用或对其加以定制来帮助更快地构建应用。

第三、通过协作式的工作流，让设计师与开发者能紧密协同工作;

现代以及动态的用户体验使得广泛用户的应用能与时下流行的CSS3样式和动画等形成集成。

第四、创建企业或ISV web和移动应用;

无论是企业还是ISV，都可以使用HTML5 Builder创建从简单到复杂的web和移动应用。

下面看看HTML5 Builder的新增特性又表现在哪些方面

第一、直观优化的用户界面

流畅的开发者用户界面；

强大的可视化应用开发；

几百个可拖拽组件；

基于上下文的工作流。

第二、通过可视化HTML5框架实现快速开发

可视化HTML5应用开发；

使用JavaScript编写客户端功能；

可选集成的服务器端PHP代码；

HTML5可视化组件，包括画布和多媒体。

第三、高性能HTML5本地存储

用于开发移动web应用和网站的API；

利用浏览器的存储能力，取代对第三数据库的依赖；

快速的网络数据访问性能，甚至即使在浏览器关闭后。

第四、动态实时浏览

撰写HTML和JS代码或者使用现有的模板；

实时查看代码修改，并可在进入生产环境前获得用户项目的实时预览；

设计现有的用户界面组件，并实时预览。

第五、强大的数据库支持

完整支持主流数据库管理系统；

连接到MySQL，InterBase，FireBird，DB2以及更多。

持word上传的富文本编辑器，web编辑器，HTML编辑器，前端编辑器。编辑器网上搜了一下，比较多，

前端用了VUE2,VUE3，React，HTML5，也是一个新项目，为了方便用的这些框架，实际上这个是无所谓，功能的实现和前端这些框架没什么关系。

后端用了PHP,JSP,ASP,ASP.NET,SpringBoot，功能实现和后端用的什么开发语言无关，后端只提供一个文件上传的接口，HTTP form协议，图片上传时会调这个接口。

编辑器是ckeditor5，为ckeditor编辑器增加粘贴Word图片的功能，支持快捷键操作（Ctrl+V），支持多种系统：Windows,macOS,Linux,信创国产化环境，中标麒麟，银河麒麟，统信，龙芯。

支持word粘贴，word内容粘贴,word图文粘贴,word图片粘贴，粘贴后图片能够自动上传到服务器中，然后将图片和内容HTML添加到编辑器中，上传接口地址能够自定义

示例项目：https://gitee.com/xproer/wordpaster-vue-ckeditor5
1.为ckeditor增加插件按钮

1.下载ckeditor5源码，注意：不是在npm中直接安装ckeditor5，在npm中直接安装的ckeditor5是已经打包好的编辑器，我们无法为其添加插件，必须下载源码添加好后再手动打包。

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git

cd ckeditor5-build-classic

2.添加插件文件

将plugin下的插件复制到ckeditor5的目录中

导入插件

在ckeditor.js中导入插件

3.添加插件

添加到工具栏

# 构建，生成ckeditor.js，生成的ckeditor.js在build目录下

yarn build

执行命令后生成ckeditor.js

将打包好的ckeditor.js复制到项目中

2.复制layer,wordpaster目录,安装jquery

#通过命令安装jquery

npm install jquery

3.在组件中导入样式

代码：

import {WordPaster,WordPasterManager} from ‘../../static/WordPaster/js/w’

import ‘../../static/WordPaster/js/w.css’

import ‘../../static/layer-v3.1.1/layer/layer’

import ‘../../static/layer-v3.1.1/layer/theme/default/layer.css’

4.初始化wordpaster组件

配置posturl,

代码：

//初始化

WordPaster.getInstance({

PostUrl:”http://localhost:8891/upload.aspx”,

ImageUrl:”http://localhost:8891{url}”

}).Load();

整合效果：

介

上一篇的文章中，我们讲到了如何从HTTP服务器中下载文件，和搭建下载文件服务器应该注意的问题，使用的GET方法。本文将会讨论一下常用的向服务器提交数据的POST方法和如何向服务器上传文件。

GET方法上传数据

按照HTTP的规范，PUT一般是向服务器上传数据，虽然不提倡，但是也可以使用GET向服务器端上传数据。

先看下GET客户端的构建中需要注意的问题。

GET请求实际上就是一个URI，URI后面带有请求的参数，netty提供了一个QueryStringEncoder专门用来构建参数内容：

// HTTP请求
        QueryStringEncoder encoder=new QueryStringEncoder(get);
        // 添加请求参数
        encoder.addParam("method", "GET");
        encoder.addParam("name", "flydean");
        encoder.addParam("site", "www.flydean.com");
        URI uriGet=new URI(encoder.toString());

有了请求URI，就可以创建HttpRequest了，当然这个HttpRequest中还需要有对应的HTTP head数据：

HttpRequest request=new DefaultHttpRequest(HttpVersion.HTTP_1_1, HttpMethod.GET, uriGet.toASCIIString());
        HttpHeaders headers=request.headers();
        headers.set(HttpHeaderNames.HOST, host);
        headers.set(HttpHeaderNames.CONNECTION, HttpHeaderValues.CLOSE);
        headers.set(HttpHeaderNames.ACCEPT_ENCODING, HttpHeaderValues.GZIP + "," + HttpHeaderValues.DEFLATE);
        headers.set(HttpHeaderNames.ACCEPT_LANGUAGE, "zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2");
        headers.set(HttpHeaderNames.REFERER, uriSimple.toString());
        headers.set(HttpHeaderNames.USER_AGENT, "Netty Simple Http Client side");
        headers.set(HttpHeaderNames.ACCEPT, "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8");

        headers.set(
                HttpHeaderNames.COOKIE, ClientCookieEncoder.STRICT.encode(
                        new DefaultCookie("name", "flydean"),
                        new DefaultCookie("site", "www.flydean.com"))
        );

我们知道HttpRequest中只有两部分数据，分别是HttpVersion和HttpHeaders。HttpVersion就是HTTP协议的版本号，HttpHeaders就是设置的header内容。

对于GET请求来说，因为所有的内容都包含在URI中，所以不需要额外的HTTPContent，直接发送HttpRequest到服务器就可以了。

channel.writeAndFlush(request);

然后看下服务器端接收GET请求之后怎么进行处理。

服务器端收到HttpObject对象的msg之后，需要将其转换成HttpRequest对象，就可以通过protocolVersion(),uri()和headers()拿到相应的信息。

对于URI中的参数，netty提供了QueryStringDecoder类可以方便的对URI中参数进行解析：

//解析URL中的参数
            QueryStringDecoder decoderQuery=new QueryStringDecoder(request.uri());
            Map<String, List<String>> uriAttributes=decoderQuery.parameters();
            for (Entry<String, List<String>> attr: uriAttributes.entrySet()) {
                for (String attrVal: attr.getValue()) {
                    responseContent.append("URI: ").append(attr.getKey()).append('=').append(attrVal).append("\r\n");
                }
            }

POST方法上传数据

对于POST请求，它比GET请求多了一个HTTPContent，也就是说除了基本的HttpRequest数据之外，还需要一个PostBody。

如果只是一个普通的POST，也就是POST内容都是key=value的形式，则比较简单，如果POST中包含有文件，那么会比较复杂，需要用到ENCTYPE=”multipart/form-data”。

netty提供了一个HttpPostRequestEncoder类，用于快速对request body进行编码，先看下HttpPostRequestEncoder类的完整构造函数：

public HttpPostRequestEncoder(
            HttpDataFactory factory, HttpRequest request, boolean multipart, Charset charset,
            EncoderMode encoderMode)

其中request就是要编码的HttpRequest，multipart表示是否是”multipart/form-data”的格式，charset编码方式，默认情况下是CharsetUtil.UTF_8。encoderMode是编码的模式，目前有三种编码模式，分别是RFC1738，RFC3986和HTML5。

默认情况下的编码模式是RFC1738，这也是大多数form提交数据的编码方式。但是它并不适用于OAUTH，如果要使用OAUTH的话，则可以使用RFC3986。HTML5禁用了multipart/form-data的混合模式。

最后，我们讲讲HttpDataFactory。factory主要用来创建InterfaceHttpData。它有一个minSize参数，如果创建的HttpData大小大于minSize则会存放在磁盘中，否则直接在内存中创建。

InterfaceHttpData有三种HttpData的类型，分别是Attribute, FileUpload和InternalAttribute。

Attribute就是POST请求中传入的属性值。FileUpload就是POST请求中传入的文件，还有InternalAttribute是在encoder内部使用的，这里不过多讨论。

因此，根据传入的minSize参数大小，Attribute和FileUpload可以被分成下面几种：

MemoryAttribute, DiskAttribute or MixedAttribute
MemoryFileUpload, DiskFileUpload or MixedFileUpload

在这一节我们先看一下在POST请求中并不上传文件的处理方式，首先创建HTTP request和PostBody encoder：

// 构建HTTP request
        HttpRequest request=new DefaultHttpRequest(HttpVersion.HTTP_1_1, HttpMethod.POST, uriSimple.toASCIIString());

 HttpPostRequestEncoder bodyRequestEncoder=        new HttpPostRequestEncoder(factory, request, false);

向request中添加headers：

// 添加headers
        for (Entry<String, String> entry : headers) {
            request.headers().set(entry.getKey(), entry.getValue());
        }

然后再向bodyRequestEncoder中添加form属性：

// 添加form属性
        bodyRequestEncoder.addBodyAttribute("method", "POST");
        bodyRequestEncoder.addBodyAttribute("name", "flydean");
        bodyRequestEncoder.addBodyAttribute("site", "www.flydean.com");
        bodyRequestEncoder.addBodyFileUpload("myfile", file, "application/x-zip-compressed", false);

注意，上面我们向bodyRequestEncoder中添加了method,name和site这几个属性。然后添加了一个FileUpload。但是因为我们的编码方式并不是”multipart/form-data”，所以这里传递的只是文件名，并不是整个文件。

最后，我们要调用bodyRequestEncoder的finalizeRequest方法，返回最终要发送的request。在finalizeRequest的过程中，还会根据传输数据的大小来设置transfer-encoding是否为chunked。

如果传输的内容比较大，则需要分段进行传输，这时候需要设置transfer-encoding=chunked，否则不进行设置。

最后发送请求：

// 发送请求
        channel.write(request);

在server端，我们同样需要构造一个HttpDataFactory，然后使用这个factory来构造一个HttpPostRequestDecoder，来对encoder出来的数据进行decode：

HttpDataFactory factory=    new DefaultHttpDataFactory(DefaultHttpDataFactory.MINSIZE);
//POST请求
decoder=new HttpPostRequestDecoder(factory, request);

因为server端收到的消息根据发送消息的长度可以能是HttpContent，也可能是LastHttpContent。如果是HttpContent，我们将解析的结果放到一个StringBuilder中缓存起来，等接收到LastHttpContent再一起发送出去即可。

在收到HttpContent之后，我们调用decoder.offer方法，对HttpContent进行解码：

decoder.offer(chunk);

在decoder内部有两个存储HttpData数据的容器，分别是：

List<InterfaceHttpData> bodyListHttpData
和
Map<String, List<InterfaceHttpData>> bodyMapHttpData

decoder.offer就是对chunk进行解析，然后将解析过后的数据填充到bodyListHttpData和bodyMapHttpData中。

解析过后，就可以对解析过后的数据进行读取了。

可以通过decoder的hasNext和next方法对bodyListHttpData进行遍历，从而获取到对应的InterfaceHttpData。

通过data.getHttpDataType()可以拿到InterfaceHttpData的数据类型，上面也讲过了有Attribute和FileUpload两种类型。

POST方法上传文件

如果要POST文件，客户端在创建HttpPostRequestEncoder的时候传入multipart=true即可：

 HttpPostRequestEncoder bodyRequestEncoder=        new HttpPostRequestEncoder(factory, request, true);

然后分别调用setBodyHttpDatas和finalizeRequest方法，生成HttpRequest就可以向channel写入了：

// 添加body http data
        bodyRequestEncoder.setBodyHttpDatas(bodylist);
        // finalize request，判断是否需要chunk
        request=bodyRequestEncoder.finalizeRequest();
        // 发送请求头
        channel.write(request);

要注意，如果是transfer-encoding=chunked，那么这个HttpRequest只是请求头的信息，我们还需要手动将HttpContent写入到channel中：

        // 判断bodyRequestEncoder是否是Chunked，发送请求内容
        if (bodyRequestEncoder.isChunked()) {
            channel.write(bodyRequestEncoder);
        }

在server端，通过判断InterfaceHttpData的getHttpDataType，如果是FileUpload类型，则说明拿到了上传的文件，则可以通过下面的方法来读取到文件的内容：

FileUpload fileUpload=(FileUpload) data;
responseContent.append(fileUpload.getString(fileUpload.getCharset()));

这样我们就可以在服务器端拿到客户端传过来的文件了。

总结

HTTP的文件上传需要考虑的问题比较多，大家有不明白的可以参考我的例子。或者留言给我一起讨论。

本文的例子可以参考：learn-netty4

本文已收录于 http://www.flydean.com/21-netty-http-fileupload/
最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧等你来发现！
欢迎关注我的公众号:「程序那些事」,懂技术，更懂你！

在线咨询

上一篇：6大HTML5编辑利器！新手可看
下一篇：「安利」工作学习的冷门小众干货整理分享

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

移动web开发工具HTML5 Builder新增特性

介

GET方法上传数据

POST方法上传数据

POST方法上传文件

总结

您的项目需求