使用 Angularjs 和 Nodejs 从 HTML 表单另存为 JSON 文件

Posted 2023-03-07

【中文标题】使用 Angularjs 和 Nodejs 从 HTML 表单另存为 JSON 文件

【英文标题】：Save as JSON file from HTML form using Angularjs and Nodejs

【发布时间】：2016-12-19 09:58:31

【问题描述】：

我有点卡住了，请帮助我。我正在尝试从 html 表单另存为 JSON 文件。我不知道如何将数据从 angularjs 控制器移动到 nodejs。如果我将数据从控制器发送到 Nodejs，我可以使用 fs.write 方法将表单数据保存为 json。我在这里粘贴代码。 我的 HTML 表单文件，

<div ng-controller="Ctrl" class="row">
            <form>
                <p>
                    <label for="Name"> Name :</label>
                    <input id="Name" type="text" name="Name" ng-model="store.name"/><br /><br />
                </p>
                <p>
                    <label for="age"> Age :</label>
                    <input id="age" type="text" name="age" ng-model="store.age"/><br /><br />
                </p><p>
                    <label for="sex"> Sex :</label>
                    <input id="sex" type="text" name="sex" ng-model="store.sex"/><br /><br />
                </p>
           <textarea>store | json</textarea><br />
           <input type="submit" class="btn btn-primary" ng-click="send()">

这是我的 app.js 文件

var app = angular.module('app',['ui.router','ui.bootstrap','ngAnimate'])
.controller('Ctrl',function($scope,$http)      
      $scope.data = 
      $scope.response = 

    $scope.send = function()

        var receiveddata = $scope.store;

        console.log(JSON.stringify(receiveddata));)

我能够在控制台上完全打印（receiveddata）成功。并且输出显示正确。

这是我的 server.js 文件。

var express = require("express");
var http = require('http');
var path = require('path');
var bodyParser = require('body-parser');
var fs = require('fs');
var formidable = require("formidable");
var util = require('util');

var app = express();
app.set('views', __dirname + '/views');
app.set('view engine' , 'ejs');

app.use(bodyParser.urlencoded());

app.use(express.static(path.join(__dirname,'public')));

app.get('/',function(req,res)
res.render('index', title: 'StoreAsJson' );
);
var server = app.listen(8000,function()
var port = server.address().port;
console.log("server is listening on port %s",port);
);

请任何人帮助我解决这个问题。我已经从this 链接写入 JSON 文件代码。我

【参考方案1】：

我将尝试展示一个使用 MEAN 堆栈的示例。

App.js：

(function()
    'use strict';
    angular.module('app', [ 'ui.router','ui.bootstrap','ngAnimate' ]);
)();

Controller.js：

angular
    .module('app')
    .controller('Ctrl', Ctrl);

function Ctrl($scope, $http) 

    $scope.send = function()
       //Saving data into a single var -> JSON format
       var userData = 
                        name : store.name,
                        age  : store.age,
                        sex  : store.sex
        ;

    // Calls Back-end api to save the new user
    $http.post('/users', userData)
        .success(function(data) 
            console.log('Successfully posted '+ data);
        )
        .error(function(data) 
            console.log('Error while posting: ' + data);
        );

    

server.js：

// Dependencies
var express         = require('express');
var mongoose        = require('mongoose');
var port            = process.env.PORT || xxxx;
var bodyParser      = require('body-parser');
var app             = express();

// Sets the connection to MongoDB
mongoose.connect("mongodb://localhost/UserApp");

. . . . . .

// Routes
require('./app/routes.js')(app);

. . . . . .

Routes.js：

这里我使用Mongoose 和MongoDB 来存储数据。发布到/users。例如，如果您转到localhost:xxxx/users，您应该能够看到所有使用getUsers 方法的用户。

/** Requiring Factories **/
var UserFactory = require('./factories/user.factory.js');

