Question

我正在学习Angular 6，并且网站上显示了一个列表。现在，我需要为我的网站的用户提供向该列表添加条目的可能性。有一个包含4个字段和一个提交按钮的表单，单击“提交”后，值应存储在任何地方，所有条目应永久显示在站点上，而不仅仅是活动会话中。 / p>

我该如何实现？我需要包括某种数据库吗？还是可以将新数据集附加到JSON文件？

提前谢谢

编辑：这是一个培训项目，只能通过工作所在公司的Intranet进行访问，因此不必担心有关验证码或类似内容丢失的安全性

Answer 1

如果您打算长时间使用此项目，并且条目数较多并且有很多用户，则应使用一些数据库。并且如果用户数量有限，并且您需要此应用程序临时使用，那么使用json文件也是不错的选择。如果您不熟悉json文件，使用json文件将使您免于数据库逻辑

Answer 2

要在必须使用某种数据库的任何位置保存一些数据。 Angular是JavaScript框架。它有助于编写应用程序。但这对服务器端没有任何作用（当然，CLI和NodeJS人们喜欢做的其他事情除外）。 JSON不是浏览器和服务器之间进行通信的唯一方法。但是在Angular中，这是最简单的方法。您将在服务器上需要一些东西（我想是PHP脚本），它将从Angular应用程序接收数据并发回一些反馈。在使用PHP的情况下，您将学习如何接收JSON POST（$ _ POST和$ _REQUEST将不起作用）

我在“如何学习Angular”方面给您的建议是转到本分步指南https://angular.io/tutorial 运行两次或三次，您将了解Promises，Observables，通信，模板，服务和所有其他内容的工作方式。

Answer 3

有可能将数据添加到JSON文件的新数据集中，从而创建服务以使用该服务读取JSON文件，从而为您提供读取JSON文件的基础知识

Config.service.ts

@Injectable()
export class ConfigService {

  private static _config: any = {}

  constructor(private _http: Http) { }
  load() {
    return new Promise((resolve, reject) => {         
      this._http.get('../assets/' + 'data.json')
        .map(res => res.json())
        .subscribe((data) => {
          console.log("inside http get of the new service");
          console.log(data);
          ConfigService._config = data;
          resolve(true);
        },
          (error: any) => {
            console.error(error);
            return Observable.throw(error.json().error || 'Server error');
          });
    });
  }

  // Gets a value of specified property in the configuration file
  get(key: any) {
    console.log("tell me the base :" + ConfigService._config['BASE_URL']);
    return ConfigService._config[key];
  }
}

export function ConfigFactory(config: ConfigService) {
  return () => config.load();
}

export function init() {
  return {
    provide: APP_INITIALIZER,
    useFactory: ConfigFactory,
    deps: [ConfigService],
    multi: true
  }
}

const ConfigModule = {
  init: init
}

export { ConfigModule };

将这些行添加到您的主模块中

app.module.ts

import { CommonModule } from '@angular/common';
import { ConfigModule, ConfigService } from './config-service';

providers:[
 ConfigService,
    ConfigModule.init(),
    ]

然后，您可以在需要数据的任何组件或服务上注入此服务另外，您还必须在app文件夹下添加一个asset文件夹，然后将data.json放在此处。

将信息添加到Angular中的列表

3 个答案: