一、环境介绍
本项目前端页面和后台服务都采用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
此命令执行两项操作:
- 为这次迁移创建了一个新的SQL迁移文件
- 对数据库运行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>