[Web] 前端的一些快速启动

Vue Quick Start with Vue-CLI

import in html page：

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
  
</script>


<script type="module">
  import { createApp } from 'vue'
  import MyComponent from '../js/VueGlobal.js'
  import HomepageComponent from '../js/HomePage.js'

  createApp(MyComponent).mount('#app')
  createApp(HomepageComponent).mount('#homepage')

</script>

export in js page ：

export default {
    data() {
      return { 
       
        }
    },
    // template will create html element in specified box which you have mounted in html page
    template: `
        <div>This is a test BOX</div>
   
  `
,
methods:{

       
}


}

fetch：

/*
template will be like below:

fetch(url,request).then()

request will include:
request method, request headers

after the 'then' method, you can handle your response here

Tip: you cannot monitor the stream process, so if you want to use a process bar , don't use fetch

*/

//This is a example for get data from backend 

fetch(url,{
            method: 'GET',        
           
            headers:{
            'Content-Type':'application/x.wwww-form-urlencoded',                                
            },
        }).then(res => res.json()).then(res=>{
        
            this.data = res
        })

//This is a example for post a form 

//first create a formData object
formData = new FormData()

//append data into formData obj
var inner_text = document.getElementsByName(name)[0].innerText
var inner_value = document.getElementsByName(name)[0].nextSibling.value
    
formdata.append(inner_text,inner_value)

//finally fetch the form
fetch(host+ ":8000"+ '/experience/create/',{
        method: 'POST',        
        body:formData,
        mode:'no-cors',
        headers:{
            'Content-Type':'application/x.wwww-form-urlencoded',                                
        },
      })

Detail for JS use (for someone don't use JS frequently)

// list | array operation

//add a element to list

list.push(el)

//remove a element from list 
//i for index, j for range

list.splice(i,j)

/*exapmle function:
list.map((val,i)=>{
            if(val===member){
               list.splice(i,1)                
            }
        })

*/

//use 'for' in JS
//item is the index of each member
//if you want to retrieve memebr, try list[item]
for(var item in list){
    
}