首页 > 解决方案 > Vue相当于表达[GET, POST]

问题描述

这是我写的一段代码

export let postChapter = (req: Request, res: Response) => {
    var chapterInfoModel = mongoose.model(`${req.params.novelId}`, RiChapterScheme);

    var array = {
        title: req.body.chapterTitle,
        content: req.body.chapterContent
    };

    let newChapterInfo = new chapterInfoModel(array);

    newChapterInfo.save((err, book) => {
        if (err) {
            res.send({ error: err, affected: book });
        } else if (!err) {
            res.redirect('/novels/' + req.params.novelId);
        }
    });
};

上面的代码是我的控制器。这是我不知道如何转换为我的 vue 设置的部分

因为我的快速路由器是这样设置的

this.router.post('/novels/:novelId', novelController.postNovel);

这是我的Vue路由器

路由器.ts

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

我的 vue-cli 插件如下

主页.Vue

<template>
    <div>
        <img id='mainLogo' src='@/assets/logo.jpg'>
        <form method="POST"></form>
            <button type="submit"></button>
    </div>
</template>

我将如何实现这一点?

var chapterInfoModel = mongoose.model(`${req.params.novelId}`, RiChapterScheme);
let newChapterInfo = new chapterInfoModel(array);

newChapterInfo.save((err, book) => {
    if (err) {
        res.send({ error: err, affected: book });
    } else if (!err) {
        res.redirect('/novels/' + req.params.novelId);
    }
});

进入我的vue路由器还是进入我的Home.vue?

谢谢!

标签: typescriptvue.js

解决方案


对于未来的读者:使用 Vue 直接访问数据库是不可能的,因为它是一个客户端框架。Vue 只能通过 HTTP 进行通信,因此您需要向后端服务器发送一个 Post HTTP 请求(在这种情况下是快递)。后端服务器将处理请求,然后将数据保存到您的数据库中。

Axios是一个非常有用的包,可以轻松编写 HTTP 请求。另请参阅此问题可能会有所帮助,因为它描述了您需要执行的所有步骤。


推荐阅读