【全栈开发】使用NestJS、Angular和Prisma 打造全栈Typescript开发

这篇具有很好参考价值的文章主要介绍了【全栈开发】使用NestJS、Angular和Prisma 打造全栈Typescript开发。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在开发Angular应用程序时,我非常喜欢Typescript。使用NestJS,您可以以与Angular非常相似的方式编写后端。

我偶然发现了这个库,发现它非常有趣,所以我想设置一个简单的测试项目。一般来说,我主要使用SQL数据库,因此我也将尝试Prisma将我们的数据存储在PostgreSQL中,并在前端和后端之间提供一个通用模型。

【全栈开发】使用NestJS、Angular和Prisma 打造全栈Typescript开发,全栈开发,前端开发,后端开发,typescript,angular.js,前端,NestJS,Angular,Prisma,GraphQL

要开始使用NestJS,您必须安装npm包并运行CLI命令来创建新的应用程序。为了在NestJS项目中托管我们的Angular应用程序,我们还需要添加NestJS静态包。

** Install NestJS and create the Project.
npm install --save @nestjs/cli
nest new backend
npm install --save @nestjs/serve-static**Create our Angular application
cd backend
ng new ui

您已经可以看到CLI的实现与Angular非常相似。为了使NestJS能够托管我们的Angular应用程序,我们可以在后端的app.module.ts文件中添加对静态网站的引用。

@Module({
  imports: [ServeStaticModule.forRoot({
    rootPath: join(__dirname, '../../ui', 'dist/ui'),
  }),],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

我们可以参考Angular dist文件夹的位置。

**Build the angular code
cd ui
ng build**Start the nest server
cd ..
nest start --watch

现在我们已经运行了基本功能,我们可以设置模型了。我们将为专业驾驶的公里数创建一个简单的日志记录应用程序。我将在Prisma中完成这项工作,在那里我们可以创建一个模型,并自动生成客户端和数据库。

npm install prisma --save-dev
npx prisma init

这将创建一个“schema.prisma”文件,并添加一个.env文件,我们可以在其中配置到数据库的连接字符串。我将在这里使用PostgreSQL,但prisma也支持MySQL、SQL Server甚至MongoDB。在模式文件中,我在这里为DriveLog创建一个简单的模型。

model DriveLog {
  id          Int      @id @default(autoincrement())
  createdAt   DateTime @default(now())
  timestamp   DateTime  
  destination String?  
  odoStart  Int
  odoEnd    Int
  distance  Int?
}

我们将记录行程的时间和目的地,以及里程计的开始和结束值。

假设您已经正确配置了连接字符串,现在可以将模型推送到数据库中。这也将自动生成客户端代码。

**Push the model to the DB and generate a PrismaClient.
npx prisma db push

因为我们想利用NestJS的注入功能,这些功能的工作方式与Angular非常相似。我们将创建一个PrismaService来包装生成的客户端代码。

**Generate an empty service for NestJS
nest generate service prisma


import { INestApplication, Injectable, OnModuleInit } from '@nestjs/common';
import { PrismaClient } from '@prisma/client';

@Injectable()
export class PrismaService extends PrismaClient
  implements OnModuleInit {

  async onModuleInit() {
    await this.$connect();
  }

  async enableShutdownHooks(app: INestApplication) {
    this.$on('beforeExit', async () => {
      await app.close();
    });    
  }
}

我们在这里引用生成的PrismaClient,并确保我们可以从应用程序访问它,而不必每次都创建新的客户端。

现在,我们可以设置后端逻辑来创建CRUD操作,并将其添加到app.service文件中。我们将设置一个获取全部、保存和删除操作。

import { Injectable } from '@nestjs/common';
import { DriveLog } from '@prisma/client';
import { PrismaService } from './prisma/prisma.service';

@Injectable()
export class AppService {

  constructor(private prisma: PrismaService) { }

  async getAll(): Promise<DriveLog[]> {
    return await this.prisma.driveLog.findMany();
  }

  async save(log: DriveLog) {
    let distance = log.odoEnd - log.odoStart;
    if(log.id){
      await this.prisma.driveLog.update({ where: {id: log.id}, data: { timestamp: new Date(log.timestamp), destination: log.destination, odoStart: log.odoStart, odoEnd: log.odoEnd, distance: distance }} );
    }else{
      await this.prisma.driveLog.create({ data: { timestamp: new Date(log.timestamp), destination: log.destination, odoStart: log.odoStart, odoEnd: log.odoEnd, distance: distance } });
    }
  }

  async delete(logId: number) {
    await this.prisma.driveLog.delete({ where: { id: logId } })
  }
}

我们将根据给定里程表值的开始-结束值计算保存操作中行驶的距离。

接下来,我们需要设置控制器,以便向Angular应用程序公开一些端点。

import { Body, Controller, Delete, Get, Param, Post } from '@nestjs/common';
import { DriveLog } from '@prisma/client';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private appService: AppService) {}

  @Get("api/logs")
  async getAll(): Promise<DriveLog[]> {
    return await this.appService.getAll();
  }

  @Post("api/logs")
  async create(@Body()log: DriveLog): Promise<void> {
    await this.appService.save(log);
  }

  @Delete("api/logs/:log")
  async delete(@Param('log') log: string ): Promise<void> {
    await this.appService.delete(parseInt(log));
  }
}

