RESTful Web API的前端设计

Question

我正在开发一个RESTful Web API。

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

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

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

解决不是设计师的问题的实用方法是什么，以及与不会产生JSON输出的设计师进行沟通的方法是什么？

Answer 1

1. 如果您的设计师已准备好学习新事物，那么您必须告诉他 学习JSON这很容易。
2. 如果他还没有准备就没有问题，只要告诉他在设计时输入虚拟数据，一旦设计完成，你可以绑定API，这样你就可以获得实际数据

只是简单的第二点示例，假设您的设计师设计了像

这样的选择元素

设计师设计

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

Answer 2

首先，作为角度/ webapi开发人员，您将不会处理设计部分，因为设计人员将完成这项工作。

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

考虑这种方法，

您和您的设计师必须完成一个项目。您有客户的所有要求。 现在设计师开始他的工作。让我们说，在某些时候，他需要用ui-li标签制作一个列表。作为angularjs / webapi开发人员，你已经写了一个web api，它返回list（json）

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

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

他将制作或编写纯HTML标签。让我们说他已经写了下面的纯HTML代码来生成一个列表，

...     （设计师将编写静态代码）

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

...

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

你将修改如下， ...     （angualr开发人员会写dyanmic代码）

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

...

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

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