Java Web 开发平台 WebBuilder 7 发布

作者:web前端    发布时间:2020-01-27 20:02     浏览次数 :

[返回]

图片 1

仅仅入门如何用Node.js和Express搭建一个web服务器,没有说明太多概念性的东西。

浏览器工作原理

WebBuilder是一款开源的可视化Web应用开发和运行平台。基于浏览器的集成开发环境,可视化和智能化的设计,能轻松完成Web应用和面向移动设备的应用开发;高效、稳定和可扩展的特点,适合复杂企业级应用的运行;跨平台、数据库和浏览器的架构,适应复杂的服务器和客户端环境;包含多项先进技术,使应用系统的开发更快捷和简单。

一、 Nodejs简介

浏览器的组成

  • 人机交互部分(UI)
  • 网络请求部分(Socket)
  • JavaScript引擎部分(解析执行JavaScript)
  • 渲染引擎部分(渲染HTML、CSS等)
  • 数据存储部分(cookie、HTML5中的本地存储LocalStorage、SessionStorage)

官网:

​ ==Node是JavaScript语言的服务器运行环境。==

主流渲染引擎

WebBuilder 7 更新内容:

​ 所谓“运行环境”有两层意思:首先,JavaScript语言通过Node在服务器运行,在这个意义上,Node有点像JavaScript虚拟机;其次,Node提供大量工具库,使得JavaScript语言与操作系统互动,在这个意义上,Node又是JavaScript的工具库。

介绍

  1. 渲染引擎 又叫 排版引擎 或 浏览器内核。

  2. 主流的 渲染引擎 有

  • Chrome浏览器: Blink引擎(WebKit的一个分支)。
  • Safari浏览器: WebKit引擎,windows版本2008年3月18日推出正式版,但苹果已于2012年7月25日停止开发Windows版的Safari。
  • FireFox浏览器: Gecko引擎。
  • Opera浏览器: Blink引擎(早期版使用Presto引擎)。
  • Internet Explorer浏览器: Trident引擎。
  • Microsoft Edge浏览器: EdgeHTML引擎(Trident的一个分支)。

全新的集成开发环境:在线开发xwl、js、java、sql、css、html和xml等;代码自动完成,实时校验,语法高亮,代码导航,变量识别和自动匹配等;可视化设计器和生成器提供快速的模块、界面、属性和事件的自动生成功能;增强的调试功能无论服务器端对象和客户端对象均可直接以对象的形式输出到浏览器控制台;真正的所见即所得设计器,使设计期间和运行期间展现完全一致;全文搜索功能,可方便查找内容、文件、关键字和URL捷径等;数据库连接监控器和线程监控器可实时监控程序对系统资源的使用;上下文自动感知的用户界面:比如同一个删除按钮和快捷键能针对不同的上下文调用不同的删除功能,以方便开发人员操作;多选择操作支持,可以多选文件、对象和控件等,多选之后可以同步删除、修改或拖动等;团队开发功能增强,模块编辑权限设置;不同开发人员或不同会话编辑同一个文件时系统会提示;调试时表单的自动填充功能;导航功能可快速定位和跳转,可前进或后退上一次的页面和编辑器编辑点;代码模板和文档注释模板功能;异常自动处理:后台或前台的异常均可自动处理,如运行js错误系统会自动提示;通过源代码自动生成在线帮助文档;自动压缩调试的js和css文件;文件同步编辑功能,如使用Eclipse调试时可自动同步临时目录文件内容。无论是服务器端还是客户端,新版本的WebBuilder 7带来更高效的性能,以处理日益庞大和复杂的企业业务。客户端无iframe加载技术,使界面运行非常流畅。组件、类库和模块的高度可重用机制,轻松应对复杂业务。模块可通过独立、共享、嵌套、引用和控件等多种方式调用,既可以静态加载也可以动态加载。ServerScript支持Rhino和Nashorn,并提供强大功能的服务器端编程js框架;提供处理当前request和response的app对象,如app.send(object), app.info(object),app.log(object),app.run(sql),app.get(),使服务器端编码简洁和高效;方便的调试功能可把对象直接输出到浏览器控制台, 如app.log({foo: 'bar'});可把该服务器端对象以对象的形式输出至当前用户的浏览器控制台。用户界面自动调整和适应功能。比如经典和海王星主题存在标题栏、表格列、按钮和字体等的差异, 系统能自动处理这些差异,使界面表现一致。模块使用文件系统存储方便版本管理及自动同步。如拖动、重命名或修改目录/文件时,系统会自动同步所有对该目录/文件的引用路径。前端和后台第三方组件更新至最稳定版本,比如前端ExtJS使用经过修正的4.2.3版本,后台计划任务使用1.7.3版本。强大的代码重构功能,更改变量名称,拖动模块文件路径等均能自动更新相应代码。通过数据字典定义即可轻松完成数据库CRUD应用功能的开发。控件管理器采用宏的配置方案,可简单和快速添加新的控件。面向移动设备App的开发增强,模块的动态加载机制支持构建复杂的移动App。Bootstrap支持,提供了从普通页面到轻页面再到富客户端应用的全套解决方案。全新的管理工具:权限管理器,映射编辑器,数据库浏览器和任务管理器等。改进的权限控制系统和管理工具,通过管理工具能快速查找指定用户或角色可访问的,仅可访问的和不可访问的功能和模块等。无Bug和无漏洞的设计原则,保证系统的稳定和安全。多国语言的开发支持,同时把集成开发环境和管理工具设计成全中文界面。用户数据Map绑定到Session功能,可快速访问当前用户相关的静态和动态数据。URL路径自定义功能,可为模块指定任意的URL路径。提供大量全新的彩色图标及FontAwesome图标。支持经典、灰色和海王星等主题界面以及编辑器的多种主题。

