当前位置: 首页 > article >正文

nuxt数据库之增删改查,父组件子组件传值

nuxt学到数据库这里,就涉及到响应数据,父组件向子组件传值,子组件向父组件传值,最终还是需要掌握vue3的组件知识了。学习真的是一个长期的过程,不管学习了什么知识,有多少,都应该及时的记录下来,这个记录的过程,就是不断巩固自身知识的过程。之前学习其他框架的时候,不用,过两天就忘记了,当许多插件解决问题,忘记这个插件名字后,那想不起来的时候就特别痛苦了。好记忆不如烂笔头,及时记录下来吧。

ui.nuxt.com中的form章节,有很多实例代码:Form - Nuxt UI

还有,github上有很多样例代码,比如这个Table的代码: https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue

这个Table例子看了好多遍,代码还是掌握不了啊,感觉有点难啊。Table - Nuxt UI

还是根据table上面的简单的例子,做一些修改吧,从简单的入手。

首先接着之前的文章,把drizzle orm的增删改查等做成对应的api接口路由。https://hub.nuxt.com/docs/recipes/drizzle#usage

读:select

server/api/users/index.get.ts

export default eventHandler(async () => {
  const todos = await useDrizzle().select().from(tables.users).all()

  return todos
})

增:insert

server/api/users/index.post.ts

export default eventHandler(async (event) => {
  const { name, email, password, avatar, createdAt } = await readBody(event);
  const todo = await useDrizzle()
    .insert(tables.users)
    .values({
      name,
      email,
      password,
      avatar,
      createdAt: new Date(),
    })
    .returning()
    .get();

  return todo;
});

 改:update

server/api/users/[id].patch.ts

export default eventHandler(async (event) => {
  const { id } = getRouterParams(event);
  const { completed } = await readBody(event);

  const todo = await useDrizzle()
    .update(tables.users)
    .set({
      completed,
    })
    .where(eq(tables.users.id, Number(id)))
    .returning()
    .get();

  return todo;
});

 删:delete

server/api/users/[id].delete.ts

export default eventHandler(async (event) => {
  const { id } = getRouterParams(event);

  const deletedTodo = await useDrizzle()
    .delete(tables.users)
    .where(and(eq(tables.users.id, Number(id))))
    .returning()
    .get();

  if (!deletedTodo) {
    throw createError({
      statusCode: 404,
      message: 'User not found',
    });
  }
  return deletedTodo;
});

读取的时候,都是一次性的把数据全部select出来,这个当然是不对的,不过初学的时候,先这样应付着写,之后看看怎么带参数select,进行一页一页的读取。

修改和删除的时候,是根据id来操作的,这个时候,url中就需要带上id的值这个参数了。

 

使用UTable控件把表渲染出来。第一部就是添加数据了。先进行简单的:

    const datas = {
        name: 'John Doe',
        email: 'john@example.com',
        password: 'password123',
        avatar: 'https://example.com/avatar/john.png',
        createdAt: new Date(),
}



$fetch('/api/users', {
      method: 'POST',
      body: datas,
    }).then((users: any) => {
      useToast().add({
        title: `${users.id}号添加成功!`,
        description: `
            用户名:${users.name}
            邮箱:${users.email}
            `,
      });
    });

先定义需要添加的数据,然后使用$fetch进行post添加。成功后弹出消息提示一下。 

下一步就是点击按钮,弹窗添加新用户,弹出的窗口做成控件,那就涉及到父组件向子组件传值,和子组件向父组件传值的了。

简单来说,子组件向父组件传值,就是要emit,子组件emit一个方法,在父组件用这个方法名绑定一个新的方法,父组件上的新的方法就可以执行子组件方法里的方法了,也可以执行父组件上的其他方法。

父组件向子组件传值,那就更简单了,就是子组件先定义一个属性值,不用赋初始值,在父组件上使用的时候,给这个属性值绑定一个数值,在子组件里,就可以直接获取这个属性值的值(父组件上绑定的值)。

先看子组件向父组件传值(方法):【Vue/Nuxt.js】使用Composition API实现子组件向父组件传递数据的方法 - TeHub

子组件
<script setup>
const emit = defineEmits(['hogeEvent']); //emit之外也可以
const hoge = () =>{
    emit('hogeEvent');
}
</script>
<template>
    <button type="button" @click="hoge">emit测试</button>
</template>
父组件
<script setup>
const customEvent = () =>{
  console.log('test')
}
</script>
<template>
  <ChildComponents @hogeEvent="customEvent"></ChildComponents>
</template>

在我这个user的实例中,有很多属性值,所可以emit可以多个函数值:

/**
 * 属性
 */
type Props = { modelValue: boolean; info: number };
// defineProps<Props>();
const props = defineProps<Props>();
const { info } = toRefs(props);

