wiki/index.js

console.log("hello world");
/**
console.log(process.argv);
process.argv.forEach(item => {
  console.log(item);
});
console.log("dirname : "+__dirname);
console.log("filename : "+__filename);
**/
console.log("----------------------------");
// const comm=require("./utils/commonjs.js");
// comm.info();
console.log("----------------------------");
// import {esname,esfunc} from "./utils/es.mjs"
//es.func();
console.log("----------------------------");
console.log("<h3>this is node test string!!!</h3>");
//const {createApp}=Vue;
import {createApp } from 'vue';
//import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
// import { createApp } from './lib/vue.esm-browser.js';
// import { createApp } from './lib/vue.global.js';
// import { Home } from "./component/Home.vue";
import Home from "./component/Home.vue";
import test from "./component/test.vue";
import About from "./component/About.vue";
import Login from "./component/approve/Login.vue";
import Register from "./component/approve/Register.vue";
import File from "./component/file/File.vue";
// import Headapes from "./component/Headapes.vue";
import Headapes from "./common/Headapes.vue";
import Header_ from './common/Header_.vue';
import i18n from "./i18n.js";
import { useI18n } from 'vue-i18n';
/**
const { locale,t } = useI18n();
console.log("----------------------------");
const changelang = type => {
  console.log(locale);
  console.log("----------------------------");
  locale.value=type;
}
**/
//import router from "./router.vue";
import router from "./router.js";
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import 'animate.css';
//console.log(createApp);
//console.log(i18n);
console.log(router);
const app=createApp({
  template:'#my-app',
//  template:`<div v-html='info'>template</div>`,
  components:{
    Home,
    test,
    About,
    Login,
    Register,
    File,
    Headapes,
    Header_
  },
  data(){
    return{
      info:`<span style='color:red; font-size:30px'>hello vue template</span>`,
      number:0,
      locale:null,
      options:[
        {value: 'zh', label: '中文',},
        {value: 'en', label: 'English',},
        {value: 'ja', label: 'にほんご',},
      ],
      tomcat_res:"tomcat",
      books:[
        {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:{
    add(){
      this.number++;
    },

    changelang(type){
      console.log("-----------change lang-----------------");
      console.log("this.locale : "+this.locale);
      console.log("locale"+locale);
      this.locale=locale;
      console.log("this.locale : "+this.locale);
      locale.value=type;
    },
    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].title;
        console.log("res:"+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]:"+res[1]);
        console.log("res[1][\"title\"] :"+res[1]["title"]);
        console.log("res[1][\"author\"] :"+res[1]["author"]);
        console.log("res[1].publisher :"+res[1].publisher);
        console.log("res[1].pages :"+res[1].pages);
        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/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(){
    const { locale,t } = useI18n();
    console.log("-------get locale--------");
      console.log("locale : "+locale);
//    this.locale=locale;
//    在根文件直接使用locale需要绑定一个locale变量至浏览器对象Window
//    否则无法让methods中的方法调用其中的变量（全局变量） 
//    如果封装在组件中，然后提供给父组件使用，则直接定义函数即可
    window.locale=locale;
    locale.value="en";
    // this.locale=locale;
    // console.log("this.local : "+this.locale);
    console.log("-------after get locale--------");
  }
}).use(i18n).use(router).use(ElementPlus).mount("#app");
//Vue.createApp(app).mount("#app");
console.log("end the vue template render");