【JavaScript】二十七、用户注册、登陆、登出
文章目录
- 1、案例：用户注册页面
- 1.1 发送验证码
- 1.2 验证用户名密码合法性
- 1.3 已阅读并同意用户协议
- 1.4 表单提交
- 2、案例：用户登陆页面
- 2.1 tab切换
- 2.2 登陆跳转
- 2.3 登陆成功与登出
1、案例：用户注册页面
1.1 发送验证码
需求：用户点击之后，显示 05秒后重新获取，时间到了，自动改为重新获取
如上，html页面比较大，直接F12定位某个位置的代码，比如上面定位获取验证码的链接的DOM对象
<script>const code = document.querySelector('.code')let flag = truecode.addEventListener('click', function () {let i = 5if (flag) {flag = falsecode.innerHTML = `0${i}秒后重新获取`let timerId = setInterval(function () {i--code.innerHTML = `0${i}秒后重新获取`if (i === 0) {clearInterval(timerId)code.innerHTML = '重新获取'flag = true}}, 1000)}})
</script>
注意，上面实现中，为了防止获取验证码在CD期间被重复点击，做了一个flag变量，其思想相当于后端的加锁，最后走到0秒后重新获取时，再释放锁，也就是flag置为true
1.2 验证用户名密码合法性
需求：验证用户输入的用户名是不是6～10位的字母或者数字，这个第一个想到的可能是失焦事件，但这个也不完美，比如点击输入框，啥也不输，焦点离开输入框，就会出现不合法提示，这里改用change事件
change事件，当焦点（鼠标）离开了表单，并且表单值发生了变化时触发
<body><input type="text"><script>const input = document.querySelector('input')input.addEventListener('change', function () {console.log('change了')})</script>
</body>
当失焦，并且值发生了变化时，change事件触发，注意，不是你在输入框里不停的输入值，就不断的触发，还要失焦
开始写功能：
根据定位的输入框代码，获取对应的DOM对象：
<script>const username = document.querySelector('[name=username]')username.addEventListener('change', verifyName)function verifyName() {const regObj = /^[a-zA-Z0-9-_]{6,10}$/const match = regObj.test(username.value)const msgSpan = username.nextElementSiblingif (!match) {msgSpan.innerText = '请输入6~10位'return false}msgSpan.innerHTML = ''return true}
</script>
span很多，直接用关系获取：username.nextElementSibling
同理，手机号、验证码、密码的校验：
<script>// 用户名校验const username = document.querySelector('[name=username]')username.addEventListener('change', verifyName)function verifyName() {const regObj = /^[a-zA-Z0-9-_]{6,10}$/const match = regObj.test(username.value)const msgSpan = username.nextElementSiblingif (!match) {msgSpan.innerText = '请输入6~10位'return false}msgSpan.innerHTML = ''return true}// 手机号校验const phone = document.querySelector('[name=phone]')phone.addEventListener('change', verifyPhone)function verifyPhone() {const regObj = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/const match = regObj.test(phone.value)const msgSpan = phone.nextElementSiblingif (!match) {msgSpan.innerText = '请输入正确的手机号'return false}msgSpan.innerHTML = ''return true}// 验证码校验const codeInput = document.querySelector('[name=code]')codeInput.addEventListener('change', verifyCode)function verifyCode() {const regObj = /^\d{6}$/const match = regObj.test(codeInput.value)const msgSpan = codeInput.nextElementSiblingif (!match) {msgSpan.innerText = '请输入正确的验证码'return false}msgSpan.innerHTML = ''return true}// 密码验证const password = document.querySelector('[name=password]')password.addEventListener('change', verifyPassword)function verifyPassword() {const regObj = /^\d{6}$/const match = regObj.test(password.value)const msgSpan = password.nextElementSiblingif (!match) {msgSpan.innerText = '请输入正确的验证码'return false}msgSpan.innerHTML = ''return true}
</script>
两次密码输入是否一致的校验：
<script>// 再次输入密码验证const confirm = document.querySelector('[name=confirm]')confirm.addEventListener('change', verifyPasswordAgain)function verifyPasswordAgain() {const msgSpan = confirm.nextElementSiblingif (confirm.value !== password.value) {msgSpan.innerText = '两次密码不一致'return false}msgSpan.innerHTML = ''return true}</script>
1.3 已阅读并同意用户协议
F12看到html对这个勾选的实现不是用单选或者复选框，而是一个i标签，通过给它增加和减少一个样式来实现，这里用toggle方法，有这个样式就去掉，没这个样式就加上，非常巧妙：
// 同意协议
const agree = document.querySelector('.icon-queren')
agree.addEventListener('click', function () {// toggle方法，有这个样式就去掉，没这个样式就加上this.classList.toggle('icon-queren2')
})
1.4 表单提交
表单提交submit事件，前提：
- 阅读协议已被勾选：看下有没有icon-queren2的CSS类名，classList.contains()方法
- 表单项都填写正确：上面每一个输入框的校验函数，我都返回了true或者false，就是给这里用的
// 提交表单
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {// 查看是否有勾选后的标签样式const agreeFlag = agree.classList.contains('icon-queren2')if (!agreeFlag) {alert('请先阅读并同意协议！')e.preventDefault()}// 判断输入框的输入是否都合法，这就是上面方法额外返回一个true或者false的作用if (!(verifyName() && verifyPhone() && verifyCode() && verifyPassword() && verifyPasswordAgain())) {e.preventDefault()}})
效果：
完整代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>小兔鲜儿 - 新鲜 惠民 快捷!</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/register.css"><link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head><body><!-- 项部导航 --><div class="xtx_topnav"><div class="wrapper"><!-- 顶部导航 --><ul class="xtx_navs"><li><a href="./login.html">请先登录</a></li><li><a href="./register.html">免费注册</a></li><li><a href="./center-order.html">我的订单</a></li><li><a href="./center.html">会员中心</a></li><li><a href="javascript:;">帮助中心</a></li><li><a href="javascript:;">在线客服</a></li><li><a href="javascript:;"><i class="mobile sprites"></i>手机版</a></li></ul></div></div><!-- 头部 --><div class="xtx_header"><div class="wrapper"><!-- 网站Logo --><h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1><!-- 主导航 --><div class="xtx_navs"><ul class="clearfix"><li><a href="./index.html">首页</a></li><li><a href="./category01.html">生鲜</a></li><li><a href="./category01.html">美食</a></li><li><a href="./category01.html">餐厨</a></li><li><a href="./category01.html">电器</a></li><li><a href="./category01.html">居家</a></li><li><a href="./category01.html">洗护</a></li><li><a href="./category01.html">孕婴</a></li><li><a href="./category01.html">服装</a></li></ul></div><!-- 站内搜索 --><div class="xtx_search clearfix"><!-- 购物车 --><a href="./cart-none.html" class="xtx_search_cart sprites"><i>2</i></a><!-- 搜索框 --><div class="xtx_search_wrapper"><input type="text" placeholder="搜一搜" onclick="location.href='./search.html'"></div></div></div></div><div class="xtx-wrapper"><div class="container"><!-- 卡片 --><div class="xtx-card"><h3>新用户注册</h3><form class="xtx-form"><div data-prop="username" class="xtx-form-item"><span class="iconfont icon-zhanghao"></span><input name="username" type="text" placeholder="设置用户名称"><span class="msg"></span></div><div data-prop="phone" class="xtx-form-item"><span class="iconfont icon-shouji"></span><input name="phone" type="text" placeholder="输入手机号码 "><span class="msg"></span></div><div data-prop="code" class="xtx-form-item"><span class="iconfont icon-zhibiaozhushibiaozhu"></span><input name="code" type="text" placeholder="短信验证码"><span class="msg"></span><a class="code" href="javascript:;">发送验证码</a></div><div data-prop="password" class="xtx-form-item"><span class="iconfont icon-suo"></span><input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合"><span class="msg"></span></div><div data-prop="confirm" class="xtx-form-item"><span class="iconfont icon-suo"></span><input name="confirm" type="password" placeholder="请再次输入上面密码"><span class="msg"></span></div><div class="xtx-form-item pl50"><i class="iconfont icon-queren"></i>已阅读并同意<i>《用户服务协议》</i></div><div class="xtx-form-item"><button class="submit">下一步</button><!-- <a class="submit" href="javascript:;">下一步</a> --></div></form></div></div></div><!-- 公共底部 --><div class="xtx_footer clearfix"><div class="wrapper"><!-- 联系我们 --><div class="contact clearfix"><dl><dt>客户服务</dt><dd class="chat">在线客服</dd><dd class="feedback">问题反馈</dd></dl><dl><dt>关注我们</dt><dd class="weixin">公众号</dd><dd class="weibo">微博</dd></dl><dl><dt>下载APP</dt><dd class="qrcode"><img src="./uploads/qrcode.jpg"></dd><dd class="download"><span>扫描二维码</span><span>立马下载APP</span><a href="javascript:;">下载页面</a></dd></dl><dl><dt>服务热线</dt><dd class="hotline">400-0000-000<small>周一至周日 8:00-18:00</small></dd></dl></div></div><!-- 其它 --><div class="extra"><div class="wrapper"><!-- 口号 --><div class="slogan"><a href="javascript:;" class="price">价格亲民</a><a href="javascript:;" class="express">物流快捷</a><a href="javascript:;" class="quality">品质新鲜</a></div><!-- 版权信息 --><div class="copyright"><p><a href="javascript:;">关于我们</a><a href="javascript:;">帮助中心</a><a href="javascript:;">售后服务</a><a href="javascript:;">配送与验收</a><a href="javascript:;">商务合作</a><a href="javascript:;">搜索推荐</a><a href="javascript:;">友情链接</a></p><p>CopyRight © 小兔鲜儿</p></div></div></div></div><script>const code = document.querySelector('.code')let flag = truecode.addEventListener('click', function () {let i = 5if (flag) {flag = falsecode.innerHTML = `0${i}秒后重新获取`let timerId = setInterval(function () {i--code.innerHTML = `0${i}秒后重新获取`if (i === 0) {clearInterval(timerId)code.innerHTML = '重新获取'flag = true}}, 1000)}})// 用户名校验const username = document.querySelector('[name=username]')username.addEventListener('change', verifyName)function verifyName() {const regObj = /^[a-zA-Z0-9-_]{6,10}$/const match = regObj.test(username.value)const msgSpan = username.nextElementSiblingif (!match) {msgSpan.innerText = '请输入6~10位'return false}msgSpan.innerHTML = ''return true}// 手机号校验const phone = document.querySelector('[name=phone]')phone.addEventListener('change', verifyPhone)function verifyPhone() {const regObj = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/const match = regObj.test(phone.value)const msgSpan = phone.nextElementSiblingif (!match) {msgSpan.innerText = '请输入正确的手机号'return false}msgSpan.innerHTML = ''return true}// 验证码校验const codeInput = document.querySelector('[name=code]')codeInput.addEventListener('change', verifyCode)function verifyCode() {const regObj = /^\d{6}$/const match = regObj.test(codeInput.value)const msgSpan = codeInput.nextElementSiblingif (!match) {msgSpan.innerText = '请输入正确的验证码'return false}msgSpan.innerHTML = ''return true}// 密码验证const password = document.querySelector('[name=password]')password.addEventListener('change', verifyPassword)function verifyPassword() {const regObj = /^\d{6}$/const match = regObj.test(password.value)const msgSpan = password.nextElementSiblingif (!match) {msgSpan.innerText = '请输入正确的验证码'return false}msgSpan.innerHTML = ''return true}// 再次输入密码验证const confirm = document.querySelector('[name=confirm]')confirm.addEventListener('change', verifyPasswordAgain)function verifyPasswordAgain() {const msgSpan = confirm.nextElementSiblingif (confirm.value !== password.value) {msgSpan.innerText = '两次密码不一致'return false}msgSpan.innerHTML = ''return true}// 同意协议const agree = document.querySelector('.icon-queren')agree.addEventListener('click', function () {// toggle方法，有这个样式就去掉，没这个样式就加上this.classList.toggle('icon-queren2')})// 提交表单const form = document.querySelector('form')form.addEventListener('submit', function (e) {// 查看是否有勾选后的标签样式const agreeFlag = agree.classList.contains('icon-queren2')if (!agreeFlag) {alert('请先阅读并同意协议！')e.preventDefault()}// 判断输入框的输入是否都合法，这就是上面方法额外返回一个true或者false的作用if (!(verifyName() && verifyPhone() && verifyCode() && verifyPassword() && verifyPasswordAgain())) {e.preventDefault()}})</script>
</body></html>
2、案例：用户登陆页面
2.1 tab切换
点击切换账户登陆和二维码登陆：
F12看下html：黄色的两个盒子，显示哪个盒子，用display控制，且a标签中data-id的值，和其对应盒子在数组tabDiv中的序号一样
实现代码：
<script>// 两个tab是两个a标签，包在一个div里，那我用事件委托const tabNav = document.querySelector('.tab-nav')const tabDiv = document.querySelectorAll('.tab-pane')tabNav.addEventListener('click', function (e) {if (e.target.tagName === 'A') {// 取消上一个有active样式的，给另一个加tabNav.querySelector('.active').classList.remove('active')e.target.classList.add('active')}// 先把两个盒子都隐藏了for (let i = 0; i < tabDiv.length; i++) {tabDiv[i].style.display = 'none'}// a标签中data-id的值，和其对应盒子在数组tabDiv中的序号一样tabDiv[e.target.dataset.id].style.display = 'block'})
</script>
2.2 登陆跳转
需求：
- 检查是否同意协议，不同意不提交，用户名密码必填（html的required属性校验一下就行，不再像上面这么正式）
- 登陆成功，则记录用户名和密码到本地，并跳转到首页
<script>// 点击提交登陆表单const form = document.querySelector('form')// 是否同意协议的单选框const agree = document.querySelector('[name = agree]')const username = document.querySelector('[name = username]')const password = document.querySelector('[name = password]')form.addEventListener('submit', function (e) {e.preventDefault()if (!agree.checked) {alert('请勾选同意协议')return}// 记录用户名到本地存储localStorage.setItem('uname', username.value)// 跳转到首页location.href = './index.html'})
</script>
2.3 登陆成功与登出
需求：
- 从登录页面跳转过来之后，自动显示用户名
- 如果点击退出，则不显示用户名
F12找到要替换的地儿：
实现思路：
如上F12，如果本地存储有记录的用户名， 读取本地存储数据
- 需要把用户名写到 第一个li标签里面
格式: <a href="javascript:;"><i class="iconfont icon-user"> 用户001</i></a>
- 又因为登录了，所以第二个li 里面的文字免费注册变为，退出登录
格式: <a href="javascript:;">退出登录</a>
如果本地存储没有数据，则复原为默认的结构，最后，登出时，删除本地存储的用户名，并重新渲染页面，回到请先登陆的文字
<script>// 请先登陆文字，所在对象const li1 = document.querySelector('.xtx_navs li:first-child')// 免费注册文字，所在对象const li2 = li1.nextElementSibling// 渲染函数function render() {const username = localStorage.getItem('uname')if (username) {li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user">${username}</i></a>`li2.innerHTML = '<a href="javascript:;">退出登录</a>'} else {// 没读到用户名，还原li1.innerHTML = '<a href="./login.html">请先登录</a>'li2.innerHTML = '<a href="./register.html">免费注册</a>'}}render()// 退出登陆li2.addEventListener('click', function () {localStorage.removeItem('uname')render()})</script>
相关文章：
【JavaScript】二十七、用户注册、登陆、登出
文章目录 1、案例：用户注册页面1.1 发送验证码1.2 验证用户名密码合法性1.3 已阅读并同意用户协议1.4 表单提交 2、案例：用户登陆页面2.1 tab切换2.2 登陆跳转2.3 登陆成功与登出 1、案例：用户注册页面 1.1 发送验证码 需求：用户…...
Vue中Axios实战指南：高效网络请求的艺术
Axios作为Vue生态中最流行的HTTP客户端，以其简洁的API和强大的功能成为前后端交互的首选方案。本文将带你深入掌握Axios在Vue项目中的核心用法和高级技巧。 一、基础配置 1. 安装与引入 npm install axios 2. 全局挂载（main.js） import …...
SAP-pp 怎么通过底表的手段查找BOM的全部ECN变更历史
表：ABOMITEMS，查询条件是MAST的STLNR （BOM清单） 如果要得到一个物料的详细ECN历史，怎么办？ 先在MAST表查找BOM清单，然后根据BOM清单在ABOMITEMS表里面查询组件，根据查询组件的结果…...
数据需求管理办法有哪些？具体应如何应用？
目录 一、数据需求管理的定义 二、数据需求管理面临的问题 1.需求理解偏差 2.需求变更频繁 3.需求优先级难以确定 4.数据质量与需求不匹配 三、数据需求管理办法的具体流程 1.建立有效的沟通机制 2.规范需求变更管理流程 3.制定需求优先级评估标准 4.加强数据质量管…...
单片机 + 图像处理芯片 + TFT彩屏 复选框控件
复选框控件使用说明 一、控件概述 本复选框控件是一个适用于单片机图形界面的UI组件，基于单片机 RA8889/RA6809 TFT显示屏 GT911触摸屏开发。控件提供了丰富的功能和自定义选项，使用简单方便，易于移植。 主要特点： 支持可…...
塔能合作模式：解锁工厂能耗精准节能新路径
在工厂寻求能耗精准节能的道路上，除了先进的技术，合适的合作模式同样至关重要。塔能科技提供的能源合同管理（EMC）和交钥匙方式（EPC），为工厂节能项目的落地实施提供了有力支持，有效解…...
使用PHP对接印度股票市场数据
在本篇文章中，我们将介绍如何通过StockTV提供的API接口使用PHP语言来获取并处理印度股票市场的数据。我们将以查询公司信息、查看涨跌排行榜和实时接收数据为例，展示具体的操作流程。 准备工作 首先，请确保您已经从StockTV获得了API密钥&am…...
make学习三：书写规则
系列文章目录 Make学习一：make初探 Make学习二：makefile组成要素 文章目录 系列文章目录前言默认目标规则语法order-only prerequisites文件名中的通配符伪目标 Phony Targets没有 Prerequisites 和 recipe内建特殊目标名一个目标多条规则或多个目标共…...
Arduino 入门学习笔记（五）：KEY实验
Arduino 入门学习笔记（五）：KEY实验 开发板：正点原子ESP32S3 例程源码在文章顶部可免费下载（审核中…） 1. GPIO 输入功能使用 1.1 GPIO 输入模式介绍 在上一文章中提及到 pinMode 函数， 要对…...
Grok发布了Grok Studio 和 Workspaces两个强大的功能。该如何使用？如何使用Grok3 API？
最近Grok又更新了几个功能：Grok Studio 和 Workspaces。 其中 Grok Studio 主要功能包括： 代码执行：在预览标签中运行 HTML 片段、Python、JavaScript 等。 Google Drive 集成：附加并处理 Docs、Sheets、Slides等文件。 协作工…...
学习spark总结
一、Spark Core • 核心功能：基于内存计算的分布式计算框架，提供RDD弹性分布式数据集，支持转换（如map、filter）和动作（如collect、save）操作。 • 关键特性：高容错性（L…...
LeetCode 24 两两交换链表中的节点
给你一个链表，两两交换其中相邻的节点，并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题（即，只能进行节点交换）。 示例 1： 输入：head [1,2,3,4] 输出：[2,1…...
)
Qt中的全局函数讲解集合(全)
目录 1.qAbs 2.qAsConst 3.qBound 4.qConstOverload 5.qEnvironmentVariable 6.qExchange 7.qFloatDistance 8.qInstallMessageHandler 在头文件<QtGlobal>中包含了Qt的全局函数，现在就这些全局函数一一详解。 1.qAbs 原型： template &…...
《明解C语言入门篇》读书笔记四
目录 第四章：程序的循环控制 第一节：do语句 do语句 复合语句（程序块）中的声明 读取一定范围内的值 逻辑非运算符 德摩根定律 德摩根定律 求多个整数的和及平均值 复合赋值运算符 后置递增运算符和后置递减运算符 练习…...
)
【每日随笔】文化属性 ② ( 高维度信息处理 | 强者思维形成 | 认知重构 | 资源捕获 | 进化路径 )
文章目录 一、高维度信息处理1、" 道 " - 高维度信息2、上士对待 " 道 " 的态度3、中士对待 " 道 " 的态度4、下士对待 " 道 " 的态度 二、形成强者思维1、认知重构 : 质疑本能 -> 信任惯性2、资源捕获 : 远神崇拜 -> 近身模仿3…...
terraform查看资源建的关联关系
一、使用 terraform graph 命令生成依赖关系图 该命令会生成资源间的依赖关系图（DOT 格式），需配合 Graphviz 工具可视化。 1. 安装 Graphviz # Ubuntu/Debian sudo apt-get install graphviz# MacOS brew install graphviz 2. 生成并查看…...
win11报错 ‘wmic‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件 的解决方案
方法一：检查环境变量 右键点击“此电脑”或“计算机”: 选择“属性”，然后点击“高级系统设置”。 进入环境变量设置： 在“系统属性”窗口中，点击“环境变量”。 检查Path变量： 在“系统变量”部分，找到并…...
监控易一体化运维：巡检管理，守护企业系统稳定的坚固防线
在数字化浪潮奔涌的当下，企业业务高度依赖信息技术系统，数据流量呈爆发式增长。从日常办公到核心业务运作，每一个环节都离不开稳定可靠的系统支持。在这种背景下，确保系统时刻处于最佳状态的重要性。而监控易的巡检管理功能&#…...
技能点总结
技能点总结 1、多线程导致事物失效的原因1.1 线程间竞争条件1.2 可见性问题1.3 原子性破坏1.4 死锁与活锁1.5 事务隔离级别问题1.5.1 脏读、不可重复读、幻读 1、多线程导致事物失效的原因 多线程环境下事物失效是一个常见问题，主要原因包括以下几个方面࿱…...
23种设计模式-行为型模式之命令模式（Java版本）
Java 命令模式（Command Pattern）详解 🧠 什么是命令模式？ 命令模式是一种行为型设计模式，它将请求封装成一个对象，从而使你可以使用不同的请求、队列、日志请求以及支持可撤销的操作。 命令模式将请求的…...
聊一聊接口测试的核心优势及价值
目录 一、核心优势 提前发现问题，降低修复成本 高稳定性与维护效率 全面覆盖复杂场景 性能与安全测试的基石 高度自动化与高效执行 支持微服务与分布式架构 二、核心价值 加速交付周期及降低维护成本 提升质量与用户体验 增强安全性及促进团队间的协作 …...
大学之大：索邦大学2025.4.27
索邦大学：千年学术传承与现代创新的交响 一、前身历史：从巴黎大学到现代索邦的千年脉络 1. 中世纪起源：欧洲学术之母的诞生 索邦大学的历史可追溯至9世纪，其前身巴黎大学被誉为“欧洲大学之母”。1257年，神学家罗伯特…...
python文本合并脚本
做数据集本地化时，用到了文本txt合并问题，用了trae -cn ai辅助测试一下效果，还可以吧，但还是不如人灵光，反复的小错，如果与对成手，应该很简单，这里只做了测试吧，南无阿弥…...
Coding Practice，48天强训（25）
Topic 1：笨小猴(质数判断的几种优化方式，容器使用的取舍） 笨小猴__牛客网 #include <bits/stdc.h> using namespace std;bool isPrime(int n) {if(n < 1) return false;if(n < 3) return true; // 2和3是质数if(n % 2 0 …...
pytorch学习使用
1. 基础使用 1.1 基础信息 # 输出 torch 版本 print(torch.__version__)# 判断 cuda 是否可用 print(torch.cuda.is_available()) """ 2.7.0 False """1.2 创建tensor # 创建一个5*3的矩阵，初始值为0. print("-------- empty…...
《AI大模型应知应会100篇》第38篇：大模型与知识图谱结合的应用模式
第38篇：大模型与知识图谱结合的应用模式 摘要 随着大模型（如GPT、BERT等）和知识图谱技术的快速发展，两者的融合为构建更精准、可解释的智能系统提供了新的可能性。本文将深入探讨大模型与知识图谱的能力互补性、融合架构设计以及…...
TypeScript中的type
在 TypeScript 中，type 是一个非常重要的关键字，用于定义类型别名（Type Alias）。它允许你为一个类型创建一个新的名字，从而使代码更加简洁和可读。type 可以用来定义基本类型、联合类型、元组类型、对象类型等。以下是…...
数据库3，
describe dt drop table 删表 df delete from删行 usw update set where更新元素 iiv insert into values（）插入行 sf select from选行 select *选出所有行 （ob order by 排序 由低到高 DESC由高到低 order by score&#…...
I-CON: A Unifying Framework for Representation Learning
1，本文关键词 I-Con框架、表征学习、KL散度、无监督分类、对比学习、聚类、降维、信息几何、监督学习、自监督学习、统一框架 2，术语表 术语解释I-Con本文提出的统一表征学习方法，全称Information Contrastive Learning，通过最…...
mybatis首个创建相关步骤
1。先关联数据库，用户，密码，数据库保持一致 2.添加包和类 1.User放和数据库属性一样的 package com.it.springbootmybatis01.pojo;lombok.Data lombok.AllArgsConstructor lombok.NoArgsConstructor public class User {private Integer i…...
vue3子传父——v-model辅助值传递
title: 子组件向父组件传值 date: 2025-04-27 19:11:09 tags: vue3 vue3子传父——v-model辅助值传递 一、子组件发出 1.步骤一创建emit对象 这个对象使用的是defineEmits进行的创建，emit的中文意思又叫发出，你就把他当成一个发出数据的函数方法来用…...
Golang | 向倒排索引上添加删除文档
syntax "proto3";package types;message Keyword {string Field 1; // 属性/类型/名称string Word 2; // 关键词 }message Document {string Id 1; //业务使用的唯一Id，索引上此Id不会重复uint64 IntId 2; //倒排索引上使用的文档id(业务侧不用管这…...
秒杀系统 Kafka 架构进阶优化
文章目录 前言1. Kafka Topic 分区（Partition）设计2. Kafka 消费者高可用部署（Consumer Scaling）3. Kafka Redis 多级限流降级设计4. 秒杀链路全链路追踪（Tracing）5. Kafka 死信队列（DLQ&#…...
探索大语言模型（LLM）：自监督学习——从数据内在规律中解锁AI的“自学”密码
文章目录 自监督学习：从数据内在规律中解锁AI的“自学”密码一、自监督学习的技术内核：用数据“自问自答”1. 语言建模：预测下一个单词2. 掩码语言模型（MLM）：填补文本空缺3. 句子顺序预测（SOP&a…...
Java自定义注解详解
文章目录 一、注解基础注解的作用Java内置注解二、元注解@Retention@Target@Documented@Inherited@Repeatable（Java 8）三、创建自定义注解基本语法注解属性使用自定义注解四、注解的处理方式1. 编译时处理2. 运行时处理（反射）五、实际应用场景1. 依赖注入框架2. 单元测试框…...
在使用docker创建容器运行报错no main manifest attribute, in app.jar
原因就是在打包的时候pom配置有问题,重新配置再打包 我的dockerfile FROM openjdk:11 MAINTAINER yyf COPY *.jar /app.jar EXPOSE 8082 ENTRYPOINT ["java","-jar","app.jar"] 修改过后，经测试成功了 参考我的pom <?xml ver…...
C#中属性和字段的区别
在C# 中属性和字段的区别 在 C# 中，字段(field)和属性(property)都是用于存储数据的成员，但它们有重要的区别： 主要区别 1. 访问控制 - 字段：直接存储数据的变量 - 属性：通过访问器(get/set)控制对私有字段的…...
分析型数据库入门指南：如何选择适合你的实时分析工具？
一、什么是分析型数据库？为什么需要它？ 据Gartner最新报告显示，超过75%的企业现已在关键业务部门部署了专门的分析型数据库，这一比例还在持续增长。 随着数据量呈指数级增长，传统数据库已无法满足复杂分析场景的需求…...
第三方软件检测报告：热门办公软件评估及功能表现如何？
第三方软件检测报告是重要文件。它用于对软件做专业评估。能反映软件各项性能。能反映软件安全性等指标。该报告为软件使用者提供客观参考。该报告为软件开发者提供客观参考。有助于发现问题。还能推动软件改进。 检测概述 本次检测针对一款热门办公软件。采用了多种先进技术…...
GPUStack昇腾Atlas300I duo部署模型DeepSeek-R1【GPUStack实战篇2】
2025年4月25日GPUStack发布了v0.6版本，为昇腾芯片910B（1-4）和310P3内置了MinIE推理，新增了310P芯片的支持，很感兴趣，所以我马上来捣鼓玩玩看哈 官方文档：https://docs.gpustack.ai/latest/insta…...
2025年邵阳市工程技术研究中心申报流程、条件、奖补
一、邵阳市工程技术研究中心申报条件 （一）工程技术研究中心主要依托科技型企业组建，依托单位应具有以下条件： 1. 具有较强技术创新意识的领导班子和技术水平高、工程化实践经验丰富的工程技术研发队伍，其中固定人员…...
【Python】Matplotlib：立体永生花绘制
本文代码部分实现参考自CSDN博客：https://blog.csdn.net/ak_bingbing/article/details/135852038 一、引言 Matplotlib作为Python生态中最著名的可视化库，其三维绘图功能可以创造出令人惊叹的数学艺术。本文将通过一个独特的参数方程，结合极…...
Spark Streaming核心编程总结（四）
一、有状态转化操作：UpdateStateByKey 概念与作用 UpdateStateByKey 用于在流式计算中跨批次维护状态（如累加统计词频）。它允许基于键值对形式的DStream，通过自定义状态更新函数，将历史状态与新数据结合，生…...
虚拟数字人：从虚拟到现实的跨越与未来展望
在人工智能和数字技术飞速发展的今天，虚拟数字人（Digital Humans）正逐渐从科幻走向现实，成为科技领域的新焦点。虚拟数字人不仅在娱乐、教育、客服等领域展现出巨大的应用潜力，还在不断推动着人机交互方式的变革。本文…...
RuoYi-Vue项目Docker镜像构建、推送与部署完整流程
RuoYi-Vue项目Docker镜像构建、推送与部署流程 一、本地构建镜像 1. 使用docker-compose构建镜像 基于docker-compose.yml文件，可以一次构建所有服务镜像： # 构建所有服务 docker-compose build# 或者构建并启动 docker-compose up -d --build若只需…...
MyBatis DTD [Element type “if“ must be declared]
MyBatis DTD [Element type "if" must be declared] <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"&g…...
【项目实训个人博客】multi-agent调研（1）
随着LLM的涌现，以LLM为中枢构建的Agent系统在近期受到了广泛的关注。Agent系统旨在利用LLM的归纳推理能力，通过为不同的Agent分配角色与任务信息，并配备相应的工具插件，从而完成复杂的任务。 目前更常见的框架大多聚焦于single-ag…...
OpenSSH配置连接远程服务器MS ODBC驱动与Navicat数据库管理
OpenSSH配置连接远程服务器MS ODBC驱动与Navicat数据库管理 目录 OpenSSH配置连接远程服务器MS ODBC驱动与Navicat数据库管理 一、MS ODBC驱动 1.1、安装到Windows后的表现形式 1.2、版本的互斥性 1.3、安装程序 1.4、配置后才可用 二、Navicat数据库管理工具 2.1、安…...
——LeetCode234.回文链表141.环形链表)
Day14(链表)——LeetCode234.回文链表141.环形链表
1前言 这几天脑子真转不动，本想刷点简单题养养脑子，结果发现简单题也想不到，只是看答案好理解了。。。 2 LeetCode234.回文链表(LeetCode234) 2.1 题目描述 即判断链表是否为回文链表，回文链表即链表的数值正向遍历与反向遍历结…...
Centos 7.6安装redis-6.2.6
1. 安装依赖 确保系统已经安装了必要的编译工具和库： sudo yum groupinstall "Development Tools" -y sudo yum install gcc make tcl -y 2. 解压 Redis 源码包 进入 /usr/local/ 目录并解压 redis-6.2.6.tar.gz 文件： cd /usr/local/ sudo ta…...