Question

我正在学习Node.Js，我想了解如何在前端/后端之间进行交互。

我会做后端 - ＆gt;使用app.get（）通过sendig数据进行前端交互，但现在，我想了解如何从前端到后端变量。

前端。（我想将varGetFromFrontend传递给后端）

<html>
<script>
var varGetFromFrontend = 2; // This is variable I want to pass to backend
</script>
<head>
    <title>Home Page</title>
</head>

<body>
<h1> This is a test</h1>


</body>
</html>

在Node.Js（后端）

上

var express = require('express');
var app = new express();
app.use(express.json());
app.use(express.static(__dirname + '/public'));
     var entries = [
        {"id":1, "title":"Hello World!"},
        {"id":2, "title":"Hello World!"}
        {"id":3, "title":"Hello World!"}
        {"id":4, "title":"Hello World!"}
        ];
if(entries.id == varGetFromFrontend){
console.log("This is to print a variable by choosing it from Front End")
 console.log(varGetFromFrontend)
}

var port = Number(process.env.PORT || 5000);
app.listen(port);

我想知道如何打印＆＃34; varGetFromFrontend＆＃34;在服务器端

Answer 1

向服务器发出HTTP请求。在请求中包含变量。

有很多方法可以做到这一点：

将其放入表单中的隐藏输入中，然后提交表单。

或

将location.href设置为新值并在其中包含变量（例如，在查询字符串中）

或

使用XMLHttpRequest对象发出HTTP请求

或

创建script元素，并在src属性的网址中包含该变量

（这是一份非详尽的清单）

Answer 2

您可以使用socket.io

从浏览器与nodejs服务器进行交互

首先，安装socket.io：

npm install socket.io

并将这些代码写入各自的文件名。

app.js：

var express = require("express");
var http = require("http");
var socketIO = require("socket.io");

var app = express();
app.get("/", function(req, res){
    res.sendfile("./index.html");
});

var server = http.createServer(app);
var io = socketIO.listen(server, {log: false});
io.sockets.on("connection", function(socket){
    socket.on("sendVar", function(value){
        console.log("The value of the variable is " + value);
    });
});

server.listen(5000);

的index.html：

<html>
    <head>
        <title>Index Page</title>
    </head>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
        var variableFromFrontEnd = 2;
        var socket = io.connect("/");
        socket.on("connect", function(){
            console.log("connected!")
            socket.emit("sendVar", variableFromFrontEnd);
        });
    </script>
</html>

并运行它。

Answer 3

查看我构建的MEAN框架：http://mean.wolframcreative.com/

这使用Node作为使用Express作为API路由器的后端服务器。前端使用角度，纯粹是api消费工具。

简短的回答是：

角度

：

$http
    .get('/api/users/bobsaget')
    .success(function (response) {
        console.log(response);
    });

节点中的

（带快递）：

app.get('/api/users/:username', function (req, res) {
    var variable = req.params.username;
    //do logic here with the database(mongo) to get user info:
    db.users.findOne({username: username}, function (error, response) {
        if (!error) {
            res.send(200, response);
        } else {
            res.send(500, {success: false, message: error.message});
        }
    });
)};

很长的答案是玩弄我的框架并弄脏你的手。

Answer 4

我目前正在开发一个用于节点调用暂停的宁静框架。我正在旁边写一个api并且它进展顺利。该框架编写为模块化且易于使用。一切都围绕模块，路由，控制器，服务和验证器构建。

https://github.com/iamchairs/snooze

snooze.module('myServer', ['snooze-stdlib']) // inject the snooze-stdlib module
    .route('get', '/users/:username', { // define the route
        controller: 'UserCtrl', // what controller should handle this route
        action: 'getUserByUsername', // what action to perform on this route
        validator: 'GetUsername' // before processing this action what validation should occur
    })
    .controller('UserCtrl', function(User) { // inject the User service
        return {
            getUserByUsername: function(res, options) {
                User.getUserByUsername(options.query.username).then(function(username) {
                    res.send(200, username);
                }).fail(function(err) {
                    res.send(500, err);
                });
            }
        };
    })
    .service('User', function($q) { // inject the $q service
        return {
            getUserByUsername: function() {
                var deferred = $q.defer();

                deferred.resolve('iamchairs');

                return deferred.promise;
            }
        };
    })
    .validator('GetUsername', function($validator) { // inject the validator service
        return function(deferred, req) {
            if($validator.isLength(req.query.username, 2, 32)) {
                deferred.resolve(); // resolve (valid request)
            } else {
                deferred.reject([400, 'Username must be between 2 and 32 characters']); // reject (invalid request)
            }
        }
    });

如何在Node.JS上与浏览器进行交互

4 个答案: