跳到内容
达斯

虚拟DOM 叠放(Vue 天野 橡木 MongoDB)CRUD示例

3+

虚拟DOM 叠放(Vue 天野 橡木 MongoDB)CRUD示例

在本文中,我们’ll 创造 the #CRUD 应用程序VDOM堆栈(#Vue #Deno #橡木 #MongoDB)应用程序。作为JavaScript开发人员,您听说过 #意思, #MERN#MEVN 堆栈应用程序。但是现在’是时候学习一些新技术了。 虚拟DOM堆栈具有像其他堆栈一样流行的功能。

虚拟DOM 叠放(Vue 天野 橡木 MongoDB)CRUD示例

本文结束后,您将可以使用此新功能创建自己的应用程序 #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。如果它’已安装。然后跳过此步骤。

Installation of Vueusing CLI
的JavaScript
1
npm 安装 -g @Vue/cli


您可以通过运行以下命令来检查您的Vue版本。

Check Vueversion
的JavaScript
1
Vue - // @ Vue / cli 4.5.4


现在,使用cli创建一个名为frontend的项目。

创造 a project
的JavaScript
1
Vue 创造 前端


Vue-选择手动选择功能
Vue–选择手动选择功能

我终于在GitHub上分享了源代码。因此,重点在于对实现的理解。完成所有选择后,您可以使用以下代码运行默认的Vue应用程序:

Run Vuecode
的JavaScript
1
npm 服务


Run the Vueapplication

http:// localhost:8080 /
http:// localhost:8080 /

现在安装引导程序进行设计。

安装引导程序
的JavaScript
1
npm 安装 引导程序


现在创建两个文件夹: 路由器商店 在 - 的里面 src。但为什么?将这个问题搁置一段时间。首先,添加 引导程序.min.css 在 - 的里面 main.js.

main.js中的更改
的JavaScript
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.vueEditComponent.vue.

前端项目的文件结构
前端项目的文件结构
每个开发人员都应该知道的20 +额外VSCode快捷方式
每个开发人员都应该知道的20 +额外VSCode快捷方式

为了加快开发速度,请安装 VueVS Code Extension Pack。在VS代码中搜索此扩展名。

创造, Edit 和 联系Component.vue
的JavaScript
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.

安装vue-router
的JavaScript
1
npm i Vue-路由器


和index.js将是:

index.js
的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
进口 Vue “ Vue”;
进口 VueRouter “ Vue路由器”;
 
Vue.采用(VueRouter);
 
const 路线 = [
  {
    路径: “ /”,
    名称: “家”,
    零件: () => 进口(“ ../components/CreateComponent.vue”),
  },
  {
    路径: “ /联系人”,
    名称: “联系人”,
    零件: () => 进口(“ ../components/ContactComponent.vue”),
  },
  {
    路径: “ / edit /:id”,
    名称: “编辑”,
    零件: () => 进口(“ ../components/EditComponent.vue”),
  },
];
 
const 路由器 = VueRouter({
  模式: “历史”,
  基础: 处理.环保.BASE_URL,
  路线,
});
 
出口 默认 路由器;


现在在下面添加以下代码 应用程序.

应用程序
的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
<模板>
  <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:

Axios安装
的JavaScript
1
npm 安装 轴距


Axios是用于浏览器和node.js的基于Promise的HTTP客户端。

现在我们’re ready 至 work on 创造Component.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
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的魔力。

3+
概要
虚拟DOM 叠放(Vue 天野 橡木 MongoDB)CRUD示例
文章名
虚拟DOM 叠放(Vue 天野 橡木 MongoDB)CRUD示例
描述
在本文中,我们'll创建CRUD应用程序VDOM堆栈(Vue 天野 橡木 MongoDB)应用程序。作为JavaScript开发人员,您听说过MEAN。
作者
发布者名称
达斯
出版商徽标
达斯