全栈之路 | 打造专属互联网名片，有力表达自我价值

系列主题《全栈之路》

讨论框架：NestJS

文章词数：

第几篇：No.1

分享类型：如何使用

源码地址：

微信公众号：《前端厚说》

前言

到底什么是前端？每天醒来我都在问自己，再也不是三五年前甚至一两年前的API写手 了。怎么才能提升自己社会的价值感，你若盛开，总有不知道什么动物要来

可能对于前端小伙伴来说，还不知什么是nestjs 框架，甚至还分不清什么是nextjs nuxtjs nestjs 在技术调研的时候，我也看到有些文章拿它们三个来横向对比（nestjs 和其他二者还是有点区别的）。不过这并不重要，其实想分享这个框架一段时间了，不知不觉半年多都过去了了。事实证明nestjs 确实发展的很好（当时的版本还是nest.js + @nestjs/cli@6.13.2）

伴随着窗外的雨声，话不多说，直接开始……

关于NestJS

阅读文档

英文文档：英文官网
中文文档中文文档

更新项目依赖

如果我们想更新一下package 中的依赖包的话可以

更新一下依赖 yarn upgrade-interactive [--latest]

yarn upgrade-interactive [--latest]

选型介绍

内置并完全支持TypeScript 大体来看可以使用ts

脚手架安装

在设备全局安装脚手架，使用npm i -g @nestjs/cli,或者使用yarn cnpm 道理相似，在此略过

倘若你感兴趣的话可以读一下之前的分享在笔者《把发呆的时间拿来写笔记》

react牵手nestjs打造帖子后台管理

$ npm i -g @nestjs/cli
$ nest new nest-post-api // nest-post-api 为项目的名字

熟悉脚手架

一般的脚手架都是可以看下，我们可以有什么命令，快捷的命令nest -h

项目初始化

接下来我们要做的就是利用脚手架创建一个船新的项目

Which package manager would you ❤️ to use? 使用npm或者yarn都可以项目初始化完成之后，就是这个样子

简单接口

import { Controller, Get } from '@nestjs/common';

@Controller('posts')
export class PostsController {
  @Get()
  index() {
  // 返回的数据
    return [{ id: 1 }, { id: 1 }, { id: 1 }, { id: 1 }];
  }
}

项目架构

项目起名字真是个费劲的活儿，暂且就叫做 nestjs-server 主要作用是提供接口服务。其中

admin 主要是为管理后台提供接口（也就是所谓的后台管理系统）
web 主要是为web平台提供服务（也就是所谓的面向C端用户的web网站）

那么我们怎么在一个nestjs 项目里管理两个甚至多个项目呢。那么就要提到nest js 的工作模式（ workspaces）

标准模式：运行时nest new，将使用内置原理创建一个新项目
Monorepo模式要启用monorepo模式，请从标准模式结构开始，然后添加项目

nest generate app web // 新建一个项目主要是web网站

tree 查看工程结构

 tree -C -L 3 -I "node_modules"

├── index.html
├── main.js
├── test
│   ├── jest-e2e.json
│   └── app.e2e-spec.ts
└── src
    ├── main.ts                 # 
    ├── aapp.service.ts         # 
    ├── app.module.ts           # 
    ├── app.controller.spec.ts
    └── app.controller.ts

这里就贴最基本的吧，完整版的可以在Github :blush: 仓库上看到本篇的所有源码 。我们先不说要做个什么，反正想到什么就去做

论种树的最佳时间，其次就是现在

还记得我们起的端口，那么就先把项目跑起来看看吧

安装其他模块

一上来就要安装其他的模块，难道不是简单的 小踩坑 ，有些东西不知道是不是年级大了，

好记性不如烂笔头，这也是我无聊的时候就去写写文章的原因

cookie-parser

How does nestjs get the cookie in the request?

也就是说在我们的 nestjs 怎么取到 cookie 值，你可以用小手点一下上边的链接

express-session

express-session-gh 主要是处理服务器环境数据存储

hbs

一个模板引擎，主要是渲染页面用的，（不知道能不能用上）这个模板引擎主要是为了呈现咱们的HTML视图，也就是所谓的MVC 应用。官网使用的是 hbs

yarn add cookie-parser express-session  hbs

截止目前咱们的 package.json

 "dependencies": {
    "@nestjs/common": "^7.0.0",
    "@nestjs/core": "^7.0.0",
    "@nestjs/platform-express": "^7.0.0",
    "cookie-parser": "^1.4.5",
    "express-session": "^1.17.1",
    "hbs": "^4.1.1",
    "reflect-metadata": "^0.1.13",
    "rimraf": "^3.0.2",
    "rxjs": "^6.5.4"
  },

静态资源

首先要做的是配置静态资源文件目录，比如图片等。

首先我们使用express 平台，在默认的情况下nest在后台会使用express 库

import { NestExpressApplication } from '@nestjs/platform-express';

  const app = await NestFactory.create<NestExpressApplication>(
    AppModule,
  );

我们告诉Express，该public目录将用于存储静态资源

模板引擎

 app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('hbs');

我们通过简单的配置可以使用模板语法来来渲染html

中间件

cookie 中间件

app.use(cookieParser('myCookie'));

session 中间件

 app.use(
    session({
      secret: 'mySession',
      resave: true,
      saveUninitialized: true,
      cookie: { maxAge: 1000 * 60 * 30, httpOnly: true },
      rolling: true,
    }),

在main.ts 文件中使用的中间件是全局中间件，会对应用的整体做些拦截等等一些，中间的事情。

阶段测试

那我们在如上的一段操作之后，我们可以简单的测试一下，比如我们把

一张图片放在服务的public 下，ok 是可以访问到的

工程架构

这才是正文的开始，一个良好的编程之旅绝对是一个干净整洁的目录开始的，一些开源的框架或者是库,在提供给开发者使用的时候并没绝对要求怎么建文件。不过，，随着开发规范的形成，我们大体也能见名知意

module

我们都知道，nestjs 的一个一个模块的，拥有很好的开发体验，所以我们新建3个子模块（这是指的相对于APP主模块而言）

nest g module module/admin
nest g module module/web

其中，

admin 是管理后台
web 是面向C端用户

|-- src
|   |-- app.module.ts
|   |-- common
|   |-- extend
|   |-- interface
|   |-- main.ts
|   |-- middleware
|   |-- module
|   |   |-- admin
|   |   |-- web
|   |-- schema
|   |-- utils
|      | -- config.ts

登录接口

登录JWT Passport策略

一般情况下，后台管理系统登录的返回结果通常有一个token 我们接下来先来开发个登录接口

官网-关于身份验证的方式

身份验证是大多数应用程序的重要组成部分，在生态中有不同的策略和方法，最为流行的是 passport 身份验证库

大致的流程

接口文档

既然要开始写接口了,我们的nestjs 是十分相当的便捷。一套简明扼要的接口 其中提供出的文档是必要，可以通过OpenAPI（Swagger） 只需要main.ts 中配置就可以了。·

const options = new DocumentBuilder()
    .setTitle('@yayxs')
    .setDescription('基于nest.js后端接口服务')
    .setVersion('1.0')
    // .addTag('cats')
    .build();

  const document = SwaggerModule.createDocument(app, options);
  SwaggerModule.setup('nest-api-docs', app, document);

连接数据库

nestjs 本身与数据库是没有什么强联系的，不过我们需要。我们连接数据库的目的就是持久化数据。我们选择数据库就选择

MongoDB
typegoose

yayxs / front-end-video-tutorial