connect to tomcat

index.html

@@ -114,6 +114,22 @@
 			</span>
 		</div>
 
+	<!-- ================================================= -->
+    <h3>connect to tomcat</h3>
+    <button @click="interface_web2()">get userinfo</button>
+    <br/>
+    <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 users">
+            <td>{{key}}</td>
+            <td>{{value.usename}}</td>
+            <td>{{value.nickname}}</td>
+            <td>{{value.password}}</td>
+            <td>{{value.description}}</td>
+        </tr>
+    </table>
+	<!-- ================================================= -->
 		<!-- <router-view></router-view> -->
 
 		<!-- <button onclick="dialog.show()">弹窗show（）</button>

index.js

@@ -77,6 +77,10 @@ const app=createApp({
         {title:"Linux从入门到精通",author:"night-cherry",publisher:"peking press",pages:123},
         {title:"MySQL必知必会",author:"李晓兵",publisher:"peking press",pages:456},
       ],
+      users:[
+        {username:"Linux从入门到精通",nickname:"night-cherry",password:"peking press",descrption:"123"},
+      ],
+
     }
   },
   methods:{
@@ -143,6 +147,58 @@ const app=createApp({
       };
       request.open("POST","http://ancientapes.cc:8080/mineluxuries/book");
       request.send("test tomcat");
+    },
+    interface_web2(){
+      console.log("---------tomcat server----------");
+      console.log("this.tomcat_res : "+this.tomcat_res);
+      console.log("------this.books : "+this.users);
+      const _users=this.users;
+      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("------  _users : "+_users);
+        // console.log("------this.books : "+this.books);
+        try{
+          for(const item of res){
+            console.log(item);
+            _users.push(item);
+          }
+          // _users.concat(res);
+        }catch(e){
+          console.log("the way == _users.push(res[0])  is wrong!!!");
+          try{
+            _users.push(res[0]);
+
+          }catch(e){
+            console.log("the way == _users.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(){

pages/sample.html

@@ -21,6 +21,9 @@
     <hr/>
     <pre>main link : <a href="#">boujeeshilry.com!</a></pre>
     
+    <h3>connect to tomcat</h3>
+    <button @click="interface_web()">get userinfo</button>
+    <br/>
     <h2>用户列表</h2>
     <table>
         <th>index</th><th>usename</th><th>nickname</th><th>password</th><th>description</th><th>operation</th>
@@ -31,10 +34,6 @@
             <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>

webpack.config.js

@@ -10,7 +10,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports={
   entry:{
     index:"./index.js",
-    sample:"./utils/sample.js",
+    // sample:"./utils/sample.js",
   },
   output:{
     filename:"[name].js",