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

一、next-auth 身份验证凭据-使用电子邮件和密码注册登录

一、next-auth 身份验证凭据-使用电子邮件和密码注册登录

文章目录

  • 一、next-auth 身份验证凭据-使用电子邮件和密码注册登录
  • 一、前言
  • 二、前置准备
    • 1、环境配置
    • 2、相关库安装
      • (1)vercel 配置
      • (2)Yarn 包管理配置
    • 3、next项目初始化与创建
  • 三、具体实现
    • 1、github 仓库创建与链接
    • 2、Vercel项目链接Vercel账户并部署
      • (1)项目上传vercel
      • (2)项目创建并链接postgre 数据库
      • (3)本地化项目链接数据库准备
    • 3、登录页面与注册页面的前端
      • (1)登录页面
      • (1)注册页面
      • (1)register 页面
  • 四、数据库交互
    • 1、数据库创建
    • 2、vercel项目链接数据库并插入
      • (1)vercel postgre准备
      • (2) 项目注册并写sql插入数据库
      • (3) 项目查询sql数据库并登录
  • 五、状态增加
    • 1、查询到登录之后登录自动跳转状态增加
    • 2、登出与登录状态转换
    • 3、重定向
    • 4、root保护
    • 5、root保护登录页面转为自定义登录页面

一、前言

近些时间需要在next 里面加入登录注册的功能遂整理了一下学习视频:
Next auth 身份验证凭据 - 使用电子邮件和密码注册和登录(NextJS app 路由)

二、前置准备

1、环境配置

  • Vscode

  • node环境配置

  • vercel 账户注册

  • github账户注册

2、相关库安装

(1)vercel 配置

  1. npm i -g vercel //安装vercel CLI

(2)Yarn 包管理配置

  1. npm i -g yarn //安装yarn

3、next项目初始化与创建

  1. yarn create next-app

在这里插入图片描述

  1. cd nextauth-review (这里面放你写的项目名)

  2. yarn dev //运行程序,在http://localhost:3000可以查看next项目的项目名在这里插入图片描述

到这里我们就基本完成了前置的准备工作,下面继续。

三、具体实现

1、github 仓库创建与链接

在这里插入图片描述

将新建的项目上传github

在这里插入图片描述

2、Vercel项目链接Vercel账户并部署

(1)项目上传vercel

  • vercel login //vercel 登录

  • Vercel //链接与上传

在这里插入图片描述

第三行输入n。最开始的时候不连接vercel项目。

注:后续如果项目更新了,要推送到vercel部署,可以通过输入vercel ,然后在第三行输入y,并输入第一步创建的项目名。

(2)项目创建并链接postgre 数据库

在这里插入图片描述

(3)本地化项目链接数据库准备

  1. vercel env pull .env.development.local

在这里插入图片描述
注释掉VERCEL,不注释掉就会强制使用https,但我们在本地调试所以说http会报错。正式运行再取消注释。

  1. openssl rand -base64 32 ,生成32位密码,并修改.env.development.local如下:

在这里插入图片描述

  1. yarn add @types/bcrypt 安装加密工具bcrypt

  2. yarn add @vercel/postgres 安装vercel postgres

  3. yarn add next-auth 安装next-auth

到这里该项目的数据库就配置好了,下面我们开始页面开发。

3、登录页面与注册页面的前端

(1)登录页面

新建login文件夹,并在其中新建page.tsx下面是具体的内容

export default function LoginPage(){return (<form className="flex flex-col gap-2 mx-auto max-w-md mt-10"><input name='email' className ="border border-black text-black" type="email" /><input name='password' className ="border border-black text-black" type="password" /><button type="submit">Login</button></form>)
}

(1)注册页面

新建register文件夹,并在其中新建page.tsx下面是具体的内容

export default function LoginPage(){return (<form className="flex flex-col gap-2 mx-auto max-w-md mt-10"><input name='email' className ="border border-black text-black" type="email" /><input name='password' className ="border border-black text-black" type="password" /><button type="submit">Register</button></form>)
}

