新西兰天维网社区

标题: 求助编程测试题 web front end [打印本页]

作者: 匿名人士 时间: 2015-9-2 10:39:54 标题: 求助编程测试题 web front end

小弟最近应聘了一个junior web developer的职位，以前平时给网站更新，加功能什么的都没有问题。可是一看测试题就傻眼了，根本没有接触过，好抽象的感觉。可能小弟太业余，哪位高手指点一下，死也要死的甘心。

Visit: http://jsonplaceholder.typicode.com/ and write an (Android, iOS, or AngularJS) application that:

-Shows a list of album titles returned by http://jsonplaceholder.typicode.com/albums with the name of the user the album belongs to.

-When an album is clicked, show its photos returned by http://jsonplaceholder.typicode.com/photos as thumbnails.

-When a thumbnail is clicked, the full sized photo should be displayed.

Only data that will be presented should be loaded.

It should be possible to start the application.

You may use the documentation of the endpoints:

http://jsonplaceholder.typicode.com/

这个东西能用Jquery写吗？

作者: Alantod17 时间: 2015-9-2 10:57:28

这个关键看你会不会Android Ios 和angular了~~~
那两个链接里面都是JSON

其实这个还挺tricky的关键还要考你UX设计~~~不单单是功能实现~~~

作者: liuruihua 时间: 2015-9-2 11:01:51

最普通的应用啦

让你junior web developer写android, ios是不对的，因为你不会啦
会AngularJS的应该不是junior web developer，我有21年编程经验，这三个应用天天都在写

作者: Alantod17 时间: 2015-9-2 11:02:46

liuruihua 发表于 2015-9-2 11:01
最普通的应用啦

让你junior web developer写android, ios是不对的，因为你不会啦

21年……前辈……

作者: 匿名人士 时间: 2015-9-2 11:04:51

Alantod17 发表于 2015-9-2 10:57
这个关键看你会不会Android Ios 和angular了~~~
那两个链接里面都是JSON

我去应聘web developer为什么要考我android 和ios，觉得有点奇怪。后面那个Angular更是以前都没听说过。

Github 也没有用过，看样子我比junior还差了很远，是baby的水平啊

作者: 御将通佑 时间: 2015-9-2 11:07:06

web 实现的话主要就是用 jquery + json

功能很容易实现，就像楼上说的，UI 设计很重要。

作者: Deardevil 时间: 2015-9-2 11:08:55

匿名人士发表于 2015-9-2 11:04
我去应聘web developer为什么要考我android 和ios，觉得有点奇怪。后面那个Angular更是以前都没听说过。
...

为什么web developer要考那些？是做web的不是做applications的啊。我也是个junior web developer，只认识这几个名字，不懂写的是什么

作者: liuruihua 时间: 2015-9-2 11:10:34

匿名人士发表于 2015-9-2 11:04
我去应聘web developer为什么要考我android 和ios，觉得有点奇怪。后面那个Angular更是以前都没听说过。
...

AngularJs就是可以大幅度减少写代码啦和jquery比，如果你会用jquery,web developer也是可以做的啦，因为毕竟AngularJs还是很新啦，另外你不用担心，AngularJs新版本不支持老版本，所以大家都在一条水平线上

上面的题目用jquery也是可以做的吗，就是写一个网站调用json call

作者: Alantod17 时间: 2015-9-2 11:11:05

匿名人士发表于 2015-9-2 11:04
我去应聘web developer为什么要考我android 和ios，觉得有点奇怪。后面那个Angular更是以前都没听说过。
...

你是刚毕业吗？ Angular JS 这种东西学校貌似没有教的不过这个用在现代web app上很多~~比起传统网页有很多优势~~要求只是让你3个里面选一个~~~去看看Angular吧学一下对以后也好~~不过马上要2.0了~~貌似是breaking change~~

作者: Alantod17 时间: 2015-9-2 11:14:27

liuruihua 发表于 2015-9-2 11:10
AngularJs就是可以大幅度减少写代码啦和jquery比，如果你会用jquery,web developer也是可以做的啦，因为 ...

你这对Angular的定义也太……angular和Jquery解决的不是一个问题~~~~

作者: dulowa0228 时间: 2015-9-2 11:15:32

难道是lancom的测试题？

作者: liuruihua 时间: 2015-9-2 11:22:06

Alantod17 发表于 2015-9-2 11:14
你这对Angular的定义也太……angular和Jquery解决的不是一个问题~~~~

angularjs是重新将controller嵌入html代码里，当然实际javascript仍然可以单独分开为javascript文件啦，我不太喜欢angularjs，因为用angularjs写程序太简单啦，很容易被人破解网站啦

用jquery多好，用了混淆后，基本上看不出个所以然

作者: 匿名人士 时间: 2015-9-2 11:27:03