现在我们已经准备好设置Angular应用程序了。首先确保我们导入HttpClientModule和FormsModule,这样我们就可以创建一个简单的表单并调用我们刚刚在nest中创建的端点。

<ul>
  <li *ngFor="let log of logs">
    {{log.timestamp |date}} - {{log.destination}} - {{log.distance}}km 
    <button (click)="deleteLog(log.id)">X</button>
    <button (click)="edit(log)">Edit</button>
  </li>
</ul>
<form>
  <input type="date" [(ngModel)]="newLog.timestamp" name="timestamp" placeholder="timestamp" >
  <input type="text" [(ngModel)]="newLog.destination" name="destination" placeholder="destination">
  <input type="number" [(ngModel)]="newLog.odoStart" name="odoStart" placeholder="start (km)" >
  <input type="number" [(ngModel)]="newLog.odoEnd" name="odoEnd" placeholder="end (km)" >
  <button (click)="save()">{{ newLog.id ? 'Save' : 'Add' }}</button>
</form>

在app.component.html中,我们创建了一个简单的表单,可以在其中查看、添加、更新和删除我们的旅行日志。

我们现在可以为app.component设置控制器来调用NestJS端点。

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { DriveLog } from '@prisma/client';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  logs: DriveLog[] = []
  newLog: DriveLog = <DriveLog>{}

  constructor(private http: HttpClient) {
    this.getAll();
  }

  getAll() {
    this.http.get<DriveLog[]>("api/logs").subscribe(l => this.logs = l)
  }

  edit(log: DriveLog){
    this.newLog = log;
    this.newLog.timestamp = new Date(log.timestamp);
  }
 
  save() {
    this.http.post("api/logs", this.newLog).subscribe(() => this.getAll());
    this.newLog = <DriveLog>{};
  }

  deleteLog(id: number){
    this.http.delete(`api/logs/${id}`).subscribe(() => this.getAll());
  }
}

请注意,我们可以在这里简单地引用从prisma生成的DriveLog类型。

现在我们只需要构建我们的Angular代码,当再次运行NestJS应用程序时,我们将使表单正常工作。

【全栈开发】使用NestJS、Angular和Prisma 打造全栈Typescript开发,全栈开发,前端开发,后端开发,typescript,angular.js,前端,NestJS,Angular,Prisma,GraphQL

这(对我来说)的好处在于,我可以从前端到后端编写应用程序,包括数据库逻辑,而无需更改编程语言,也无需维护前端和后端之间的工作方式。

文章链接

【全栈开发】使用NestJS【全栈开发】使用

欢迎收藏【架构师酒馆】和【开发者开聊】文章来源地址https://www.toymoban.com/news/detail-758500.html

