【发布时间】：2016-07-06 06:23:50
【问题描述】：
我正在尝试将 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控制器（获取CRUD操作），并使用angular.js脚本中的$http.get函数获取数据（同样调用html文件中的控制器）。
问题是，我不知道在 html.get(url) url 字段中写什么。我所有的尝试都没有成功，再加上谷歌上缺乏关于这个问题的信息，让我相信这种 PostgreSQL 方法根本行不通。那么有没有办法让它工作呢？还是有另一种建立连接的方法？虽然任务描述没有指出应该使用 $http.get 命令，但它确实指出应该使用 WEB API 2 控制器来完成 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 控制器是使用 Add -> 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控制器的开头：
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
本身并没有解决问题。正在输出相同的自定义错误 - “加载帖子时发生错误！”。
【问题讨论】：
-
您的 Web API 代码在哪里？可以发在这里吗？
-
对于初学者，除非您正在使用的页面是从同一个 localhost 端口提供的，否则您需要在您的 api 中启用 CORS。如果不在同一端口上工作，您会在浏览器开发工具控制台中看到访问控制错误
标签： javascript angularjs visual-studio postgresql database-connection