liuruihua 发表于 2015-9-2 11:01
最普通的应用啦

让你junior web developer写android, ios是不对的，因为你不会啦

大神，能写个样板吗？就是第一个功能，我不明白怎么写application ?

应该就是一个html页面吧？我不懂json，是不是图片的所有信息都存在json数据库里了？

作者: 匿名人士 时间: 2015-9-2 11:28:55

御将通佑发表于 2015-9-2 11:07
web 实现的话主要就是用 jquery + json

功能很容易实现，就像楼上说的，UI 设计很重要。 ...

说实话，真不懂，怎么还有UI了？

是不是建立个html页面实现就可以了，能示范一下吗？多谢了

作者: 剪刀石头布 时间: 2015-9-2 11:29:10

给lz跪了，图片信息在这里http://jsonplaceholder.typicode.com/photos
你用jquery get把这些数据提出来： http://api.jquery.com/jquery.getjson/
只能帮到这里了。

作者: liuruihua 时间: 2015-9-2 11:35:53

匿名人士发表于 2015-9-2 11:27
大神，能写个样板吗？就是第一个功能，我不明白怎么写application ?

应该就是一个html页面吧？我不懂jso ...

看这个啦
http://www.w3schools.com/angular/angular_http.asp

作者: liuruihua 时间: 2015-9-2 11:36:34

匿名人士发表于 2015-9-2 11:28
说实话，真不懂，怎么还有UI了？

是不是建立个html页面实现就可以了，能示范一下吗？多谢了 ...

是的啦

作者: liuruihua 时间: 2015-9-2 11:37:03

剪刀石头布发表于 2015-9-2 11:29
给lz跪了，图片信息在这里http://jsonplaceholder.typicode.com/photos
你用jquery get把这些数据提出来： ...

你说的正确啦

作者: MJC 时间: 2015-9-2 11:41:19

楼主你提到的给网站更新，加功能什么的没问题，是因为你用的都是现成的网站，已经搭建好的，对吗？
所以我感觉现在让你从头写，不知道从何下手？

对于这个测试，android和IOS先放放，现学的话，时间可能不够。

提到了angular,那就去看看angular的教程，应该可以速成。
可以多看一些现成的例子，把类似的功能用到你这上面。

建议:
1. 如果用angular的话，写的时候尽量避免再使用jquery.
以下应该会让你更出众点我觉得： (可能超出了junior范围，但都是现在比较流行的)
2. 使用些前端自动化的工具,npm, bower, gulp/grunt etc..
3. 写unit test.
4. 用es6写
5. 可以用些流行的css framrwork，比如bootstrap, foundation。

作者: liuruihua 时间: 2015-9-2 11:47:25

本帖最后由 liuruihua 于 2015-9-2 11:49 编辑

MJC 发表于 2015-9-2 11:41
楼主你提到的给网站更新，加功能什么的没问题，是因为你用的都是现成的网站，已经搭建好的，对吗？
所以我 ...

你这不是要人命吗？

一个不会走路的孩子，你竟然要他去跑
另外framrwork好像不是这样拼的吗？:-)

作者: Alantod17 时间: 2015-9-2 11:50:51

liuruihua 发表于 2015-9-2 11:22
angularjs是重新将controller嵌入html代码里，当然实际javascript仍然可以单独分开为javascript文件啦， ...

不知道你做这行多久了 angular 是MVVM框架一方面可以减少读取一方面可以分开逻辑测和界面层~~至于说是容易被别人破~~看你的意思是说angular的代买太容易读所以比较容易破？JQuery 可以看不出所以然？你production的时候前段代码不compile吗？

作者: liuruihua 时间: 2015-9-2 11:54:27

Alantod17 发表于 2015-9-2 11:50
不知道你做这行多久了 angular 是MVVM框架一方面可以减少读取一方面可以分开逻辑测和界面层~~至于说是 ...

看不懂你说compile的意思？你指的是minify, obfuscate javascript?

作者: Alantod17 时间: 2015-9-2 11:56:26

liuruihua 发表于 2015-9-2 11:54
看不懂你说compile的意思？你指的是minify, obfuscate javascript?

是的就和楼上说的一样通常都会Glup~~~

作者: liuruihua 时间: 2015-9-2 12:00:18

本帖最后由 liuruihua 于 2015-9-2 12:03 编辑

Alantod17 发表于 2015-9-2 11:56
是的就和楼上说的一样通常都会Glup~~~

minify, obfuscate的代码可以用beautifier来读的呀，简单代码这样可以直接看出逻辑

gulp只不过是build系统呀，和使代码难读有啥关系？我写的网站都用gulp来build的

作者: liuruihua 时间: 2015-9-2 12:02:29

本帖最后由 liuruihua 于 2015-9-2 12:06 编辑

