如何使用 WEB API 2 控制器在 Angular.js 和 PostgreSQL 之间创建连接？

Question

我正在尝试将 Angularjs 脚本与 PostgreSQL 数据库连接（生成的 HTML 必须能够显示从 PostgreSQL 数据库）。 PostgreSQL 数据库是使用默认设置在本地创建的（在安装期间）。我在 visual studio 环境中工作。

我尝试使用类似的方法（尽管这是为了连接 SQL 服务器而不是 PostgreSQL 数据库）：http://cybarlab.com/crud-operations-in-angularjs-and-web-api

本质上，您定义一个带有连接字符串的 web.config 文件，为您的数据库 table 行创建一个对象 class，使用包管理器控制台中的更新数据库命令来创建PostgreSQL 数据库中适当的 table（工作正常），根据先前创建的对象 class 创建一个 WEB API 2 控制器（以获取 CRUD 操作）并使用 angular.js 脚本中的 $http.get 函数获取数据（同时调用 html 文件中的控制器）。

问题是，我不知道要在 html.get(url) url 字段中写什么。我所有的尝试都没有成功，再加上缺少有关此问题的 Google 信息，使我相信这种方法对 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>

class对象（使用update-table命令后在PostgreSQL数据库中生成了具有这些属性的table）：

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中的输出table:

 <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 控制器是使用添加 -> 控制器 -> WEB API 2 控制器创建的，使用 Entity Framework -> 选择先前创建的 class 和上下文。所以基本上是根据class生成的。这是代码：

 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;
        }
    }
}

我还会 post 对象的上下文，以防出错：

namespace TestProject.Models
{
    public class TestProjectContext : DbContext
    {
        public TestProjectContext()
        {
            Database.SetInitializer<DbContext>(null);
        }
        public DbSet<DataDestination> DataDestinations { get; set; }
    }
}

EDIT2：将CORS包添加到项目中，并将其添加到已经定义的WEBAPI控制器的开头：

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

没有解决问题本身。正在输出相同的自定义错误 - "An Error has occured while loading posts!".

Answer 1

我的建议是创建一个 WEB api 以在前端和数据库之间建立连接。

您可以使用如下解决方案：

http://restify.com/ or http://loopback.io/

或使用以下方法构建您自己的解决方案：

http://expressjs.com/ or http://koajs.com/

Answer 2

在注意到 Henri Cavalcante's 创建 WEB API 之后，我最终搜索了最简单的方法并找到了 PostgREST 程序。它所做的是根据您在 3000 端口中选择的 PostgreSQL 数据库自动创建一个 REST 服务器。这样做之后，我可以毫不费力地从数据库中取出数据。

如果有人遇到类似情况，这里有一个 link postgREST 首次使用示例：http://postgrest.com/examples/start/

在附录中我想说，我真的很想念 JDBC。

如何使用 WEB API 2 控制器在 Angular.js 和 PostgreSQL 之间创建连接？

How to create a connection between Angular.js and PostgreSQL using a WEB API 2 controller?

javascript

postgresql

database-connection

visual-studio

angularjs