Restful API 在本地工作，但 Angular 前端在部署到 heroku 时不起作用
[英]Restful API works locally but angular frontend won't work when deployed to heroku
问题描述
So as mentioned in the title, I had this project working on my localhost but since I've deployed to heroku it doesnt.
所以正如标题中提到的，我有这个项目在我的本地主机上运行，但由于我已经部署到 heroku 它没有。 I can still access the DB via the api and display the json but the front end file doesn't work.我仍然可以通过 api 访问数据库并显示 json 但前端文件不起作用。
At the homepage I just get cannot GET /在主页上我刚得到无法 GET /
Server.js服务器.js
'use strict' const express = require('express'); const app = express(); const bodyParser = require('body-parser'); // req.body const cors = require('cors'); // 8080 const mongoose = require('mongoose'); const uriUtil= require('mongodb-uri'); let patients = require('./data'); const mongodbUri = 'mongodb://*********:***********@ds056009.mlab.com:56009/pt-db'; const mongooseUri = uriUtil.formatMongoose(mongodbUri); const dbOptions = {}; app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true})); app.use(cors()); //app.get('/', function(req, res) { //res.sendFile(__direname + '/index.html') //}); app.use('/api/patients', require('./api/patients/routes/post_patient')); app.use('/api/patients', require('./api/patients/routes/get_patients')); app.use('/api/patients', require('./api/patients/routes/get_patient')); app.use('/api/patients', require('./api/patients/routes/put_patient')); app.use('/api/patients', require('./api/patients/routes/delete_patient')); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { mongoose.connect(mongooseUri, dbOptions, (err) => { if (err) { console.log(err); } console.log(`Our app is running on port ${ PORT }`); }); });
public/js/app.js公共/js/app.js
(function() { 'use strict'; var app = angular.module('patientsApp', []); app.controller('patientsController', function($scope, $http) { $http.get('api/patients') .then(function(response) { $scope.patients = response.data; }); $scope.savePatient = function(patient) { $http.post('api/patients', patient) .then(function(response) { $scope.patients.push(response.data); }); } }); })();
public/index.html公共/index.html
<!DOCTYPE html> <html ng-app="patientsApp"> <head> <title>Patient DB</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body ng-controller="patientsController"> <div class="container"> <div class="col-sm-6"> <form ng-submit="savePatient(patient)"> <div class="form-group"> <input type="text" placeholder="First Name" ng-model="patient.first_name" class="form-control"> </div> <div class="form-group"> <input type="text" placeholder="Last Name" ng-model="patient.last_name" class="form-control"> </div> <div class="form-group"> <input type="text" placeholder="Hospital Number" ng-model="patient.hosp_num" class="form-control"> </div> <div class="form-group"> <input type="text" placeholder="Consultant" ng-model="patient.consultant" class="form-control"> </div> <div class="form-group"> <input type="text" placeholder="Treatment Site" ng-model="patient.treat_site" class="form-control"> </div> <div class="form-group"> <input type="text" placeholder="Treatment Group" ng-model="patient.treat_group" class="form-control"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div class="col-sm-6"> <ul class="list-group"> <li class="list-group-item" ng-repeat="patient in patients"> <h4>Patient Name: {{patient.first_name + ' ' + patient.last_name}}</h4> <p>Hospital Number: {{patient.hosp_num}}</p> <p>Consultant: {{patient.consultant}}</p> <p>Treatment Site: {{patient.treat_site}}</p> <p>Treatment Group: {{patient.treat_group}}</p> </li> </ul> </div> </div> <script src="node_modules/angular/angular.js"></script> <script src="/app.js"></script> </body> </html>
api/patients/gets_patients.js api/患者/gets_patients.js
const express = require('express'); const mongoose = require('mongoose'); const Patient = require('../model/Patient'); const router = express.Router(); router.route('/') .get((req, res) => { Patient.find({}, (err, patients) => { if (err) { res.status(400).json(err); } res.json(patients); }); }); module.exports = router;
Hope this makes sense, any help would be greatly appreciated.希望这是有道理的，任何帮助将不胜感激。
1 个解决方案
解决方案1
1 2017-01-19 13:02:37
The main issue why you index.html was not loading was because you had commented out your middleware which serves your index.html.
您未加载 index.html 的主要问题是因为您已注释掉为您的 index.html 提供服务的中间件。Now that your index.html is served, It is not able to get the angular.js file which is because, the node_modules folder needs to be set to static for the node backend to serve the files.
现在您的 index.html 已提供，但无法获取 angular.js 文件，这是因为需要将 node_modules 文件夹设置为静态，以便节点后端为文件提供服务。
You can do it like this :你可以这样做：
var path = require('path');//Require the nodeJs's path module.
app.use('/', express.static(path.join(__dirname+'/node_modules')));//declare as static the node_modules folder so that node can serve the angular.js file inside it
EDIT :编辑 ：
app.use('/', express.static(path.join(__dirname+"/public")));
Also serve the /public folder which has the rest of your files the same way as above.还以与上述相同的方式提供包含其余文件的 /public 文件夹。
serve the angular.js file through cdn or create a bundle.js using webpack or gulp..serving node_modules will be a pain..通过 cdn 提供 angular.js 文件或使用 webpack 或 gulp 创建一个 bundle.js。服务 node_modules 将是一个痛苦..
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.