index.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>index</title>
  7. </head>
  8. <body>
  9. <!-- <h3>this is node -> Vue test</h3> -->
  10. <div id='app' style='color:red; font-size:20px; font-weight:bold;'>app node start...</div>
  11. <template id="my-app">
  12. <!--<div v-html='info'></div>
  13. <Home @op="add">home vue</Home>
  14. <h5 style="color:oranged">{{number}}</h5>
  15. <About>this is About</About>
  16. <test></test>-->
  17. <div>
  18. <span><a href="{{$t('messages.pages.index_link')}}">{{$t('messages.pages.index')}}</a></span>
  19. <span><a href="{{$t('messages.pages.sample_link')}}">{{$t('messages.pages.sample')}}</a></span>
  20. <span><a href="{{$t('messages.pages.catagory_link')}}">{{$t('messages.pages.catagory')}}</a></span>
  21. <span><a href="{{$t('messages.pages.contact_link')}}">{{$t('messages.pages.contact')}}</a></span>
  22. <span><a href="{{$t('messages.pages.about_link')}}">{{$t('messages.pages.about')}}</a></span>
  23. </div>
  24. <div>
  25. <h3>{{$t('messages.pages.title')}} : </h3>
  26. <span><a href="{{$t('messages.pages.craft.software_customization_link')}}">{{$t('messages.pages.craft.software_customization')}}</a></span>
  27. <span><a href="{{$t('messages.pages.craft.uv_product_customization_link')}}">{{$t('messages.pages.craft.uv_product_customization')}}</a></span>
  28. <span><a href="{{$t('messages.pages.craft.lazer_marking_and_cutting_link')}}">{{$t('messages.pages.craft.lazer_marking_and_cutting')}}</a></span>
  29. <span><a href="{{$t('messages.pages.craft.customized_smart_hardware_products_link')}}">{{$t('messages.pages.craft.customized_smart_hardware_products')}}</a></span>
  30. <span><a href="{{$t('messages.pages.craft.product_purchasing_link')}}">{{$t('messages.pages.craft.product_purchasing')}}</a></span>
  31. <span><a href="{{$t('messages.pages.craft.skill_training_link')}}">{{$t('messages.pages.craft.skill_training')}}</a></span>
  32. <span><a href="{{$t('messages.pages.craft.equipment_process_construction_link')}}">{{$t('messages.pages.craft.equipment_process_construction')}}</a></span>
  33. <span><a href="{{$t('messages.pages.craft.artistic_design_link')}}">{{$t('messages.pages.craft.artistic_design')}}</a></span>
  34. <span><a href="{{$t('messages.pages.craft.game_picture_book_design_link')}}">{{$t('messages.pages.craft.game_picture_book_design')}}</a></span>
  35. <span><a href="{{$t('messages.pages.craft.brand_marketing_product_customization_link')}}">{{$t('messages.pages.craft.brand_marketing_product_customization')}}</a></span>
  36. </div>
  37. <p>
  38. <router-link to="/home">首页</router-link>
  39. <router-link to="/test">test</router-link>
  40. <router-link to="/about">关于</router-link>
  41. </p>
  42. <router-view></router-view>
  43. <div class="flex flex-wrap gap-4 item-center">
  44. <el-select
  45. v-model="value"
  46. placeholder="Select"
  47. size="large"
  48. style="width: 240px"
  49. >
  50. <el-option
  51. v-for="item in options"
  52. :key="item.value"
  53. :label="item.label"
  54. :value="item.value"
  55. @click="changelang(item.value)"
  56. />
  57. </el-select>
  58. </div>
  59. <br/>
  60. <!--避免使用单标签,组件按照双标签规范用; js代码相对位置导入后可以直接使用 -->
  61. <!-- <p>before i18n label</p> -->
  62. <div v-t="'messages.username'"></div>
  63. {{$t('messages.login')}}
  64. <!--
  65. <p>after i18n label</p>
  66. <label @click="changelang('zh')">中文</label>
  67. <label @click="changelang('en')">english</label>
  68. -->
  69. <hr/>
  70. <h3>connect to tomcat</h3>
  71. <button @click="interface_web()">connect to tomcat</button>
  72. <br/>
  73. <h4>tomcat_res -> {{ tomcat_res==""?"content empty":tomcat_res }}</h4>
  74. <hr/>
  75. <h2>书籍列表</h2>
  76. <table>
  77. <th>index</th><th>title</th><th>author</th><th>publisher</th><th>pages</th><th>operation</th>
  78. <tr v-for="(value,key,index) in books">
  79. <td>{{key}}</td>
  80. <td>{{value.title}}</td>
  81. <td>{{value.author}}</td>
  82. <td>{{value.publisher}}</td>
  83. <td>{{value.pages}}</td>
  84. </tr>
  85. </table>
  86. <!-- <ul v-for="(value,key,index) in books">
  87. <li v-for="(iterm,key,value) in books">{{value}}-{{key}}-{{item}}</li>
  88. <li>{{item}}</li>
  89. <li>{{value.title}}</li><li>{{value.author}}</li><li>{{value.publisher}}</li><li>{{value.pages}}</li>
  90. <li>{{item["title"]}}&nbsp;{{item["author"]}}&nbsp;{{item["publisher"]}}&nbsp;{{item["pages"]}}</li>
  91. </ul> -->
  92. <hr/>
  93. <!--<input type="button" text="中文" @click="changelang('zh')"/>
  94. <input type="button" text="english" @click="changelang('en')"/>-->
  95. </template>
  96. <!-- <template style="width:100%; backgroud-color:oranged;">
  97. <Home @op="add">home vue</Home>
  98. <h2>{{number}}</h2>
  99. </template> -->
  100. </body>
  101. </html>