nextjs+nestjs+prisma写todolist全栈项目

news2024/11/28 0:22:01

技术栈

  • nextjs
  • nestjs
  • prisma

所学知识

  1. Nextjs组件渲染,状态,路由
  2. docker启动Mysql容器
  3. prisma操作Mysql(CRUD)
  4. 允许跨域请求API
  5. TanStack Query异步状态管理
  6. fetch api
  7. 服务器组件预请求数据
  8. nestjs 管道和异常处理
  9. 检测id是否正整数

Docker启动Mysql容器

compose.yml

name: 'todoList'
version: '3.8'
services:
  mysql:
    restart: always
    container_name: todolist
    image: mysql:8
    volumes:
      - ./mysql/datadir:/var/lib/mysql
      - ./mysql/config/my.cnf:/etc/mysql/my.cnf
    environment:
      - "MYSQL_ROOT_PASSWORD=root"
      - "TZ=Asia/Shanghai"
    ports:
      - 3306:3306

切换到compose.yml所在目录,cmd

docker-compose up

![[Pasted image 20241124230249.png]]

初始化prisma

npm install prisma --save-dev
npx prisma init

生成配置文件

设置数据库连接(mysql)

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

设置数据库连接环境变量

DATABASE_URL="mysql://root:root@localhost:3306/todos?schema=public"
  • todos是数据库名

设置表

model Todo {
  id        Int      @id @default(autoincrement())
  title     String
  completed Boolean? @default(false)
  createdAt DateTime @default(now())
}

npx prisma migrate dev --name init

![[Pasted image 20241124221851.png]]

回到初始化状态(测试用)

会删除数据库数据但是prisma配置内容还在

npx prisma migrate reset

定义prisma client

npm install @prisma/client

Prisma Client 是一个类型安全的数据库客户端,它是从 Prisma 模型定义生成的。由于这种方法,Prisma Client 可以公开专门为您的模型量身定制的 CRUD 操作。

请注意,在安装过程中,Prisma 会自动为您调用 prisma generate 命令。将来,您需要在每次更改 Prisma 模型后运行此命令,以更新生成的 Prisma Client。

使用prisma client

prisma.service.ts


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

@Injectable()
export class PrismaService extends PrismaClient implements OnModuleInit {
   
  async onModuleInit() {
   
    await this.$connect();
  }
}

onModuleInit 是可选的 — 如果你省略它,Prisma 将在第一次调用数据库时延迟连接。

注意

app.module要引入PrismaService

import { Module } from '@nestjs/common';
import { PrismaService } from 'src/prisma.service';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { TodoController } from './todo/todo.controller';
import { TodoService } from './todo/todo.service';

@Module({
  imports: [],
  controllers: [AppController, TodoController],
  providers: [AppService, TodoService, PrismaService],
})
export class AppModule {}

不然报错

prisma调用数据库操作

接下来,您可以编写可用于从 Prisma 架构对 todo模型进行数据库调用的服务。

import {
    Body, Controller, Get, Post } from '@nestjs/common';
import {
    TodoService } from 'src/todo/todo.service';

@Controller('todo')
export class TodoController {
   
  constructor(private readonly todoService: TodoService) {
   }
  @Post()
  async createTodo(@Body() createTodoDto: any) {
   
    return this.todoService.createTodo(createTodoDto);
  }
}

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

@Injectable()
export class TodoService {
   
  constructor(private prisma: PrismaService) {
   }

  async createTodo(data: any) {
   
    const todo = await this.prisma.todo.create({
   
      data: {
   
        title: data.title,
        completed: false,
      },
    });
    return todo;
  }
}
  • private

这确保了封装,这意味着没有其他类或外部代码可以直接访问 todoService 属性,这是维护干净且可预测的代码的良好做法。

  • readonly

