VDOM Stack（Vue 天野 Oak MongoDB）CRUD示例

在最后两篇文章中，我们了解了创建并获取联系人 VDOM堆栈应用程序中的详细信息。在本文中，我们将实现本CRUD系列文章的其余部分，进行编辑和删除。

在中添加编辑联系人概念 联系方式 在模型文件夹中

在模型文件夹内的contact.ts中编辑联系人

的JavaScript

更改联系资料 =异步（contactId：字符串）=> {
    返回等待this.contactCollection.findOne（{
       _ID ：{$  oid ：contactId}，
     }）; 
   };

更改联系资料 = 异步的 (联系Id: 串) => {

返回等待这个 .联系Collection.找一个({

_ID : { $ oid : 联系Id },

});

};

在控制器中创建editContact函数

控制器内部的contacts.ts

的JavaScript

导出const 更改联系资料：any =  异步的 （response：any）=>{
     尝试{ 
        让contactId：字符串= 响应.params.contactid;
         const 数据：any =等待ContactClass.editContact（contactId）;

        如果（数据）{
            响应.response.body =数据；
            响应.response.status = 200;
        }
    }
    抓住{e} {
        响应.response.body =  空值 ;
        响应.response.status = 500;
    }
}

出口 const 更改联系资料：任何 = 异步的 (响应: 任何 ) =>{

尝试 {

让联系Id: 串 = 响应.参数.联络人;

const 数据：任何 = 等待联系Class.更改联系资料(联系Id);

如果 ( 数据 ){

响应.响应. 身体 = 数据 ;

响应.响应.状态 = 200;

}

抓住 (e){

响应.响应. 身体 = 空值 ;

响应.响应.状态 = 500;

}

添加编辑联系路线：

的JavaScript

进口 { 路由器 }  从  "//deno.land/x/oak/mod.ts";
从“ ../controllers/contacts.ts”导入{getContacts，createContact，editContact};

const  路由器  =  新  路由器（{
  前缀：“ / api”，
});

router
  .get（“ / 联络人”，getContacts）
  .get（'/ edit /：contactid'，editContact）
  .post（“ / create”，createContact）;

导出默认路由器；

进口 { 路由器 } 从 "//deno.land/x/oak/mod.ts";

进口 { 得到 Contacts, createContact, 更改联系资料 } 从 “ ../controllers/contacts.ts”;

const 路由器 = 新路由器({

字首: “ / api”,

});

路由器

. 得到 (“ /联系人”, 得到 Contacts)

. 得到 ('/ edit /：contactid', 更改联系资料)

. 发布 (“/创造”, createContact);

出口默认路由器 ;

现在它’是时候在editComponent的UI部分上工作了。

具有编辑功能的编辑组件

的JavaScript

<template>
  <div  类  =“ row justify-content-center”>
    <div  类 ="col-md-6">
      <h3  类  =“  文本 -center”>Create 联系</h3>
      <形式@  提交 .prevent =“ 更新”>
        <div  类  =“  形成 -group”>
          <标签为=“ firstName”>First  名称 </label>
          <输入type =“  文本 ”  类  =“  形成 -control” 模型 =“ 联系.firstname”必需/>
        </div>
        <div  类  =“  形成 -group”>
          <label  对于 ="lastName">Last  名称 </label>
          <输入type =“  文本 ”  类  =“  形成 -control” 模型 =“ 联系.lastname”必需/>
        </div>
        <div  类  =“  形成 -group”>
          <label  对于 ="email">Email</label>
          <输入type =“  文本 ”  类  =“  形成 -control” 模型 =“ 联系.email”必需/>
        </div>
        <div  类  =“  形成 -group”>
          <label  对于 ="phone">Phone</label>
          <输入type =“  文本 ”  类  =“  形成 -control” 模型 =“ 联系.phone”必需/>
        </div>
        <div  类  =“  形成 -group”>
          <按钮class =“ btn btn-成功btn-block”>Update</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
从“  轴距 ”导入axios；
export 默认 {
   数据 （）{
    返回{
      联系： {}，
     }; 
   }， 
  被创造（）{
     让  apiUrl =`http：// localhost：4000 / api / edit / $ {this。$ route.params.id}`;
     轴距 .get（apiUrl）.then（（res）=>{
       这个 .contact =  资源 .data;
     }） 
   }， 
  方法： {}，
};
</script>

<模板>

< div 类 =“行证明内容中心”>

< div 类 =“ col-md-6”>

< 形成 @ 提交 .防止=“更新”>

< div 类 =“表单组”>

< 标签对于 =“名字”> 第一名称 </ 标签 >

< 输入类型 = “文本” 类 =“形式控制” 模型=“ 联系.firstname” 需要 />

</ div >

< div 类 =“表单组”>

< 标签对于 =“姓”> 持续名称 </ 标签 >

< 输入类型 = “文本” 类 =“形式控制” 模型=“ 联系.lastname” 需要 />

</ div >

< div 类 =“表单组”>

< 标签对于 =“电子邮件”>电子邮件</ 标签 >

< 输入类型 = “文本” 类 =“形式控制” 模型=“联系电子邮件” 需要 />

</ div >

< div 类 =“表单组”>

< 标签对于 =“电话”>电话</ 标签 >

< 输入类型 = “文本” 类 =“形式控制” 模型=“联系电话” 需要 />

</ div >

< div 类 =“表单组”>

<纽扣类 =“ btn btn-成功btn-block”>更新资料</纽扣>

</ div >

</ 形成 >

</ div >

</模板>

进口轴距从 “ 轴距 ”;

出口默认 {

数据 () {

返回 {

联系: {},

};

被创造(){

让 apiUrl = ` http :// localhost：4000 / api / edit / $ {this。$ route.params.id}`;

轴距 . 得到 (apiUrl). 然后 (( 资源 ) =>{

这个 .联系 = 资源 . 数据 ;

})

方法: {},

};

</script>

更新资料联系 - VDOM stack — 更新资料联系 – VDOM stack

现在它’是时候更新联系人了。在下面添加代码 联系方式 在模型中。

更新模型中的联系人

的JavaScript

更新Contact =异步（contactId：字符串，changeData：Contact）=> {
     const  {matchedCount，modifiedCount，userId} =等待this.contactCollection
      .updateOne（
        {_id：{$  oid ：contactId}}，
        {$  组 ：changeData}，
       ）; 
    返回matchCount！== 0？真假;
   };

更新Contact = 异步的 (联系Id: 串, changeData: 联系) => {

const { matchCount, modifiedCount, 用户身份 } = 等待这个 .联系Collection

.更新One(

{ _ID : { $ oid : 联系Id } },

{ $ 组 : changeData },

);

返回 matchCount ！== 0 ? 真正 : 假 ;

};

现在在控制器中添加更新联系人。

更新控制器内部的联系人

的JavaScript

出口  const  更新Contact =  异步的 （{request，response，params}：{request：any，response：any，params：any}）=>{
     const  联系Id =等待params.contactId;
     const  请求Body =等待request.body（{
        contentTypes：{
            文字：[“ application / ld + json”]
        }
     }）; 
     const  联系 = 请求Body.value;
     const  更新Contact =等待ContactClass.updateContact（contactId，contact）;
     如果 （updateContact  ==   真正 ）{
        响应.status = 200;
        响应.body = {
             味精 ：“联系人已更新”
        }
    }
     其他{ 
        响应.status = 404;
        响应.body = {
             味精 ：“找不到联系人”；
        }
    }
}

出口 const 更新Contact = 异步的 ({请求, 响应, 参数}: {请求: 任何 , 响应: 任何 , 参数: 任何 })=>{

const 联系Id = 等待参数.联系Id;

const 请求Body = 等待请求. 身体 ({

contentTypes: {

文本 : [“应用程序/ ld + json”]

}

});

const 联系 = 请求Body. 值 ;

const 更新Contact = 等待联系Class.更新Contact(联系Id, 联系);

如果 (更新Contact == 真正 ){

响应.状态 = 200;

响应. 身体 = {

味精 : “联系人已更新”

}

其他 {

响应.状态 = 404;

响应. 身体 = {

味精 : “找不到联系人”;

}

加补丁路线 联系方式 内部路线文件夹

更新路线

的JavaScript

 路由器 
  .get（“ / 联络人”，getContacts）
  .get（“ / edit /：contactid”，editContact）
  .post（“ / create”，createContact）
  .patch（“ / 更新 /：contactId”，updateContact）
  ;

路由器

. 得到 (“ /联系人”, 得到 Contacts)

. 得到 (“ / edit /：contactid”, 更改联系资料)

. 发布 (“/创造”, createContact)

. 补丁 (“ / 更新 /：contactId”, 更新Contact)

;

接下来的事情是在中添加更新方法 EditComponent.vue

EditComponent中的update方法

的JavaScript

更新（）{
       让  apiUrl =`http：// localhost：4000 / api / 更新 / $ {this。$ route.params.id}`;
       轴距 .patch（apiUrl，this.contact）.then（（res）=>{
        安慰.log（res）;
         这个 。$  路由器 .push（'contacts'）;
      }）。catch（（err）=>console.log(err));
  }

更新() {

让 apiUrl = ` http :// localhost：4000 / api / 更新 / $ {this。$ route.params.id}`;

轴距 . 补丁 (apiUrl, 这个 .联系). 然后 (( 资源 )=>{

安慰. 日志 ( 资源 );

这个 .$ 路由器 . 推 (“联系人”);

}). 抓住 (( 呃 )=>安慰. 日志 ( 呃 ));

}

现在，此堆栈的更新部分已完成。现在它’是时候完成我们应用程序中的最后一个删除功能了。

在中创建deleteContact 楷模>contact.ts

删除 Contact方法

的JavaScript

删除 Contact =异步（contactId：字符串）=> {
     const  isContactDeleted =等待this.contactCollection.deleteOne（{
       _ID ：{$  oid ：contactId}，
     }）; 
    返回isContactDeleted吗？真假;
   };

删除 Contact = 异步的 (联系Id: 串) => {

const isContactDeleted = 等待这个 .联系Collection.删除 One({

_ID : { $ oid : 联系Id },

});

返回 isContactDeleted ? 真正 : 假 ;

};

建模后，在contacts.ts的控制器中添加deleteContact方法

在控制器中添加deleteContact方法

的JavaScript

出口  const  删除 Contact =  异步的 （{request，response，params}：{request：any，response：any，params：any}）=>{
     const  联系Id =等待params.contactId;
     const  删除 Contact =等待ContactClass.deleteContact（contactId）;
     如果 （deleteContact）{
        响应.status = 200;
        响应.body = {msg：“联系人已被删除”}
    }
     其他{ 
        响应.status = 404;
        响应.body = {信息：“找不到联系人”}
    }
}

出口 const 删除 Contact = 异步的 ({请求, 响应, 参数} : {请求: 任何 , 响应: 任何 , 参数: 任何 })=>{

const 联系Id = 等待参数.联系Id;

const 删除 Contact = 等待联系Class.删除 Contact(联系Id);

如果 (删除 Contact){

响应.状态 = 200;

响应. 身体 = { 味精 : “联系人已被删除”}

}

其他 {

响应.状态 = 404;

响应. 身体 = { 味精 : “找不到联系人”}

}

现在启用路由中的删除链接

删除路线中的链接

的JavaScript

 路由器 
  .get（“ / 联络人”，getContacts）
  .get（“ / edit /：contactid”，editContact）
  .post（“ / create”，createContact）
  .patch（“ / 更新 /：contactId”，updateContact）
  .delete（“ / 删除  /：contactId”，deleteContact）;

路由器

. 得到 (“ /联系人”, 得到 Contacts)

. 得到 (“ / edit /：contactid”, 更改联系资料)

. 发布 (“/创造”, createContact)

. 补丁 (“ / 更新 /：contactId”, 更新Contact)

.删除 (“ / 删除 /：contactId”, 删除 Contact);

最后，完成 联系Component.vue

删除按钮代码

的JavaScript

<按钮class =“ btn btn-danger” @  点击 .prevent =“ 删除 Contact（contact._id。$  oid ）”>Delete</button>

1	<纽扣类 =“ btn btn-危险” @ 点击 .防止=“ 删除 Contact（contact._id。$ oid ）”>删除</纽扣>

等待！您致电删除服务了吗？不，那么您的删除将如何进行。让我完成最后一段代码。

加 删除 Contact 方法中 联系Componet.vue

删除Vue组件中的联系方法

的JavaScript

方法： {
    删除 Contact（id）{
       让  apiUrl =`http：// localhost：4000 / api / 删除  / $ {id}`;
      让indexOfArrayItem =  这个 .contacts.findIndex（（i）=> i._id.$oid   == =   ID );
      如果（window.confirm（“您要删除吗？”））{
         轴距 
          .delete（apiUrl）
          .then（（）=> {
             这个 .contacts.splice（indexOfArrayItem，1）;
           }） 
          .catch（（错误）=> {
            安慰.log（err）;
           }）; 
      }
     }， 
   }，

方法: {

删除 Contact( ID ) {

让 apiUrl = ` http :// localhost：4000 / api / 删除 / $ {id}`;

让 indexOfArrayItem = 这个 .联络人.findIndex((i) => i. _ID .$ oid == = ID );

如果 (窗口 .确认(“您要删除吗？”)) {

轴距

.删除 (apiUrl)

. 然后 (() => {

这个 .联络人. 拼接 (indexOfArrayItem, 1);

})

. 抓住 (( 呃 ) => {

安慰. 日志 ( 呃 );

});

}

此代码的视频：

正如我告诉您的，本系列的源代码。

概要

文章名

VDOM Stack（Vue 天野 Oak MongoDB）CRUD示例– Part 3

描述

在VDOM堆栈应用程序中创建并获取联系人详细信息。在本文中，我们将实现其余的编辑和删除部分。

作者

达斯

发布者名称

达斯

出版商徽标

VDOM Stack（Vue 天野 Oak MongoDB）CRUD示例

相关文章：