整合angular2-的WebPack起動用API的NodeJS REST

我想了解angular2的WebPack materlias2節點...等...我開始使用和修改此樣板： angular2-webpack-starter 整合angular2-的WebPack起動用API的NodeJS REST

現在我想學習也的NodeJS作爲Web服務器（使用快速框架，或任何你建議的，一個MySQL ORM等）。

我的問題是：現在我已經創建了一個虛擬ajax調用的示例項目（來自angular2-webpack-starter），如何將我的項目與使用NodeJS編寫的API REST集成？你能提供一個簡單的示例代碼嗎？而且，從angular2-webpack-starter樣板開始，哪裏可以放置所有API rest服務器代碼？

任何其他建議可以理解

非常感謝您

來源

2016-04-27 Fabry

這是很好的問題。沒有一個簡單的答案，但是我有一個節點js應用程序和裏面我有一個客戶端文件夾，我克隆到Angular-webpack-starter中，它的工作原理完美。我starcture是：

/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.測試ENV你需要運行服務器（ nodejs）和客戶端（角 - 使用webpack），所以爲了做到這一點，你需要在你的根目錄下運行npm start，在你的客戶端目錄下啓動npm。在這之後，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' 
     } 
     } 
    },

來源

2016-12-25 09:04:30 dang

整合angular2-的WebPack起動用API的NodeJS REST

回答

相關問題