这是有益的,因为服务实例应在控制器的整个生命周期中保持不变。它可以防止意外重新分配 todoService 属性,这可能会导致 bug。

  @Delete(':id')
  async deleteTodoById(@Param('id') id: string) {
   
    return this.todoService.deleteTodoById(+id);
  }

  async getTodoById(id: number

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2248709.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Unity踩坑】Unity中父对象是非均匀缩放时出现倾斜或剪切现象

The game object is deformed when the parent object is in non-uniform scaling. 先来看一下现象 有两个Cube, Cube1(Scale2,1,1),Cube2(Scale1,1,1) 将Cube2拖拽为Cube2的子对象。并且将position设置为(-0.6,1,0&a…

uni-app 蓝牙开发

一. 前言 Uni-App 是一个使用 Vue.js 开发(所有)前端应用的框架,能够编译到 iOS、Android、快应用以及各种小程序等多个平台。因此,如果你需要快速开发一款跨平台的应用,比如在 H5、小程序、iOS、Android 等多个平台上…

解决SSL VPN客户端一直提示无法连接服务器的问题

近期服务器更新VPN后,我的win10电脑一致无法连接到VPN服务器, SSL VPN客户端总是提示无法连接到服务端。网上百度尝试了各种方法后,终于通过以下设置方式解决了问题: 1、首先,在控制面板中打开“网络和共享中心”窗口&…

spring boot框架漏洞复现

spring - java开源框架有五种 Spring MVC、SpringBoot、SpringFramework、SpringSecurity、SpringCloud spring boot版本 版本1: 直接就在根下 / 版本2:根下的必须目录 /actuator/ 端口:9093 spring boot搭建 1:直接下载源码打包 2:运行编译好的jar包:actuator-testb…

大语言模型LLM的微调代码详解

代码的摘要说明 一、整体功能概述 这段 Python 代码主要实现了基于 Hugging Face Transformers 库对预训练语言模型(具体为 TAIDE-LX-7B-Chat 模型)进行微调(Fine-tuning)的功能,使其能更好地应用于生成唐诗相关内容的…

华三(HCL)和华为(eNSP)模拟器共存安装手册

接上章叙述,解决同一台PC上同时部署华三(HCL)和华为(eNSP)模拟器。原因就是华三HCL 的老版本如v2及以下使用VirtualBox v5版本,可以直接和eNSP兼容Oracle VirtualBox,而其他版本均使用Oracle VirtualBox v6以上的版本,所以正常安装HCL模拟器无法和ENSP兼容。 环境及组件:…

Android 15 版本更新及功能介绍

Android 15版本时间戳 Android 15,代号Vanilla Ice Cream(香草冰淇淋),是当下 Android 移动操作系统的最新主要版本。 开发者预览阶段:2024年2月,谷歌发布了Android 15的第一个开发者预览版本(DP1),这标志着新系统开发的正式启动。随后,在3月和4月,谷歌又相继推出了D…

【含开题报告+文档+PPT+源码】基于Spring Boot+Vue的在线学习平台的设计与实现

开题报告 随着互联网的普及和技术的快速发展,网络教育逐渐崭露头角,成为现代教育领域的重要组成部分。网络教育以其灵活性、便捷性和资源共享性,吸引了越来越多的学习者。同时,随着学习者需求的多样化,他们对于在线学…

【Flink】快速理解 FlinkCDC 2.0 原理

快速理解 FlinkCDC 2.0 原理 要详细理解 Flink CDC 原理可以看看这篇文章,讲得很详细:深入解析 Flink CDC 增量快照读取机制 (https://juejin.cn/post/7325370003192578075)。 FlnkCDC 2.0: Flink 2.x 引入了增量快照读取机制,…

【前端】JavaScript 中 arguments、类数组与数组的深入解析

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 💯前言💯什么是 arguments 对象2.1 arguments 的定义2.2 arguments 的特性2.3 使用场景 💯深入了解 arguments 的结构3.1 arguments 的内部结构arguments 的关键属性…

Kubernetes 还是 SpringCloud?

前些年,随着微服务的概念提出以及落地,不断有很多的公司都加入到了这场技术革新中,现在可谓是人人都在做和说微服务。 提到微服务,Java栈内,就不得不提SpringBoot、SpringCloud、Dubbo。 近几年,随着Cloud …

Redis设计与实现 学习笔记 第二十章 Lua脚本

Redis从2.6版本引入对Lua脚本的支持,通过在服务器中嵌入Lua环境,Redis客户端可以使用Lua脚本,直接在服务器端原子地执行多个Redis命令。 其中EVAL命令可以直接对输入的脚本进行求值: 而使用EVALSHA命令则可以根据脚本的SHA1校验…

C# 调用系统级方法复制、移动和删除等操作界面

有时候需要在程序复制、移动、删除文件等操作,虽然实现的方法有很多,但有些时候真的不如系统自带的界面效果来的直接省事。 好了不啰嗦了,直接看代码。这是网上找的,能用,但是有一点bug,有时候第一次复制文…

AI赋能电商:打造高效销售与卓越用户体验的新引擎

在数字经济迅猛发展的今天,电商行业正处于持续演变的关键时期。技术的进步不仅重塑了电商生态的运行方式,也在深刻改变用户的消费习惯。人工智能(AI)作为现代科技的核心驱动力,为电商平台提供了前所未有的工具和机遇。…

基于机器视觉的表面缺陷检测

基于机器视觉的表面缺陷检测存在的问题与难点 - AVT相机|AVT红外相机|万兆网相机EVT|VIEWORKS线扫相|映美精相机|Specim多光谱相机|Adimec相机|Basler相机|富士能FUJINON镜头|理光RICOH镜头|OPTO远心镜头|SPO远心镜头|Navtar镜头|VST镜头|CCS光源|3D视觉引导机床上下料系统 (完…

Fakelocation Server服务器/专业版 Windows11

前言:需要Windows11系统 Fakelocation开源文件系统需求 Windows11 | Fakelocation | 任务一 打开 PowerShell(以管理员身份)命令安装 Chocolatey Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProto…

【Android】View的解析—滑动篇

1.View与ViewGroup View: View是Android中所有UI组件的基类,提供了绘制(draw)、布局(layout)和事件处理(event handling)的基础功能。它是一个抽象类,不能直接实例化&…

极狐GitLab 17.6 正式发布几十项与 DevSecOps 相关的功能【三】

GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料: 极狐GitLab 官网极狐…

基于混合ABC和A*算法复现

基于混合ABC和A*算法复现 一、背景介绍二、算法原理(一)A*算法原理(二)人工蜂群算法原理(三)混合ABC和A*算法策略 三、代码实现(一)数据准备(二)关键函数实现…

linux运行vue编译后的项目

如果你的 Vue 项目使用了 history 模式(而非默认的 hash 模式),在纯静态服务器中会出现类似的问题。因为 Vue Router 的 history 模式要求所有未匹配的路径都重定向到 index.html,以便 Vue 前端处理路径。 首先在本地执行npm run…