发布到 json 服务器问题

Posted 2023-03-13

【中文标题】发布到 json 服务器问题

【英文标题】：Post to json server issues

【发布时间】：2017-03-30 22:23:54

【问题描述】：

我还是新手，但我正在尝试将自己的数据发布到https://jsonplaceholder.typicode.com/users 以供学习。在页面底部，它说要使用npm install -g json-server，所以我在我的项目中运行了该命令，我尝试将数据发布到上面的 web url，我还尝试将其发布到静态 json 文件，认为它可能会以某种方式托管文件使用 npm install -g json-server 命令，但我发现使用本地文件时找不到 json 文件，如果我尝试发布到上面的 url，那么它会在控制台日志中显示一个帖子，但我的表用户永远不会更新。谁能告诉我如何让它工作，以便我可以看到我的 POST 数据？

user.service.ts

      import Injectable from '@angular/core';
import 'rxjs/add/operator/map';
import Http, Headers from '@angular/http';
import User from './user';
@Injectable()
export class UserService
constructor(private _http:Http)



getUsers()
return this._http.get('http://localhost:4200/users')
.map(res=>res.json());


addUser(post)

return this._http.post('http://localhost:4200/users', post)
.map(res=> res.json());

form.component.ts

   import  Component, OnInit  from '@angular/core';
import UserService from '../users.service';
import Http from '@angular/http';
import Router from '@angular/router';
import FormGroup, FormControl from '@angular/forms';

@Component(
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
  providers: [UserService]

)
export class FormComponent implements OnInit
  private user;

  private _users;
  constructor(
    private _userService:UserService


  )


  

userForm = new FormGroup(
name: new FormControl(),
username: new FormControl(),
email: new FormControl(),
address: new FormGroup(
  street: new FormControl(),
  suite: new FormControl(),
  city: new FormControl(),
  postalcode: new FormControl()

)

);
onSubmit()
this._userService.addUser(this.userForm.value)
.subscribe(res => 
this.user = res;
console.log(res);

)

【问题讨论】：

你启动服务器了吗？此外，您的网址似乎仍然指向在线版本，而不是您自己的本地版本。

我已经尝试将它指向两者。我把上面的代码贴在网上，但我也试过指向app/users.json，这是本地文件，但是得到了找不到它的消息。它与 GET 请求的路径相同，所以我知道路径是正确的。我更新了上面的代码以反映本地 json 文件

【参考方案1】：

你不需要指向 app/users.json ，因为你已经运行了服务器。根据documentation，您可以发布到http://localhost:3000/users。

【讨论】：

我更新了上面的代码以反映您的建议，但它现在没有在 GET 中提取任何 json 数据，并且 users.json 位于 app 目录中。错误：意外的令牌

您可能想检查您的服务器是否一切正常，它可能返回错误。

【参考方案2】：

我相信你错过了公共服务（什么是合理的）

注意：资源不会真正在服务器上创建，但它 会假装的。

由于您已经在本地安装了它，只需运行：

$json占位符

将 Angular 中的 URL 主机名替换为 http://localhost:3000

【讨论】：

我运行了 npm install -g json-server 命令（这就是你所说的运行 jsonplaceholder 的意思吗？）它现在没有在 GET 中提取任何 json 数据，并且 users.json 在 app 目录中。错误：意外的标记

对不起，我以为你运行了 (npm install -g jsonplaceholder)，因为它写在文档中，之后你应该能够使用 (jsonplaceholder) 作为命令，如 (gulp 或任何其他已安装的 npm 库全局），json-server 是 jsonplaceholder 使用的库