Alantod17 发表于 2015-9-2 11:50
不知道你做这行多久了 angular 是MVVM框架一方面可以减少读取一方面可以分开逻辑测和界面层~~至于说是 ...

我做这行21年啦，最早是写java用j2ee的用apache ant来build的

作者: Alantod17 时间: 2015-9-2 12:10:32

liuruihua 发表于 2015-9-2 12:00
minify, obfuscate的代码可以用beautifier来读的呀，简单代码这样可以直接看出逻辑

gulp只不过是build系 ...

好吧只是comment了一下说angular 容易读所以有漏洞~~~~我只是不懂相对于Jquery， anjular在易读性上有什么劣势~~

作者: liuruihua 时间: 2015-9-2 12:17:54

本帖最后由 liuruihua 于 2015-9-2 12:24 编辑

Alantod17 发表于 2015-9-2 12:10
好吧只是comment了一下说angular 容易读所以有漏洞~~~~我只是不懂相对于Jquery， anjular在易读性上有 ...

其实纯粹技术讨论啦，共同学习 :-)

我用jquery写的网站，现有代码大概八千行，用angularjs写的网站大概几百行，当然两网站的功能完全不一样，只不过都是麻雀虽小，五脏俱全啦，我是比较关心网站不被人破解的，所以代码在minify, obfuscate后，我要用firefox, chrome看下javascript是否可读，以免网站逻辑被人分析啦，当然是代码越多，读起来越烦，就会迫使阅读的人放弃阅读啦
我知道加密，解密是一对矛盾，我所做的其实是无效的，但我每做一步，都会增加一点难度啦，直到被认为阅读网站的javascript的代码不值得为止

作者: angelvan2012 时间: 2015-9-2 12:25:08

真是很有价值的帖子，充满了技术点。

另外膜拜21年兄

作者: Alantod17 时间: 2015-9-2 12:43:24

liuruihua 发表于 2015-9-2 12:17
其实纯粹技术讨论啦，共同学习 :-)

我用jquery写的网站，现有代码大概八千行，用angularjs写的网站大概几 ...

好吧我只能说我自己不能同意这观点没想到不用framework的理由是因为代码会变得容易理解~~~也许是我涉世未深~~~~

作者: 匿名人士 时间: 2015-9-2 13:23:24

小弟照葫芦画瓢写了一个不工作啊，哪里有问题？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular test</title>

<script src="hhttp://ajax.googleapis.com/ajax/ ... 3.14/angular.min.js"></script>

</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
      <li ng-repeat="photo in photos | orderBy:id">
         <a href="http://jsonplaceholder.typicode.com/photos/{{photo.url}}" class="thumb"><img ng-src="http://jsonplaceholder.typicode.com/photos/{{photo.thumbnailUrl}}"></a>
         <a href="http://jsonplaceholder.typicode.com/photos/{{photo.url}}">{{photo.title}}</a>

      </li>
      </ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://jsonplaceholder.typicode.com/photos")
  .success(function (response) {$scope.data = response.data;});
});
</script>

</body>
</html>

作者: liuruihua 时间: 2015-9-2 13:45:40

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular test</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
      <li ng-repeat="photo in photos | orderBy:id">
         <a href="{{photo.url}}" class="thumb"><img ng-src="{{photo.thumbnailUrl}}"></a>
         <a href="{{photo.url}}">{{photo.title}}</a>

      </li>
      </ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://jsonplaceholder.typicode.com/photos")
  .success(function (response) {
$scope.photos = response;
});
});
</script>

</body>
</html>

作者: 匿名人士 时间: 2015-9-2 14:06:56

多谢楼上大神原来读取过数据之后就不用管路径了还有我的函数也写错了

作者: liuruihua 时间: 2015-9-2 14:19:45

匿名人士发表于 2015-9-2 14:06
多谢楼上大神原来读取过数据之后就不用管路径了还有我的函数也写错了

很高兴你能学的这样快:-)

作者: MJC 时间: 2015-9-2 14:35:56

liuruihua 发表于 2015-9-2 11:47
你这不是要人命吗？

一个不会走路的孩子，你竟然要他去跑

恩所以我说了超出了Junior的范围其实

恩 typo

作者: 匿名人士 时间: 2015-9-2 19:15:07

liuruihua 发表于 2015-9-2 14:19
很高兴你能学的这样快:-)

又改进了一下，有个问题，那个点击链接后，本来只显示该名称对应的图片，可是所有图片都同时显示了。该怎么办呢？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
      <li ng-repeat="photo in photos | orderBy:id">
      <a href="#" ng-click="toggle()">{{photo.title}}</a>


<a href="{{photo.url}}" class="thumb"><img ng-src="{{photo.thumbnailUrl}}" ng-show ="myVar"></a>

      </li>
      </ul>
