虚拟DOM 叠放（Vue 天野 橡木 MongoDB）CRUD示例
在本文中，我们’ll 创造 the #CRUD 应用程序VDOM堆栈（#Vue #Deno ＃橡木 #MongoDB）应用程序。作为JavaScript开发人员，您听说过 ＃意思, #MERN 和 #MEVN 堆栈应用程序。但是现在’是时候学习一些新技术了。 虚拟DOM堆栈具有像其他堆栈一样流行的功能。
本文结束后，您将可以使用此新功能创建自己的应用程序 #VDOM 堆栈。让’现在转到实施。
我对Deno和Noak都不感兴趣。 ？
真的对不起。好的，然后再执行。让我给您简要介绍一下该堆栈应用程序。
什么是VDOM 叠放？
V stands 对于 Vue?
Vue是像Angular或React这样的前端框架。
它是用于构建用户界面的渐进框架。与其他整体框架不同， Vue 从头开始设计，以逐步采用。该框架使用“high decoupling”，允许开发人员逐步创建用户界面（UI）。你可以检查一下 关于Vue的文章.
D代表Deno吗？
天野是Node的兄弟。您已经熟悉Node。 Isn’t it?
这是JavaScript和TypeScript的安全运行时。如果您喜欢NodeJS，但不喜欢他的包管理器（npm）。然后，您应该尝试一下Deno。我向你保证你’我会喜欢的在Deno的一面，这很安全 基于V8（用于JavaScript的Google运行时引擎）构建的TypeScript运行时。我们’ll cover all 迪诺在这里的文章.
O代表橡木吗？️
Express JS的竞争对手。它是一个 Deno中间件框架’s http服务器，包括路由器中间件。毫不奇怪，像Oak这样的中间件框架的主要体系结构就是中间件的概念。这些功能由应用程序在应用程序接收请求到发送响应之间以可预测的顺序执行。有关更多 橡木框架.
M代表MongoDB吗？️
现在，MongoDB对于开发人员而言是不变的技术。但是，如果您从不使用此数据库框架。那你应该 尝试这个。与其将数据存储在SQL数据库等行或列的表中，不如MongoDB数据库中的每一行都是以JSON（一种格式化语言）描述的文档。
如果这个简短的介绍对您来说还不够。并希望详细了解此堆栈。乐于在下面的评论部分中听到您的声音。好吧，让’现在开始阅读本文。
创造 Vueproject
首先，您必须在系统中安装Vue。如果它’已安装。然后跳过此步骤。
|
1 |
npm 安装 -g @Vue/cli |
您可以通过运行以下命令来检查您的Vue版本。
|
1 |
Vue -版 // @ Vue / cli 4.5.4 |
现在，使用cli创建一个名为frontend的项目。
|
1 |
Vue 创造 前端 |
我终于在GitHub上分享了源代码。因此，重点在于对实现的理解。完成所有选择后，您可以使用以下代码运行默认的Vue应用程序：
|
1 |
npm 跑 服务 |
Run the Vueapplication
现在安装引导程序进行设计。
|
1 |
npm 安装 引导程序 |
现在创建两个文件夹： 路由器 和 商店 在 - 的里面 src。但为什么？将这个问题搁置一段时间。首先，添加 引导程序.min.css 在 - 的里面 main.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
进口 Vue从 “ Vue”; 进口 应用程式 从 “ ./App.vue”; 进口 路由器 从 “。/路由器”; 进口 商店 从 “。/商店”; 进口 “ 引导程序 / dist / css / 引导程序.min.css”; Vue.配置.生产提示 = 假; 新 Vue({ 路由器, 商店, 渲染: (h) => h(应用程式), }).$安装(“ #app”); |
现在创建三个文件： 联系Component.vue, 创造Component.vue 和 EditComponent.vue.
为了加快开发速度，请安装 VueVS Code Extension Pack。在VS代码中搜索此扩展名。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<模板> <div 类=“行证明内容中心”> <div 类=“ col-md-6” ></div> </div> </模板> <script> 出口 默认 { 数据() { 返回 {}; }, }; </script> |
现在它’现在该讨论我们之前创建的路由器了。 创造 index.js 在路由器文件夹中。它用于路由应用程序。一分钟，你安装好了吗 Vue路由器 在这个应用程序中？
没错，我们’ll 安装 now.
|
1 |
npm i Vue-路由器 |
和index.js将是：
|
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 |
进口 Vue从 “ Vue”; 进口 VueRouter 从 “ Vue路由器”; Vue.采用(VueRouter); const 路线 = [ { 路径: “ /”, 名称: “家”, 零件: () => 进口(“ ../components/CreateComponent.vue”), }, { 路径: “ /联系人”, 名称: “联系人”, 零件: () => 进口(“ ../components/ContactComponent.vue”), }, { 路径: “ / edit /：id”, 名称: “编辑”, 零件: () => 进口(“ ../components/EditComponent.vue”), }, ]; const 路由器 = 新 VueRouter({ 模式: “历史”, 基础: 处理.环保.BASE_URL, 路线, }); 出口 默认 路由器; |
现在在下面添加以下代码 应用程序.
|
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 |
<模板> <div> <导航 类=“ 导航bar 导航bar-dark bg-danger调整内容-介于flex-nowrap flex-row之间” > <div 类=“容器”> <a href=” 类=“导航栏品牌向左浮动”>影片 叠放 应用</a> <ul 类=“ 导航 导航bar-nav flex-row float-right”> <里 类=“导航项”> <路由器-链接 类=“ 导航-link pr-3” 至=“ /” >创造 联系</路由器-链接 > </里> <里 类=“导航项”> <路由器-链接 类=“导航链接” 至=“ /联系人” >清单 联络人</路由器-链接 > </里> </ul> </div> </导航> <div 类=“容器”> <路由器-视图></路由器-视图> </div> </div> </模板> |
现在，使用以下代码安装axios：
|
1 |
npm 安装 轴距 |
Axios是用于浏览器和node.js的基于Promise的HTTP客户端。
现在我们’re ready 至 work on 创造Component.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 55 56 57 58 59 60 61 62 63 64 |
<模板> <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> 出口 默认 { 数据() { 返回 { 联系: { 名字: ”, 姓: ”, 电子邮件: ”, 电话: ”, }, }; }, 方法: {}, }; </script> |
对于VDOM 叠放系列的这一部分，我们使用Vue并使用引导程序创建表单。现在我们’准备在后端工作，并在下一篇文章中看到Deno的魔力。
