在Vue/Quasar SSR项目中创建API

g52tjvyc  于 2023-05-07  发布在  Vue.js
关注(0)|答案(1)|浏览(247)

我想创建一个可以被应用程序本身(无论是“ AJAX ”还是服务器渲染)和其他客户端(例如:移动的应用程序)。我在谷歌上搜索“Quasar REST API”时发现的大多数文章都在谈论如何访问外部API,这不是我的情况。
我的理解是修改src-ssr/extension.js

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

并确保port位于src-ssr/index.js内部:

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仍在浏览器中加载。我错过了什么?

vshtjzan

vshtjzan1#

请看我的回答here

  • 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')
}

相关问题