</div>


<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://jsonplaceholder.typicode.com/photos")
  .success(function (response) {
      $scope.photos = response;
      $scope.myVar = false;
      $scope.toggle = function () {
      $scope.myVar = true;
      }
      });
});
</script>

</body>
</html>

作者: liuruihua 时间: 2015-9-2 21:58:13

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="photo in photos | orderBy:id">
<a href="#" ng-click="toggle($index)">{{photo.title}}</a>
<a href="{{photo.url}}" class="thumb">
<img ng-src="{{photo.thumbnailUrl}}" ng-show="selected == $index"/>
</a>
</li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.selected = -1;

$http.get("http://jsonplaceholder.typicode.com/photos")
.success(function (response) {
$scope.photos = response;
$scope.toggle = function ($index) {
$scope.selected = $index;
}
});
});
</script>

</body>
</html>

作者: 匿名人士 时间: 2015-9-2 23:17:09

多谢大神，又遇到问题了，写了一个filter，想把userID=1的挑出来，又是用不了。处处碰壁，真无语了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
      <div ng-app="myApp" ng-controller="customersCtrl">
            <ul>
                     <li ng-repeat="photo in photos | filter:belongsto | orderBy:id">
                              <a href="#" ng-click="toggle($index)">{{photo.title}}</a>
                              <a href="{{photo.url}}" class="thumb">
                                    <img ng-src="{{photo.thumbnailUrl}}" ng-show="selected == $index"/>
                              </a>
                     </li>
      </ul>
</div>

<script>
      var app = angular.module('myApp', []);
      app.controller('customersCtrl', function($scope, $http) {
            $scope.selected = -1;

            $http.get("http://jsonplaceholder.typicode.com/photos")
                     .success(function (response) {
                              $scope.photos = response;
                              $scope.toggle = function ($index) {
                                    $scope.selected = $index;
                              }
                                 $scope.belongsto = function() {
                              return photo.userID === "1";
                              };
                     });
      });
</script>

</body>
</html>

作者: MSSA 时间: 2015-9-2 23:34:51

本帖最后由 MSSA 于 2015-9-2 23:35 编辑

liuruihua 发表于 2015-9-2 12:17
其实纯粹技术讨论啦，共同学习 :-)

我用jquery写的网站，现有代码大概八千行，用angularjs写的网站大概几 ...

个人认为一切前端反破解的手段都是浮云，如果这么怕破解就把逻辑放到backend，不要说js，java的byte core再没用obfuscator的前提下一样可以用decompiler轻松还原成源代码

作者: liuruihua 时间: 2015-9-3 08:45:44

MSSA 发表于 2015-9-2 23:34
个人认为一切前端反破解的手段都是浮云，如果这么怕破解就把逻辑放到backend，不要说js，java的byte core ...

java不算啥啦，C/C++编译出的二进制代码也可以被破解，1995年的时候我工作的公司里面的开发团队被上海的业务经理策划整个跳槽，我那时是在系统维护部门的，开发团队有个dos的程序运行在服务器上控制客户的license,正好跳槽的时候，有一大批客户一天后license到期，因为没有源程序代码，是那个开发团队控制的，而那个dos的程序本身也有license,被那开发团队关掉了，我的香港上司急的一踏糊涂，我那时刚从北京出差回上海，我的香港上司让我看有啥办法，我从晚上7点做，到晚上11点给解除了那dos的程序本身的license，是用softice读反汇编代码，然后动态修改内存变量值来破掉的啦，当然后来做了个exe patch,修改文件，全部破掉了，为此公司奖励我两千元人民币，我对此非常失望，所以也跳槽了

作者: liuruihua 时间: 2015-9-3 09:15:39

匿名人士发表于 2015-9-2 23:17
多谢大神，又遇到问题了，写了一个filter，想把userID=1的挑出来，又是用不了。处处碰壁，真无语了。

...

http://jsonplaceholder.typicode.com/photos do not return userId

作者: liuruihua 时间: 2015-9-3 09:39:47

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
      <div ng-app="myApp" ng-controller="customersCtrl">
            <ul>
                     <li ng-repeat="photo in photos | myFilter | orderBy:id">
                              <a href="#" ng-click="toggle($index)">{{photo.title}}</a>
                              <a href="{{photo.url}}" class="thumb">
                                    <img ng-src="{{photo.thumbnailUrl}}" ng-show="selected == $index"/>
                              </a>
                     </li>
      </ul>
</div>

<script>
      var app = angular.module('myApp', []);
