Vue3+TS+NodeJS后台管理系统开发实战（十九）

2023-09-20 07:42:55

动态加载页面：将后端 API 集成到前端路由中

前言

现代 Web 应用程序需要复杂的用户界面和动态内容。为了满足这一需求，前端路由已成为构建复杂单页应用程序 (SPA) 的关键技术。然而，除了静态页面之外，还经常需要从后端应用程序动态加载页面。本文将指导您完成将后端 API 与前端路由集成的过程，以创建更强大、更灵活的 Web 应用程序。

集成后端 API

创建后端路由

第一步是创建后端路由以处理页面请求。在 Node.js 中，可以使用 Express 框架轻松完成此操作：

// app.ts
import express from 'express';

const app = express();

app.get('/pages/:page', async (req, res) => {
  const pageData = await getPageData(req.params.page);
  res.render('page', { pageData });
});

这个路由将处理来自前端的 /pages/:page 请求，并从数据库中获取相应页面的数据。

调用后端 API

接下来，需要在前端代码中调用这个后端 API。可以使用 Axios 库进行 HTTP 请求：

// App.vue
import axios from 'axios';

export default {
  methods: {
    async loadPage(page) {
      const response = await axios.get(`/pages/${page}`);
      this.$router.push({ path: page, query: { data: response.data } });
    },
  },
};

这个方法将根据给定的页面名称调用后端 API，并通过查询参数将页面数据传递给路由。

更新侧边栏链接

最后，需要更新侧边栏链接以使用新的加载页面方法：

<!-- Sidebar.vue -->
<template>
  <ul>
    <li v-for="page in pages" :key="page.id">
      <router-link :to="{ name: page.name, query: { data: page.data } }">{{ page.title }}</router-link>
    </li>
  </ul>
</template>