基于Nux3+MySql 实现“待办事项”应用。做一个简单的全栈应用！

一、环境介绍

本项目前端页面和后台服务都采用nuxt3实现，数据库采用MySql，为了简化数据数据增删改查操作采用了ORM：Prisma。

项目已上传到gitee，地址为：https://gitee.com/xiangli22/nuxt3-prisma-mysql

项目目录结构如下：

一、步骤

创建nux3项目，并安装依赖

// 创建nux3项目，其中<project-name>为项目名称
npx nuxi@latest init nuxt3-prisma-mysql
// 进入项目目录
cd nuxt3-prisma-mysql
// 安装依赖
npm install

安装Prisma，作为依赖项

npm install --save-dev prisma

初始化Prisma

npx prisma init

这个命令创建了一个名为prisma的新目录，其中包含一个名为schema.prisma的文件和一个位于项目根目录中的**.env文件schema.prisma**包含prisma模式以及数据库连接和prisma客户端生成器。 .env是一个dotenv用于定义环境变量的文件（用于数据库连接）。

配置schema.prisma、.env文件

需要提前创建好一个数据库，本项目数据库为：prisma；账号为：root；密码为123456789。

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

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

DATABASE_URL="mysql://root:123456789@localhost:3306/prisma"

使用Prisma Migrate创建数据库表

在schema.prisma文件中编写模型model

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

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

// 待办清单模型
model Todo {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String   @db.VarChar(255)
  description String?
  completed  Boolean  @default(false)
}

将数据模型映射到数据库架构

npx prisma migrate dev --name init

此命令执行两项操作：

1. 为这次迁移创建了一个新的SQL迁移文件
2. 对数据库运行SQL迁移文件

此时数据库中已经创建好了名为“todo”的数据表。

安装 Prisma Client

npm install @prisma/client

安装命令会自动调用prisma generate，它会读取prisma模式并生成一个适合您的模型的prisma Client版本。以后每当您对 Prisma 架构进行更改时，您都需要手动调用prisma generate以适应 Prisma 客户端 API 中的更改。

编写数据接口

查询待办事项清单接口

import { PrismaClient } from '@prisma/client'
// 接口地址为：/api/todo，nux3会根据（get/post/put/delete）方法选择对应接口
export default defineEventHandler(async (event) => {
    // ... 在这里做任何你想做的事情
    const prisma = new PrismaClient()
    try {
        // 查询待办事项清单
        const todoList = await prisma.todo.findMany({})
        return todoList
    } catch (error) {
        console.error('数据库操作出现异常:', error)
        // 重新抛出异常，以便在调用此事件处理程序的地方进行处理
        throw error
    } finally {
        // 确保断开与数据库的连接
        await prisma.$disconnect()
    }
})
  

新增待办事项接口

export default defineEventHandler(async (event) => {
    // ... 在这里做任何你想做的事情
    const prisma = new PrismaClient()
    console.log("event",event)
    try {
        // 获取前端传递的数据
        const data = await readBody(event)
        const res = await prisma.todo.create({
            data: {
                title: data.newTodo,
            },
        })
        return { res }
    } catch (error) {
        console.error('数据库操作出现异常:', error)
        throw error // 重新抛出异常，以便在调用此事件处理程序的地方进行处理
    } finally {
        await prisma.$disconnect() // 确保断开与数据库的连接
    }
  })

删除待办事项

import { PrismaClient } from '@prisma/client'

export default defineEventHandler(async (event) => {
    // ... 在这里做任何你想做的事情
    const prisma = new PrismaClient()
    console.log("event",event)
    try {
        // 获取前端传递的数据
        const data = await readBody(event)
        const deleteTodo = await prisma.todo.delete({
          where: {
            id: data.item,
          },
        })
        return { deleteTodo }
    } catch (error) {
        console.error('数据库操作出现异常:', error)
        throw error // 重新抛出异常，以便在调用此事件处理程序的地方进行处理
    } finally {
        await prisma.$disconnect() // 确保断开与数据库的连接
    }
  })

编写前端页面

注意：本项目组件选用了antdesign-vue，请在项目目录下运行下述命令。
npm install --save-dev @ant-design-vue/nuxt

另外，还需要在配置文件中添加配置信息，详情如下。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@ant-design-vue/nuxt'
  ],
})

<template>
  <h1>待办清单</h1>
  <a-input v-model:value="newTodo" style="width: 500px;margin-bottom: 50px;">
      <template #addonAfter>
        <CheckOutlined @click="addTodo" />
      </template>
  </a-input>
  <div>
    <a-card style="width: 500px">
      <a-list size="small" bordered  v-for="(todo, index) in todolist.value" :key="index">
        <a-list-item>
          {{ todo.title }}
          <template #actions>
          <a key="list-loadmore-delete" @click="delTodo(todo.id)">delete</a>
        </template>
        </a-list-item>
      </a-list>
    </a-card>
  </div>

</template>

<script setup lang="ts">
  const todolist = ref([])
  const newTodo = ref('')
  const newTodoInput = ref(null)
  async function getTodoList () {
    // 查询待办事项清单
    const { data } = await useFetch('/api/todo',{
      method: 'get',
    })
    todolist.value = data
  }
  async function addTodo () {
    // 新增待办事项清单
    const { data } = await useFetch('/api/todo',{
      method: 'post',
      body: { newTodo }
    })
    console.log("新增待办事项清单",data)
    getTodoList()
  }
  async function delTodo (item) {
    // 删除待办事项
    const { data } = await useFetch('/api/todo',{
      method: 'delete',
      body: { item }
    })
    console.log("新增待办事项清单",data)
    getTodoList()
  }

  onMounted(async () => {
    getTodoList()
  })
</script>