app.filter('myFilter', function() {
return function(items) {
if (typeof items == 'undefined') {
return items;
}

var filtered = [];
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.albumId === 5) {
filtered.push(item);
}
}
return filtered;
};
});

      app.controller('customersCtrl', function($scope, $http) {
            $scope.selected = -1;

            $http.get("http://jsonplaceholder.typicode.com/photos")
                     .success(function (response) {
                              $scope.photos = response;
                              $scope.toggle = function ($index) {
                                    $scope.selected = $index;
                              }
                     });
      });
</script>

</body>
</html>

作者: liuruihua 时间: 2015-9-3 10:23:50

MSSA 发表于 2015-9-2 23:34
个人认为一切前端反破解的手段都是浮云，如果这么怕破解就把逻辑放到backend，不要说js，java的byte core ...

不过这浮云还是挺有效的啦

如果服务器被破解，逻辑放到backend也没用

作者: 匿名人士 时间: 2015-9-3 11:01:47

liuruihua 发表于 2015-9-3 09:39
Angular test

OMG 现在才看清楚题，我要重写了。再次感谢。

作者: Eastpark 时间: 2015-9-3 11:03:42

liuruihua 发表于 2015-9-3 10:23
不过这浮云还是挺有效的啦

如果服务器被破解，逻辑放到backend也没用

你干了21年编程，真难以置信。你在中国属于第一代程序员了。

作者: liuruihua 时间: 2015-9-3 11:18:04

本帖最后由 liuruihua 于 2015-9-3 11:19 编辑

Eastpark 发表于 2015-9-3 11:03
你干了21年编程，真难以置信。你在中国属于第一代程序员了。

那是拿工资的编程，我从初一开始学习apple II basic 编程啦，初二学6502汇编:-),如果算这的话，又可以加十年

作者: Eastpark 时间: 2015-9-3 11:35:13

liuruihua 发表于 2015-9-3 11:18
那是拿工资的编程，我从初一开始学习apple II basic 编程啦，初二学6502汇编:-),如果算这的话，又可以加十 ...

你就吹吧。。。我高一才见过苹果电脑，你初中就有啦？

作者: Eastpark 时间: 2015-9-3 11:39:59

本帖最后由 Eastpark 于 2015-9-3 11:43 编辑

liuruihua 发表于 2015-9-3 11:18
那是拿工资的编程，我从初一开始学习apple II basic 编程啦，初二学6502汇编:-),如果算这的话，又可以加十 ...

我以前也是程序员，做过不少开发项目。现在还编一些程序，很简单的那种。觉得在国内一直干程序员真心不容易。7，8年前公司里就有人叫我大爷了。很少见到年龄比我大的中国程序员，去年碰到一个DELL 做ABAP的 developer，你算是今年碰到的第一个。
有机会交流一下？ PM我微信？

作者: liuruihua 时间: 2015-9-3 11:55:42

本帖最后由 liuruihua 于 2015-9-3 12:22 编辑

Eastpark 发表于 2015-9-3 11:35
你就吹吧。。。我高一才见过苹果电脑，你初中就有啦？

我没办法让你相信，就这样吧
我说的是我用apple II写程序，并没有说拥有apple II，我是在少科站学习的啦

诚实的说，我还真不会吹，不然的话，我就自己出去做生意啦，做生意需要能吹啦，我的上司就很会做生意的，他就自己出去开了家公司，作ceo,我很羡慕他，向他学习啦，当然他作设计架构没我做的好啦

作者: liuruihua 时间: 2015-9-3 12:00:40

Eastpark 发表于 2015-9-3 11:39
我以前也是程序员，做过不少开发项目。现在还编一些程序，很简单的那种。觉得在国内一直干程序员真心不容易 ...

比我年纪大的程序员新西兰多着呢，我的21年经验没啥啦，有许多人有30年经验

作者: 匿名人士 时间: 2015-9-3 12:51:25

才发现这是要读取两个有关联的json文件。google了一下： http://stackoverflow.com/questio ... -json-in-angular-js

也不懂应该怎么写才对，liu大神能指点下吗？

作者: liuruihua 时间: 2015-9-3 13:12:32

匿名人士发表于 2015-9-3 12:51
才发现这是要读取两个有关联的json文件。google了一下： http://stackoverflow.com/questions/28694433/get ...

你做的挺好的啦

就按照你的思路，做两个html页面，做两个controller,一个html页面点击后，显示另一个页面即可

作者: xp_theman 时间: 2015-9-3 13:57:43

liuruihua 发表于 2015-9-2 12:17
其实纯粹技术讨论啦，共同学习 :-)

我用jquery写的网站，现有代码大概八千行，用angularjs写的网站大概几 ...

I don't know what you mean by writing an easy decomplile JS frontend makes it vulnerable for attack.

I understand it is important to secure you Rest service call and normally it is handled by token/session. But what is the risk of exposing your frontend logic?

And there is no reason to require a web developer to learn IOS/Android. Although for LZ's question, I can imagine a very quick implementation with Swift and Almofire.

