跳到内容
 达斯

VDOM Stack(Vue 天野 Oak MongoDB)CRUD示例– Part 3

0

VDOM Stack(Vue 天野 Oak MongoDB)CRUD示例

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

VDOM Stack(Vue  天野  Oak MongoDB)CRUD示例– Part 3
VDOM Stack(Vue 天野 Oak MongoDB)CRUD示例– Part 3

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

在模型文件夹内的contact.ts中编辑联系人
的JavaScript
1
2
3
4
5
更改联系资料 = 异步的 (联系Id: ) => {
    返回 等待 这个 .联系Collection.找一个({
       _ID : { $ oid : 联系Id },
    });
  };


在控制器中创建editContact函数

控制器内部的contacts.ts
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
出口 const 更改联系资料: 任何 = 异步的 (响应: 任何 ) =>{
     尝试 {
        联系Id: = 响应.参数.联络人;
         const 数据: 任何 = 等待 联系Class.更改联系资料(联系Id);
 
         如果 ( 数据 ){
            响应.响应. 身体 = 数据 ;
            响应.响应.状态 = 200;
        }
    }
     抓住 (e){
        响应.响应. 身体 = 空值 ;
        响应.响应.状态 = 500;
    }
}


添加编辑联系路线:

的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
进口 { 路由器 } "//deno.land/x/oak/mod.ts";
进口 { 得到 Contacts, createContact, 更改联系资料 } “ ../controllers/contacts.ts”;
 
const 路由器 = 路由器 ({
  字首: “ / api”,
});
 
路由器
  . 得到 (“ /联系人”, 得到 Contacts)
  . 得到 ('/ edit /:contactid', 更改联系资料)
  . 发布 (“/创造”, createContact);
 
出口 默认 路由器;


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

具有编辑功能的编辑组件
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<模板>
  < div =“行证明内容中心”>
    < div =“ col-md-6”>
      <h3 =“文本中心”>创造 联系</h3>
      < 形成 @提交.避免=“更新”>
        < div =“表单组”>
          < 标签 对于 =“名字”> 第一 名称 </ 标签 >
          < 输入 类型 = “文本” =“形式控制” 模型=“ 联系.firstname” 需要 />
        </ div >
        < div =“表单组”>
          < 标签 对于 =“姓”> 持续 名称 </ 标签 >
          < 输入 类型 = “文本” =“形式控制” 模型=“ 联系.lastname” 需要 />
        </ div >
        < div =“表单组”>
          < 标签 对于 =“电子邮件”>电子邮件</ 标签 >
          < 输入 类型 = “文本” =“形式控制” 模型=“联系电子邮件” 需要 />
        </ div >
        < div =“表单组”>
          < 标签 对于 =“电话”>电话</ 标签 >
          < 输入 类型 = “文本” =“形式控制” 模型=“联系电话” 需要 />
        </ div >
        < div =“表单组”>
          < 纽扣 =“ btn btn-成功btn-block”>更新资料</ 纽扣 >
        </ div >
      </ 形成 >
    </ div >
  </ div >
</模板>
 
<script>
进口 轴距 “ 轴距 ”;
出口 默认 {
   数据 () {
    返回 {
      联系: {},
    };
  },
  被创造(){
    apiUrl = ` http :// localhost:4000 / api / edit / $ {this。$ route.params.id}`;
     轴距 . 得到 (apiUrl). 然后 (( 资源 ) =>{
       这个 .联系 = 资源 . 数据 ;
    })
  },
  方法: {},
};
</script>


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

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

更新模型中的联系人
的JavaScript
1
2
3
4
5
6
7
8
更新 Contact = 异步的 (联系Id: , changeData: 联系) => {
     const { matchCount, modifiedCount, 用户身份 } = 等待 这个 .联系Collection
      . 更新 One(
        { _ID : { $ oid : 联系Id } },
        { $: changeData },
      );
    返回 matchCount !== 0 ? 真正 : ;
  };


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

