【问题标题】:How can I use browserify module for adapting xml2js node module for the browser?如何使用 browserify 模块为浏览器适配 xml2js 节点模块?
【发布时间】:2014-09-22 20:37:32
【问题描述】:

我正在用 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 安装 browserify

浏览 node_modules/xml2js -s xml2js -o xml2js.js

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

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

我通过https://www.npmjs.org/package/browserify了解browserify,但我很难理解和正确使用该模块。

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

谢谢!!

【问题讨论】:

    标签: javascript xml node.js libxml2 browserify


    【解决方案1】:

    我自己找到了答案。

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

    它不工作。

    所以我们需要适配新的 browserify 模块。

    首先,制作任何 javascript 文件(xml2jsM.js),包括以下代码。 '使用严格';

    var _ = require('xml2js');
    
    var logUnderscoreVersion = function() {
      console.log(_.VERSION);
    }
    
    module.exports = logUnderscoreVersion;
    

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

    然后制作一个捆绑文件。 (browserify xml2jsM.js > bundle.js)

    然后包含在 add_profile_index.html 中

    (您可以在http://lincolnloop.com/blog/untangle-your-javascript-browserify/ 上参考这些步骤)

    如果您有任何问题,请告诉我。

    谢谢~

    【讨论】:

    • 上述方法适用于浏览器,但我使用的是 systemjs,但我无法弄清楚如何解决依赖关系(尽管捆绑文件中有所有内容)。现在我已经通过 global access 在 window 对象中添加了 xml2js 。如果有人建议我如何在 systemjs 中使用它,那就太好了。
    【解决方案2】:

    我在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);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-07-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-04-04
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多