最后一行info被从属性值里解构出来变成响应式数据后,就可以直接使用了。


/**
 * 事件
 */
const emit = defineEmits(['parentRefresh', 'update:modelValue', 'hogeEvent']);

const onUpdate = (value: boolean) => {
  emit('update:modelValue', value);
};

const parentRefresh = () => {
  const data = { message: '这是子组件传递的数据' };
  emit('parentRefresh', data);
};

 emit可以定义多个方法,并且需要在下面进行方法的实现,如果父组件中在绑定的方法中有其他方法需要执行,比如刷新表refresh()操作,就需要在最后执行一下parentRefresh()

父组件中绑定的方法或属性值:

      <DataUserForm
        v-model="isOpen"
        @parentRefresh="showrefresh"
        @hoge-event="customEvent"
        :info="info"
      />


const isOpen = ref(false);

const info = computed(() => {
  console.log(users.value.length);

  return users.value.length;
});

/**
 * 添加用户 按钮事件
 */
const addUser = () => {
  isOpen.value = true;
};
const showrefresh = (data: any) => {
  console.log('父组件接收到的数据:', data);
  refresh();
};
const customEvent = () => {
  console.log('test');
};

isOpen是父组件上的按钮点击后显示子组件弹窗的UModal控件。info在父组件是计算select出来所有users表的数据长度,定义的时候,涉及到其他数据来源,所以需要使用computed方法,才能让数据保持响应式数据,自动同步更新。这个打印数据的动作console.log(users.value.length);,就是测试数据是否同步:

打印出来第一次的0,就是info的初始值0,第二次59,是获取数据库数据后,computed计算出来的值。或者加上服务端客服端执行判断:

const info = computed(() => {
  if (import.meta.server) {
    console.log('服务端执行:' + users.value.length);
  }
  if (import.meta.client) {
    console.log('客户端端执行:' + users.value.length);
  }
  return users.value.length;
});

这样看就比较明显了,先执行客户端,info的值为0,然后等从数据库select的值获取到后,再次同步了info的值59,客户端执行了2次。 这个就是响应式数据自动更新的动作,数据变动,就是computed再次执行一次。

refresh()刷新数据表,就是读取数据方法useLazyFetch的一个互动操作:

const { status, data, refresh } = await useLazyFetch<any>('/api/users');

const users = computed(() => {
  filtered.value.sort((a: any, b: any) => {
    return b.id - a.id;
  });
  return filtered.value;
});


  <UTable
    :columns="columns"
    :emptyState="table.emptyState"
    :loadingState="table.loadingState"
    :rows="rows"
    :loading="status === 'pending'"
    class="mb-2"
  >

 :loading="status === 'pending'" 是加载的时候,在获取数据前有个加载动画。获取的对象数组的排序方法非常有意思:

  array.sort((a: any, b: any) => {
    return b.id - a.id;
  });

这个是降序,如果想升序,return a.id-b.id就可以了。

还有一个知识点,就是node时间格式化操作,其他框架有不少操作插件,安装之后就可以进行日期格式化了,nuxt上搜索了一些插件,比如moment,time等,研究一下还是不行,最后点到new Date()上发现,typescript官方就有日期本地格式化的操作啊!!!