作者: liuruihua 时间: 2015-9-3 14:03:16

本帖最后由 liuruihua 于 2015-9-3 14:05 编辑

xp_theman 发表于 2015-9-3 13:57
I don't know what you mean by writing an easy decomplile JS frontend makes it vulnerable for attack ...

如果被人知道了service call 参数和返回数据格式，又不能要求用户注册使用，任何人都可以不注册使用，又不能象skykiwi一样要求客户做算术，或者读图片来发帖，我工作的公司又是卖数据的，那等于是提供了一个免费得到数据的平台，可以让人来使用程序自动读数据
如果整个数据被人复制，那就可以也象我工作的公司一样卖数据啦

作者: xp_theman 时间: 2015-9-3 14:12:13

liuruihua 发表于 2015-9-3 14:03
如果被人知道了service call 参数和返回数据格式，又不能要求用户注册使用，任何人都可以不注册使用，又不 ...

you mean service call with no authentication step?

service call parameter and response format is your API. There should be no security risk if you have designed it correctly.

作者: liuruihua 时间: 2015-9-3 14:15:24

本帖最后由 liuruihua 于 2015-9-3 14:27 编辑

xp_theman 发表于 2015-9-3 14:12
you mean service call with no authentication step?

service call parameter and response format is ...

公共网站啦
那你来帮我设计下在没有 authentication的情况下，如何保护数据？我很想改进我的设计啦
就以此为例通过调用这个url http://jsonplaceholder.typicode.com/albums 可以得到一串json数据，你如何保护这个api,只允许你自己写的网站可以调用，不允许其他人读到这数据？也就是好像看电视，我允许你可以看这个内容，但禁止你用一个摄像机把电视机上显示的内容录下来，然后去拿去卖钱给别人看
我不知道有啥好的api设计可以解决这问题，你知道吗？

我唯一能做的是加密api的参数，加密返回的json数据，但browser是运行在客户端的，密码最终是要被javascript来解压加密的内容，显示给客户看，所以密码一定是要到客户端的，不把javascript弄的别人看不懂，如何来保护啊？

作者: xp_theman 时间: 2015-9-3 14:25:17

本帖最后由 xp_theman 于 2015-9-3 15:08 编辑

liuruihua 发表于 2015-9-3 14:15
公共网站啦
那你来帮我设计下在没有 authentication的情况下，如何保护数据？我很想改进我的设计啦
就以此 ...

since there is no authentication, i assume the protocol is HTTP. For HTTP request/response, it is not hard to intercept and inspect any request & response which reveals data pattern in your service sent back.

It means I don't even need to bother looking at front-end logic right?

作者: liuruihua 时间: 2015-9-3 14:28:58

xp_theman 发表于 2015-9-3 14:25
since there is no authentication, i assume the protocol is HTTP. For HTTP request/response, it is n ...

我已补充了前面的帖子，参数和返回的内容是加密的，你看到加密的乱码数据，没有密码是没用的
所以你仍旧要看前端逻辑

作者: xp_theman 时间: 2015-9-3 14:54:33

本帖最后由 xp_theman 于 2015-9-3 14:56 编辑

liuruihua 发表于 2015-9-3 14:28
我已补充了前面的帖子，参数和返回的内容是加密的，你看到加密的乱码数据，没有密码是没用的
所以你仍旧要 ...

I won't comment on your architecture. With no offense. I understand situation is different for everyone. :)

But I can see the trouble you'll have is picking a key that is only available to your client. but you said your site do not require authentication. so everyone gets the same piece of JS in their browser. looks like there is no way to limit someone to access your data.

Anyway, your case is quiet unique. 99% sites that I know use HTTPs which is more common.

作者: 匿名人士 时间: 2015-9-3 14:56:19

liuruihua 发表于 2015-9-3 13:12
你做的挺好的啦

就按照你的思路，做两个html页面，做两个controller,一个html页面点击后，显示另一个页 ...

liu大神，是不是用问号传值？

http://www.angularjs.cn/A0EN 这个适用吗？

作者: liuruihua 时间: 2015-9-3 14:58:22

本帖最后由 liuruihua 于 2015-9-3 15:00 编辑

xp_theman 发表于 2015-9-3 14:54
I won't comment on your architecture.

But I can see the trouble you'll have is picking a key that ...

https并不能保护数据在客户端呀
https只保护数据在中途不被截获啦

我工作的公司的客户使用我写的网站有的是要求登录，所以也可以使用https来传输数据,但即使使用了https,数据仍旧可以被使用。

作者: xp_theman 时间: 2015-9-3 15:03:25

liuruihua 发表于 2015-9-3 14:58
https并不能保护数据在客户端呀
https只保护数据在中途不被截获啦

protect data at client side is not something that I have knowledge of. :)

