vue点击项目唯一id生成器nanoid的使用方式

目录
  • 点击项目唯一id生成器nanoid使用
    • nanoid的安装
    • nanoid的使用
  • 前端常用库——nanoid
    • 1.在项目目录下打开终端,下载安装nanoid库
    • 2.引入nanoid库
    • 3.使用nanoid生成uuid

点击项目唯一id生成器nanoid使用

UUID是软件开发中最常用的通用标识符之一。

nanoid库和uuid库一样都可以生成uuid，但是nanoid相比uuid要更轻量级。

nanoid的安装

npm i nanoid 
// 或者 yarn add nanoid

nanoid的使用

import { nanoid } from 'nanoid' 
let id = nanoid()
 
//也可以指定生成字符串的长度
//let id = nanoid(5)

前端常用库——nanoid

nanoid库和uuid库一样都可以生成uuid，但是nanoid相比uuid要更轻量级，下面就来演示一下如何在项目中使用nanoid。

1.在项目目录下打开终端,下载安装nanoid库

npm i nanoid

或者，如果你安装了yarn可以使用：

yarn add nanoid

2.引入nanoid库

nanoid库中用分别暴露的方式暴露了一个函数nanoid

import {nanoid} from 'nanoid'

3.使用nanoid生成uuid

直接调用nanoid()，即可生成一个uuid

import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import "./index.css"
export default class Header extends Component {
    handleKeyUp = (event) => {
        const {keyCode, target} = event;
        // 判断是否是回车
        if (keyCode !== 13) return
        if (target.value.trim() === '') {
            alert("输入不能为空")
            return
        }
        const todoObj = {id:nanoid(),name:target.value,done:false}
        this.props.addTodo(todoObj)
        target.value = ''
    }
    render() {
        return (
            <div className="todo-header">
                <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
            </div>
        )
    }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue如何通过id从列表页跳转到对应的详情页

    1. 列表页:列表页带id跳转到详情页 详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题 列表页:带id和页面标题的typeid跳转到详情页 详情页:在html绑定标题,获取到传过来的typeid,然后判断typeid是多少对应返回标题. 补充:获取后台的数据,就是去访问的后台的服务器(怎么访问?答:就是你怎么访问网站那样子)然后他有定义到是必须的参数的时候,就是在连接后必须带的参数,才可以获取到后台数据,不是必须的跟在连接后面也不会影响.就如我的第二个例子,

  • vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