​ Node内部采用Google公司的V8引擎,作为JavaScript语言解释器;通过自行开发的libuv库,调用操作系统资源。

工作原理

  1. 解析HTML构建Dom树(Document Object Model,文档对象模型),DOM 是W3C组织推荐的处理可扩展置标语言的标准编程接口。

  2. 构建渲染树渲染树并不等同于Dom树,因为像head标签 或 display: none这样的元素就没有必要放到渲染树中了,但是它们在Dom树中。

  3. 渲染树进行布局,定位坐标和大小、确定是否换行、确定position、overflow、z-index等等,这个过程叫"layout" 或 "reflow"

  4. 绘制渲染树,调用操作系统底层API进行绘图操作。

二、Node.js的下载和安装

浏览器访问网站过程

  1. 在浏览器地址栏中输入网址

  2. 浏览器通过用户在地址栏中输入的URL构建HTTP请求报文。

  3. 浏览器发起DNS解析请求,将域名转换为IP地址。

  4. 浏览器将请求报文发送给服务器。

  5. 服务器接收请求报文,并解析。

  6. 服务器处理用户请求,并将处理结果封装成HTTP响应报文。

  7. 服务器将HTTP响应报文发送给浏览器。

  8. 浏览器接收服务器响应的HTTP报文,并解析。

  9. 浏览器解析 HTML 页面并展示,在解析HTML页面时遇到新的资源需要再次发起请求。

  10. 最终浏览器展示出了页面

2.1 Node.js下载

Web开发本质

node.js官网下载://www.jb51.net/softs/504128.html

牢记以下三点

  1. 请求,客户端发起请求。
  2. 处理,服务器处理请求。
  3. 响应,服务器将处理结果发送给客户端

官网会根据你当前的操作系统,提供给你最合适的版本去下载。

客户端处理响应

  • 服务器响应完毕后,客户端继续处理:
    • 浏览器:解析服务器返回的数据
    • iOS、Android 客户端,解析服务器返回的数据,并且通过iOS或Android的UI技术实现界面的展示功能

​ 下载成功之后是一个msi文件,双击安装即可。安装成功后,相应的环境变量都会自动配置,不需要我们再去手动配置。

node.js 介绍

​ 一路next就可以安装成功。

