问一个 koa+vue 项目中的 Nodejs 问题

问一个 koa+vue 项目中的 Nodejs 问题

用 vue 做前端，koa 做后端做一个项目，将前端做完打包后，放在 koa 项目的 static 目录下（需引入koa-static模块），启动 koa 项目，访问/ 那么这个项目就算能正常的使用了

但是有时候我并不想让用户通过/访问，比如需访问 /admin 才加载我的 vue 前端，这个应该怎么做呢

我现在的做法是把这个 index.html 通过 steam 读出来，然后给 ctx.body，代码如下

router.get('/admin', async ctx => {
    ctx.type = 'html';
    let home = path.join(__dirname, '../static/index.html');
    ctx.body = fs.createReadStream(home);
});

不知道这样做法有没有什么问题，大家通常是怎么做的呢？或者说是最好应该怎么做呢？

另：如果后端换做 express 的话又应该怎么做？ sendfile 吗？


6 回复

用 koa-static 处理静态文件可能会影响 nodejs 速度，建议生产环境搭配 nginx，根路径直接映射到项目里面 static 文件夹，/api/或者其他路径才反向代理到 nodejs 服务器，这样还方便上 HTTPS
至于访问 /admin 才加载 html 的话，建议用 redirect 跳转到 html 页面即可
PS：koa 用 async 和 await 不是比 express 方便很多吗，怎么想着倒回去用 express


既然做分离最好把项目分开，不要用 koa static。
配一个 nginx 做两个项目的反代，折腾起来方便多了

async, await 是语法特性，express 也能用啊，express 我觉得还简单点…

做法当然可行，但正如楼上所说，不够优雅。
可能带来的问题就是项目的部署，前端每一次构建都会影响到后端的目录，后端的部署又会影响前端的打包文件。如果涉及到使用 docker 就更麻烦了。
解法就是使用 Nginx 做个反代，目前在我们公司的运用也是这样的。

不用这么复杂，前端编译好的项目直接扔静态目录，koa 做路由管理或者鉴权

在 Koa + Vue 项目中，Node.js 通常作为后端服务器，负责处理 API 请求、数据库交互等业务逻辑。这里针对一个常见的 Node.js 问题——如何在 Koa 中处理异步操作（如数据库查询），给出一个简洁的回答。

在 Koa 中处理异步操作，最推荐的方式是使用 async/await 语法，因为它可以让异步代码看起来更像是同步代码，提高可读性和可维护性。以下是一个简单的示例，展示了如何在 Koa 中使用 async/await 进行数据库查询（假设使用 mongoose 连接 MongoDB）：

const Koa = require('koa');
const mongoose = require('mongoose');
const app = new Koa();

mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });

const User = mongoose.model('User', new mongoose.Schema({ name: String }));

app.use(async ctx => {
  if (ctx.path === '/users') {
    try {
      const users = await User.find();
      ctx.body = users;
    } catch (error) {
      ctx.status = 500;
      ctx.body = { error: error.message };
    }
  } else {
    ctx.status = 404;
    ctx.body = 'Not Found';
  }
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

在这个示例中，我们创建了一个简单的 Koa 应用，连接了一个 MongoDB 数据库，并定义了一个路由 /users，用于获取所有用户。使用 async/await 可以轻松处理异步的数据库查询，并在发生错误时返回 500 状态码和错误信息。

回到顶部