TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 8、《接入Mongo DB服务》

时间 2019-11-06

标签 typescript 工程实战 nuxt nest 接入Mongo DB服务栏目 JavaScript 繁體版

原文原文链接

1、前言

在实际业务开发中，会遇到这样一种需求，使用VUE的页面须要支持SEO，同时对首屏有指标性要求，目前市面上广泛使用的是Nuxt.js解决方案，在引入的同时还须要考虑与现有的全栈工程结合，本系列文章探讨的是此类全栈工程的解决方案，同时使用的是TypeScript应用于先后端编程，文章中介绍的工程与技术要点源码已上传至Github，有须要的朋友可自行下载：
Nuxt.js和Nest.js同构工程html

复制代码

文章意在抛砖引玉，先后端使用同一种语言TypeScript编写，示例已包含基本接口请求，数据库链接应用，公用模块封装等实际开发中使用到的内容。前端

效果预览:

如下为该系列文章入口列表:
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 1、《简介》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 2、《框架融合》git

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 3、《配置服务》github

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 4、《UI系统》mongodb

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 5、《API服务设计》数据库

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 6、《SEO功能实现》编程

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 7、《Vuex使用》后端

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 8、《接入Mongo DB服务》缓存

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 9、《TypeScript》安全

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 10、《工程化部署》

2、MongoDB简介

MongoDB

MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写，旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的产品。

MongoDB与Nest.js
开始以前先介绍MongoDB 的适用场景:
1.网站实时数据：实时的插入，更新与查询，并具有网站实时数据存储所需的复制及高度伸缩性。

2.数据缓存:适合做为信息基础设施的缓存层。在系统重启以后，由MongoDB搭建的持久化缓存层能够避免下层的数据源过载。

3.大尺寸、低价值数据存储

4.高伸缩性场景:适合由数十或数百台服务器组成的数据库。

5.对象或JSON 数据存储: MongoDB 的BSON数据格式很是适合文档化格式的存储及查询。凭这一点，适合与Node.js集成。

6.Nest.js中使用
Nest.js有两种处理MongoDB数据库的方法。提供MongoDB支持的ORM，也可使用最受欢迎的MongoDB对象建模工具Mongoose。若是想使用ORM，能够结合Type-ORM。本文中咱们探讨的则为MongooseJS

3、链接MongoDB

创建本地MongoDB服务
参考官网安装配置 Install MongoDB ，注意设置的帐号和密码,最终在 Robo 3T 可视化管理工具中显示效果以下:
在本示例中，分别建立了购物车、产品、用户等文结构。
独立配置
前文提到，本示例使用了先后端一体化配置，但特例状况是，对于数据库等敏感配置内容，不适合先后端共用，因此在本示例中，须要将其单独抽离。

依据环境变量，获取不一样的配置

代码里边单独引用
创建链接
Nest.js使用MongoDB,默认集成Mongoose, 在使用时经过import的方式引入。以示例中的本地模块为例:
1.创建LocalModule，LocalModule再导入DataBaseModule

2.DataBaseModule中经过provider和exports提供并导出公共服务

3.在Provider中则进行MongoDB链接。
至此，Nest.js中链接步骤完成。

4、效果

交互：
在首页中，绑定数据库中用户拥有的购物车产品数量，当点击【个人购物车】时，跳转至【购物车】页面，用户点击+或者-进行购物车物品数量增减操做，同时借助Vuex系统，进行多页面状态共享，最后更新至数据库中的【isomorphism.carts】文档中的num字段中进行数据持久化。

5、接口设计

文档设计
本示例中，从上图效果图来看用户首页显示当前购物车数量，点击进入可修改购物车数量。抽象成数据库表现为：
须要有一个文档，用于存放用户信息。
须要有一个文档，用于存放用户购物车信息，购物车信息由用户，用户存放的物品ID，每一个物品在购物车中的数量构成。
须要有一个文档，用于存放商品原始SKU信息。
交互形式为:
用户界面中操做购物车数量，依据用户ID和产品ID将更新结果存放于存放用户购物车数量信息的文档中。
控制器实现
这里以更新购物车为例，截取部份代码片段，基础思路是使用POST接口，接收前端传入参数，再传入SERVICE服务层，同时接口层对传入和返回处理做统一的封装。
1.定义接口:
使用@Post('xxx')定义访问接口，Post为RESTful关键方法之一。@Body()获取传入参数。

2.定义入参结构
@Body()获取传入参可对传入参数进行强类型定义，Nest.js在处理参数功能上，做了自动字段校验，举个例子：本示例参数中的AddCartsDto，那么框架层面将会对参数进行完整性校验，即按类型定义的内容，传少参数将会有接口错误信息抛出。

3.返回结构父类封装
- 返回结构定义
  返回结构，这里将其定义为，须要一个方法，统一返所须要的结构，在Controller层调用时直接进行返回结果转换。
- 返回结构实现
  新建父类，用于实现返回的两种结构，列表与普通对象，不论是哪种结构，都会在上一层加上code, message, success用于标识接口状态码，成功或失败字符串描述，接口成功与否状态。
- 子类继承
  让Controller子类继承自父类，这样子便拥用返回结构的两种方法，进行代码复用。
4.服务实现
在服务层，一样遵循与Controller相同的机制，这里基础的增删改查，若是不是因特殊需求，是能够概括封装在父类实现的。
- 遵循Mongoose调用，在构造体中加入注册用到的文档Model结构:
- Model结构须要在Provider中创建联接。
- Schema结构。
  这里的collection创建与实体文档isomorphism.cats的链接。
5.自定义功能实现
以依据ID获取已添加入购物车的列表数据项为例，model负责实际的MongoDB语句操做，整个过程都是异步的，因此须要使用async

语句操做遵循全部moongoose语法规范:

6、接口调用

服务端完成相关功能后，客户端则须要创建相关的单独服务类调用来承接该功能，例如本示例中的LocalService:

客户端接口实现：

业务代码调用(Vue):

7、延伸

登陆功能
以上实现的是业务当中功能实现，在现实中，每每须要加上权限验证功能。这里做了一下简单示例实现。即
1.用户登陆，存取TOKEN
2.每次请求时头部带上TOKEN信息
3.服务端进行合法性校验。
固然，与JAVA服务端等交互时可能会引入JWT等框架机制实现，在此不另做讨论
客户端登陆

用户登陆时须要对密码进行安全性保护，这里的作法是，使用MD5进行加密，到了服务端，再依据用户名，从DB中取出相应的HASH值校验。避免密码明文传输。

若是校验经过，将返回用户信息，不然为空，并提示相关错误信息。

以上步骤完成，在服务端须要存储该用户登陆信息到全局或者REDIS结构中。这里另外须要提一点，就是存入的REDIS或者客户端中的COOKIE应该有时间效性控制，即多久失效和过时。
统一拦截器
登陆完成以后，须要拦截器中统一处理登陆合法性校验，避免在各个业务逻辑中重复使用相同代码。在这里统一放至middleware中进行处理。

1.服务端拦截
在业务中依据头部传入内容，检测用户合法性，不合法状况下返回错误信息。

2.客户端拦截
客户端则检测COOKIE中的登陆信息是否存在，不存在则跳转至登陆页面。