个人中心
gpt4 book ai didi

javascript - 如何使用 browserify 模块为浏览器适配 xml2js Node 模块？

转载 作者：数据小太阳 更新时间：2023-10-29 02:30:00 28 4
gpt4 key购买 nike

我正在通过 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，但我很难正确理解和使用该模块。

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

谢谢!!

最佳答案

我自己找到了答案。

主要问题是browserify 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 安装下划线)

然后制作一个包文件。 (浏览器化 xml2jsM.js > bundle.js)

然后包含在 add_profile_index.html 上

(您可以引用 http://lincolnloop.com/blog/untangle-your-javascript-browserify/ 上的那些步骤)

如果你有任何问题，请告诉我。

谢谢~

关于javascript - 如何使用 browserify 模块为浏览器适配 xml2js Node 模块？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25982733/

28 4 0
文章推荐： 关于可以添加到 XML 文档的元素的 XML namespace 信息？
文章推荐： memory-leaks - Golang WaitGroup导致内存泄漏，我该怎么做才能改进这个功能
文章推荐： go - 将 slice 附加到 slice 时出现编译器错误
文章推荐： java - 生成漂亮的 JAXB 类
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com