node.js 是什么?

  1. node.js 是一个开发平台,就像Java开发平台、.Net开发平台、PHP开发平台、Apple开发平台一样。
  • 何为开发平台?有对应的编程语言、有语言运行时、有能实现特定功能的API(SDK:Software Development Kit)
  1. 该平台使用的编程语言是 JavaScript 语言。
  2. node.js 平台是基于 Chrome V8 JavaScript 引擎构建。
  3. 基于 node.js 可以开发控制台程序(命令行程序、CLI程序)、桌面应用程序(GUI)(借助 node-webkit、electron 等框架实现)、Web 应用程序(网站)

PHP开发技术栈: LAMP - Linux Apache MySQL PHP

node.js 全栈开发技术栈: MEAN - MongoDB Express Angular Node.js

2.3 测试Node.js是否安装成功

node.js 有哪些特点?

  1. 事件驱动(当事件被触发时,执行传递过去的回调函数)
  2. 非阻塞 I/O 模型(当执行I/O操作时,不会阻塞线程)
  3. 单线程
  4. 拥有世界最大的开源库生态系统 —— npm。

安装成功之后,可以在window控制台查看是否安装成功。

动态网页和静态网页

主要看后台发送到前台的是不是静态资源,如果发送回来的是没有经过后台任何数据处理的静态资源那么就是静态网页,如果后台经过一系列的数据处理之后,发送回来的网页,是动态网页。

输入下面的命令查看node的版本。

事件循环(Event-Loop)

事件循环会监视调用栈,以及回调队列
如果调用栈中为空,这个时候,就会将回调队列中的第一个元素放到调用栈中调用

异步-非阻塞

js是单线程的 异步的功能是由webapi或者nodeapi提供的!!## 事件循环(Event-Loop)
事件循环会监视调用栈,以及回调队列
如果调用栈中为空,这个时候,就会将回调队列中的第一个元素放到调用栈中调用

异步-非阻塞

js是单线程的 异步的功能是由webapi或者nodeapi提供的!!

node -v

进程和线程

  • 每一个 正在运行 的应用程序都称之为进程。
  • 每一个应用程序运行都至少有一个进程
  • 进程是用来给应用程序提供一个运行的环境
  • 进程是操作系统为应用程序分配资源的一个单位

  • 用来执行应用程序中的代码
  • 在一个进程内部,可以有很多的线程
  • 在一个线程内部,同时只可以干一件事
  • 而且传统的开发方式大部分都是 I/O 阻塞的
  • 所以需要多线程来更好的利用硬件资源

Node 中将所有的阻塞操作交给了内部实现的线程池

Node 本身主线程主要就是不断的往返调度

直接输入node然后回车,就可以让node去执行我们的js代码了。

REPL环境

  1. REPL 全称: Read-Eval-Print-Loop(交互式解释器)
  • R 读取 - 读取用户输入,解析输入了Javascript 数据结构并存储在内存中。
  • E 执行 - 执行输入的数据结构
  • P 打印 - 输出结果
  • L 循环 - 循环操作以上步骤直到用户两次按下 ctrl-c、.exit或者process.exit() 按钮退出。
  1. 在REPL中编写程序 (类似于浏览器开发人员工具中的控制台功能)
  • 直接在控制台输入 node 命令进入 REPL 环境
  1. 按两次 Control + C 退出REPL界面 或者 输入 .exit 退出 REPL 界面
  • 按住 control 键不要放开, 然后按两下 c 键
node

node.js中JavaScript 文件名命名规则

  • 不要用中文
  • 不要包含空格
  • 不要出现node关键字
  • 建议以 '-' 分割单词

2.4 使用Node.js运行JavaScript代码

node.js命令

新建一个nodeproject目录,新建一个js文件。01_hello.js

process.stdout.write

这个方法可以用来输出内容,而且不会自动换行
如果要换行可以加上n

var num1 = 10;var num2 = 20;console.log;

fs模块--文件的读写

var fs = require("fs"); // 引用fs模块
// 写
fs.writeFile("文件路径", "要写的内容", "编码格式", function(err){
    if(err){
        throw err;
    }
    console.log("写入成功")
})
// 读
fs.readFile("文件路径", function(err, data){
    //data是一个Buffer 字节数组
    //获取字符串,需要自己toString
})
// 读
fs.readFile("文件路径", "utf-8", function(err, data){
    //data是一个字符串
})

