多语言展示
当前在线:1158今日阅读:112今日分享:19

Node-webkit + express 实现路由功能

在NodeJS中。使用Node-webkit这个框架可以制作桌面程序。node-webkit采用了chromium+node的自带运行环境。可以让你开发的时候不用去在意node的执行环境。也不用考虑浏览器的兼容性。而且制作出来的桌面程序可以跨平台。node-webkit有缺点,也有优点。首先说一说优点:1. 网上搜索node-webkit或者nw.js,可以直接下载到本地。很方便2. 支持node运行环境,并且可以依赖第三方模块。易上手3. 自带chromium浏览器。顾名思义node-webkit。这个webkit就是指的谷歌内核    可以完全支持HTML5和CSS3新特性和后台模版引擎比如ejs,jade等。新技术缺点:1. 通过软件打包的程序大小会非常大。大约都在80MB+,即使你的里面只有一个静态     文件,文件里面任何东西都没有,都会达到75MB+。2. 本人目前测试最新版本。0.13.2版本。设置toolbar没有菜单栏。WIN7系统下。可       能软件自身BUG,也可能因为我系统原因。有待测试。这里主要讲述如何在Node-webkit中应用express来实现路由功能做相应的页面转换。并且渲染试图页面,返回给浏览器。
工具/原料
1

http://nwjs.io/ 下载最新版本:nwjs-v0.13.2-win-x64.zip

2

http://nodejs.cn/ 下载node程序

3

编辑工具本人使用Sublime Text 3

方法/步骤
1

安装Node执行环境。并且安装nwjs

2

本地创建文件夹。文件夹名字为node-wbkit(随意),并且把nwjs所有解压完的文件全部复制到文件夹下。

3

在文件夹下创建一个属于自己的项目文件,在这里我命名为APP。打开编辑工具,本人用的sublime。把项目放进编辑工具。

4

在app文件夹下创建package.json文件。打开文件编辑入口信息。在main那里指定了入口文件为,当前目录下的index.html。所以我们要在app目录下面创建index.html静态页面

5

在index.html里面写入页面代码。打开CMD窗口工具。进入到我项目的目录,注意是我总项目的名字,并不是进入app这个文件夹下。是node-webkit这个文件夹

7

接下来安装express。目的为了实现路由功能。这次要进入到app目录下。通过npm install express来安装express模块,这个时候app目录下面会自动生成一个node_modules的文件夹。

8

这里我使用的是jade模版引擎。所以要用npm install jade。来安装jade模版引擎。在app目录下创建一个视图文件夹命名为node-view。在node-view文件夹下创建一个index.jade,来编写一个jade文件。

9

在app根目录下。注意是根目录下,创建一个名字为app的js文件。app.js导入express。编写试图路由。关于express的编写。这里不做过多讲解。

10

最重要的地方来了。第一express的本地地址为http://localhost:3000 .这样才访问了express的路由。那么根据这一点。我们可以在app的跟目录下面的index.html来入手这一件事。因为当nw app这个命令启动的时候。他就是访问的我app目录下面的index.html

11

把index.html所有代码删掉,创建一个script标签。把浏览器地址改掉。就可以了。首先要引用根目录下面的app.js这个文件通过 window.location.href= 'http://localhost:3000',再看一下我们的express路由,请求根目录是返回的index.jade文件。打开index.jade看看里面有什么

12

运行结果,可以正常的访问express的路由。这样就可以顺利的使用node-webkit+express来实现桌面程序了。随后还有electron + express的结合使用。

推荐信息