Angularjs Spring数据Rest HATEOAS链接和HTML选择下拉列表

这是我几天来关于使用spring数据rest和HATEOAS链接的第二个问题

tl；dr

我的应用程序如何使用“manyToOne”属性的链接来填充html选择下拉列表的“当前值”

“SpringDataREST”生成的链接的行为与“旧学校ID”不同

上下文

• 将应用程序转换为spring JPA和spring数据rest
• 简单的“产品/类别”表结构如下所示
• 我在“加入/获取”描述中添加了投影名称“完整”

桌子

Spring数据静态域对象

产品

产品类别

当客户端检索“产品类别”列表时，该类别的链接如下所示：

href" : "http://localhost:8080/api/rest/products/8/productCategory"

href": "http://localhost:8080/api/rest/productcat/4"

{
    "_embedded": {
        "products": [
            {
                "name": "Product1",
                "category": {
                    "name": "Category1"
                },
                "price": 1,
                "_links": {
                    "self": {
                        "href": "http://localhost:8080/api/products/1"
                    },
                    "product": {
                        "href": "http://localhost:8080/api/products/1{?projection}",
                        "templated": true
                    },
                    "category": {
                        "href": "http://localhost:8080/api/products/1/category"
                    }
                }
            },
            {
                "name": "Product2",
                "category": {
                    "name": "Category1"
                },
                "price": 2,
                "_links": {
                    "self": {
                        "href": "http://localhost:8080/api/products/2"
                    },
                    "product": {
                        "href": "http://localhost:8080/api/products/2{?projection}",
                        "templated": true
                    },
                    "category": {
                        "href": "http://localhost:8080/api/products/2/category"
                    }
                }
            }
        ]
    },
    "_links": {
        "self": {
            "href": "http://localhost:8080/api/productCategories/1/products?projection=withCategory"
        }
    }
}

{
    "name": "Category1",
    "products": [
        {
            "name": "Product1",
            "price": 1
        },
        {
            "name": "Product2",
            "price": 2
        }
    ],
    "_links": {
        "self": {
            "href": "http://localhost:8080/api/productCategories/1"
        },
        "productCategory": {
            "href": "http://localhost:8080/api/productCategories/1{?projection}",
            "templated": true
        },
        "products": {
            "href": "http://localhost:8080/api/productCategories/1/products"
        }
    }
}

这是“选择”代码。只有当“product.productCategory”为“options”的值之一时，UI才会显示select

<select ng-model="product.productCategory >
  <option value="http://localhost:8080/api/rest/productcat/1">Foo Product Type
  </option>
  <option value="http://localhost:8080/api/rest/productcat/2">Bar Product Type
  </option>
  <option value="http://localhost:8080/api/rest/productcat/3">Baz Product Type
  </option>
</select>

---

我通过javascript“取消引用”了“productCategory”值，对这个问题进行了编码，
-检索“productCategory”属性中的URL，例如：

http://localhost:8080/api/rest/products/8/productCategory


用HATEOAS链接中的值替换“productCategory”属性/url。
pItem[pPropName]=数据。\u links.self.href

这种方法为简单的下拉列表带来了很多复杂性。闻起来不对

取消参考代码

function dereferenceProperty(pItem,pPropName )
{

    var myRef = pItem._links[pPropName];
    if (myRef &&  myRef.href)
    {
        var myUrl = myRef.href;
        $http.get(myUrl).success(function (data, status)
        {
            pItem[pPropName] = data._links.self.href;
        });
    }
}

用法

在“取消引用”之后：


角度/浏览器正确填充了下拉列表
HTTP修补程序可正确更新API（和表）
我不完全理解你的意思，但是如果你需要在
ProductCategory
中获取
Product
列表，或者需要在
Product
中隐式获取
ProductCategory
，你可以使用，例如：

或者如果您得到
http://localhost:8080/api/products/1/category?projection=withProducts
您可以检索如下内容：

href" : "http://localhost:8080/api/rest/products/8/productCategory"

href": "http://localhost:8080/api/rest/productcat/4"

{
    "_embedded": {
        "products": [
            {
                "name": "Product1",
                "category": {
                    "name": "Category1"
                },
                "price": 1,
                "_links": {
                    "self": {
                        "href": "http://localhost:8080/api/products/1"
                    },
                    "product": {
                        "href": "http://localhost:8080/api/products/1{?projection}",
                        "templated": true
                    },
                    "category": {
                        "href": "http://localhost:8080/api/products/1/category"
                    }
                }
            },
            {
                "name": "Product2",
                "category": {
                    "name": "Category1"
                },
                "price": 2,
                "_links": {
                    "self": {
                        "href": "http://localhost:8080/api/products/2"
                    },
                    "product": {
                        "href": "http://localhost:8080/api/products/2{?projection}",
                        "templated": true
                    },
                    "category": {
                        "href": "http://localhost:8080/api/products/2/category"
                    }
                }
            }
        ]
    },
    "_links": {
        "self": {
            "href": "http://localhost:8080/api/productCategories/1/products?projection=withCategory"
        }
    }
}

{
    "name": "Category1",
    "products": [
        {
            "name": "Product1",
            "price": 1
        },
        {
            "name": "Product2",
            "price": 2
        }
    ],
    "_links": {
        "self": {
            "href": "http://localhost:8080/api/productCategories/1"
        },
        "productCategory": {
            "href": "http://localhost:8080/api/productCategories/1{?projection}",
            "templated": true
        },
        "products": {
            "href": "http://localhost:8080/api/productCategories/1/products"
        }
    }
}

工作

{
    "name": "Category1",
    "products": [
        {
            "name": "Product1",
            "price": 1
        },
        {
            "name": "Product2",
            "price": 2
        }
    ],
    "_links": {
        "self": {
            "href": "http://localhost:8080/api/productCategories/1"
        },
        "productCategory": {
            "href": "http://localhost:8080/api/productCategories/1{?projection}",
            "templated": true
        },
        "products": {
            "href": "http://localhost:8080/api/productCategories/1/products"
        }
    }
}