RESTful Web API 的前端设计

Question

我正在开发 RESTful 网站 API。

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

的 JSON 输出

我正在考虑使用 ReactJS 或 AngularJS 自己组装一个前端，但我不是设计师，这是设计师最好的工作 - 问题是大多数设计师都不会不知道如何处理 JSON 输出，所以我陷入了恶性循环...

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

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

Answer 1

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

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

考虑一下这种方法，

您和您的设计师必须完成一个项目。您已满足客户的所有要求ui。现在设计师开始他的工作。让我们说在某个时候，他需要用 ui-li 标签制作一个列表。作为 angularjs/webapi 开发人员，您编写了一个网络 api，其中 returns 列出 (json)

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

现在你的设计师不明白这个语法。那么，问题是他如何对HTML进行适当的设计？简单，

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

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

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

...

现在你要做的是，你将 take/consider/review 他的 html 代码，你将相应地修改他的 html 代码以便与 ANGULARjs 一起使用.

你将修改如下， ... （angualr 开发者将编写动态代码）

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

...

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

希望对您有所帮助。

Answer 2

只是第二点的简单示例，假设您的设计师将 Select 元素设计为

设计师设计

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

Front end design for RESTful Web API