作者: liuruihua 时间: 2015-9-3 15:03:33

本帖最后由 liuruihua 于 2015-9-3 15:31 编辑

匿名人士发表于 2015-9-3 14:56
liu大神，是不是用问号传值？

http://www.angularjs.cn/A0EN 这个适用吗？

就普通的http url嵌入参数例如

http://*****.com/test_user.html?userId=123456

不需要啥angularjs专用的代码啦
就是你给的连接的第一种，我没用过第二种

我看了下，第二种方法也挺好的

作者: 匿名人士 时间: 2015-9-3 18:15:03

liuruihua 发表于 2015-9-3 15:03
就普通的http url嵌入参数例如

http://*****.com/test_user.html?userId=123456

疯了，传过来的值不起作用 file:///C:/Users/CHRIS/Desktop/step2.htm?albumId=1

step2.htm

<script>

function get_param(param){
var query = location.search.substring(1).split('&');
for(var i=0;i<query.length;i++){
      var kv = query.split('=');
      if(kv[0] == param){
         return kv[1];
      }
}
return null;
}

      var app = angular.module('myApp', []);
            app.filter('myFilter', function() {
                     return function(items) {
                              if (typeof items == 'undefined') {
                                    return items;
                              }

                              var filtered = [];
                              for (var i = 0; i < items.length; i++) {
                                    var item = items;
                                    if (item.albumId === get_param("albumId")) {
                                             filtered.push(item);
                                    }
                              }
                              return filtered;
                     };
            });

      app.controller('customersCtrl', function($scope, $http) {


            $http.get("http://jsonplaceholder.typicode.com/photos")
                     .success(function (response) {
                              $scope.photos = response;

                     });
      });
</script>

作者: xp_theman 时间: 2015-9-3 18:46:01

匿名人士发表于 2015-9-3 18:15
疯了，传过来的值不起作用 file:///C:/Users/CHRIS/Desktop/step2.htm?albumId=1

step2.htm

应该用ngRoute就很容易实现了。
作者: liuruihua 时间: 2015-9-3 19:06:23

本帖最后由 liuruihua 于 2015-9-3 19:12 编辑

reference: http://stackoverflow.com/questio ... m-the-url-parameter

url  test1.html?albumId=5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
      <div ng-app="myApp" ng-controller="customersCtrl">
            <ul>
                     <li ng-repeat="photo in photos | myFilter | orderBy:id">
                              <a href="#" ng-click="toggle($index)">{{photo.title}}</a>
                              <a href="{{photo.url}}" class="thumb">
                                    <img ng-src="{{photo.thumbnailUrl}}" ng-show="selected == $index"/>
                              </a>
                     </li>
      </ul>
</div>

<script>
      function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
                     function(m,key,value) {
                              vars[key] = value;
            });
            return vars;
      }

      var app = angular.module('myApp', []);
            app.filter('myFilter', function() {
                     return function(items) {
                              if (typeof items == 'undefined') {
                                    return items;
                              }

                              var albumId = parseInt(getUrlVars()["albumId"]);
                              alert(albumId);
                              var filtered = [];
                              for (var i = 0; i < items.length; i++) {
                                    var item = items;
                                    if (item.albumId === albumId) {
                                             filtered.push(item);
                                    }
                              }
                              return filtered;
                     };
            });

      app.controller('customersCtrl', function($scope, $http) {
            $scope.selected = -1;

            $http.get("http://jsonplaceholder.typicode.com/photos")
                     .success(function (response) {
                              $scope.photos = response;
                              $scope.toggle = function ($index) {
                                    $scope.selected = $index;
                              }
                     });
      });
</script>

</body>
</html>

作者: 匿名人士 时间: 2015-9-3 22:25:53

本帖最后由匿名人士于 2015-9-4 16:00 编辑

liuruihua 发表于 2015-9-3 19:06
reference: http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-url-parameter

ur ...

liu大神，

弹出框（Chrome 里2次？为什么，暂时没有IE可以测试）可以看到值已经传过去了，但是filter没有起作用，我直接把filter改成1 竟然也没有起作用？
作者: MSSA 时间: 2015-9-4 00:31:56

liuruihua 发表于 2015-9-3 14:03
如果被人知道了service call 参数和返回数据格式，又不能要求用户注册使用，任何人都可以不注册使用，又不 ...

REST API不能这么设计，除非是完全public API，否则必须要求用户验证后才可以call,因为你的JS frontend是没法安全存储token/key的。

作者: MSSA 时间: 2015-9-4 00:40:15

本帖最后由 MSSA 于 2015-9-4 00:45 编辑

liuruihua 发表于 2015-9-3 14:15
公共网站啦
那你来帮我设计下在没有 authentication的情况下，如何保护数据？我很想改进我的设计啦
就以此 ...

