将angular2-webpack-starter与NodeJS API集成
将angular2-webpack-starter与NodeJS API集成
提问于 2016-04-27 20:41:47
我想学习angular2 materlias2 node...etc的webpack……我开始使用和修改这个样板：angular2-webpack-starter
现在我想学习nodejs作为web服务器(使用express框架，或者您建议的任何东西，mysql ORM等)。
我的问题是:现在我有了我的示例项目(来自angular2-webpack-starter)，其中我已经创建了一个虚拟的ajax调用，我如何将我的项目与用NodeJS编写的API REST集成？你能提供简单的示例代码吗？另外，从angular2- code starter样板开始，哪里是放置所有API rest服务器代码的最佳位置？
如有其他建议，我们将不胜感激。
非常感谢
回答 1
Stack Overflow用户
发布于 2016-12-25 17:04:30
这是一个非常好的问题。没有一个简单的答案，但是我有一个node 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;几个重要的注意事项：
对于测试环境，您需要运行服务器(Nodejs)和客户端(angular-使用webpack)，因此为此，您需要在根目录中运行npm
- ，并在客户端目录中运行npm
- 。之后，两台服务器分别在端口3000和3003上运行。因此，您只需转到3000中的客户端服务器(即webpack为您配置的)并查看您的应用程序。
- 如果您问自己，如果它们不在同一端口，您如何将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'
}
}
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36890150
复制相关文章
相似问题
腾讯云开发者