// 创建一个目录
fs.mkdir('./test-mkdir',function(err){
    if(err){
        console.log("创建文件夹出错");
        console.log(err)
    }else{
        console.log("创建成功")
    }
})

在windows控制台中,切换目录到js文件所在目录。然后输入

path模块相关

  • __dirname -- 获取当前文件所在目录的完整路径(伪全局)

  • __filename -- 获取当前文件的完整路径 (伪全局)

  • path.join() -- 用来拼接路径

path.join(__dirname,"css","index.css");

node 01_hello.js

http模块

直接上代码

//1. 引入http模块
var http = require("http");

// 2. 创建服务实例
var server = http.createServer();

// 3. 注册请求事件(每当有请求来的时候,就会触发该事件)
server.on("request",function(request,response){

    // 设置响应头
    response.writeHead(200,"OK",{
        "Content-Type":"text/html;charset=utf-8"
    })

    //给浏览器端返回数据(要给响应体中添加内容)
    response.write("");

    //在所有的响应信息添加完毕之后,需要结束响应
    response.end(); 
})

//4. 开启服务实例的监听功能
server.listen(端口号, function(){
    //监听开启成功后会执行的函数
    console.log("服务启动成功")
})

三、Node.js中的一些基本概念澄清

request对象

  • url 浏览器请求的地址(包含两部分 路径?参数)
  • method 浏览器发送该请求的方式 GET POST
  • headers 请求头中所有的信息(对象)
  • rawHeaders 请求头中所有的信息(数组)
  • httpVersion 请求头中包含的协议的版本

3.1 Node.js不是JS应用、而是JS运行平台

response对象

  • response.setHeader("键", "值") 往请求头中新增信息

  • response.writeHead(状态码, 状态描述信息, {往请求头中新增信息的键值对})

    • setHeader和writeHead都可以用来设置响应头
    • writeHead是直接将内容写入响应头中,而setHeader是在end的时候才写入
    • 如果同时使用setHeader和writeHead设置了响应信息,那么会合并,如果有相同的内容则以writeHead的为主
  • response.write(data, "编码格式", callback) 给响应体中追加内容

  • response.end(data) 通知服务器 所有的响应内容已经发送完毕 如果传入了data,就相当于是先调用response.write将数据追加之后再response.end结束响应 每次响应都需要调用这个end方法

  • response.statusCode -- 设置状态码

  • response.statusMessage -- 设置状态码对应的状态信息

​ 看到Node.js这个名字,初学者可能会误以为这是一个Javascript应用,事实上,Node.js采用C++语言编写而成,是一个Javascript的运行环境。

mime (第三方模块)

在页面请求的时候,不同的资源是有不同的content-type的值的,如果通过response.url一一匹配设置太麻烦了,可以通过 mime 模块设置不同类型资源的Content-Type

  • npm install mime
  • 在代码中直接引用 var mime = require('mime')
server.on("request",function(request,response){
    if(request.url.startsWith("/static")){
        response.writeHead(200,"OK",{
            "Content-Type":mime.getType("文件路径")
        })
    }
})

​ 既然不是Javascript应用,为何叫.js呢?因为Node.js是一个Javascript的运行环境。提到Javascript,大家首先想到的是日常使用的浏览器,现代浏览器包含了各种组件,包括渲染引擎、JavaScript引擎等,其中Javascript引擎负责解释执行网页中的Javascript代码。作为Web前端最重要的语言之一,Javascript一直是前端工程师的专利。不过,Node.js是一个后端的Javascript运行环境,这意味着你可以编写系统级或者服务器端的Javascript代码,交给Node.js来解释执行,

获取post请求发送的数据

如果post传过来的数据时大量的话,那么data事件可能会触发多次,所以可声明一个空数组,用来存放每次触发data事件的时候传过来的一段数据,end事件是当数据全部传送完毕的时候会调用的函数,这个时候再把数组中每一次传过来的数据拼接起来,就得到了完整的数据。

