Open yayxs opened 4 years ago
系列主题 《全栈之路》 讨论框架:NestJS 文章词数 : 第几篇:No.1 分享类型:如何使用 源码地址: 微信公众号:《前端厚说》
到底什么是前端?每天醒来我都在问自己,再也不是三五年前甚至一两年前的API写手 了。怎么才能提升自己社会的价值感,你若盛开,总有不知道什么动物要来
API写手
可能对于前端小伙伴来说,还不知什么是nestjs 框架,甚至还分不清什么是nextjs nuxtjs nestjs 在技术调研的时候,我也看到有些文章 拿它们三个来横向对比(nestjs 和其他二者还是有点区别的)。不过这并不重要,其实想分享这个框架一段时间了,不知不觉半年多都过去了了。事实证明nestjs 确实发展的很好 (当时的版本还是nest.js + @nestjs/cli@6.13.2)
nestjs
nextjs
nuxtjs
nest.js + @nestjs/cli@6.13.2
伴随着窗外的雨声,话不多说,直接开始……
如果我们想更新一下package 中的依赖包的话可以
package
更新一下依赖 yarn upgrade-interactive [--latest]
yarn upgrade-interactive [--latest]
内置并完全支持TypeScript 大体来看可以使用ts
ts
在设备全局安装脚手架,使用npm i -g @nestjs/cli,或者使用yarn cnpm 道理相似,在此略过
npm i -g @nestjs/cli
yarn
cnpm
倘若你感兴趣的话可以读一下之前的分享在笔者《把发呆的时间拿来写笔记》
react牵手nestjs打造帖子后台管理
$ npm i -g @nestjs/cli $ nest new nest-post-api // nest-post-api 为项目的名字
一般的脚手架都是可以看下,我们可以有什么命令,快捷的命令nest -h
nest -h
接下来我们要做的就是利用脚手架创建一个船新的项目
npm
import { Controller, Get } from '@nestjs/common'; @Controller('posts') export class PostsController { @Get() index() { // 返回的数据 return [{ id: 1 }, { id: 1 }, { id: 1 }, { id: 1 }]; } }
项目起名字真是个费劲的活儿,暂且就叫做 nestjs-server 主要作用是提供接口服务。其中
nestjs-server
那么我们怎么在一个nestjs 项目里管理 两个甚至多个项目呢。那么就要提到nest js 的工作模式( workspaces)
标准模式:运行时nest new,将使用内置原理创建一个新项目
nest new
nest generate app web // 新建一个项目主要是web网站
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: 仓库上看到本篇的所有源码 。我们先不说要做个什么,反正想到什么就去做
Github
论种树的最佳时间,其次就是现在
还记得我们起的端口,那么就先把项目跑起来看看吧
一上来就要安装其他的模块,难道不是简单的 小踩坑 ,有些东西不知道是不是年级大了,
小踩坑
好记性不如烂笔头,这也是我无聊的时候 就去写写文章的原因
How does nestjs get the cookie in the request? 也就是说在我们的 nestjs 怎么取到 cookie 值 ,你可以用小手点一下上边的链接
How does nestjs get the cookie in the request?
也就是说在我们的 nestjs 怎么取到 cookie 值 ,你可以用小手点一下上边的链接
express-session-gh 主要是处理服务器环境数据存储
一个模板引擎,主要是渲染页面用的,(不知道能不能用上)这个模板引擎主要是为了呈现咱们的HTML视图,也就是所谓的MVC 应用。官网使用 的是 hbs
MVC
hbs
yarn add cookie-parser express-session hbs
截止目前咱们的 package.json
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 库
express
import { NestExpressApplication } from '@nestjs/platform-express';
const app = await NestFactory.create<NestExpressApplication>( AppModule, );
我们告诉Express,该public目录将用于存储静态资源
public
app.setBaseViewsDir(join(__dirname, '..', 'views')); app.setViewEngine('hbs');
我们通过简单的配置可以使用模板语法来来渲染html
html
app.use(cookieParser('myCookie'));
app.use( session({ secret: 'mySession', resave: true, saveUninitialized: true, cookie: { maxAge: 1000 * 60 * 30, httpOnly: true }, rolling: true, }),
在main.ts 文件中使用的中间件是全局中间件,会对应用的整体做些拦截等等一些,中间的事情。
main.ts
那我们在如上的一段操作之后,我们可以简单的测试一下,比如我们把
一张图片放在服务的public 下,ok 是可以访问到的
这才是正文的开始,一个良好的编程之旅绝对是一个干净整洁的目录开始的,一些开源的框架或者是库,在提供给开发者使用的时候并没绝对要求怎么建文件。不过,,随着开发规范的形成,我们大体也能见名知意
见名知意
我们都知道,nestjs 的一个一个模块的,拥有很好的开发体验,所以我们新建3个子模块(这是指的相对于APP主模块而言)
nest g module module/admin nest g module module/web
其中,
|-- src | |-- app.module.ts | |-- common | |-- extend | |-- interface | |-- main.ts | |-- middleware | |-- module | | |-- admin | | |-- web | |-- schema | |-- utils | | -- config.ts
一般情况下,后台管理系统登录的返回结果通常有一个token 我们接下来先来开发个登录接口
token
登录接口
官网-关于身份验证的方式
身份验证是大多数应用程序的重要组成部分,在生态中有不同的策略和方法,最为流行的是 passport 身份验证库
passport
大致的流程
既然要开始写接口了,我们的nestjs 是十分相当的便捷。一套简明扼要的接口 其中提供出的文档是必要,可以通过OpenAPI(Swagger) 只需要main.ts 中配置就可以了。·
简明扼要的接口
OpenAPI(Swagger)
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 本身与数据库是没有什么强联系的,不过我们需要。我们连接数据库的目的就是持久化数据。我们选择数据库就选择
前言
到底什么是前端?每天醒来我都在问自己,再也不是三五年前甚至一两年前的
API写手
了。怎么才能提升自己社会的价值感,你若盛开,总有不知道什么动物要来可能对于前端小伙伴来说,还不知什么是
nestjs
框架,甚至还分不清什么是nextjs
nuxtjs
nestjs
在技术调研的时候,我也看到有些文章 拿它们三个来横向对比(nestjs 和其他二者还是有点区别的)。不过这并不重要,其实想分享这个框架一段时间了,不知不觉半年多都过去了了。事实证明nestjs
确实发展的很好 (当时的版本还是nest.js + @nestjs/cli@6.13.2
)伴随着窗外的雨声,话不多说,直接开始……
关于NestJS
阅读文档
更新项目依赖
如果我们想更新一下
package
中的依赖包的话可以更新一下依赖
yarn upgrade-interactive [--latest]
选型介绍
内置并完全支持TypeScript 大体来看可以使用
ts
脚手架安装
在设备全局安装脚手架,使用
npm i -g @nestjs/cli
,或者使用yarn
cnpm
道理相似,在此略过倘若你感兴趣的话可以读一下之前的分享在笔者《把发呆的时间拿来写笔记》
熟悉脚手架
一般的脚手架都是可以看下,我们可以有什么命令,快捷的命令
nest -h
项目初始化
接下来我们要做的就是利用脚手架创建一个船新的项目
npm
或者yarn
都可以 项目初始化完成之后,就是这个样子简单接口
项目架构
项目起名字真是个费劲的活儿,暂且就叫做
nestjs-server
主要作用是提供接口服务。其中那么我们怎么在一个
nestjs
项目里管理 两个甚至多个项目呢。那么就要提到nest js 的工作模式( workspaces)标准模式:运行时
nest new
,将使用内置原理创建一个新项目Monorepo模式 要启用monorepo模式,请从标准模式结构开始,然后添加项目
tree 查看工程结构
这里就贴最基本的吧,完整版的可以在
Github
:blush: 仓库上看到本篇的所有源码 。我们先不说要做个什么,反正想到什么就去做还记得我们起的端口,那么就先把项目跑起来看看吧
安装其他模块
一上来就要安装其他的模块,难道不是简单的
小踩坑
,有些东西不知道是不是年级大了,cookie-parser
express-session
express-session-gh 主要是处理服务器环境数据存储
hbs
一个模板引擎,主要是渲染页面用的,(不知道能不能用上)这个模板引擎主要是为了呈现咱们的HTML视图,也就是所谓的
MVC
应用。官网使用 的是hbs
截止目前咱们的
package.json
最新的稳定版本
静态资源
首先要做的是配置静态资源文件目录,比如图片等。
首先我们使用
express
平台,在默认的情况下nest在后台会使用express 库我们告诉Express,该
public
目录将用于存储静态资源模板引擎
我们通过简单的配置可以使用模板语法来来渲染
html
中间件
cookie 中间件
session 中间件
在
main.ts
文件中使用的中间件是全局中间件,会对应用的整体做些拦截等等一些,中间的事情。阶段测试
那我们在如上的一段操作之后,我们可以简单的测试一下,比如我们把
一张图片放在服务的
public
下,ok 是可以访问到的工程架构
这才是正文的开始,一个良好的编程之旅绝对是一个干净整洁的目录开始的,一些开源的框架或者是库,在提供给开发者使用的时候并没绝对要求怎么建文件。不过,,随着开发规范的形成,我们大体也能
见名知意
module
我们都知道,
nestjs
的一个一个模块的,拥有很好的开发体验,所以我们新建3个子模块(这是指的相对于APP主模块而言)其中,
登录接口
登录JWT Passport策略
一般情况下,后台管理系统登录的返回结果通常有一个
token
我们接下来先来开发个登录接口
官网-关于身份验证的方式
大致的流程
接口文档
既然要开始写接口了,我们的
nestjs
是十分相当的便捷。一套简明扼要的接口
其中提供出的文档是必要,可以通过OpenAPI(Swagger)
只需要main.ts
中配置就可以了。·连接数据库
nestjs
本身与数据库是没有什么强联系的,不过我们需要。我们连接数据库的目的就是持久化数据。我们选择数据库就选择