Question

我想学习angular2 webpack materlias2节点...等...我开始使用和修改这个样板： angular2-webpack-starter

现在我想学习nodejs作为web服务器（使用快速框架，或者你建议的任何东西，mysql ORM等等。）

我的问题是：现在我的示例项目（来自angular2-webpack-starter）我创建了一个虚拟的ajax调用，如何将我的项目与NodeJS编写的API REST集成？你能提供简单的示例代码吗？而且，从angular2-webpack-starter样板文件开始，哪里是放置所有API rest服务器代码的最佳位置？

任何其他建议将不胜感激

非常感谢

Answer 1

这是一个非常好的问题。没有一个简单的答案，但我有一个节点js应用程序，里面我有一个客户端文件夹，我克隆到Angular-webpack-starter，它的工作完美。我的关键是：

/client
/models
/node_module
/routes
/views
server.js
packages.json

在路线内你应该放置所有的api端点。

server.js包含：

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var index = require('./routes/index');
var api = require('./routes/api');
var test = require('./routes/api');
var users = require('./routes/users');
var expressValidator = require('express-validator');

var app = express();

var port = process.env.PORT || 3003;
var proto = process.env.PROTO || "http";
var host = process.env.HOST || "localhost";

//view engine
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 app.engine('html', require('ejs').renderFile);

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

//body parser and validator
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
app.use(expressValidator());
app.use(cookieParser());

app.use('/', index);
app.use('/api', api);
app.use('/users', users);
app.use('/test', test);

var server = app.listen(port, host, function(){
  console.log('app listening at port:' + port);
});

和api.js是：

var express = require('express');
var router = express.Router();
var fs = require('fs');
var path = require('path');

router.get('/analytics', function(req, res) {
       res.json({
         'response':'1',
         'body':'I just remember something, something important..."
       });
    });
module.exports = router;

一些重要说明：
1.对于测试环境，您需要运行服务器（nodejs）和客户端（角度 - 使用webpack），因此为了做到这一点，您需要在根目录中运行npm start并在客户端目录中运行npm start。之后，2个服务器在端口3000中运行一个，在端口3003中运行一个。所以您需要做的就是转到3000中的客户端服务器（为您配置的webpack）并查看您的应用程序。
2.如果你问自己，如果你的服务器不在同一个端口，你怎么能发送http给你的服务器（这是一个很好的问题） - 你需要做的就是使用webpack将你的请求代理到正确的地方，添加这到webpack.dev.js：

  devServer: {
      port: METADATA.port,
      host: METADATA.host,
      historyApiFallback: true,
      watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
      },
      proxy: {
       '/users/login': {
        target: 'http://localhost:3003'
       },
       '/users/register': {
        target: 'http://localhost:3003'
       },
       '/users/forgot-password': {
        target: 'http://localhost:3003'
       },
        '/users/reset': {
        target: 'http://localhost:3003'
       },
        '/users/confirm': {
        target: 'http://localhost:3003'
       },
       '/api/getUserProfile': {
         target: 'http://localhost:3003'
       },
       '/api/postEditableUserProfile': {
         target: 'http://localhost:3003'
       },
       '/api/upload-avatar': {
         target: 'http://localhost:3003'
       },
       '/api/analytics': {
         target: 'http://localhost:3003'
       },
       '/api/contact': {
         target: 'http://localhost:3003'
       }
      }
    },

将angular2-webpack-starter与NodeJS API REST集成

1 个答案: