connect to tomcat

pages/sample.html

@@ -20,5 +20,21 @@
     <canvas id="canvas"></canvas>
     <hr/>
     <pre>main link : <a href="#">boujeeshilry.com!</a></pre>
+    
+    <h2>用户列表</h2>
+    <table>
+        <th>index</th><th>usename</th><th>nickname</th><th>password</th><th>description</th><th>operation</th>
+        <tr  v-for="(value,key,index) in books">
+            <td>{{key}}</td>
+            <td>{{value.usename}}</td>
+            <td>{{value.nickname}}</td>
+            <td>{{value.password}}</td>
+            <td>{{value.description}}</td>
+        </tr>
+        
+    </table>
+    <h3>connect to tomcat</h3>
+    <button @click="interface_web()">get userinfo</button>
+    <br/>
 </body>
 </html>

utils/sample.js

@@ -24,9 +24,64 @@ const app=createApp({
       info:`<span style='color:red; font-size:30px'>hello vue template</span>`,
       number:0,
       locale:null,
+      books:[
+        {username:"Linux从入门到精通",nickname:"night-cherry",password:"peking press",descrption:"123"},
+      ],
     }
   },
   methods:{
+    interface_web(){
+      console.log("---------tomcat server----------");
+      console.log("this.tomcat_res : "+this.tomcat_res);
+      console.log("------this.books : "+this.books);
+      const _books=this.books;
+      let _tomcat_res=this.tomcat_res;
+      // console.log("------this : "+this);
+      const request = new XMLHttpRequest();
+      request.onload=function(){
+        console.log("--------parse tomcat server string--------");
+        const res=JSON.parse(request.responseText);
+
+        _tomcat_res=res[0].usename;
+        console.log("res:"+res);
+        console.log("res[0].usename :"+res[0].usename);
+        console.log("res[0].nickname :"+res[0].nickname);
+        console.log("res[0].password :"+res[0].password);
+        console.log("res[0].description :"+res[0].description);
+        console.log("res[1]:"+res[1]);
+        console.log("res[1][\"usename\"] :"+res[1]["usename"]);
+        console.log("res[1][\"nickname\"] :"+res[1]["nickname"]);
+        console.log("res[1].password :"+res[1].password);
+        console.log("res[1].description :"+res[1].description);
+        console.log("this.tomcat_res : "+this.tomcat_res);
+        alert("this.tomcat_res : "+_tomcat_res);
+        
+        console.log("------  _books : "+_books);
+        // console.log("------this.books : "+this.books);
+        try{
+          for(const item of res){
+            console.log(item);
+            _books.push(item);
+          }
+          // _books.concat(res);
+        }catch(e){
+          console.log("the way == _books.push(res[0])  is wrong!!!");
+          try{
+            _books.push(res[0]);
+
+          }catch(e){
+            console.log("the way == _books.push(res[0])  is wrong!!!");
+          }
+        }finally{
+          console.log("--object array operation done--");
+        }
+        // console.log("------books : "+books);
+        // console.log("------this : "+this);
+        console.log("this.tomcat_res : "+_tomcat_res);
+      };
+      request.open("POST","http://ancientapes.cc:8080/maven/book_quick");
+      request.send("test tomcat");
+    }
     
   },
   setup(){