上交所股票交易数据接口-利用vue3 调用api接口实现数据的渲染以及详情的实现

利用vue3 调用api接口实现数据的渲染以及详情的实现

首先新建一个项目

然后下载相应的api

首先配置App.vue

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

import axios from 'axios'
const instance = axios.create({
    baseURL:'https://cnodejs.org/api/v1'
})
export default instance

import axios from '../utils/request';

//请求列表的函数
export const getTopics = (params) => axios('/topics',{params})

//根据id获取详情
export const getTopic = (id,params) => axios.get(`/topic/${id}`,{params})

import { ref,onMounted } from 'vue'
import { getTopics } from '../api/topics'
export default function useTopics(){

    /**
 * 数据渲染功能
 */
//声明 数据
const topics = ref([])

//请求数据
onMounted(async () => {
    const res =await getTopics()
    topics.value = res.data.data
})
return {
    topics
}

}


import { useRouter } from 'vue-router'
export default function useTopics(){
  //跳转
const router = useRouter()
const go = (id) =>{
    router.push('/detail?id=' + id)
}
return {
    go
}
}

即可实现数据的渲染以及跳转功能

文章为作者独立观点，不代表股票交易接口观点