没有办法保护，这个需求本身就有问题，既然是restricted access的需要为和不authenticate user?

任何加密手段放在前端都是极大的security vulnerability，你这种层面的保护是根本没法防御determined attacker,个人观点有和没有没啥太大意思。首先我copy你的js就可以随便call你的API，其次可以用beautifier还原你obfuscated的JS,你的加密手段这种情况一定是symmetric encryption，只要看到你代码里用的key就可以还原你加密的手段随便写一个backend完全扒光你的网站数据。
作者: MSSA 时间: 2015-9-4 00:44:31

liuruihua 发表于 2015-9-3 08:45
java不算啥啦，C/C++编译出的二进制代码也可以被破解，1995年的时候我工作的公司里面的开发团队被上海的 ...

当然任何程序都可以reverse engineering,但是这里还有不同一个是decompile一个是disassembly, decompile可以还原source,disassembly的话只能还原到汇编。如果你现在还对破解感兴趣，不知道你是否用过IDAPro - 个人认为绝对是最好的破解工具，没有之一。
作者: liuruihua 时间: 2015-9-4 08:42:06

MSSA 发表于 2015-9-4 00:40
没有办法保护，这个需求本身就有问题，既然是restricted access的需要为和不authenticate user?

任何加密 ...

         同意
作者: liuruihua 时间: 2015-9-4 08:43:09

MSSA 发表于 2015-9-4 00:31
REST API不能这么设计，除非是完全public API，否则必须要求用户验证后才可以call,因为你的JS frontend是 ...

你说的和我在前面说的一样:-)
作者: liuruihua 时间: 2015-9-4 08:43:52

MSSA 发表于 2015-9-4 00:44
当然任何程序都可以reverse engineering,但是这里还有不同一个是decompile一个是disassembly, decompile ...

            矛和盾啦
作者: liuruihua 时间: 2015-9-4 08:56:05

匿名人士发表于 2015-9-3 22:25
liu大神，请看测试页面 http://www.experiencenz.com/step2.htm?albumId=1

弹出框（Chrome 里2次？为什么 ...

http://stackoverflow.com/questio ... ger-some-many-times
作者: liuruihua 时间: 2015-9-4 09:00:13

你可以不用filter
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
      <div ng-app="myApp" ng-controller="customersCtrl">
            <ul>
                     <li ng-repeat="photo in photos">
                              <a href="#" ng-click="toggle($index)">{{photo.title}}</a>
                              <a href="{{photo.url}}" class="thumb">
                                    <img ng-src="{{photo.thumbnailUrl}}" ng-show="selected == $index"/>
                              </a>
                     </li>
      </ul>
</div>

<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http) {
$scope.selected = -1;

$http.get("http://jsonplaceholder.typicode.com/photos")
.success(function (response) {
var albumId = parseInt(getUrlVars()["albumId"]);
var filtered = [];
var items = response;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.albumId === albumId) {
filtered.push(item);
}
}
$scope.photos = filtered;
$scope.toggle = function ($index) {
$scope.selected = $index;
}
});
});
</script>

</body>
</html>

作者: minigun 时间: 2015-9-4 19:42:59

这贴貌似吸引了不少js dev，打车问一下有人在工作里接触到mean架构吗，或者至少涉及其中的某一块，node，mongodb，express
前面有人提到gulp，有用grunt的吗，那种更流行
本人做.net的，最近对js颇感兴趣做了些学习故此一问
作者: gonghaima 时间: 2015-10-25 19:14:34

本帖最后由 gonghaima 于 2015-10-25 20:51 编辑

liuruihua 发表于 2015-9-4 09:43
你说的和我在前面说的一样:-)

众神听说过 OAth 吗 ?前后台交互方式（ajax / or page refresh / or ...），跟security是两个问题。
考虑一下facebook, google, etc 怎么expose api 出来，同时也有security 保障，是怎么实现的。
这个测试题是关于前台设计和调用，没有必要加一层security.
当然如果一定要加，也是有很多option的。不过被测试的人会苦逼而死，死前狠狠咒骂出题的人

仁者见仁智者见智，抛砖引玉。欢迎大家讨论  ：）

作者: gonghaima 时间: 2015-10-26 13:00:11

本帖最后由 gonghaima 于 2015-10-27 07:38 编辑

live site
http://webfrontangular.azurewebsites.net/

source code
https://github.com/gonghaima/webfront

Future improvement

Separation of layers (new folder for Views / Controllers / Services )
Typescript / Angular 2 syntax . Need use as less $scope as possible.
UI / UX

a good learning source:
http://campus.codeschool.com/courses/shaping-up-with-angular-js/contents

欢迎光临新西兰天维网社区 (http://bbs.skykiwi.com/) Powered by Discuz! X2