使用JavaScript创建REST风格的应用程序

在这样一个应用程序中,除数据库之外,服务端和客户端均由JavaScript实现,是不是很酷呢?

Node.js

选择Node.js可以让我们编写高性能的Web服务器。

brew install node
服务端代码
var http = require('http');
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World');
}).listen(8080, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8080/');
将上面代码保存为server.js,运行
node server
访问http://127.0.0.1:8080就可以看到浏览器和服务端的请求响应了。 随着Node.js一起安装的还包括它的依赖管理工具NPM,可以使用它极其简单地创建一个Node.js应用。
mkdir mynodeapp
cd mynodeapp
npm init
根据提示填写项目名称、描述和版本号,NPM会在根目录下创建一个package.json,包含了Node.js项目的初始信息。
{
  "name": "mynodeapp",
  "version": "0.0.1",
  "description": "Just a demo",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "Justina Chen",
  "license": "BSD-2-Clause",
  "dependencies": {}
}

ElasticSearch

由于它便捷的JSON数据格式和REST服务的支持,我们把它当作一个NoSQL数据库使用,当然了,ElasticSearch还提供了三种主流方式的JavaScript客户端,Node.js、AngularJS以及jQuery,意味着不需要其它服务端语言的支持也可以直接进行数据访问。

修改package.json的dependencies节点,在项目中添加ElasticSearch API的依赖

{
  "dependencies": {
    "elasticsearch": "1.x"
  }
}
运行NPM安装
npm install
默认的JavaScript API版本为0.9.0,最新版本为1.5.2,在连接服务器时可以使用apiVersion参数指定版本。
var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client({
    host: '127.0.0.1:9200',
    log: 'trace',
    apiVersion: '1.x'
});
索引
client.create({
        index: 'testindex',
        type: 'testtype',
        id: '1',
        body: {
            "title":"Test 1",
            "date":"2014-01-01"
        }
    }).then(function (body) {
        console.log("data indexed.");
    }, function (error) {
        console.log(error.message);
    })
}

ExpressJS

这是一个基于Node.js的REST服务框架,利用它可以快速开发出各个路由的处理模块。

在我们刚才创建的项目中加入ExpressJS的依赖并运行NPM安装:

{
  "dependencies": {
    "express": "3.x"
  }
}
创建REST服务
var express = require('express'),
    handler = require('./handler');

var app = express();
app.use(express.json());

app.get('/', handler.welcome);

app.listen(8080);
console.log('Listen on port 8080...');
handler.js中进行ElasticSearch的查询操作并返回客户端。
exports.welcome = function(req, res){
    client.search({
        q: '*'
    }).then(function (body) {
        res.send(body.hits);
    }, function (error) {
        res.send(error.message);
    });
};
使用浏览器访问http://localhost:8080,可以看到输出的查询数据。 ## **跨域请求** 使用简单的XMLHttpRequest调用REST API时,第一个遇到的问题就是跨域请求限制。
function post(data) {
    var xmlhttp;
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "http://localhost:8080/");
    xmlhttp.setRequestHeader('Content-Type', 'application/json');
    xmlhttp.send(JSON.stringify(data));
    if (xmlhttp.Status = 200) {
        console.log("succuss.");
    } else {
        console.log("failed.");
    }
};
XMLHttpRequest cannot load http://localhost:8080/.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:1337' is therefore not allowed access.
解决方法也很简单,在ExpressJS中启用Access-Control-Allow-Origin名单,配置说明如下: * Access-Control-Allow-Origin:许可客户端域名列表,* 为允许所有; * Access-Control-Allow-Methods:许可客户端请求列表; * Access-Control-Allow-Headers:许可客户端请求报头列表。 示例为允许http://localhost:3000的资源请求。
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://localhost:3000");
    res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
    next();
});
© 2018 Silent River All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero