跳到内容
达斯

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。 
作者
发布者名称
达斯
出版商徽标
达斯