我不认为 Quasar 提供类似的东西服务器目录开箱即用，但Quasar是一个相当灵活的框架，我们可以通过使用Quasar SSR 中间件 https://quasar.dev/quasar-cli-vite/developing-ssr/ssr-middleware :-)
这个想法是：
SSR 中间件是一个附加层，所有浏览器请求都应该通过该层。因此，我们需要做的就是添加一个额外的 SSR 中间件，以在尝试访问特定路由时拦截浏览器请求（在本例中，/api/*）。一步步：
免责声明：当然，它仅在 SSR 模式下运行 Quasar 时才有效。
- 考虑到我们已经创建了 Quasar 应用程序，并且已经添加了 SSR 模式（
npm init quasar && cd my-app && quasar mode add ssr），让我们使用以下命令添加一个额外的 SSR 中间件“api”：
quasar new ssrmiddleware api
- 之后我们需要将 SSR 中间件包含到
quasar.config.js:
ssr: {
...
middlewares: [
'api', // <= this is our SSR-middleware (keep this as first one)
'render' // keep this as last one
]
},
...
- 最后一步是将浏览器请求拦截实现到我们的 SSR 中间件文件中
src-ssr/middlewares/api.ts:
export default ssrMiddleware(async ({ app, resolve }) => {
app.all(resolve.urlPath('*'), (req, res, next) => {
if (req.url.substring(0, 4) === '/api') {
// Here we can implement our backend NodeJS/Express related operations.
// See the example below "Real-life example", which provides
// something similar to Next/Nuxt server-directory functionality.
res.status(200).send(`Hi! req.method: ${req.method}, req.url: ${req.url}`);
} else {
next();
}
});
});
现在我们可以启动 Quasar SSR 应用程序，并通过将浏览器指向 http://localhost:9100/api/foo/bar/ 来查看 API 的运行情况
回复 => 嗨！ req.method: GET, req.url: /api/foo/bar/
现实生活中的例子：
更新根据@David https://stackoverflow.com/users/13765033/david-wolf的建议。谢谢 ：-）
- 为了提供类似于 Next/Nuxt 服务器目录功能，我们需要在 SSR 中间件文件中包含一些额外的代码行
src-ssr/middlewares/api.ts。下面的示例映射所有可用的 API-Handler（请参阅 apiHandlers 对象）并根据请求 URL 选择它们来处理浏览器请求：
import { ssrMiddleware } from 'quasar/wrappers';
const apiHandlers: { [key: string]: any } = {
'req-info': import('../../src/api/req-info'),
version: import('../../src/api/version'),
};
export default ssrMiddleware(async ({ app, resolve }) => {
app.all(resolve.urlPath('*'), (req, res, next) => {
if (req.url.substring(0, 4) === '/api') {
try {
const path = req.url.split('?')[0].substring(5);
const apiHandler = await apiHandlers[path];
if (apiHandler) {
await apiHandler.default(req, res);
} else {
res.sendStatus(404);
}
} catch (error) {
console.error(error);
res.sendStatus(500);
}
} else {
next();
}
});
});
- 之后我们只需要在文件夹中创建 NodeJS/Express API-Handlers
/src/api/.
- 示例#1：
/src/api/version.ts:
import type { Request, Response } from 'express';
export default function (req: Request, res: Response) {
const version = require('../../package.json').version;
res.status(200).send(version);
}
- 示例#2：
/src/api/req-info.ts:
import type { Request, Response } from 'express';
export default function (req: Request, res: Response) {
res.setHeader('Content-Type', 'text/html');
res.status(200).send(`
<ul>
<li>req.url: ${req.url}</li>
<li>req.method: ${req.method}</li>
<li>req.query: ${JSON.stringify(req.query)}</li>
</ul>`);
}
我希望它有帮助，谢谢！
如果是这样，请投票:-)
StackBlitz 项目：https://stackblitz.com/edit/quasarframework-uocha6 https://stackblitz.com/edit/quasarframework-uocha6
