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

苏敏

我正在用noodcook第二版学习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

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 install下划线)

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

然后包含在add_profile_index.html上

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

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

谢谢〜

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在浏览器中而不是节点中为模块命名空间

来自分类Dev

如何使用自动browserify + uglify为浏览器提供node.js代码

来自分类Dev

如何使用Browserify运行节点加密模块

来自分类Dev

javascript节点模块和纯脚本引用如何在浏览器中共存?

来自分类Dev

Browserify:使用“ package.json”中的“浏览器”字段将本地文件替换为NPM模块

来自分类Dev

使用XML2JS javascript读取特定节点的问题

来自分类Dev

如何使用Godbolt(编译器浏览器)测试C ++模块?

来自分类Dev

浏览器中的Node JS fs模块

来自分类Dev

如何从浏览器控制台访问RequireJS模块?

来自分类Dev

如何在浏览器中加载NPM模块?

来自分类Dev

如何从WebAssembly模块检测浏览器信息?

来自分类Dev

是否可以在浏览器中使用路径模块?

来自分类Dev

如何使用带有浏览器功能的打字稿模块?

来自分类Dev

如何在浏览器中将DIV调整为全屏

来自分类Dev

为什么我的浏览器在使用 webpack 代码拆分节点模块后显示空白页面?

来自分类Dev

Node.JS找不到模块'xml2js'(Windows)

来自分类Dev

通过WebCryptoAPI而不是通过浏览器化的节点加密模块在浏览器中生成ECDH密钥

来自分类Dev

通过浏览器验证模块,或在node.js中获取模块路径

来自分类Dev

使用browserify在浏览器中缓存

来自分类Dev

如何使用节点js将消息从Web服务器推送到浏览器

来自分类Dev

模块版本与无头浏览器和桌面节点不匹配

来自分类Dev

模块版本与无头浏览器和桌面节点不匹配

来自分类Dev

在浏览器中使用带有 browserify 的节点包 - Uncaught ReferenceError: fileType is not defined

来自分类Dev

如何使用浏览器大小单独调整div的大小?

来自分类Dev

使用Browserify加载Node.js模块

来自分类Dev

使用Browserify加载Node.js模块

来自分类Dev

如何使用节点“ -r(模块)”启动pm2或如何在node.js中部署模块?

来自分类Dev

使用 xml2js 解析的问题

来自分类Dev

节点JS刷新浏览器

Related 相关文章

  1. 1

    如何在浏览器中而不是节点中为模块命名空间

  2. 2

    如何使用自动browserify + uglify为浏览器提供node.js代码

  3. 3

    如何使用Browserify运行节点加密模块

  4. 4

    javascript节点模块和纯脚本引用如何在浏览器中共存?

  5. 5

    Browserify:使用“ package.json”中的“浏览器”字段将本地文件替换为NPM模块

  6. 6

    使用XML2JS javascript读取特定节点的问题

  7. 7

    如何使用Godbolt(编译器浏览器)测试C ++模块?

  8. 8

    浏览器中的Node JS fs模块

  9. 9

    如何从浏览器控制台访问RequireJS模块?

  10. 10

    如何在浏览器中加载NPM模块?

  11. 11

    如何从WebAssembly模块检测浏览器信息?

  12. 12

    是否可以在浏览器中使用路径模块?

  13. 13

    如何使用带有浏览器功能的打字稿模块?

  14. 14

    如何在浏览器中将DIV调整为全屏

  15. 15

    为什么我的浏览器在使用 webpack 代码拆分节点模块后显示空白页面?

  16. 16

    Node.JS找不到模块'xml2js'(Windows)

  17. 17

    通过WebCryptoAPI而不是通过浏览器化的节点加密模块在浏览器中生成ECDH密钥

  18. 18

    通过浏览器验证模块,或在node.js中获取模块路径

  19. 19

    使用browserify在浏览器中缓存

  20. 20

    如何使用节点js将消息从Web服务器推送到浏览器

  21. 21

    模块版本与无头浏览器和桌面节点不匹配

  22. 22

    模块版本与无头浏览器和桌面节点不匹配

  23. 23

    在浏览器中使用带有 browserify 的节点包 - Uncaught ReferenceError: fileType is not defined

  24. 24

    如何使用浏览器大小单独调整div的大小?

  25. 25

    使用Browserify加载Node.js模块

  26. 26

    使用Browserify加载Node.js模块

  27. 27

    如何使用节点“ -r(模块)”启动pm2或如何在node.js中部署模块?

  28. 28

    使用 xml2js 解析的问题

  29. 29

    节点JS刷新浏览器

热门标签

归档