// Opens App Routes
module.exports = function(app) 

  /** Posting a new user**/
  app.post('/users', function(req, res) 
      //Calling postUser method from factory
      UserFactory.postUser(req).then( function (user) 
          console.log('Successfully posted '+ JSON.stringify(user));
          res.json(user);
      );
  );

  /** Getting all the Users**/
  app.get('/users', function(req, res) 
      UserFactory.getUsers().then( function (users) 
          return res.json(users);
      , function (error) 
          res.json(error);
      );
  );

user.factory.js：

//Requiring Mongoose user schema
var Users = require('../models/user-model.js');

//Exposing getUsers and postUser to external calls
exports.getUsers = getUsers;
exports.postUser = postUser;

/** Gets all the users stored in the DB **/
function getUsers() 
    return new Promise( function (resolve, reject) 
        //Opens Mongoose Query
        var query = Users.find();
        query.exec(function(err, users) 
            if (err)
                return reject(err);
            
            // If no errors are found, it responds with a JSON of all users
            return resolve(users);
        );
    , function (error)
        return reject(error);
    );


/** Posting a new users**/
function postUser(req) 
    return new Promise( function (resolve, reject) 
        // Creates a new user based on the Mongoose schema and the post body
        var newUser = new Users(req.body);
        // New Points is saved in the db.
        newUser.save(function(err) 
            if (err)
                reject(err);
            
            // If no errors are found, it responds with a JSON of the new user
            resolve(req.body);
        );
    , function (error)
        return reject(error);
    );

user-model.js：

//Pulls Mongoose dependency for creating schemas
var mongoose = require('mongoose');
var Schema   = mongoose.Schema;

// Creates a User Schema, it will automatically set an _id to a user
var users= new Schema(
                        name : type : String,
                        age  : Number,
                        sex  : type : String
);

//Saves schema to DB
module.exports = mongoose.model('users', users);

如果您了解MongoDB 和Mongoose 的工作原理，您应该可以轻松搞定。

您问了一个非常广泛的问题，所以这不是一个精确的答案。

PLUS

避免使用像Ctrl 这样的名称 使用this

html：

 send() -> myCtrl.send()
 store  -> myCtrl.store.name, myCtrl.store.age, myCtrl.store.sex

控制者：

angular
.module('app')
.controller('myCtrl', myCtrl);

   function myCtrl($http) 

       var vm = this;

       vm.send = function()
          //Saving data into a single var -> JSON format
          var userData = 
                           name : vm.store.name,
                           age  : vm.store.age,
                           sex  : vm.store.sex
           ;

       // Calls Back-end api to save the new user
       $http.post('/users', userData)
           .success(function(data) 
               console.log('Successfully posted '+ data);
           )
           .error(function(data) 
               console.log('Error while posting: ' + data);
           );
       
      

希望我对您有所帮助。

【讨论】：

非常感谢您的回复。我不想更改我的网址，这意味着如果我去 localhost:xxxx/users 我将获得 JSON 数据，但我不想更改我的网址。在我点击提交的同一页面上，它应该将表单数据保存到 JSON 文件。

您好，您不需要更改网址。该示例旨在告诉您，如果您想获得用户，只需致电$http.get 至/users。因此，例如，如果您需要显示从那里获取的用户数据，您只需执行一个调用，将该调用保存到一个变量中，然后以通常的方式从 html 调用它。

嗨，对不起，我不知道该怎么做。你能分享任何代码吗？在我上面的代码 receiveddata 变量中包含正确的 JSON 数据，当我按下提交按钮时，我只需要将其发送到服务器（nodejs）并保存为 JSON 文件。请帮我解决这个问题。

我已经向您展示了如何在上面的示例代码中发布JSON 数据，并且它还通过MongoDB 保存到JSON 格式文件中。例如，如果您查看新创建的数据库 users 集合，您将拥有 JSON 格式的所有用户。

好的。我会通过它，我会尝试它。非常感谢。