SpringBoot知识体系+Vue3 实战WIKI知识库系统笔记 demo7_axios_cross

Posted 2022-12-05 dlage

安装：

npm install axios

使用：

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios'

export default 
  name: 'Home',
  components: 
    HelloWorld
  ,
  setup() 
    console.log('setup')
    axios.get("http://localhost:8088/ebookLikeReq?name=vue").then((response) => 
      console.log(response)
    )
  

</script>

使用ref实现数据的绑定

<script>
// @ is an alias to /src
import onMounted, ref from "vue";
import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios'

export default 
  name: 'Home',
  components: 
    HelloWorld
  ,
  setup() 
    console.log('setup')
    const ebooks = ref()
    // 在这里写函数会在页面渲染完之后再执行。可能会拿到数据比较晚会出问题。比如操作数据会出错，因为数据还没有拿到。
    onMounted(() => 
      axios.get("http://localhost:8088/ebookLikeReq?name=vue").then((response) => 
        const data = response.data
        ebooks.value = response.data.content
        console.log(response)
      );
    )
    return 
      ebooks
    
  

</script>