幸亏跟着drizzle orm 的教程添加了seed种子(https://hub.nuxt.com/docs/recipes/drizzle#seed-the-database-optional),不然还发现不了,估计要耽搁很多时间啊。

关于数据表UTable的很多操作,还需要从ui/docs/components/content/examples/TableExampleAdvanced.vue at dev · nuxt/ui · GitHub

这个源码里慢慢的学习,加上baidu和google搜索,不然很花时间啊。

还有一个,就是需要安装vscode职能插件,我安装的是 通义灵码,免费的,还是很不错的,可以提醒不同的写法。

关于创建表单数据,并提交,在ui.nuxt.com上的form栏,有不同的数据库实体类的插件,可以挑选https://ui.nuxt.com/components/form#usage

 

使用方法大同小异。 


/**
 * zod
 */
import { z } from 'zod';
import type { FormError, FormSubmitEvent } from '#ui/types';

const schema = z.object({
  name: z.string(),
  email: z.string().email('邮箱格式不正确'),
  password: z.string().min(4, '最少4位字符'),
  avatar: z.string(),
});
type Schema = z.output<typeof schema>;

const state = computed(() => {
  return reactive({
    name: z.string().parse('andu' + (info.value + 1)),
    email: z.string().parse('andu' + (info.value + 1) + '@qq.com'),
    password: z.string().parse('andu' + (info.value + 1) + 'password'),
    avatar: z.string().parse('https://picsum.photos/200/200'),
  });
});

const validate = (state: any): FormError[] => {
  const errors = [];
  if (!state.email) errors.push({ path: 'email', message: '必填项' });
  if (!state.password) errors.push({ path: 'password', message: '必填项' });
  return errors;
};

 在添加用户的时候,我想自动的给表单赋值,免得一个个手动输入太麻烦了。我的想法是获取数据长度,传给子组件,然后在名称和邮箱名后面数值+1,这样邮箱不就不重复了吗?info就是从父组件传递进来的数据长度值,怎么让表单的数据都自动更新呢?当然是要把它们放到computed里面去了。这样添加数据的是很不用一个个输入的了。

子组件最上角就是获取的数据长度。注意:这个赋值的过程,根本搜不到啊,非常非常意外的是,捣腾了好久,终于,通义灵码给自动推荐出来了!!!好意外!!!

name: z.string().parse('andu' + (info.value + 1)),

 就是这个z.string().parse()方法,原理是啥,我也不懂,就这么特么的,智能推荐出来了。AI写代码,有的时候是真牛啊。

查询、增加做完了,下面就是删除,删除最简单:


const items = (row: any) => [
  [
    {
      label: '编辑',
      icon: 'i-heroicons-pencil-square-20-solid',
    },
    {
      label: '复制',
      icon: 'i-heroicons-document-duplicate-20-solid',
    },
  ],
  [
    {
      label: '存档',
      icon: 'i-heroicons-archive-box-20-solid',
    },
    {
      label: '移动',
      icon: 'i-heroicons-arrow-right-circle-20-solid',
    },
  ],
  [
    {
      label: '删除',
      icon: 'i-heroicons-trash-20-solid',
      click: () => {
        $fetch('/api/users/' + row.id, {
          method: 'DELETE',
        }).then((users: any) => {
          useToast().add({
            title: `${users.id}号删除成功!`,
            description: `
          用户名:${users.name}<br/>
          邮箱:${users.email}
          `,
          });
        });
        refresh();
      },
    },
  ],
];



    <template #actions-data="{ row }">
      <UDropdown :items="items(row)">
        <UButton
          color="gray"
          variant="ghost"
          icon="i-heroicons-ellipsis-horizontal-20-solid"
        />
      </UDropdown>
    </template>
  </UTable>

删除是放在表格最后一列里,这个也是官网的例子有的。只要是路由有id:[id].delete,就需要在$fetch方法中的url里加上row.id。

删除后,刷新一下表refresh()。

修改还没做,应该也不难了。这几天卡在好几个点。第一个是日期格式化操作,尝试了几个插件和使用,花了不少时间。还有就是父组件和子组件之间的相互传值,这个应该是vue的基本知识,或者说是vue3的知识,网上多是Vue2的代码,搜索不少时间,慢慢尝试和总结出来传值的规律了。还有就是响应式数据问题,info的获取后,怎么在表单里让它自动更新,变成响应式数据,也是摸索学习了不少时间。最后就是ui.nuxt.com上最后Table的例子的源代码,直接照搬过来,还是没学会怎么用,感觉官方的代码好少,做的时候还多,而且官方的例子源码还不少,这要学起来,那得花多少时间啊……

时间太不够用了……


http://www.kler.cn/news/367507.html

相关文章:

  • InternVL-1.1: Enhance Chinese and OCR Capabilities
  • API接口开放与安全管控 - 原理与实践
  • Android Audio基础——音频输出声道设置(十九)
  • 学习笔记——动态路由——OSPF(距离矢量协议)OSPF路由类型
  • Android调用系统相机录像并设置参数
  • 银行客户贷款行为数据挖掘与分析
  • Node.js:深入探秘 CommonJS 模块化的奥秘
  • Java常见数据结构
  • Spring Cloud --- Sentinel 热点规则
  • 2023年MathorCup高校数学建模挑战赛-大数据赛
  • 论文速读 - Cleaner Pretraining Corpus Curation with Neural Web Scraping
  • C++标准库之std::begin、std::end、std::pre和std::next
  • #深度学习:从基础到实践
  • 华为配置 之 划分VLAN
  • 蓝桥杯第二十场小白入门赛
  • 【作业6】基于CNN的XO识别
  • 为什么会有树这样的数据结构,使用树有什么好处 和其他数据结构对比
  • Qt:QtCreator使用
  • 可以拖动屏幕的简单页面播放示例
  • 深入探讨TCP/IP协议基础
  • 【C++】—— 模板进阶
  • 数字加% 循环后两个都变了只能深拷贝
  • 《计算机原理与系统结构》学习系列——处理器(中)
  • Linux:socket实现两个进程之间的通信
  • #单体到微服务架构服务演化过程
  • Mermaid流程图完全指南