Question

我正在尝试将REST API实现到我的角度2代码中，但是我有通过角度从快递获取数据的问题

当我删除Angular组件时没有错误，所以最有可能导致问题。我也可以通过服务器路由http://localhost:3001/task访问数据，以便通过快递

获取数据

这是我的server.js

        'use strict';
const express = require('express');
const app = express();
const jwt = require('express-jwt');
const cors = require('cors');
const bodyParser = require('body-parser');
const multer = require('multer');
const path = require('path');

var tasks = require('./routes/tasks');

var router = express.Router();
var mongojs = require('mongojs');

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



// Set Static Folder
app.use(express.static(path.join(__dirname, 'client')));


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());


const authCheck = jwt({
  secret: new Buffer('0u33qUTwmPD-MFf56yqJ2DeHuQncgEeR790T3Ke1TX3R5R5sylVfUNlHWyqQS4Al', 'base64'),
  audience: 'PBNaD26w0HdAinA5QFSyABjWZNrZSx9M'
});




const upload = multer({
  dest: 'uploads/',
  storage: multer.diskStorage({
    filename: (req, file, cb) => {
      let ext = path.extname(file.originalname);
      cb(null, `${Math.random().toString(36).substring(7)}${ext}`);
    }
  })
});

app.post('/upload', upload.any(), (req, res) => {
  res.json(req.files.map(file => {
    let ext = path.extname(file.originalname);
    return {
      originalName: file.originalname,
      filename: file.filename
    }
  }));
});

app.get('/api/deals/public', (req, res)=>{
  let deals = [
  {
    id: 12231,
    name: 'Playstation 4 500GB Console',
    description: 'The Playstation 4 is the next gen console to own. With the best games and online experience.',
    originalPrice: 399.99,
    salePrice: 299.99
  },
  {
    id: 12234,
    name: 'Galaxy Note 7',
    description: 'The Note 7 has been fixed and will no longer explode. Get it an amazing price!',
    originalPrice: 899.99,
    salePrice: 499.99
  },
  {
    id: 12245,
    name: 'Macbook Pro 2016',
    description: 'The Macbook Pro is the de-facto standard for best in breed mobile computing.',
    originalPrice: 2199.99,
    salePrice: 1999.99
  },
  {
    id: 12267,
    name: 'Amazon Echo',
    description: 'Turn your home into a smart home with Amazon Echo. Just say the word and Echo will do it.',
    originalPrice: 179.99,
    salePrice: 129.99
  },
  {
    id: 12288,
    name: 'Nest Outdoor Camera',
    description: 'The Nest Outdoor camera records and keeps track of events outside your home 24/7.',
    originalPrice: 199.99,
    salePrice: 149.99
  },
  {
    id: 12290,
    name: 'GoPro 4',
    description: 'Record yourself in first person 24/7 with the GoPro 4. Show everyone how exciting your life is.',
    originalPrice: 299.99,
    salePrice: 199.99
  },
  ];
  res.json(deals);
})

app.get('/api/deals/private', authCheck, (req,res)=>{
  let deals = [
  {
    id: 14423,
    name: 'Tesla S',
    description: 'Ride in style and say goodbye to paying for gas. The Tesla S is the car of the future.',
    originalPrice: 90000.00,
    salePrice: 75000.00
  },
  {
    id: 14553,
    name: 'DJI Phantom 4',
    description: 'The Drone revolution is here. Take to the skies with the DJI Phantom 4.',
    originalPrice: 1299.99,
    salePrice: 749.99
  },
  {
    id: 15900,
    name: 'iPhone 7 - Jet Black',
    description: 'Get the latest and greatest iPhone in the limited edition jet black.',
    originalPrice: 899.99,
    salePrice: 799.99
  },
  {
    id: 16000,
    name: '70" Samsung 4K HDR TV',
    description: 'Watch as if you were there with the latest innovations including 4K and HDR.',
    originalPrice: 2999.99,
    salePrice: 2499.99
  },
  {
    id: 17423,
    name: 'Canon t8i DSLR',
    description: 'Capture life\'s moments with the amazing Canon t8i DSLR',
    originalPrice: 999.99,
    salePrice: 549.99
  },
  {
    id: 17423,
    name: 'Xbox One S',
    description: 'Get the latest Xbox and play the best first party games including Gears of War and Forza.',
    originalPrice: 299.99,
    salePrice: 279.99
  },
  ];
  res.json(deals);
})


app.listen(3001);
console.log('Listening on localhost:3001');

tasks.js

var express = require('express');
var router = express.Router();
var mongojs = require('mongojs');
var db = mongojs('mongodb://mojtaba:123456@ds129038.mlab.com:29038/mytasklist_mojtaba', ['tasks']);

// Get All Tasks
router.get('/tasks', function(req, res, next){
    db.tasks.find(function(err, tasks){
        if(err){
            res.send(err);
        }
        res.json(tasks);
    });
});

module.exports = router;

Angular 2

task.component.ts：

    import { Component } from '@angular/core';
    import {TaskService} from './task.service';
    import {Task} from '../../Task';


    @Component({
      selector: 'tasks-component',
      templateUrl: 'tasks.component.html'
    })

    export class TasksComponent {
      tasks: Task[];
      title: string;

      constructor(private taskService:TaskService){
        this.taskService.getTasks()
          .subscribe(tasks => {
            this.tasks = tasks;
          });
      }

      addTask(event){
        event.preventDefault();
        var newTask = {
          title: this.title,
          isDone: false
        }

        this.taskService.addTask(newTask)
          .subscribe(task => {
            this.tasks.push(task);
            this.title = '';
          });
      }
    }
}

task.service.ts：

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


@Injectable()
export class TaskService{


  constructor(private http:Http){
    console.log('Task Service Initialized...');
  }
  /*
   getTasks(){
   console.log('get tasks works');
   return this.http.get('/tasks')
   .map(res => res.json());
   }

   */
  getTasks(){
    return this.http.get('/tasks')
      .map(res => res.json());
  }
}

错误

我尝试将JSON而不是html发送到客户端，但它不起作用。所以我该怎么做？

Answer 1

将return this.http.get('/api/tasks'更改为返回this.http.get('http://localhost:3001/tasks')

Answer 2

这是错误意味着您的ajax调用（http.get）正在访问html页面，然后您尝试将其解析为JSON。

在你的快递中，你有/ task的路线，但在你的服务中，你正在尝试访问/ api / task，我认为这不存在。

因此您需要更改express api，或更改http.get方法。

所以：

app.get('/api/tasks', (req, res)=>{
    db.tasks.find(function(err, tasks){
        if(err){
            res.send(err);
        }
        res.json(tasks);
    });
});

或者：

getTasks(){
    console.log('get tasks works');
    return this.http.get('/tasks')
      .map(res => res.json());
  }

在所有情况下，确保您使用正确api的最佳方法是查看您的网络标签，查看您使用AJAX通话时遇到的网址，然后复制粘贴它进入你的浏览器（或更好的邮递员），看看有什么反应，

在你的情况下，我认为你会看到：无法获得路由api /任务，这是由快递服务器引发的。

Answer 3

您的res.json()没有要解析的数据，因此请尝试将tasks传递给它

   getTasks(){
    console.log('get tasks works');
    return this.http.get('/tasks')
      .map(res => res.json(tasks));}

Angular 2：EXCEPTION：意外的令牌＆lt;在JSON的第0位

3 个答案: