跳到内容
达斯

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

0

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

在VDOM Stack系列中，我们已经在中创建了基本的Vue应用程序 上一篇。现在在本文中，我们’将使用Deno和Oak框架通过数据库MongoDB创建API。

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

现在，在前端之后创建后端目录，并制作如下图所示的文件：

后端目录
后端目录

好吧，我已经告诉过你我’会与您分享GitHub存储库。所以，不要’不用担心结构。

在Windows 10中安装Deno

如果你’重新使用Deno.js，则必须首先使用PowerShell安装Deno：

使用安装Deno
电源外壳
1
iwr https://地.土地/x/安装/安装.ps1 -useb | 进出口


使用安装Deno iwr //deno.land/x/install/install.ps1 -useb | 进出口
使用安装Deno iwr //deno.land/x/install/install.ps1 -useb | 进出口

明显的错误来了

可能是，您可以获得以下类型的错误：

Could not 找 module “//deno.land/x/cors/mod.ts” locally

解：运行以下代码。

编译面
的JavaScript
1
地 跑 后端/应用程式.ts


重新打开您的Vscode。如果错误无法解决。现在你的 应用程序 代码将是

应用程序
的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
进口 { 应用 } 从 "//deno.land/x/oak/mod.ts";
进口 路由器 从 “ ./routers/contact.ts”;
进口 { OakCors } 从 "//deno.land/x/cors/mod.ts";
 
七星彩中奖查询 环保 = 天野.环保.反对();
 
七星彩中奖查询 港口 = 环保.港口 || 4000;
七星彩中奖查询 主办 = 环保.主办 || “本地主机”;
七星彩中奖查询 应用程式 = 新 应用();
 
应用程式.采用(异步的 (ctx, 下一页) => {
  等待 下一页();
  七星彩中奖查询 rt = ctx.响应.标头.得到(“ X响应时间”);
  安慰.日志(`${ctx.请求.方法} ${ctx.请求.网址} - ${rt }`);
});
 
应用程式.采用(异步的 (ctx, 下一页) => {
  七星彩中奖查询 开始 = 日期.现在();
  等待 下一页();
  七星彩中奖查询 多发性硬化症 = 日期.现在();
  ctx.响应.标头.组(“ X响应时间”, `${多发性硬化症} 多发性硬化症`);
});
 
应用程式.采用(OakCors());
应用程式.采用(路由器.路由器());
应用程式.采用(路由器.允许edMethods());
安慰.日志(`应用 是 清单 上 港口: ${港口} 要么 打开 ${主办}:${港口}`);
等待 应用程式.听(`${主办}:${港口}`);


联系方式 在后端模型中

模型内部的contact.ts
的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
进口 D B 从 “ ./db.ts”;
 
接口 联系 {
  名字: 串;
  姓: 串;
  电子邮件: 串;
  电话: 串;
}
 
类 联系Class {
  建设者() {}
  联系Collection = D B.采集(“联系人”);
  得到Contact = 异步的 () => {
    返回 等待 这个.联系Collection.找({});
  };
 
  createContact = 异步的 (inputContactDetails: 联系) => {
    七星彩中奖查询 名字 = inputContactDetails.名字;
    七星彩中奖查询 姓 = inputContactDetails.姓;
    七星彩中奖查询 电子邮件 = inputContactDetails.电子邮件;
    七星彩中奖查询 电话 = inputContactDetails.电话;
 
    七星彩中奖查询 createContact = 等待 这个.联系Collection.insertOne({
      名字: 名字,
      姓: 姓,
      电子邮件: 电子邮件,
      电话: 电话,
    });
    返回 安慰.日志(“联系人已创建”);
  };
}
 
出口 默认 联系Class;


看更多:
VDOM Stack,VDOM Stack（Vue 天野 Oak MongoDB）CRUD示例– Part 2
RxJS速成课程–做和过滤运算符
目录.do Operator.filter（）operator.first（）operator.last（）operator .do Operator ...

在这里，我们调用mongodb函数插入以创建联系人。现在为控制器编写代码。

控制器内部的contact.ts
的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
进口 联系 从 '../models/contact.ts';
 
七星彩中奖查询 联系Class = 新 联系;
 
出口 七星彩中奖查询 得到Contacts = 异步的({响应}: {响应: 任何})=>{
    响应.身体 = 联系Class.得到Contact;
}
 
出口 七星彩中奖查询 createContact = 异步的 ({请求, 响应}: {请求: 任何, 响应: 任何})=>{
    七星彩中奖查询 请求Body = 等待 请求.身体({
        contentTypes: {
            文本: [“应用程序/ ld + json”]
        }
    });
 
    七星彩中奖查询 联络人 = 请求Body.值;
    七星彩中奖查询 名字 = 联络人.名字;
    七星彩中奖查询 姓 = 联络人.姓;
    七星彩中奖查询 电子邮件 = 联络人.电子邮件;
    七星彩中奖查询 电话 = 联络人.电话;
 
    联系Class.createContact({
        名字: 名字,
        姓: 姓,
        电子邮件: 电子邮件,
        电话: 电话
    });
    请求.身体 = “联系人已创建。”;
};

