Ich versuche ein Angularjs-Skript mit einer PostgreSQL-Datenbank zu verbinden (der resultierende HTML-Code muss in der Lage sein, die aus der PostgreSQL-Datenbank extrahierten Daten anzuzeigen). Die PostgreSQL-Datenbank wurde lokal mit den Standardeinstellungen (während der Installation) erstellt. Ich arbeite in der visuellen Studioumgebung.Wie erstellt man eine Verbindung zwischen Angular.js und PostgreSQL mit einem WEB API 2 Controller?
ich einen ähnlichen Ansatz versuchte, dies mit (wenn auch dies mit einem SQL Server zu verbinden, anstatt zu einer PostgreSQL-Datenbank gemeint ist): http://cybarlab.com/crud-operations-in-angularjs-and-web-api
Im Wesentlichen definieren Sie eine web.config-Datei mit einer Verbindungszeichenfolge erstellen eine Objektklasse für Ihre Datenbanktabellenzeilen, verwenden Sie den Befehl update-database in der Package Manager Console, um die entsprechende Tabelle in der PostgreSQL-Datenbank zu erstellen (was gut funktionierte), erstellen Sie einen Web API 2-Controller basierend auf der zuvor erstellten Objektklasse die CRUD-Operationen) und die Daten mit Hilfe der $ http.get-Funktion im angular.js-Skript abrufen (wobei auch der Controller in der HTML-Datei aufgerufen wird).
Das Problem ist, ich habe keine Ahnung, was ich in das URL-Feld html.get (url) schreiben soll. All meine Versuche waren nicht erfolgreich, was zusammen mit dem Mangel an Informationen über Google für dieses Problem dazu führt, dass dieser Ansatz für PostgreSQL einfach nicht funktioniert. Gibt es einen Weg, es zum Laufen zu bringen? Oder gibt es eine andere Möglichkeit, die Verbindung herzustellen? Während in der Beschreibung der Task nicht beachtet wird, dass der Befehl $ http.get verwendet werden sollte, wird darauf hingewiesen, dass dies über den WEB-API-2-Controller für die CRUD-Vorgänge erfolgen sollte.
Die Verbindungszeichenfolge (der Update-Datenbank Befehl gearbeitet, so sollte es richtig sein):
<connectionStrings>
<add name="TestProjectContext" providerName="Npgsql" connectionString="Server=127.0.0.1;Port=5432;Database=TestProject;User Id=postgres;Password=NotTelling;" />
</connectionStrings>
Das Klasse-Objekt (eine Tabelle mit diesen Attributen in der PostgreSQL-Datenbank nach der Verwendung des update-table-Befehls erzeugt wurde):
public class DataDestination
{
[Key]
public Guid Id { get; set; }
public string Server { get; set; }
public string Port { get; set; }
public string Database { get; set; }
public string Username { get; set; }
public string Password { get; set; }
public string SqlType { get; set; }
public string Owner { get; set; }
}
Die Ausgabetabelle in HTML:
<body data-ng-app="app" data-ng-controller="TestController">
<table style="width:100%" , border="1">
<tr>
<td>Id</td>
<td>Server</td>
<td>Port</td>
<td>Database</td>
<td>Username</td>
<td>Password</td>
<td>SqlType</td>
<td>Owner</td>
</tr>
<tr data-ng-repeat="std in DataDestinations">
<td>
{{std.Id}}
</td>
<td>
{{std.Server}}
</td>
<td>
{{std.Port}}
</td>
<td>
{{std.Database}}
</td>
<td>
{{std.Username}}
</td>
<td>
{{std.Password}}
</td>
<td>
{{std.SqlType}}
</td>
<td>
{{std.Owner}}
</td>
</tr>
</body>
{{error}}
Schließlich ist die Angularjs Skriptanweisung Ich habe versucht, zu verwenden (den Rest des Skripts scheint fein ausgeführt zu werden und die Fehlermeldung wird auch erfolgreich geworfen):
$http.get('http://localhost:5432/TestProject').success(function (data) {
$scope.DataDestinations = data;
})
.error(function() {
$scope.error = "An Error has occured while loading posts!";
});
EDIT: Vielen Dank für Ihre Antworten. Der WEB-API-2-Controller wurde mithilfe von Hinzufügen -> Controller -> WEB-API-Controller mit Aktionen unter Verwendung von Entity Framework erstellt. -> Wählen Sie die zuvor erstellte Klasse und den zuvor erstellten Kontext aus. Im Grunde wurde es basierend auf der Klasse generiert. Hier ist der Code:
public class TestController : ApiController
{
private TestProjectContext db = new TestProjectContext();
// GET: api/Test
public IQueryable<DataDestination> GetDataDestinations()
{
return db.DataDestinations;
}
// GET: api/Test/5
[ResponseType(typeof(DataDestination))]
public IHttpActionResult GetDataDestination(Guid id)
{
DataDestination dataDestination = db.DataDestinations.Find(id);
if (dataDestination == null)
{
return NotFound();
}
return Ok(dataDestination);
}
// PUT: api/Test/5
[ResponseType(typeof(void))]
public IHttpActionResult PutDataDestination(Guid id, DataDestination dataDestination)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != dataDestination.Id)
{
return BadRequest();
}
db.Entry(dataDestination).State = EntityState.Modified;
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!DataDestinationExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return StatusCode(HttpStatusCode.NoContent);
}
// POST: api/Test
[ResponseType(typeof(DataDestination))]
public IHttpActionResult PostDataDestination(DataDestination dataDestination)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.DataDestinations.Add(dataDestination);
try
{
db.SaveChanges();
}
catch (DbUpdateException)
{
if (DataDestinationExists(dataDestination.Id))
{
return Conflict();
}
else
{
throw;
}
}
return CreatedAtRoute("DefaultApi", new { id = dataDestination.Id }, dataDestination);
}
// DELETE: api/Test/5
[ResponseType(typeof(DataDestination))]
public IHttpActionResult DeleteDataDestination(Guid id)
{
DataDestination dataDestination = db.DataDestinations.Find(id);
if (dataDestination == null)
{
return NotFound();
}
db.DataDestinations.Remove(dataDestination);
db.SaveChanges();
return Ok(dataDestination);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
private bool DataDestinationExists(Guid id)
{
return db.DataDestinations.Count(e => e.Id == id) > 0;
}
}
}
Ich werde auch den Kontext für das Objekt Post für alle Fälle, die falsch ist:
namespace TestProject.Models
{
public class TestProjectContext : DbContext
{
public TestProjectContext()
{
Database.SetInitializer<DbContext>(null);
}
public DbSet<DataDestination> DataDestinations { get; set; }
}
}
EDIT2: Hinzugefügt wurde die CORS-Paket an das Projekt und hat es zu Beginn des bereits definierten WEB-API-Controllers:
using TestProject.Models;
using System.Web.Http.Cors;
namespace TestProject.Controllers
{
[EnableCors(origins: "http://localhost", headers: "*", methods: "*")]
public class TestController : ApiController
{
private TestProjectContext db = new TestProjectContext();
code is the same as in previous WEB API
Das Problem nicht an und für sich behoben. Derselbe selbst definierte Fehler wird ausgegeben - "Beim Laden von Beiträgen ist ein Fehler aufgetreten!".
Wo ist Ihr Web-API-Code? Kannst du es hier posten? – Dmitry
Für Anfänger, wenn die Seite, von der aus Sie arbeiten, von diesem lokalen Host-Port bedient wird, müssen Sie CORS in Ihrer API aktivieren. Sie würden in der Browser-Entwicklungswerkzeug-Konsole Zugriffssteuerungsfehler sehen, wenn sie nicht am selben Port arbeiten – charlietfl