更新控制器内部的联系人
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
出口 const 更新 Contact = 异步的 ({请求, 响应, 参数}: {请求: 任何 , 响应: 任何 , 参数: 任何 })=>{
     const 联系Id = 等待 参数.联系Id;
     const 请求Body = 等待 请求. 身体 ({
        contentTypes: {
             文本 : [“应用程序/ ld + json”]
        }
    });
     const 联系 = 请求Body.;
     const 更新 Contact = 等待 联系Class. 更新 Contact(联系Id, 联系);
     如果 ( 更新 Contact == 真正 ){
        响应.状态 = 200;
        响应. 身体 = {
             味精 : “联系人已更新”
        }
    }
     其他 {
        响应.状态 = 404;
        响应. 身体 = {
             味精 : “找不到联系人”;
        }
    }
}


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

更新路线
的JavaScript
1
2
3
4
5
6
路由器
  . 得到 (“ /联系人”, 得到 Contacts)
  . 得到 (“ / edit /:contactid”, 更改联系资料)
  . 发布 (“/创造”, createContact)
  . 补丁 (“ / 更新 /:contactId”, 更新 Contact)
  ;


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

EditComponent中的update方法
的JavaScript
1
2
3
4
5
6
7
更新 () {
      apiUrl = ` http :// localhost:4000 / api / 更新 / $ {this。$ route.params.id}`;
       轴距 . 补丁 (apiUrl, 这个 .联系). 然后 (( 资源 )=>{
        安慰. 日志 ( 资源 );
         这个 .$路由器.(“联系人”);
      }). 抓住 (()=>安慰. 日志 ());
  }


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

在中创建deleteContact 楷模>contact.ts

删除Contact方法
的JavaScript
1
2
3
4
5
6
删除Contact = 异步的 (联系Id: ) => {
     const isContactDeleted = 等待 这个 .联系Collection.删除One({
       _ID : { $ oid : 联系Id },
    });
    返回 isContactDeleted ? 真正 : ;
  };


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

在控制器中添加deleteContact方法
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
出口 const 删除Contact = 异步的 ({请求, 响应, 参数} : {请求: 任何 , 响应: 任何 , 参数: 任何 })=>{
     const 联系Id = 等待 参数.联系Id;
     const 删除Contact = 等待 联系Class.删除Contact(联系Id);
     如果 (删除Contact){
        响应.状态 = 200;
        响应. 身体 = { 味精 : “联系人已被删除”}
    }
     其他 {
        响应.状态 = 404;
        响应. 身体 = { 味精 : “找不到联系人”}
    }
}


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

删除路线中的链接
的JavaScript
1
2
3
4
5
6
路由器
  . 得到 (“ /联系人”, 得到 Contacts)
  . 得到 (“ / edit /:contactid”, 更改联系资料)
  . 发布 (“/创造”, createContact)
  . 补丁 (“ / 更新 /:contactId”, 更新 Contact)
  .删除(“ / 删除 /:contactId”, 删除Contact);


最后,完成 联系Component.vue

删除按钮代码
的JavaScript
1
< 纽扣 =“ btn btn-危险” @ 点击 .避免=“ 删除Contact(contact._id。$ oid )”>删除</ 纽扣 >


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

删除Contact 方法中 联系Componet.vue

删除Vue组件中的联系方法
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
方法: {
    删除Contact( ID ) {
      apiUrl = ` http :// localhost:4000 / api / 删除 / $ {id}`;
      indexOfArrayItem = 这个 .联络人.findIndex((i) => i. _ID .$ oid == = ID );
       如果 (窗口.确认(“您要删除吗?”)) {
         轴距
          .删除(apiUrl)
          . 然后 (() => {
             这个 .联络人.拼接(indexOfArrayItem, 1);
          })
          . 抓住 (() => {
            安慰. 日志 ();
          });
      }
    },
  },


此代码的视频:

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

0
概要
VDOM Stack(Vue  天野  Oak MongoDB)CRUD示例– Part 3
文章名
VDOM Stack(Vue 天野 Oak MongoDB)CRUD示例– Part 3
描述
在VDOM堆栈应用程序中创建并获取联系人详细信息。在本文中,我们将实现其余的编辑和删除部分。
作者
发布者名称
达斯
出版商徽标
达斯