嘿，这是什么意思 应用程序/ ld + json 在第12行？

您获得的代码段是一个包含以下内容的脚本 JSON-LD 数据格式，一种编码方法 关联数据 using JSON. Schema.org 词汇用于标记Web内容，以便专业人士可以理解它们’的搜索引擎（Google，Microsoft，Yandex和Yahoo!）。搜索引擎使用此信息显示以向用户显示相关内容。因此，没有什么可担心的。

现在，使用Mongodb为Deno API创建路由。

路由文件夹中的contact.ts
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
进口 { 路由器 } 从 "//deno.land/x/oak/mod.ts";
进口 { 得到Contacts, createContact } 从 “ ../controllers/contacts.ts”;
 
七星彩中奖查询 路由器 = 新 路由器({
  字首: “ / api”,
});
 
路由器
  .得到(“ /联系人”, 得到Contacts)
  .发布(“/创造”, createContact);
 
出口 默认 路由器;


现在在里面配置数据库 数据库 内部模型’ folder.

数据库名为dasjs的db.ts
的JavaScript
1
2
3
4
5
6
7
8
进口 { MongoClient } 从 "//deno.land/x/[电子邮件 protected]/mod.ts”;
 
七星彩中奖查询 客户 = 新 MongoClient();
 
客户.connectWithUri(“ mondodb：// localhost：27017”);
 
七星彩中奖查询 D b = 客户.数据库(“ dasjs”);
出口 默认 D b;


在继续下一步之前，通过运行以下代码，下载denon并授予对Deno的读写访问权限：

安装denon.ts
的JavaScript
1
地 安装 -允许-读 -允许-跑 -允许-写 -允许-净 -f -不稳定的 https://deno.land/x/[电子邮件 protected]/denon.ts


然后运行代码：

运行天龙
的JavaScript
1
天龙 跑 -允许-环保 -允许-净 -允许-插入 -允许-读 -允许-写 -不稳定的 应用程式.ts


输出应为：

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

天野服务器现在正在运行。让我们在组件中添加创建的API。

更新了CreateComponent.vue的脚本代码
的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
<script>
进口 轴距 从 “ 轴距”;
出口 默认 {
  数据() {
    返回 {
      联系: {
        名字: ”,
        姓: ”,
        电子邮件: ”,
        电话: ”,
      },
    };
  },
  方法: {
    提交() {
      让 apiUrl = “ http：// localhost：4000 / api / create”;
 
      轴距
        .发布(apiUrl, 这个.联系)
        .然后(() => {
          这个.$路由器.推(“ /联系人”);
          这个.联系 = {
            名字: ”,
            姓: ”,
            电子邮件: ”,
            电话: ”,
          };
        })
        .抓住((错误) => {
          安慰.日志(错误);
        });
    },
  },
};
</script>


更新ContactComponent.vue以获取表中的所有联系人

联系人组件，用于获取所有联系方式
的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
47
48
49
50
51
52
53
54
<模板>
  <div 类=“行证明内容中心”>
    <div 类=“ col-md-6”>
      <表 类=“表表条纹”>
        <Thead 类=“头黑”>
          <TR>
            <日>第一 名称</日>
            <日>持续 名称</日>
            <日>电子邮件</日>
            <日>电话</日>
            <日>行动</日>
          </TR>
        </Thead>
        <身体>
          <TR v为=“联系人中的联系人” :键=“ 联系._id。$ oid”>
            <d>{{乐团.名字}}</d>
            <d>{{乐团.姓}}</d>
            <d>{{乐团.电子邮件}}</d>
            <d>{{乐团.电话}}</d>
            <d>
              <路由器-链接
                :至=“ {名称：'edit'，参数：{id：contact._id。$ oid}}”
                类=“ btn btn-成功”
              >编辑</路由器-链接>
              <纽扣 类=“ btn btn-危险”>删除</纽扣>
            </d>
          </TR>
        </身体>
      </表>
    </div>
  </div>
</模板>
 
<script>
进口 轴距 从 “ 轴距”;
出口 默认 {
  数据() {
    返回 {
      联络人: [],
    };
  },
  被创造() {
    让 apiUrl = “ http：// localhost：4000 / api / 联络人”;
    轴距
      .得到(apiUrl)
      .然后((资源) => {
        这个.联络人 = 资源.数据;
      })
      .抓住((错误) => {
        安慰.日志(错误);
      });
  },
};
</script>


VDOM获取所有联系人
VDOM获取所有联系人

目前，我们可以使用Deno和Vue从MongoDb插入和获取联系方式。在下一篇文章中，我们’ll实现编辑和删除功能。

0
概要
VDOM Stack（Vue 天野 Oak MongoDB）CRUD示例– Part 2
文章名
VDOM Stack（Vue 天野 Oak MongoDB）CRUD示例
描述
在VDOM Stack系列中，我们已经在上一篇文章中创建了基本的Vue应用程序。现在在本文中，我们'将使用Deno和Oak框架创建API。 
作者
发布者名称
达斯
出版商徽标
达斯