无法在 Angular 13 中发布

Question

我正在迈出 Angular 的第一步，所以我决定从 CRUD 开始。

我一直在按照指南执行此操作，但我撞到了一堵混凝土墙上，因为我检查了所有内容但找不到解决方案。

我正在尝试创建一个 项目（模型），它有 3 列：

• 标题
• 描述（可为空）
• 访问代码（可为空）

我需要发出 POST 请求以将数据添加到我的数据库中（由 Node.js 提供支持，并在 Postman 中正常工作）

这是我的代码：

add-project-component.ts

import {
    Component,
    OnInit
} from '@angular/core';
import {
    Project
} from 'src/app/models/project.model';
import {
    ProjectService
} from 'src/app/services/project.service';

@Component({
    selector: 'app-add-project',
    templateUrl: './add-project.component.html',
    styleUrls: ['./add-project.component.css']
})
export class AddProjectComponent implements OnInit {

    project: Project = {
        title: '',
        description: '',
        accessCode: '',
    };
    submitted = false;

    constructor(private projectService: ProjectService) {}

    ngOnInit(): void {}

    saveProject(): void {
        const data = {
            title: this.project.title,
            description: this.project.description,
            accessCode: this.project.accessCode
        };

        this.projectService.create(data)
            .subscribe({
                next: (res) => {
                    console.log(res);
                    this.submitted = true;
                },
                error: (e) => console.error(e)
            });
    }

    newProject(): void {
        this.submitted = false;
        this.project = {
            title: '',
            description: '',
            accessCode: ''
        };
    }

}

add-project-component.html

<div class="new-project">
    <mat-toolbar>
        <span>New Project</span>
    </mat-toolbar>
    <mat-card>
        <mat-card-content *ngIf="!submitted">
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Title</mat-label>
                    <input id="title" required [(ngModel)]="project.title" matInput name="title" placeholder="Title">
                </mat-form-field>
            </p>
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Description</mat-label>
                    <textarea id="description" rows="6" [(ngModel)]="project.description" name="description" matInput placeholder="Description"></textarea>
                </mat-form-field>
            </p>
            <p>
                <mat-form-field appearance="outline">
                    <mat-label>Access Code</mat-label>
                    <input id="accessCode" [(ngModel)]="project.accessCode" name="accessCode" matInput placeholder="Access Code">
                </mat-form-field>
            </p>
        <!-- FORM CONTENT -->
        </mat-card-content>
        <mat-card-actions *ngIf="!submitted">
            <button mat-raised-button color="primary" (click)="newProject()">Create Project</button>
         <!-- REGISTER BUTTON -->
        </mat-card-actions>
    </mat-card>
</div>

services/project.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Project } from '../models/project.model';

const baseUrl = 'http://localhost:8080/api/projects';

@Injectable({
  providedIn: 'root'
})
export class ProjectService {

  constructor(private http: HttpClient) { }

  getAll(): Observable<Project[]> {
    return this.http.get<Project[]>(baseUrl);
  }

  get(id: any): Observable<Project> {
    return this.http.get(`${baseUrl}/${id}`);
  }

  create(data: any): Observable<any> {
    return this.http.post(baseUrl, data);
  }

  update(id: any, data: any): Observable<any> {
    return this.http.put(`${baseUrl}/${id}`, data);
  }

  delete(id: any): Observable<any> {
    return this.http.delete(`${baseUrl}/${id}`);
  }

  deleteAll(): Observable<any> {
    return this.http.delete(baseUrl);
  }

  findByTitle(title: any): Observable<Project[]> {
    return this.http.get<Project[]>(`${baseUrl}?title=${title}`);
  }
}

错误 404

你们能帮帮我吗？我错过了什么？ 非常感谢。

Answer 1

您的 create 函数指向了错误的 URL。 您想要的 URL 是 /api/projects/create，但您缺少 /create 部分。

改变

create(data: any): Observable<any> {
  return this.http.post(baseUrl, data);
}

到

create(data: any): Observable<any> {
  return this.http.post(`${baseUrl}/create`, data);
}

鉴于const baseUrl = 'http://localhost:8080/api/projects'; 是正确的。 注意：对于生产，您很可能希望将 baseUrl 更改为 const baseUrl = '/api/projects'; 作为主机将更改（localhost 与您的实际域）。