如何使用browserify模块为浏览器调整xml2js节点模块?

时间:2014-09-22 20:37:32

标签: javascript xml node.js libxml2 browserify

我正在学习noodcook第2版的nodejs。

在第3章,从客户端向服务器发送序列化数据

我遇到了障碍。

下面的

是add_profile_server.js文件

var http = require('http');
var fs = require('fs');
var path = require('path');
var profiles = require('./profiles');
var xml2js = require('xml2js');

var index = fs.readFileSync('add_profile_index.html');
var clientXml2js = fs.readFileSync('./xml2js.js');

var routes, mimes = {
    js: "application/javascript",
    json: "application/json",
    xml: "application/xml"
};

function output(content, format, rootNode) {
    if (!format || format === 'json') {
        return JSON.stringify(content);
    }
    if (format === 'xml') {
        return (new xml2js.Builder({rootName: rootNode})).buildObject(content);
    }
}



routes = routes = {
    'profiles': function (format) {
        return output(Object.keys(profiles), format);
    },
    '/profile': function (format, basename) {
        return output(profiles[basename], format, basename);
    },
    'xml2js' : function(ext) {
        if (ext === 'js') { return clientXml2js; }
    }
};

function updateProfiles(profile, type, cb) {
    var name = Object.keys(profile).pop();
    profiles[name] = profile[name];
    cb(output(profiles[name], type, name));
}

function addProfile(request, cb) {
    var pD = ''; //post data
    request
    .on('data', function (chunk) { pD += chunk; })
    .on('end',function() {
        var contentType = request.headers['content-type'];
        if (contentType === 'application/json') {
            updateProfiles(JSON.parse(pD), 'json', cb);
        }
        if (contentType === 'application/xml') {
            xml2js.parseString(pD, {
                explicitRoot: false,
                explicitArray: false
            }, function(err, obj) {
                updateProfiles(obj, 'xml', cb);
            });
        }
    });
}


http.createServer(function (request, response) {
var dirname = path.dirname(request.url),
    extname = path.extname(request.url),
// Return the last portion of a path. (optional-extname: return only file name on mattached ext)
    basename = path.basename(request.url, extname);

console.log("URL: "+request.url);
console.log("dirname:"+dirname);
console.log("extname:"+extname);
console.log("basename:"+basename);
console.log("");


    extname = extname.replace('.', ''); //remove period

    if (request.method === 'POST') {
        addProfile(request, function(output) {
            response.end(output);
        });
    return;
    }
    response.setHeader("Content-Type", mimes[extname] ||'text/html');
// If the subroute exists in the routes object, we call the method stored at that namespace passing in basenameand extname
    if (routes.hasOwnProperty(dirname)) {
        response.end(routes[dirname](extname, basename));
        return;
    }
    if (routes.hasOwnProperty(basename)) {
        response.end(routes[basename](extname));
        return;
    }
    response.end(index);    
}).listen(8080);

及以下是add_profile_index.html文件

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

        <style>
            #frm, #raw {display:block; float:left; width:210px}
            #raw {height:150px; width:310px; margin-left:0.5em}
            #add {display:block; float:left; margin-left:1.5em}
            #add div {display:table-row}
            #add label {float:left; width:5.5em}
                 div button {float:right}
        </style>
        <title> INDEX </title>
    </head>

    <body>
        <form id="frm">
            Profile: <select id="profiles">
            <option> </option>
            </select>
            <br></br>

            Format:<select id="formats">
            <option value="json"> JSON </option>
            <option value="xml"> XML </option>
            </select>
            <br></br>
            <div id="output"></div>
        </form>
        <textarea id="raw"></textarea>

        <form id="add">
            <div><label>profile name</label><input name="profileName"> </input></div>
            <div><label>name</label><input name="name"></input></div>
            <div><label>irc</label><input name="irc"></input></div>
            <div><label>twitter</label><input name="twitter"></input></div>
            <div><label>github</label><input name="github"></input></div>
            <div><label>location</label><input name="location"></input></div>
            <div><label>description</label><input name="description"></input></div>
            <div><button>Add</button></div>
        </form>

        <script src="xml2js.js"></script>
    </body>

    <script>
        function load(done) {
            $.get('http://localhost:8080/profiles',

                function (profile_names) {
                    $.each(profile_names, function (i, pname) {
                        $('#profiles').append('<option>' + pname + '</option>');
                    });
                done && done();
                },
            'json');
        }
        load(); 
        $('#add').submit(function(e) {
            var output, obj = {}, format = $('#formats').val(), profileName;
            e.preventDefault();
            $.each($(this).serializeArray(), function(i, nameValPair) {
                obj[nameValPair.name] = nameValPair.value; //form an object
            });
            profileName = obj.profileName; 
            delete obj.profileName;

            obj = {_: obj}; 
            obj[profileName] = obj._;   
            delete obj._;

            output = (format === 'json') ? JSON.stringify(obj) :
             (new xml2js.Builder({rootName: profileName})).buildObject(obj);
            $.ajax({ 
                    type: 'POST', 
                    url: '/', data: output,
                    contentType: 'application/' + format, dataType: 'text',
                    success: function(response) {
                        $('#raw').val(response);
                        $('#profiles').html('<option></option>');
                        load(function () {
                            $('#profiles').val(profileName);
                        });
                    }
            });
        });
    </script>

</html>

在启动服务器之前,我们需要输入以下命令

npm -g install browserify

browserify node_modules / xml2js -s xml2js -o xml2js.js

我想我会直接按照这本书来构建示例代码,但是

以上代码在处理xml格式时尤其不起作用。我认为问题是browserify模块。

我浏览了https://www.npmjs.org/package/browserify以了解browserify,但我很难理解并正确使用该模块。

你能告诉我这是什么问题???

谢谢!

2 个答案:

答案 0 :(得分:4)

我自己找到了答案。

主要问题是 browserify node_modules / xml2js -s xml2js -o xml2js.js

没用。

所以我们需要调整新的browserify模块。

首先,制作包含以下代码的任何javascript文件(xml2jsM.js)。     &#39;使用严格的&#39;;

var _ = require('xml2js');

var logUnderscoreVersion = function() {
  console.log(_.VERSION);
}

module.exports = logUnderscoreVersion;

然后安装下划线模块。 (npm install underscore)

然后创建一个bundle文件。 (browserify xml2jsM.js&gt; bundle.js)

然后包含在add_profile_index.html

(您可以在http://lincolnloop.com/blog/untangle-your-javascript-browserify/

上引用这些步骤

如果您有任何疑问,请与我联系。

谢谢〜

答案 1 :(得分:-1)

我设法在这里做了一些例子http://opennodes.arecord.us/md/xml2js.md,看看这些例子是否对你有帮助。

你试过这样的事吗?

而不是

(new xml2js.Builder({rootName: profileName})).buildObject(obj);

尝试:

var xml2js = require('xml2js');
var builder = new xml2js.Builder({rootName: profileName}));
builder.buildObject(obj);