绍

VvvebJs是一个开源的网页拖拽自动生成的JavaScript库，你可以以简单拖拽的方式生成自己需要的网页样式，内置jquery和Bootstrap，你可以拖拽相关的组件进行网页的构建，非常的方便，而且可以实时修改代码，功能丰富，使用简单，界面友好，特别适合一些专注于展示的网页设计，需要的朋友不可错过！

Github地址

https://github.com/givanz/VvvebJs

相关特性

• 1、组件和块/片段拖放。
• 2、撤销/重做操作。
• 3、一个或两个面板界面。
• 4、文件管理器和组件层次结构导航添加新页面。
• 5、实时代码编辑器。
• 6、包含示例php脚本的图像上传。
• 7、页面下载或导出html或保存页面在服务器上包含示例PHP脚本。
• 8、组件/块列表搜索。
• 9、Bootstrap 4组件等组件

默认情况下，编辑器附带Bootstrap 4和Widgets组件，可以使用任何类型的组件和输入进行扩展。

使用方式

如下代码：

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>	
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>	
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>	
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	
<script>
$(document).ready(function() 
{
	Vvveb.Builder.init('demo/index.html', function() {
		//load code after page is loaded here
		Vvveb.Gui.init();
	});
});
</script>

要初始化编辑器，调用Vvveb.Builder.init。第一个参数是要加载以进行编辑的URL，它必须位于相同的子域中才能进行编辑。第二个参数是页面加载完成时调用的函数，默认情况下调用编辑器Gui.init();

• 结构

Component Group是一个组件集合，例如Bootstrap 4组由Button和Grid等组件组成，该对象仅用于在编辑器左侧面板中对组件进行分组。例如，Widgets组件组只有两个组件视频和地图，并被定义为如下

Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];

Component是一个对象，它提供可以在画布上放置的html以及在选择组件时可以编辑的属性，例如Video Component，具有Url和Target属性的html链接Component定义为：

Vvveb.Components.extend("_base", "html/link", {
 nodes: ["a"],
 name: "Link",
 properties: [{
 name: "Url",
 key: "href",
 htmlAttr: "href",
 inputtype: LinkInput
 }, {
 name: "Target",
 key: "target",
 htmlAttr: "target",
 inputtype: TextInput
 }]
});

在Component属性集合中使用Input对象来编辑属性，例如文本输入，选择，颜色，网格行等。例如，TextInput扩展Input对象并定义为：

var TextInput = $.extend({}, Input, {
 events: {
 "keyup": ['onChange', 'input'],
	 },
	setValue: function(value) {
		$('input', this.element).val(value);
	},
	
	init: function(data) {
		return this.render("textinput", data);
	},
 }
);

输入还需要一个在编辑器html（在editor.html中）定义为<script>标签的模板，其id为vvveb-input-inputname，例如对于文本输入为vvveb-input-textinput，定义：

<script id="vvveb-input-textinput" type="text/html">
	
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
	
</script>

以上是借助浏览器翻译工具，对官网的文档进行简单的翻译，可能会有些不够准确的地方，感兴趣的小伙伴可以直接查看相关文档！

设计界面预览

总结

VvvebJs是一个非常强大的网页可视化生成构建工具，让不懂网页设计的小伙伴们也能够通过拖拽来生成美观大方的网页出来，让设计网页就像设计图片一样，VvvebJs特别适合展示型网页，甚至可以不需要代码就能完成一项复杂的网页设计，总体来说，VvvebJs是一个值得尝试的工具！

于不了解jQuery的读者而言，可以从jQuery的首字母联想它的根基，没错jQuery属于JavaScript家族，它是一种快捷、小巧、功能丰富的JavaScript库。jQuery提供很多支持各种浏览器平台的API，使用这些API可以使Web前端开发变得更加轻松。

Web应用程序的基本架构

Web服务器通常需要有固定的IP地址和永久域名，其主要功能如下：

1. 存放Web应用程序。

2. 接受用户申请的服务。如果用户申请浏览JSP、PHP等脚本文件，则Web服务器会对脚本进行解析，生成对应的临时HTML（HTM）文件。

3. 如果脚本中需要访问数据库，则将SQL语句传送到数据库服务器，并接收查询结果。

4. 将HTML（HTM）文件传送到Web浏览器。

说了这么多，那么重点来了，为何我们要学jq？它到底有何魅力？

1. 遍历和操作HTML元素。要实现动态网页，就需要在程序中对网页的内容进行控制。而HTML元素是构成网页的基本元素。jQuery可以使用选择器选择网页中指定的HTML元素或遍历网页中的HTML元素，并可以在程序中获取和设置HTML元素的属性、对HTML元素进行创建、插入、删除、复制、替换等操作。

2. 设置HTML元素的CSS样式。CSS（层叠样式表）是用来定义网页的显示格式的，使用它可以设计出更加整洁、漂亮的网页。通过在jQuery中设置HTML元素的CSS样式，可以很方便地动态改变HTML元素的显示样式。

3. 事件处理。jQuery可以很方便的将事件处理函数绑定到指定的HTML事件。从而对HTML事件进行相应的处理。

4. 很方便地实现与Ajax的交互。Ajax是用于创建交互式Web应用的网页开发技术，可以实现与服务器之间的异步通信。

5. 实现动画特效。在前端开发技术中，如何使界面更加美观、绚丽是很重要的课题。jQuery可以很方便地在HTML元素上实现动画效果，例如显示、隐藏、淡入淡出和滑动等，从而使页面活泼起来。

现在开始正式步入jq之路吧：

在百度“jQuery官网”进去下载jq的脚本库，然后在HTML的页面的script的src引用就可以使用jq了，如下图：

首先引用jq脚本的方法

第一个jq程序例1-1

（1）$()是jQuery()的缩写，它可以在DOM中搜索与指定的选择器（将在以后介绍）匹配的元素，并创建一个引用该元素的jQuery对象。

（2）$(document)是jQuery的常用对象，表示HTML文档对象。$(document).ready()方法指定$(document)的ready事件处理函数。ready事件当文档对象就绪的时候被触发。

（3）$("p")是jQuery一个选择器，用于选择网页中所有的<p>元素，$("p").click方法指定<p>元素的click事件处理函数。click事件用户单击当元素对象的时候被触发。

（4）$(this)是一个JQuery对象，表示当前引用的HTML元素对象（这里指p元素）。hide()方法用于隐藏当前引用的HTML元素对象。

（5）如上图【例1-1】首先在网页中使用p元素定义了一个字符串“单击我，我就会消失。”。然后通过jQuery 编程指定单击p元素时执行$(this).hide()隐藏p元素。