server.on("request", function(req, res){
    var chunkArr = [];  // 用来保存post请求传过来的数据
    req.on("data", function(chunk){
        chunkArr.push(chunk);  // 将此次数据存放起来
    })

    req.on("end", function(){
        // 拼接全部数据
        var result = Buffer.concat(chunkArr);
    })
})

3.2 Node.js与JavaScript的关系

获取get请求发送的数据

get请求的数据是在URL地址栏里的,所以可利用 url模块 或者 querystring 模块获取

  • url模块
    var url = require("url");
    var urlObj = url.parse(request.url,true); // 返回的是个对象,包含了url里面的信息
    urlObj.query  // query这个属性返回的是参数(也即是get方式的数据)对象

​ JavaScript包括3个部分:ECMAScript-262、BOM、DOM。BOM与浏览器相关,DOM和HTML页面相关。Node.js中只是包括了ECMAScript-262。所以我们以前的一些关于BOM的操作和DOM的操作都是基于浏览器端运行的,在Node.js中是无法使用的。

underscore和arttemplate --node.js模板--第三方模块

// underscore
var _ = require("underscore");
var render = _.template("模板字符串");
var resultHtml = render("数据");
response.end(resultHtml); // 发送给客户端 

// arttemplate

// 直接自己读文件
var resultHtml = template("模板字符串",数据);

// 根据模板字符串生成渲染函数
var render = template.compile("模板字符串");
var resultHtml = render(数据);

3.3 Node.js中几个全局变量

node.js模块化

  • NOde采用的模块化结构是按照CommonJS规范

  • 模块与文件是意义对应关系,即加载一个模块,实际上就是加载该模块对应的模块文件

  • 模块特点

    • 所有代码都运行在模块作用域,不会污染全局作用域。
    • 模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。
    • 模块加载的顺序,按照其在代码中出现的顺序。
  • 模块分类

    • 文件模块 -- 就是我们自己写的功能模块文件

    • 核心模块 -- Node 平台自带的一套基本的功能模块,也有人称之为 Node 平台的 API

    • 第三方模块 -- 社区或第三方个人开发好的功能模块,可以直接拿回来用

  1. 定义模块

将代码写在一个js文件中,这个js文件就是一个模块了

module.exports是一个对象,这个对象会在模块被创建出来的时候,同时被创建

// module.exports.成员 = 内容;
var say = function(){};
module.exports.say = say;

// 也可以直接给module.exports赋值
module.exports = {
    say : say
}

// 注意: 虽然exports和module.exports指向的是同一个对象的的引用地址,但是模块暴露给外接的属性或方法,只能直接赋值给module.exports,因为模块最终的返回值是 module.exports
  1. 引用模块
  • 核心模块

    • require("核心模块名称")
  • 文件模块

    • require("文件的路径,必须以/ ./ ../开头")

    • 文件路径中的.js路径可以省略,如果省略 .js 则node会查找 以该文件为名字 以 .js .node .json 为后缀的文件来加载,如果没有,就报错了

  • 目录模块

    • require("目录路径,必须以/ ./ ../开头")

    • 当以目录路径为参数的时候node.js会查找该目录下的 package.json 文件,会加载其 main 属性所对应的文件

    • 如果没有 package.json 或者package.json中没有main属性 则去加载目录中 index.js index.node

  • node_modules中的模块

    • require("模块名称");

    • (这么写是不带./ / ../)

    • 如果这么写,先回去核心模块中查找,如果找不到,则去当前目录的父路径中的node_modules文件夹中查找对应的模块,如果还是找不到,就会一直沿着父路径往上找,直到找到硬盘根目录

    • 如何查看要查找的路径(module.paths)

global:表示Node所在的全局环境,类似于浏览器的window对象。需要注意的是,如果在浏览器中声明一个全局变量,实际上是声明了一个全局对象的属性,比如var x = 1等同于设置window.x = 1,但是Node不是这样,至少在模块中不是这样。在模块文件中,声明var x = 1,该变量不是global对象的属性,global.x等于undefined。这是因为模块的全局变量都是该模块私有的,其他模块无法取到。 process:该对象表示Node所处的当前进程,允许开发者与该进程互动。 console:指向Node内置的console模块,提供命令行环境中的标准输入、标准输出功能。

express

下一篇:没有了