如何使用 Id 使用 vuejs 编辑字段 mongodb、nodejs

Posted 2023-02-22

【中文标题】如何使用 Id 使用 vuejs 编辑字段 mongodb、nodejs

【英文标题】：How to edit a field mongodb, nodejs with vuejs using Id

【发布时间】：2021-10-16 07:30:17

【问题描述】：

我正在使用 mongodb、nodejs 和 vuejs（使用 vuetify）开发一个应用程序。我目前已经设置了后端 API，当我使用邮递员进行测试时，它可以正常工作。下面是代码；

const express = require('express');
const router = express.Router();
const Client, Provider = require('../models/Client');

// Edit a Client from List

router.post("/edit/:clientId", async (req, res) => 
    try
    const editClient = await Client.updateMany(
        "client._id": req.params.clientId,
           
            $set:
            
                "client.$.name": req.body.name,
                "client.$.email": req.body.email,
                "client.$.phone": req.body.phone,
                "client.$.providers.0.pname": req.body.pname,
            
           
        );
        res.json(editClient);
            catch (err) 
                res.json( message: err );
    
);

module.exports = router;

我还有一个文件（clientService.js）可以使用 axios 导入 url。代码如下；

import axios from 'axios';

const url = 'http://127.0.0.1:2111/api/clients/';

    // Edit client
    static async editClient(
            name,
            email,
            phone,
            pname,
            id
    )
        return axios.post(url+"edit/"+`$id`),
            name,
            email,
            phone,
            pname
        
    


export default clientService;

我还用 vuejs 创建了一个前端文件（Editclient.vue）来编辑。下面是代码；

<template>
    <v-container fluid class="editclient">
        <v-card
            elevation="2"
            outlined
            min-
            min-
            class= "my-12 px-2 pb-2"
        >
<form >
    <v-text-field
      :counter="50"
      label="Name"
      required
      name="name"
      v-model="name"
      clearable
    ></v-text-field>
    <v-text-field
      label="E-mail"
      required
      name="email"
      v-model="email"
      clearable
    ></v-text-field>
    <v-text-field
      label="Phone"
      required
      name="phone"
      v-model="phone"
      clearable
    ></v-text-field>
    <v-text-field
      required
      name="pname"
      label="Provider"
      v-model="pname"
      clearable
    ></v-text-field>

    <v-row class="mt-12">
        <v-btn
        class="white--text ml-3"
        color="red"
      >
        delete
      </v-btn>
    <v-spacer></v-spacer>
    <v-btn
        class="white--text mr-3"
        color="teal"
        @click="edit(rou)"
      >
        Edit Client
     </v-btn>
      <v-btn
        class="white--text mr-3"
        color="teal"
       to = "/"
      >
        return
      </v-btn>
    </v-row>      
  </form>
</v-card>
    </v-container>
</template>


<script>
  import clientService from '../clientService'

  export default 
    data () 
      return 
        clients: [],
        providers: [],
        name: [],
        email: [],
        phone: [],
        pname:[],
        idy:[],
        rou: '',
      
    ,
    async created() 
      try 
        var clientData = await clientService.getClients();
        this.clients = clientData[0].client;
        this.providers = clientData[0].providers;
        var client = this.clients;
        //var providers = this.providers;
        console.log(this.$route.params.id);
        console.log(client)


        var name = client.map(names => names.name);
        var email = client.map(emails => emails.email);
        var phone = client.map(phones => phones.phone);
        var idy = client.map(ids => ids._id);
        this.rou = this.$route.params.id;

        var i;
        for(i=0;i<idy.length;i++) 
        if(this.$route.params.id == idy[i])
                this.name = name[i];
                this.email = email[i];
                this.phone = phone[i];
                this.idy = idy[i];
            
               
        //console.log(idy);
        console.log(this.rou);
      
      catch(err)
        this.error = err.message;
      
    ,
    methods: 
       async edit(id) 
        await clientService.editClient(
          this.name,
          this.email,
          this.phone,
          this.pname,
          id,
        );
        prompt('submitted')
      ,
    
  
</script>

我想使用 ID 从我的 vuejs 前端进行编辑，但它不起作用，我认为后端可以通过我的邮递员测试工作。我需要有关如何实现后端工作的帮助。

提前感谢您的支持。

【参考方案1】：

在 clientservice.js 文件工作之前编辑如下

import axios from 'axios';

const url = 'http://127.0.0.1:2111/api/clients/';

    static async editClient(
            name,
            email,
            phone,
            pname,
            id
    )
        return axios.post(url+"edit/"+`$id`,
            name,
            email,
            phone,
            pname
        );
    


export default clientService;

【参考方案2】：

如果您只想更新一个文档，请尝试使用

const editClient = await Client.update(
     _id: req.params.clientId ,
    ....

【讨论】：

感谢您的回复。我试过了，但没有用。我认为这个问题与将前端连接到后端有关，因为当我使用邮递员进行测试时，后端可以完美运行。