Vue3 项目实战：使用 API 接口展示不同类型数据

本文将以一个简单的 Vue3 项目为例，演示如何使用 API 接口展示不同类型的数据，例如新闻类型、用户类型、论坛类型等。

准备工作

创建 Vue3 项目：

vue create my-project
cd my-project

安装 Vue Router 和 Axios：

npm install vue-router axios

项目结构

在项目的 src 文件夹下，我们将创建以下组件：

src/components/Newstype.vue：用于显示新闻类型的组件

<template>
  <div>
    <h1>Newstype</h1>
    <ul>
      <li v-for='type in types' :key='type.id'>{{ type.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      types: [],
    };
  },
  mounted() {
    axios.get('http://localhost:8080/api/system/newstype')
      .then(response => {
        this.types = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

src/components/Usertype.vue：用于显示用户类型的组件

<template>
  <div>
    <h1>Usertype</h1>
    <ul>
      <li v-for='type in types' :key='type.id'>{{ type.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  props: ['userid'],
  data() {
    return {
      types: [],
    };
  },
  mounted() {
    axios.get(`http://localhost:8080/api/system/usertype/${this.userid}`) // 注意：使用模板字符串
      .then(response => {
        this.types = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

src/components/Luntantype.vue：用于显示论坛类型的组件

<template>
  <div>
    <h1>Luntantype</h1>
    <ul>
      <li v-for='type in types' :key='type.id'>{{ type.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      types: [],
    };
  },
  mounted() {
    axios.get('http://localhost:8080/api/system/luntantype')
      .then(response => {
        this.types = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

src/App.vue：用于定义路由和呈现组件的根组件

<template>
  <div>
    <router-link to='/newstype'>Newstype</router-link>
    <router-link to='/usertype/1'>Usertype</router-link> <router-link to='/luntantype'>Luntantype</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Newstype from './components/Newstype.vue';
import Usertype from './components/Usertype.vue';
import Luntantype from './components/Luntantype.vue';
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/newstype', component: Newstype },
  { path: '/usertype/:id', component: Usertype },
  { path: '/luntantype', component: Luntantype },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default {
  router,
};
</script>

src/main.js：用于初始化 Vue 应用

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).use(App.router).mount('#app');

运行项目

使用以下命令启动应用程序：

npm run serve

现在，你可以在浏览器中访问 http://localhost:8080 来查看 Vue3 应用程序，并通过点击链接来访问不同的组件和接口。

总结

本示例展示了如何使用 Vue3 框架，结合 API 接口实现展示不同类型数据的项目。你可以在此基础上，添加更多功能，例如数据筛选、排序、分页等。

注意：

上述代码中的 API 接口地址 (http://localhost:8080) 需要根据实际情况进行修改。
为了简化示例，我们只展示了三个组件，你可以根据需要添加更多组件。
为了更清晰的代码展示，将双引号改为单引号。