APICloud Studio3——对接java后端遇到的问题（2）_apicloud studio 3 java扩展-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_45276209/article/details/120057398

在后台将list集合转换成json格式的字符串并传送到html页面，要实现在html页面循环显示集合内容。首先将传递的字符串转为object类型，转换方式有：

1. var json=eval(ret); 
2. var json=(new Function("return"+ret))();
3. var json=eval('('+ret+')');

3种方式都可以，ret为html页面接收到的字符串。
引入vue.js和vue.min.js两个js文件，使用v-for循环显示数据。完整示例如下：

<html>
<body>    
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/vue.js"></script>
  <script type="text/javascript" src="../script/vue.min.js"></script>
  <script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
<div id="app">
  <ol>
    <li v-for="s in st">
      {{s.username}}-----  {{s.nickname}}-----  {{s.userid}}-----  {{s.userpwd}}
    </li>
  </ol>
</div>
<div id="app1">
  <ol>
    <li v-for="s in st">
      {{s.username}}  -----  {{s.nickname}} -----  {{s.userid}} -----  {{s.userpwd}}
    </li>
  </ol>
</div>
<div id="app2">
  <ol>
    <li v-for="s in st">
      {{s.username}} -----  {{s.nickname}} -----  {{s.userid}} -----  {{s.userpwd}}
    </li>
  </ol>
</div>
</body>
 <script type="text/javascript">
              var ap=new Vue({
                el:'#app',
              data:{
                st:[]
              }
              });   
              var ap1=new Vue({
                el:'#app1',
              data:{
                st:[]
              }
              });  
              var ap2=new Vue({
                el:'#app2',
              data:{
                st:[]
              }
              });  
             
apiready = function(e) {    
          api.ajax({
            url: 'http://ip:port/smarthouse/user/findalluser',//服务器地址，写入自己的IP地址和端口号port
                method: 'post',           
                charset: 'utf-8',
                dataType: 'application/json',                    
          },
          function(ret, err) {                      
            if(ret){
            console.log(ret);        
            var json=eval(ret); 
            var json1=(new Function("return"+ret))();
            var json2=eval('('+ret+')');
            ap.st=json;
            ap1.st=json1;
            ap2.st=json2;                
              }else{
                console.log("未连接上服务器");
                   alert(err);   
              }    
          }         
          );         
        }    
    </script>
</html>
<!--
后端传递的数据格式为：
[{nickname:"1",userid:1,username:"1",userpwd:"1"},
{nickname:"2",userid:2,username:"2",userpwd:"2"},]
由ret接收
-->