tomcat_res

index.html

@@ -14,6 +14,13 @@
 		<h5 style="color:oranged">{{number}}</h5>
 		<About>this is About</About>
 		<test></test>-->
+		<p>
+			<router-link to="/home">首页</router-link>
+			<router-link to="/test">test</router-link>
+			<router-link to="/about">关于</router-link>
+		</p>
+		<router-view></router-view>
+		
 		<div class="flex flex-wrap gap-4 item-center">
 			<el-select
 				v-model="value"
@@ -33,30 +40,32 @@
 
 	  <br/>
 	<!--避免使用单标签，组件按照双标签规范用；    js代码相对位置导入后可以直接使用 -->
-		<p>before i18n label</p>
+		<!-- <p>before i18n label</p> -->
 		<div v-t="'messages.username'"></div>
 		{{$t('messages.login')}}
-		<p>after i18n label</p>
-		<label @click="changelang('zh')">中文</label>
-		<label @click="changelang('en')">english</label>
+		<!-- <p>after i18n label</p> -->
+		<!-- <label @click="changelang('zh')">中文</label>
+		<label @click="changelang('en')">english</label> -->
 		<hr/>
 		<button @click="interface_web()">connect to tomcat</button>
 		<br/>
 		<h4>tomcat_res -></h4><h4> {{ tomcat_res }}</h4>
 		<hr/>
+		<h2>书籍列表</h2>
+		<ul  v-for="iterm in books">
+			<li>{{item.title}}</li>
+			<li>{{item.author}}</li>
+			<li>{{item.publisher}}</li>
+			<li>{{item.pages}}</li>
+		</ul>
+		<hr/>
 		<!--<input type="button" text="中文" @click="changelang('zh')"/>
 		<input type="button" text="english" @click="changelang('en')"/>-->
-		<p>
-			<router-link to="/home">首页</router-link>
-			<router-link to="/test">test</router-link>
-			<router-link to="/about">关于</router-link>
-		</p>
-		<router-view></router-view>
     </template>
-    <template style="width:100%; backgroud-color:oranged;">
+    <!-- <template style="width:100%; backgroud-color:oranged;">
 	<Home @op="add">home vue</Home>
         <h2>{{number}}</h2>
-    </template>
+    </template> -->
 </body>
 </html>
 

index.js

@@ -59,18 +59,9 @@ const app=createApp({
       number:0,
       locale:null,
       options:[
-        {
-          value: 'zh',
-          label: '中文',
-        },
-        {
-          value: 'en',
-          label: 'English',
-        },
-        {
-          value: 'ja',
-          label: 'にほんご',
-        },
+        {value: 'zh', label: '中文',},
+        {value: 'en', label: 'English',},
+        {value: 'ja', label: 'にほんご',},
       ],
       tomcat_res:""
     }
@@ -81,8 +72,9 @@ const app=createApp({
     },
 
   changelang(type){
-    console.log(locale);
-    console.log("-----------changelang-----------------");
+    console.log("-----------change lang-----------------");
+    console.log("this.locale : "+this.locale);
+    console.log("locale"+locale);
     locale.value=type;
   },
   interface_web(){
@@ -91,12 +83,18 @@ const app=createApp({
     request.onload=function(){
       console.log("parse tomcat server string");
       const res=JSON.parse(request.responseText);
+
       this.tomcat_res=res.message;
-      console.log("res.message:"+res.message);
       console.log("res:"+res);
-      console.log("res[\"message\"]:"+res["message"]);
-      console.log("tomcat_res"+this.tomcat_res);
-      alert("this.tomcat_res : "+this.tomcat_res)
+      console.log("res[0].title :"+res[0].title);
+      console.log("res[0].author :"+res[0].author);
+      console.log("res[0].publisher :"+res[0].publisher);
+      console.log("res[0].pages :"+res[0].pages);
+      console.log("res[1][\"title\"] :"+res[1]["title"]);
+      console.log("res[1][\"author\"] :"+res[1]["author"]);
+      console.log("this.tomcat_res : "+this.tomcat_res);
+      console.log("tomcat_res : "+tomcat_res);
+      alert("this.tomcat_res : "+this.tomcat_res);
     };
     request.open("POST","http://ancientapes.cc:8080/mineluxuries/book");
     request.send("test tomcat");