Question

我使用了带有以下package.json配置的angular-cli和webpack：

"dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.17.2",
    "core-js": "^2.4.1",
    "express": "^4.15.3",
    "express-session": "^1.15.4",
    "mongoose": "^4.11.3",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
}

以下是我的根文件夹结构：

我正在学习Angular2的意思。我在server.js中有以下代码

const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const session = require('express-session');
mongoose.connect("mongodb://localhost/demo");

const api = require('../server/routes/api');

const app = express();
app.use(session({
    secret: 'somesecrettokenhere',
    name: 'demo',
    resave: false,
    saveUninitialized: true
}));

// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));


app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});

// Point static path to dist
    app.use(express.static(path.join(__dirname, '../dist')));

// Set our api routes
    app.use('/routes', api);

// Catch all other routes and return the index file
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../dist/index.html'));
});

/**
     * Get port from environment and store in Express.
 */
const port = process.env.PORT || '3000';
app.set('port', port);

/**
     * Create HTTP server.
 */
const server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port, () => console.log(`API running on localhost:${port}`));

以下是我的api.js：

const express = require('express');
const router = express.Router();

router.post('/login', (req, res) => {
  console.log('Run');
});

module.exports = router;

以下是我的Angular2 service.ts：

import { Injectable } from '@angular/core';
import {Http, Response, Headers} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {

  constructor(private _http: Http) { }

      Login(email: string, password: string): Observable<Response> {
        let credentials = {
        _email: email,
        _password: password
      };
      return this._http.post('/api/login',{_uc:credentials}).map(
          (res: Response) => res.json()
      );
  }

}

问题：

当我点击我的表单提交按钮时，它会点击我的service.ts文件上的登录方法，但是在服务器端控制台上没有显示任何错误或没有点击我的服务器api.js登录帖子方法。我不知道为什么我的服务器端api.js登录帖子方法没有命中，并且在控制台窗口中没有显示任何错误。请告诉我在我的代码中我做错了什么。客户端代码是工作文件我把console放在我的service.ts登录方法中，它显示我的输出，但http请求在服务器端不起作用。如果我的问题中有任何其他细节需要，请告诉我。

Answer 1

当我点击我的表单提交按钮时，它会点击我的service.ts上的登录方法

您需要订阅一个observable才能“触发”它。

示例：this.authService.Login(..).subscribe((res)=> console.log(res));

Answer 2

您将api.js安装在＆＃39; / routes＆＃39;的基本网址上（app.use('/routes', api);）。所以你可以通过＆＃39; / routes / login＆＃39;来访问它。代替。

如果这不符合您的意图，请将其安装在＆＃39; / api＆＃39;而是像你的客户端代码所期望的那样。

Answer 3

我认为从你这边做错了你错误地输入了

    app.use('/routes', api);

尝试将其更改为

    app.use('/api', api);

肯定会工作，如果您要出去参加大型项目，理想的方式路线应该是不同的文件夹。

只需要

中需要的文件

server.js

如果您想修改路由命名约定，请查看express-namespace

Express路由器不适用于帖子请求？

3 个答案: