Question

正如标题中所提到的，我让这个项目在我的localhost上工作但是因为我已经部署到heroku它没有。我仍然可以通过api访问数据库并显示json，但前端文件不起作用。

在主页上我得到的不能GET /

Server.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 }`);
  });
});

公共/ 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);
        });
      }
      
    });
})();

公共/ 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 /患者/ 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;

希望这是有道理的，任何帮助都会非常感激。

Answer 1

index.html未加载的主要问题是因为您已经注释掉了为index.html提供服务的中间件。
既然你的index.html被提供了，它就无法获取angular.js文件，因为，node_modules文件夹需要设置为静态，以便节点后端提供文件。

你可以这样做：

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

编辑：

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

还以与上面相同的方式提供包含其余文件的/ public文件夹。

通过cdn提供angular.js文件或使用webpack或gulp创建bundle.js。保存node_modules会很痛苦。

Restful API在本地工作，但角度前端在部署到heroku时不起作用

1 个答案: