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

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

好吧,我已经告诉过你我’会与您分享GitHub存储库。所以,不要’不用担心结构。
在Windows 10中安装Deno
如果你’重新使用Deno.js,则必须首先使用PowerShell安装Deno:
1 |
iwr https://地.土地/x/安装/安装.ps1 -useb | 进出口 |
明显的错误来了
可能是,您可以获得以下类型的错误:
Could not 找 module “//deno.land/x/cors/mod.ts” locally
解:运行以下代码。
1 |
地 跑 后端/应用程式.ts |
重新打开您的Vscode。如果错误无法解决。现在你的 应用程序 代码将是
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()); 安慰.日志(`应用 是 清单 上 港口: ${港口} 要么 打开 ${主办}:${港口}`); 等待 应用程式.听(`${主办}:${港口}`); |
联系方式 在后端模型中
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; |
在这里,我们调用mongodb函数插入以创建联系人。现在为控制器编写代码。
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创建路由。
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.
1 2 3 4 5 6 7 8 |
七星彩中奖查询 客户 = 新 MongoClient(); 客户.connectWithUri(“ mondodb:// localhost:27017”); 七星彩中奖查询 D b = 客户.数据库(“ dasjs”); 出口 默认 D b; |
在继续下一步之前,通过运行以下代码,下载denon并授予对Deno的读写访问权限:
1 |
然后运行代码:
1 |
天龙 跑 -允许-环保 -允许-净 -允许-插入 -允许-读 -允许-写 -不稳定的 应用程式.ts |
输出应为:
天野服务器现在正在运行。让我们在组件中添加创建的API。
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以获取表中的所有联系人
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> |
目前,我们可以使用Deno和Vue从MongoDb插入和获取联系方式。在下一篇文章中,我们’ll实现编辑和删除功能。

