我正在尝试将 Angularjs 脚本与 PostgreSQL 数据库连接(生成的 HTML 必须能够显示从 PostgreSQL 数据库提取的数据)。 PostgreSQL 数据库是使用默认设置在本地创建的(在安装期间)。我在 Visual Studio 环境中工作。
我尝试使用与此类似的方法(尽管这是为了连接 SQL Server 而不是 PostgreSQL 数据库):http://cybarlab.com/crud-operations-in-angularjs-and-web-api
本质上，您使用连接字符串定义一个 web.config 文件，为数据库表行创建一个对象类，在包管理器控制台中使用 update-database 命令在 PostgreSQL 数据库中创建适当的表(效果很好) ，根据之前创建的对象类创建一个 WEB API 2 Controller (以获取 CRUD 操作)，并使用 angular.js 脚本中的 $http.get 函数获取数据(同时调用 html 文件中的 Controller )。
问题是，我不知道在 html.get(url) url 字段中要写什么。我所有的尝试都没有成功，再加上 Google 上缺乏关于这个问题的信息，让我相信这种方法对于 PostgreSQL 根本行不通。那么有什么办法可以让它发挥作用吗？或者还有其他方法来建立连接吗？虽然任务的描述没有指出应使用 $http.get 命令，但它确实指出应使用 WEB API 2 Controller 进行 CRUD 操作。
连接字符串(update-database 命令有效，因此应该是正确的):
<connectionStrings>
<add name="TestProjectContext" providerName="Npgsql" connectionString="Server=127.0.0.1;Port=5432;Database=TestProject;User Id=postgres;Password=NotTelling;" />
</connectionStrings>
类对象(使用 update-table 命令后在 PostgreSQL 数据库中生成具有这些属性的表):
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; }
}
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}}
最后，我尝试使用的 angular.js 脚本语句(脚本的其余部分似乎运行良好，错误消息也成功抛出):
$http.get('http://localhost:5432/TestProject').success(function (data) {
$scope.DataDestinations = data;
})
.error(function () {
$scope.error = "An Error has occured while loading posts!";
});
编辑:谢谢您的回复。 WEB API 2 Controller 是使用添加 -> Controller -> 带有操作的 WEB API 2 Controller 创建的，使用 Entity Framework -> 选择之前创建的类和上下文。所以基本上它是根据类生成的。这是代码:
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;
}
}
}
我还将发布该对象的上下文，以防万一出现错误:
namespace TestProject.Models
{
public class TestProjectContext : DbContext
{
public TestProjectContext()
{
Database.SetInitializer<DbContext>(null);
}
public DbSet<DataDestination> DataDestinations { get; set; }
}
}
EDIT2:将CORS包添加到项目中，并将其添加到已经定义的WEB API Controller 的开头:
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
问题本身并没有得到解决。正在输出相同的自定义错误 - “加载帖子时发生错误!”。
最佳答案
听从Henri Cavalcante后的request为了创建一个 WEB API，我最终寻找了最简单的方法，并找到了 PostgREST 程序。它的作用是根据您在 3000 端口中选择的 PostgreSQL 数据库自动创建 REST 服务器。这样做之后，我可以毫不费力地从数据库中获取数据。
如果有人遇到类似情况，这里是 postgREST 首次使用示例的链接:http://postgrest.com/examples/start/
作为附录，我想说，我真的很怀念 JDBC。
关于javascript - 如何使用 WEB API 2 Controller 在 Angular.js 和 PostgreSQL 之间创建连接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36102318/