到这里前端就差不多了,大家可以在http://localhost:3000/login 和http://localhost:3000/register看到你写的页面

nextAuth的官方文档:https://next-auth.js.org/providers/credentials在这里插入图片描述

基本就是用来nextAuth 官方文档中的credentials 字段,结尾加上export {handler as GET, handler as POST}; 就差不多了。

类似如下:

api/auth/[…nextauth]/route.ts

import NextAuth from "next-auth/next";
import CredentialsProvider from "next-auth/providers/credentials";
const handler =NextAuth({providers: [CredentialsProvider({credentials: {email: {  },password: { }},async authorize(credentials, req) {// Add logic here to look up the user from the credentials suppliedconst user = { id: "1", name: "J Smith", email: "jsmith@example.com" }if (user) {// Any object returned will be saved in `user` property of the JWTreturn user} else {// If you return null then an error will be displayed advising the user to check their details.return null// You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter}}})]
})export {handler as GET, handler as POST};

api/auth/register/route.ts

import { NextResponse } from "next/server";export  async function POST(request : Request){try{const {email,password} = await request.json();console.log({email,password});}catch(e){console.log({e});}return NextResponse.json({message:"success"});
}

(1)register 页面

register\page.tsx

import { log } from "console";
import { FormEvent } from "react"export default function LoginPage(){const handleSubmit= async (e:FormEvent<HTMLFormElement>)=>{e.preventDefault();const formData = new FormData(e.currentTarget);const response = await fetch(`/api/auth/register`,{method:"POST",body:JSON.stringify({email:formData.get('email'),password:formData.get('password'),}),})console.log({response});}return (<form onSubmit ={ handleSubmit}className="flex flex-col gap-2 mx-auto max-w-md mt-10"><input name='email' className ="border border-black text-black" type="email" /><input name='password' className ="border border-black text-black" type="password" /><button type="submit">register</button></form>)
}

运行报错:
在这里插入图片描述

注:错误原因:需要把组件写到客户端部分,不能直接写进去Page.tsx

修改如下:

register/form.tsx

'use client'
import { FormEvent } from "react"export default function Form(){const handleSubmit = async (e:FormEvent<HTMLFormElement>) =>{e.preventDefault();const formData = new FormData(e.currentTarget);console.log(formData.get('email'),formData.get('password'));const response = await fetch(`/api/auth/register`,{method:'POST',body:JSON.stringify({email:formData.get('email'),password:formData.get('password')}),});console.log({response});};return(<form onSubmit={handleSubmit} className="flex flex-col gap-2 mx-auto max-w-md mt-10"><input name='email' className ="border border-black text-black" type="email" /><input name='password' className ="border border-black text-black" type="password" /><button type="submit">Resgiter</button></form>)
}

register/page.tsx

import Form from './form'export default async function RegisterPage(){return <Form />;}

到现在运行yarn dev 并到 http://localhost:3001/register 页面输入账户和密码,点击登录调用接口:fetch(/api/auth/register)然后打印{ email: ‘123@123’, password: ‘123’ }

在这里插入图片描述

到这里就完成简单的前后端编写,下面进入数据库交互部分。

四、数据库交互

1、数据库创建

在这里插入图片描述

依据需求创建表单users1 如上,一共有两个属性email 和password

2、vercel项目链接数据库并插入

确保Browse页面确实能查到这个新建的数据库在这里插入图片描述

(1)vercel postgre准备

yarn add @vercel/postgres

(2) 项目注册并写sql插入数据库

将API/auth/register/route.ts 的内容修改如下即可实现针对数据库的插入

import { NextResponse } from "next/server";
import {hash} from 'bcrypt'
import {sql} from '@vercel/postgres'
export  async function POST(request : Request){try{const {email,password} = await request.json();console.log({email,password});const hashedPassword = await hash(password,10); //将密码hash加密到10位const response = await sql`INSERT INTO users1 (email,password) VALUES (${email},${password})`;//${参数} 参数化查询}catch(e){console.log({e});}return NextResponse.json({message:"success"});
}

前端页面register\form.tsx 如下,page.tsx 不变

'use client'
import { signIn } from "next-auth/react";
import { FormEvent } from "react"export default function LoginForm() {const handleSubmit = async (e:FormEvent<HTMLFormElement>) =>{e.preventDefault();const formData = new FormData(e.currentTarget);signIn('credentials',{  //nextauth 登录模块email:formData.get('email'),password:formData.get('password'),redirect:false});};return(<form onSubmit={handleSubmit} className="flex flex-col gap-2 mx-auto max-w-md mt-10"><input name='email' className ="border border-black text-black" type="email" /><input name='password' className ="border border-black text-black" type="password" /><button type="submit">Login</button></form>)
}

测试的时候可以发现可以显示登录信息了

问题:发现邮箱有时候同邮箱有多个,所以需要当相同的时候就不添加而是修改

在这里插入图片描述

在数据库中限制让email唯一

(3) 项目查询sql数据库并登录

将API/auth/[…nextauth]/route.ts 的内容修改如下即可实现针对数据库的插入

import { sql } from "@vercel/postgres";
import { compare } from "bcrypt";
import NextAuth from "next-auth/next";
import CredentialsProvider from "next-auth/providers/credentials";
const handler =NextAuth({session:{strategy:'jwt'},providers: [CredentialsProvider({credentials: {email: {  },password: { }},async authorize(credentials, req) {const response = await sql`SELECT * FROM users1 WHERE email=${credentials?.email}`;const user = response.rows[0];const passwordCorrect = await compare(credentials?.password ||'',user.password);const passworduser=user.passwordconst passwordcre=credentials?.passwordconsole.log({passwordCorrect},{passwordcre},{passworduser});if (passwordCorrect){return {id:user.id,email:user.email}}//console.log({credentials}); //打印credentials信息return null}})]
})export {handler as GET, handler as POST};

前端页面login\form.tsx 如下,page.tsx 不变

'use client'
import { signIn } from "next-auth/react";
import { FormEvent } from "react"export default function LoginForm() {const handleSubmit = async (e:FormEvent<HTMLFormElement>) =>{e.preventDefault();const formData = new FormData(e.currentTarget);const response= await signIn('credentials',{  //nextauth 登录模块email:formData.get('email'),password:formData.get('password'),redirect:false});console.log({response});};return(<form onSubmit={handleSubmit} className="flex flex-col gap-2 mx-auto max-w-md mt-10"><input name='email' className ="border border-black text-black" type="email" /><input name='password' className ="border border-black text-black" type="password" /><button type="submit">Login</button></form>)
}

这时候就可以写入数据库了

五、状态增加

1、查询到登录之后登录自动跳转状态增加

解析:
如果查询到登录模块,没有返回error。则自动导航到‘/’目录同时刷新。
核心修改:

export default function LoginForm() {const router=useRouter();const handleSubmit = async (e:FormEvent<HTMLFormElement>) =>{e.preventDefault();const formData = new FormData(e.currentTarget);const response= await signIn('credentials',{  //nextauth 登录模块email:formData.get('email'),password:formData.get('password'),redirect:false});console.log({response});if(!response?.error){  //没有返回errorrouter.push('/');    //跳转到‘/’router.refresh();    //刷新缓存}};

login/form.tsx全部内容如下

'use client'
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import { FormEvent } from "react"export default function LoginForm() {const router=useRouter();const handleSubmit = async (e:FormEvent<HTMLFormElement>) =>{e.preventDefault();const formData = new FormData(e.currentTarget);const response= await signIn('credentials',{  //nextauth 登录模块email:formData.get('email'),password:formData.get('password'),redirect:false});console.log({response});if(!response?.error){router.push('/');router.refresh();}};return(<form onSubmit={handleSubmit} className="flex flex-col gap-2 mx-auto max-w-md mt-10"><input name='email' className ="border border-black text-black" type="email" /><input name='password' className ="border border-black text-black" type="password" /><button type="submit">Login</button></form>)
}

2、登出与登录状态转换

登录之后,登出
登出之后,登录,并自动跳转到首页
功能解析
在全部页面都需要有这个跳转。
1、在app首页的layout.tsx页面进行编写。
2、自动跳转用next

该功能核心修改是增加:

 <nav>{!!session &&<Logout />}{!session &&<Link href='/login'>Login</Link>}</nav>

文件全部代码如下:
layout.tsx

mport type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { getServerSession } from "next-auth";
import Link from "next/link";
import Logout from "./logout";const inter = Inter({ subsets: ["latin"] });export const metadata: Metadata = {title: "Create Next App",description: "Generated by create next app",
};export default async function RootLayout({children,
}: Readonly<{children: React.ReactNode;
}>) {const session = await getServerSession();return (<html lang="en"><body className={inter.className}><nav>{!!session &&<Logout />}{!session &&<Link href='/login'>Login</Link>}</nav>{children}</body></html>);
}

由于这个里面也涉及到后端,所以需要重新编写一个的客户端API进行处理,在同目录编写
logout.tsx

'use client'import { signOut } from "next-auth/react"
export default function Logout(){return (<span onClick={() => {signOut();}}>Logout</span>)
}

到这里,登出与登录按钮增加完毕

3、重定向

当你登录后不想再返回登录页面可以参考以下的操作。
其他的网址也可以这么操作。

import { getServerSession } from "next-auth";
import Form from "./form";
import { redirect } from "next/navigation";export default async function LoginPage(){const session =await getServerSession();if(session){redirect("/")}return <Form />
}

4、root保护

一些页面需要你登录之后才能访问,在这里面我们借助中间件实现这个操作
在项目主目前增加中间件
middleware.ts

export {default } from 'next-auth/middleware'export const conifg ={matcher:['/dashboard']} //加入你要登录保护的地址

这样子,这个功能就实现完毕了。

5、root保护登录页面转为自定义登录页面

在nextauth 的route页面增加signin路径
pages:{
signIn:‘/login’,
},在这里插入图片描述

相关文章:

一、next-auth 身份验证凭据-使用电子邮件和密码注册登录

一、next-auth 身份验证凭据-使用电子邮件和密码注册登录 文章目录 一、next-auth 身份验证凭据-使用电子邮件和密码注册登录一、前言二、前置准备1、环境配置2、相关库安装&#xff08;1&#xff09;vercel 配置&#xff08;2&#xff09;Yarn 包管理配置 3、next项目初始化与…...

2.SpringBoot利用Thymeleaf实现页面的展示

什么是Thymeleaf&#xff1f; Thymeleaf是一个现代服务器端Java模板引擎&#xff0c;适用于Web和独立环境&#xff0c;能够处理HTML&#xff0c;XML&#xff0c;JavaScript&#xff0c;CSS甚至纯文本。 Thymeleaf的主要目标是提供一种优雅且高度可维护的模板创建方式。为实现这…...

devtool: ‘source-map‘ 和 devtool: ‘#source-map‘的区别

devtool: ‘source-map’ 和 devtool: ‘#source-map’ 之间的区别主要在于前面的#字符。 从Webpack 4开始&#xff0c;就废弃了在devtool选项前加#的用法。 devtool: ‘source-map’ 选项意味着Webpack在构建过程中会生成独立的完整的source map文件。对于测试环境很有用&…...

Flutter Boost 3

社区的 issue 没有收敛的趋势。 设计过于复杂&#xff0c;概念太多。这让一个新手看 FlutterBoost 的代码很吃力。 这些问题促使我们重新梳理设计&#xff0c;为了彻底解决这些顽固的问题&#xff0c;我们做一次大升级&#xff0c;我们把这次升级命名为 FlutterBoost 3.0&am…...

ElementUI响应式Layout布局xs,sm,md,lg,xl

响应式布局 参照了 Bootstrap 的 响应式设计&#xff0c;预设了五个响应尺寸&#xff1a;xs、sm、md、lg 和 xl。 <el-row :gutter"10"><el-col :xs"8" :sm"6" :md"4" :lg"3" :xl"1"><div class…...

机器学习——典型的卷积神经网络

机器学习——典型的卷积神经网络 卷积神经网络&#xff08;Convolutional Neural Networks&#xff0c;CNNs&#xff09;是一类在图像处理领域应用广泛的深度学习模型。它通过卷积操作和池化操作来提取图像的特征&#xff0c;并通过全连接层来进行分类或回归任务。在本文中&am…...

速通数据结构与算法第四站 双链表

系列文章目录 速通数据结构与算法系列 1 速通数据结构与算法第一站 复杂度 http://t.csdnimg.cn/sxEGF 2 速通数据结构与算法第二站 顺序表 http://t.csdnimg.cn/WVyDb 3 速通数据结构与算法第三站 单链表 http://t.csdnimg.cn/cDpcC 感谢佬们…...

51单片机学习笔记12 SPI接口 使用1302时钟

51单片机学习笔记12 SPI接口 使用1302时钟 一、DS1302简介1. 功能特性2. 涓流充电3. 接口介绍时钟数据和控制线&#xff1a;电源线&#xff1a;备用电池连接&#xff1a; 二、寄存器介绍1. 控制寄存器2. 时间寄存器3. 日历/时钟寄存器 三、BCD码介绍四、DS1302时序1. 读时序2. …...

php编辑器 ide 主流编辑器的优缺点。phpstorm vscode atom 三者对比

编辑器PhpStormvscodeAtom是否收费收费&#xff0c;有30天试用期免费免费内存占用Java平台&#xff0c;一个进程1G多内存占用好几个进程&#xff0c;合起来1G上下/基本功能都具备&#xff0c;有的功能需要装插件都具备&#xff0c;有的功能需要装插件都具备&#xff0c;有的功能…...

【动手学深度学习】深入浅出深度学习之RMSProp算法的设计与实现

目录 &#x1f31e;一、实验目的 &#x1f31e;二、实验准备 &#x1f31e;三、实验内容 &#x1f33c;1. 认识RMSProp算法 &#x1f33c;2. 在optimizer_compare_naive.py中加入RMSProp &#x1f33c;3. 在optimizer_compare_mnist.py中加入RMSProp &#x1f33c;4. 问…...

大转盘抽奖小程序源码

源码介绍 大转盘抽奖小程序源码&#xff0c;测试依旧可用&#xff0c;无BUG&#xff0c;跑马灯旋转效果&#xff0c;非常酷炫。 小程序核心代码参考 //index.js //获取应用实例 var app getApp() Page({data: {circleList: [],//圆点数组awardList: [],//奖品数组colorCirc…...

数据结构(无图版)

数据结构与算法&#xff08;无图版&#xff0c;C语言实现&#xff09; 1、绪论 1.1、数据结构的研究内容 一般应用步骤&#xff1a;分析问题&#xff0c;提取操作对象&#xff0c;分析操作对象之间的关系&#xff0c;建立数学模型。 1.2、基本概念和术语 数据&#xff1a;…...

软件测试中的顶级测试覆盖率技术

根据 CISQ 报告&#xff0c;劣质软件每年给美国公司造成约2.08 万亿美元的损失。虽然软件工具是企业和行业领域的必需品&#xff0c;但它们也容易出现严重错误和性能问题。人类手动测试不再足以检测和消除软件错误。 因此&#xff0c;产品或软件开发公司必须转向自动化测试&am…...

vscode使用技巧

常用快捷键 代码格式 Windows系统。格式化代码的快捷键是“ShiftAltF” Mac系统。格式化代码的快捷键是“ShiftOptionF” Ubuntu系统。格式化代码的快捷键是“CtrlShiftI”配置缩进 点击左上角的“文件”菜单&#xff0c;然后选择“首选项”>“设置”&#xff0c;或者使用…...

JSP

概念&#xff1a;Java Server Pages&#xff0c;Java服务端页面 一种动态的网页技术&#xff0c;其中既可以定义HTML、JS、CSS等静态内容&#xff0c;还可以定义Java代码的动态内容 JSP HTML Java 快速入门 注&#xff1a;Tomcat中已经有了JSP的jar包&#xff0c;因此我们…...

Mybatis--TypeHandler使用手册

TypeHandler使用手册 场景&#xff1a;想保存user时 teacher自动转String &#xff0c;不想每次保存都要手动去转String&#xff1b;从DB查询出来时&#xff0c;也要自动帮我们转换成Java对象 Teacher Data public class User {private Integer id;private String name;priva…...

网络编程(TCP、UDP)

文章目录 一、概念1.1 什么是网络编程1.2 网络编程中的基本知识 二、Socket套接字2.1 概念及分类2.2 TCP VS UDP2.3 通信模型2.4 接口方法UDP数据报套接字编程TCP流套接字编程 三、代码示例3.1 注意点3.2 回显服务器基于UDP基于TCP 一、概念 首先介绍了什么是网络编程&#xff…...

Python快速入门系列-7(Python Web开发与框架介绍)

第七章:Python Web开发与框架介绍 7.1 Flask与Django简介7.1.1 Flask框架Flask的特点Flask的安装一个简单的Flask应用示例7.1.2 Django框架Django的特点Django的安装一个简单的Django应用示例7.2 前后端交互与数据传输7.2.1 前后端交互7.2.2 数据传输格式7.2.3 示例:使用Flas…...

最长对称子串

对给定的字符串&#xff0c;本题要求你输出最长对称子串的长度。例如&#xff0c;给定Is PAT&TAP symmetric?&#xff0c;最长对称子串为s PAT&TAP s&#xff0c;于是你应该输出11。 输入格式&#xff1a; 输入在一行中给出长度不超过1000的非空字符串。 输出格式&…...

【大模型】大模型 CPU 推理之 llama.cpp

【大模型】大模型 CPU 推理之 llama.cpp llama.cpp安装llama.cppMemory/Disk RequirementsQuantization测试推理下载模型测试 参考 llama.cpp 描述 The main goal of llama.cpp is to enable LLM inference with minimal setup and state-of-the-art performance on a wide var…...

异地组网怎么管理?

在当今信息化时代&#xff0c;随着企业的业务扩张和员工的分布&#xff0c;异地组网已经成为越来越多企业的需求。异地组网管理相对来说是一项复杂而繁琐的任务。本文将介绍一种名为【天联】的管理解决方案&#xff0c;帮助企业更好地管理异地组网。 【天联】组网的优势 【天联…...

Kafka参数介绍

官网参数介绍:Apache KafkaApache Kafka: A Distributed Streaming Platform.https://kafka.apache.org/documentation/#configuration...

如何利用待办事项清单提高工作效率?

你是否经常因为繁重的工作量而感到不堪重负&#xff1f;你是否在努力赶工期或经常忘记重要的电子邮件&#xff1f;你并不是特例。如何利用待办事项清单提高工作效率&#xff1f;这里有一个简单的方法可以帮你理清混乱并更高效地完成任务—待办事项清单。 这种类型的清单可以帮…...

力扣经典150题第二题:移除元素

移除元素问题详解与解决方法 1. 介绍 移除元素问题是 LeetCode 经典题目之一&#xff0c;要求原地修改输入数组&#xff0c;移除所有数值等于给定值的元素&#xff0c;并返回新数组的长度。 问题描述 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等…...

55555555555555

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…...

用Skimage学习数字图像处理(018):图像形态学处理(上)

本节开始讨论图像形态学处理&#xff0c;这是上篇&#xff0c;将介绍与二值形态学相关的内容&#xff0c;重点介绍两种基本的二值形态学操作&#xff1a;腐蚀和膨胀&#xff0c;以及三种复合二值形态学操作&#xff1a;开、闭和击中击不中变换。 目录 9.1 基础 9.2 基本操作…...

MySQL中 in 和 exists 区别

在MySQL中&#xff0c;IN和EXISTS都是用于在子查询中测试条件的操作符&#xff0c;但它们在处理和效率上有一些重要的区别。MySQL中的in语句是把外表和内表作hash连接&#xff0c;⽽exists语句是对外表作loop循环&#xff0c;每次loop循环再对内表进⾏查询。⼤家⼀直认为exists…...

Java基础 - 代码练习

第一题&#xff1a;集合的运用&#xff08;幸存者&#xff09; public class demo1 {public static void main(String[] args) {ArrayList<Integer> array new ArrayList<>(); //一百个囚犯存放在array集合中Random r new Random();for (int i 0; i < 100; …...

【Redis】redis集群模式

概述 Redis集群&#xff0c;即Redis Cluster&#xff0c;是Redis 3.0开始引入的分布式存储方案。实际使用中集群一般由多个节点(Node)组成&#xff0c;Redis的数据分布在这些节点中。集群中的节点分为主节点和从节点&#xff1a;只有主节点负责读写请求和集群信息的维护&#…...

基于opencv的猫脸识别模型

opencv介绍 OpenCV的全称是Open Source Computer Vision Library&#xff0c;是一个跨平台的计算机视觉库。OpenCV是由英特尔公司发起并参与开发&#xff0c;以BSD许可证授权发行&#xff0c;可以在商业和研究领域中免费使用。OpenCV可用于开发实时的图像处理、计算机视觉以及…...

网站开发公司兴田德润在那里/网页分析工具

NS是一个基于事件驱动的单线程模拟器&#xff0c;在模拟器中有四种可使用的调度器&#xff1a;链表调度器、堆调度器、日历调度器和实时调度器。调度器调度的是事件&#xff0c;下面是事件的定义&#xff08;event&#xff09;&#xff1a; class Event { public:Event* next_;…...

wordpress多级分销插件/短视频排名seo

准备写这篇blog之前&#xff0c;突然发现自己真的不应该挑这样一个虽然很有前途的&#xff0c;但是目前并不火&#xff0c;大家都很陌生得话题开始谈虚拟化。原因是桌面虚拟化涉及的技术很多&#xff0c;因素也很多&#xff0c;目前最火的服务器虚拟化&#xff0c;与其相比&…...

大兴网站制作/西安专业做网站公司

下面是主要的验证注解及说明&#xff1a; 注解 适用的数据类型 说明 AssertFalse Boolean, boolean 验证注解的元素值是false AssertTrue Boolean, boolean 验证注解的元素值是true DecimalMax&#xff08;valuex&#xff09; BigDecimal, BigInteger, String, byte,…...

淘宝网站是谁做的好/搜索引擎优化的各种方法

Pytorch框架学习记录9——非线性激活 1. ReLU函数介绍 torch.nn.ReLU(inplaceFalse) 参数 inplace- 可以选择就地执行操作。默认&#xff1a;False 形状&#xff1a; 输入&#xff1a;( * )&#xff0c; 在哪里**表示任意数量的维度。输出&#xff1a;( * )&#xff0c;与输入…...

招聘网站开发模板/百度公司名称

可以借助一个基于jq的插件:colresizable http://www.bacubacu.com/colresizable/#download 使用方法&#xff0c;引入该js $(function(){var onSampleResized function(e){ var table $(e.currentTarget); //reference to the resized table}; $("#你的表格id"…...

网站中弹出广告怎么做的/朋友圈广告30元 1000次

2019独角兽企业重金招聘Python工程师标准>>> 9月12日任务 2.6 相对和绝对路径 2.7 cd命令 2.8 创建和删除目录mkdir/rmdir 2.9 rm命令 2.6 、相对路径与绝对路径 绝对路径是以 / 开始的目录 例&#xff1a; [rootlocalhost ~]# ls /etc/passwd 相对路径…...