在Vue/Quasar SSR项目中创建API

Question

我希望创建一个能够被应用本身（无论是“ajax”还是服务器渲染）和其他客户端（如移动应用程序）调用的API。在谷歌搜索“Quasar REST API”时，大部分文章都讨论如何访问外部API，这并不符合我的情况。

我的理解是修改src-ssr/extension.js:

module.exports.extendApp = function({app, ssr}) {
  app.get('/api/bla', (req, res) => {
    res.send('something')
  })
}

并确保 src-ssr/index.js 中的 port：

const ssr = require('../ssr'),
      extension = require('./extension'),
      app = express(),
      port = process.env.PORT || 8888

匹配quasar.conf.js中的值：

devServer: {
  https: false,
  open: false,
  port: 8888,
},

项目编译并运行成功，但浏览器中的 http://localhost:8888/api/bla 一直在加载。我错过了什么？

- wiradikusuma

Answer 1

请点击这里查看我的答案。

---

• src-ssr/middlewares/api.ts 是一个自定义中间件，用于捕获 /api/* 的请求。当找到配置的路由时，将加载并执行 API 处理程序。

import { ssrMiddleware } from 'quasar/wrappers'
import routes from '../../src/api/_routes'
import type { Request, Response } from 'express'
import { parse } from 'url'

export default ssrMiddleware(async ({ app, resolve }) => {
    app.all(resolve.urlPath('*'), async (req: Request, res: Response, next) => {
        const { pathname } = parse(req.url)
        if (!pathname || !pathname.startsWith('/api')) {
            return next()
        }

        const path = pathname.replace(/^\/api/, '')

        if (!Object.keys(routes).includes(path)) {
            res.sendStatus(404).end()
            return
        }

        console.log(`API hit on ${path}`)

        try {
            const handler = (await routes[path as keyof typeof routes]())
                .default
            handler(req, res)
        } catch (error) {
            console.error(error)
            res.sendStatus(500).end()
        }
    })
})

• 您可以在src/api/routes.ts中配置您的API路由，例如：

const routes = {
    '/ping': () => import('./ping'),
}

export default routes

• 同时编写您的 API 路由，例如 src/api/ping.ts

import type { Request, Response } from 'express'

export default function (req: Request, res: Response) {
    res.status(200).send('pong')
}

- David Wolf