RESTful Web API 的前端设计答案

【问题标题】：Front end design for RESTful Web APIRESTful Web API 的前端设计
【发布时间】：2016-02-28 00:24:15
【问题描述】：

我正在开发一个 RESTful Web API。

我希望前端看起来很漂亮（即专业和优美） - 但我不是设计师，大多数设计师不知道 JSON 是什么，或者不知道如何处理我网站上的 JSON 输出API。

我正在考虑使用 ReactJS 或 AngularJS 自己组装一个前端，但我不是设计师，这是设计师最好的工作 - 问题是大多数设计师不知道该怎么做JSON 输出，所以这就像我在一个恶性循环......

我的问题是这个（假设没有我可以用于 Angular/React 的专业网站模板 - 因为我找不到任何模板）

解决不是设计师的问题，必须与不了解 JSON 输出的设计师交流的实际方法是什么？

【问题讨论】：

你们的设计师的范围是什么？他们是简单地提供 CSS 和基本的 HTML 标记，还是他们也将编写 React/Angular 应用程序并简单地从您的 API 中提取数据？
@Tom。他们将简单地提供 HTML/CSS。我想我会让他们提供 HTML/CSS，然后我必须决定如何从 Angular/React 生成静态 HTML。
在这种情况下，我不确定为什么设计师需要了解您的数据 - 您将编写应用程序，该应用程序将从您的 API 检索数据并将其显示到页面，设计师只会关心它的外观。如果他们的模型需要一些数据，那么您可以向他们提供不需要采用 JSON 格式的示例数据:)

【解决方案1】：

只是第二点的简单示例，假设您的设计师像这样设计 Select Element

设计师设计

<select class="XYZ">
 <option>Customer</option>
 <option>Client</option>
 <option>Users</option>
</select>

React 中的开发者修改

<select className="XYZ">
    {Data} 
</select>

这里 {Data} 什么都不是，但您必须将 Option 与 API 数据绑定，例如

var Data=Object.keys(response).map(function(_res){
         return(
            <option>response[_res].Name</option>
            )
          });

【讨论】：

我更喜欢第二个建议。但是你能再解释一下吗？我不完全理解你所说的"just tell him put the dummy data at the time of design and once the design is complete you can bind the API so you will get actual data"是什么意思。请澄清

【解决方案2】：

首先，作为 angular/webapi 开发人员，您不会处理设计部分，因为这将由设计师完成。

如果我完全理解了您的问题，我想举例说明您（作为 angular/webapi 开发人员）和设计师将如何一起工作和交流。

考虑这种方法，

您和您的设计师必须完成一个项目。你有客户的所有要求。现在设计师开始他的工作。假设在某个时候，他需要使用 ui-li 标签制作一个列表。作为 angularjs/webapi 开发人员，您编写了一个返回列表 (json) 的 web api

{"id":"1","name":"title1",
"id":"2","name":"title2",}

现在你的设计师不理解这种语法。那么，问题是他将如何进行适当的 HTML 设计？很简单，

他将制作或编写纯 html 标签。假设他在下面写了纯html代码来生成一个列表，

... （设计师会写静态代码）

<ul>
  <li> something1 </li>
  <li> something2 </li>
</ul>

...

现在你要做的是，你将接受/考虑/审查他的 html 代码，并相应地修改他的 html 代码以便将其与 ANGULARjs 一起使用。

您将对其进行如下修改， ... （angualr 开发者将编写动态代码）

<ul>
  <li ng-repeat="title in titiles"> {{title.name}} </li>
</ul>

...

注意：我已经在 .net 中编写了数千个 RESTful Web API，并且作为 angualrjs 开发人员，我已经更改了我的设计师给出的静态代码。

我希望这会对你有所帮助。

【讨论】：