到了这里,关于【全栈开发】使用NestJS、Angular和Prisma 打造全栈Typescript开发的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用Nextjs快速开发全栈导航网站

    随着 ChatGPT 的火热,国外很多开发者快速响应,应用于不同场景的AI应用井喷式的爆发,并且基本集中在 web 领域应用,而在快速开发的背后,我们可以看到,开发者大多选择 Next.js 或者 Nuxt.js 全栈框架来开发,以快速验证自己的产品。这种选型的背后,我觉得主要原因有:

    2024年02月09日
    浏览(41)
  • vane 一个适用于前端打工人的全栈框架,nodejs+vue3+typescript

    写这个的初衷是因为每次用node写接口的时候总是需要一些写大一堆的东西, 也有些人把很多接口都放在一个js文件内, 看起来很是杂乱, 后来用到nuxt写的时候, 感觉用文件名来命名接口路径很是方便, 无论是query参数还是params参数,都可以通过文件名来命名, 也可以通过文件夹层级

    2024年02月11日
    浏览(48)
  • 【PostgreSQL】Ubuntu 下使用 Prisma 的初始化流程

    步骤如下: 创建 Ubuntu 用户 创建 PostgreSQL 用户 使用 postgres 用户登录,然后创建新用户: 设置用户密码 使用 postgres 或 projectname 用户登录,设置用户密码: 完成上面准备工作就ok了,不需要手工创建数据库,因为下面将由 Prisma 来创建数据库。 Prisma 初始化 schema.prisma 创建好

    2024年01月18日
    浏览(67)
  • 百度CTO王海峰:全栈AI技术加持,打造新一代大语言模型文心一言

    3月16日,百度在北京总部召开新闻发布会,百度创始人、董事长兼首席执行官李彦宏和百度首席技术官王海峰出席,李彦宏展示了新一代知识增强大语言模型文心一言在文学创作、商业文案创作、数理逻辑推算、中文理解、多模态生成五个使用场景中的综合能力,王海峰解读

    2024年02月09日
    浏览(69)
  • TypeScript 从入门到精通:打造可靠、高效的现代 JavaScript

    TypeScript作为一种静态类型的编程语言,可以显著改善JavaScript项目的可维护性、可读性和开发效率。本篇博客将带你从入门到精通TypeScript,探索其强大的特性和用法。我们将深入了解基本类型和变量声明、函数和类、模块和命名空间等核心概念,并通过更多的案例代码帮助你

    2024年02月13日
    浏览(57)
  • Angular-集成-Typescript-版本-Echarts-(附代码),字节跳动Android面试全套真题解析在互联网火了

    作者:老夏 来源:知乎https://zhuanlan.zhihu.com/p/139971649 关注我的专栏,定期分享更多技术,工作经验还有面试真题等资料。近日更新的资料,需要的自取《Android架构视频+BATJ面试专题PDF+学习笔记》 由于本人之前在开发数据分析,机器学习类产品的时候经常用到百度开源的 ec

    2024年04月10日
    浏览(47)
  • Vue3 + Vite + TypeScript + dataV 打造可视化大屏

    网上有许多开源的可视化大屏项目,但是分析之后,还是想自己从 0 搭建一个可视化大屏项目,毕竟 Vue 一直在更新,自己搭建的可以使用最新版本的 Vue ,如果对版本没有太多要求的小伙伴们选择那些开源项目的基础上去修改也是很不错的。其次自己搭建一个项目,可以更好

    2024年02月03日
    浏览(46)
  • python使用flask实现前后端分离&通过前端修改数据库数据【全栈开发基础】

    完整代码放到了最后,时间紧张的话直接拉到最后或点击目录【🥩 完整代码】看完整代码 这里先提一下,我们运行后端代码之前需要先建立一个名字为 python 的数据库,而后在该数据库下创建表 userinfo ,因为看到有的朋友后端代码拿过去后会运行不起来或者就是直接报错了

    2023年04月09日
    浏览(43)
  • 从0开发属于自己的nestjs框架的mini 版 —— ioc篇

    如今,nodejs的框架也是层出不穷,偏向向底层的有 express、koa、 Fastify,偏向于上层有阿里的 Egg、thinkjs 、还有国外的 nestjs。 在这里我更喜欢 nestjs,主要是其用了不同于其他框架的思想,采用分层,AOP(面向切面编程),OOP(面向对象编程)的设计思想。 如果想要自己写一个类似的

    2024年02月15日
    浏览(44)
  • 从0开发属于自己的nestjs框架的mini 版- ioc篇

    如今,nodejs的框架也是层出不穷,偏向向底层的有 express、koa、 Fastify,偏向于上层有阿里的 Egg、thinkjs 、还有国外的 nestjs。 在这里我更喜欢 nestjs,主要是其用了不同于其他框架的思想,采用分层,AOP(面向切面编程),OOP(面向对象编程)的设计思想。 如果想要自己写一个类似的

    2024年02月15日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包