    :id绑定 :id="'a_'+index" 输出的id为a_0,a_1..... <div v-for="(item,index) in list" :key="index" > <div :id="'a'+index" @click="b(index)">哈哈哈</div> </div> 然后在vue的实例中就可以拿到对应的id b(index){ thi

  • vue 通过绑定事件获取当前行的id操作

    如下所示: <div @click="router(items.productId)" style="float: left;" :key='items.productName' v-for="items in item"> </div> 获取: router(e){ conslone.log(e); } 补充知识:Vue.js的事件(单双击.鼠标和键盘)以及阻止事件冒泡 自己随便琢磨了一个小的Demo,实现了一些事件和阻

  • vue点击项目唯一id生成器nanoid的使用方式

    目录 点击项目唯一id生成器nanoid使用 nanoid的安装 nanoid的使用 前端常用库——nanoid 1.在项目目录下打开终端,下载安装nanoid库 2.引入nanoid库 3.使用nanoid生成uuid 点击项目唯一id生成器nanoid使用 UUID是软件开发中最常用的通用标识符之一. nanoid库和uuid库一样都可以生成uuid,但是nanoid相比uuid要更轻量级. nanoid的安装 npm i nanoid  // 或者 yarn add nanoid nano

  • 详解Spring Boot工程集成全局唯一ID生成器 UidGenerator的操作步骤

    Spring Boot中全局唯一流水号ID生成器集成实验 概述 流水号生成器(全局唯一 ID生成器)是服务化系统的基础设施,其在保障系统的正确运行和高可用方面发挥着重要作用.而关于流水号生成算法首屈一指的当属 Snowflake 雪花算法,然而 Snowflake本身很难在现实项目中直接使用,因此实际应用时需要一种可落地的方案. UidGenerator 由百度开发,是Java实现的, 基于 Snowflake算法的唯一ID生成器.UidGenerator以组件形式工作在应用项目中, 支持自定义

  • Redis唯一ID生成器的实现

    ID的组成部分: 符号位:1bit,永远为0 时间戳:31bit,以秒为单位,可以使用69年 序列号:32bit,秒内的计数器,支持每秒产生2^32个不同ID 生成代码: public class RedisIdWorker {     /**      * 开始时间戳      */     private static final long BEGIN_TIMESTAMP = 1640995200L;     /**      * 序列号的位数      */     private sta

  • Java中生成唯一ID的方法示例

    有时我们不依赖于数据库中自动递增的字段产生唯一ID,比如多表同一字段需要统一一个唯一ID,这时就需要用程序来生成一个唯一的全局ID. UUID 从Java 5开始, UUID 类提供了一种生成唯一ID的简单方法.UUID是通用唯一识别码 (Universally Unique Identifier)的缩写,UUID来源于OSF(Open Software Foundation,开源软件基金会)的DCE(Distributed Computing Environment,分布式计算环境)规范.UU

  • 一种简单的ID生成策略: Mysql表生成全局唯一ID的实现

    生成全局ID的方法很多, 这里记录下一种简单的方案: 利用mysql的自增id生成全局唯一ID. 1. 创建一张只需要两个字段的表: CREATE TABLE `guid` ( `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `stub` char(1) NOT NULL DEFAULT '' COMMENT '桩字段,占坑的', PRIMARY KEY (`id`), UNIQUE KEY `uk_stub` (`stub`) -- 将 st

  • Redis生成全局唯一ID的实现方法

    Redis生成全局唯一ID的实现方法

    目录 简介: 特性: 生成规则: ID生成类: 测试类: 简介: 全局唯一ID生成器是一种在分布式系统下用来生成全局唯一ID的工具 特性: 唯一性 高性能 安全性 高可用 递增性 生成规则: 有时为了增加ID的安全性,我们可以不直接使用Redis自增的数值,而是拼接一些其他信息 ID组成部分: 符号位:1bit,永远为0 时间戳:31bit,以秒为单位,可以使用69年 序列号:32bit,秒内的计数器,支持每秒产生2^32个不同ID ID生成类: package com.example.util

  • JS生成唯一id方式之UUID和NanoID

    目录 一.为什么 NanoID 正在取代 UUID 二.js如何生成 三.NanoID的方式 前言: 唯一id有了更好的方式,那就是NanoID,今天这篇文章记录一下NanoID 正在取代 UUID?及js 生成uuid及NanoID的方法. 一.为什么 NanoID 正在取代 UUID 1..更安全 在大多数随机生成器中,它们使用不安全的 Math.random() .但是,NanoID 使用 crypto module 和 Web Crypto API,意味着 NanoID 更安全. 此外,

  • Go开源项目分布式唯一ID生成系统

    Go开源项目分布式唯一ID生成系统

    目录 前言 项目背景 项目使用 HTTP 方式 gRPC 方式 本地开发 项目架构 前言 今天跟大家介绍一个开源项目:id-maker,主要功能是用来在分布式环境下生成唯一 ID.上周停更了一周,也是用来开发和测试这个项目的相关代码. 美团有一个开源项目叫 Leaf,使用 Java 开发.本项目就是在此思路的基础上,使用 Go 开发实现的. 项目整体代码量并不多,不管是想要在实际生产环境中使用,还是想找个项目练手,我觉得都是一个不错的选择. 项目背景 在大部分系统中,全局唯一 ID 都是一个强需

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • vue移动端项目缓存问题实践记录

    最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,权当是最近项目问题的一个回顾吧! 先描述下问题场景:A页面->B页面->C页面.假设A页面是列表页面,B页面是列表详情页面,C页面是操作改变B页面的一些东西,进行提交类似的操作.A页面进入B页面,应该根据不同的列表item显示不一样的详情,从B进入C,也应该根据item的标识比如ID展示不一样的内容,在C页面操作后,返回B页面,B页面数据发生变化.这个时候会有两种情况: C页面操作数据后返回B页面,B页面对应

随机推荐