使用JSON服务器运行Angular 4应用程序

Question

我将为您翻译以下内容：

我正在尝试运行一个使用JSON服务器编码的Angular 4应用程序。 我遇到的问题是，我不知道在端口4200上运行的Angular 4应用程序如何同时与端口3000上的JSON服务器通信。 该应用程序是CRUD的示例，但当我尝试添加内容时，没有任何内容被发布。

这是我的article.service.ts：

@Injectable()
export class ArticleService {
    //URL for CRUD operations
    articleUrl = "http://localhost:3000/articles";
    //Create constructor to get Http instance
    constructor(private http:Http) { 
    }
    //Fetch all articles
    getAllArticles(): Observable<Article[]> {
        return this.http.get(this.articleUrl)
                .map(this.extractData)
                .catch(this.handleError);

    }
    //Create article
    createArticle(article: Article):Observable<number> {
        let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: cpHeaders });
        return this.http.post(this.articleUrl, article, options)
               .map(success => success.status)
               .catch(this.handleError);
    }
    //Fetch article by id
    getArticleById(articleId: string): Observable<Article> {
        let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: cpHeaders });
        console.log(this.articleUrl +"/"+ articleId);
        return this.http.get(this.articleUrl +"/"+ articleId)
               .map(this.extractData)
               .catch(this.handleError);
    }   
    //Update article
    updateArticle(article: Article):Observable<number> {
        let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: cpHeaders });
        return this.http.put(this.articleUrl +"/"+ article.id, article, options)
               .map(success => success.status)
               .catch(this.handleError);
    }
    //Delete article    
    deleteArticleById(articleId: string): Observable<number> {
        let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: cpHeaders });
        return this.http.delete(this.articleUrl +"/"+ articleId)
               .map(success => success.status)
               .catch(this.handleError);
    }   
    private extractData(res: Response) {
        let body = res.json();
        return body;
    }
    private handleError (error: Response | any) {
        console.error(error.message || error);
        return Observable.throw(error.status);
    }
}

这是我的db.json文件：

{
    "articles": [
        {
        "id": 1,
        "title": "Android AsyncTask Example",
        "category": "Android"
        }
    ]
} 

- averroes

---

请编辑您的问题并添加使用您的服务的代码。 - n00dl3

Answer 1

我有一个在5005端口运行的后端服务和一个在4200端口运行的应用程序，为了让它们“交流”，我设置了一个名为proxy.config.json的文件，其内容如下：

{
  "/api/*":{
    "target":"http://localhost:5005",
    "secure": false,
    "logLevel": "debug"
  }
}

当我启动我的应用程序时，我会运行ng serve -open --sourcemap=false --proxy-config proxy.config.json 命令。

你也可以尝试这样做。

- mxr7350

---

你的代码可以运行，但是在创建对象时应用程序会停止响应，因此我不确定它是否仍在连接 JSON 服务器。 - averroes