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

个人网站:基于html、css、js网页开发界面

1、注册

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title><link rel="stylesheet" href="rehisterstyle.css"><script type="text/javascript">// 校验用户名function checkUsername() {var username = document.getElementById("username").value;var span = document.getElementById("usernameSpan");var reg = /^[\u4e00-\u9fa5]{2,4}$/;// 2 - 4位汉字if (username === "" || username === null) {span.innerHTML = "用户名不能为空";span.style.color = "red";return false;} else if (reg.test(username)) {span.innerHTML = "用户名OK";span.style.color = "green";return true;} else {span.innerHTML = "用户名必须是2 - 4位汉字";span.style.color = "red";return false;}}// 校验密码function checkPassword() {var password = document.getElementById("password").value;var span = document.getElementById("passwordSpan");var reg = /^[a-zA-Z][a-zA-Z0-9]{5,7}$/;// 字母开头,6 - 8位字符if (password === "" || password === null) {span.innerHTML = "密码不能为空";span.style.color = "red";return false;} else if (reg.test(password)) {span.innerHTML = "密码OK";span.style.color = "green";return true;} else {span.innerHTML = "密码必须字母开头,6 - 8位字符";span.style.color = "red";return false;}}// 校验确认密码function checkConfirmPassword() {var password = document.getElementById("password").value;var confirmPassword = document.getElementById("confirmPassword").value;var span = document.getElementById("confirmPasswordSpan");if (confirmPassword === "" || confirmPassword === null) {span.innerHTML = "确认密码不能为空";span.style.color = "red";return false;} else if (password!== confirmPassword) {span.innerHTML = "两次输入的密码不一致";span.style.color = "red";return false;} else {span.innerHTML = "密码一致";span.style.color = "green";return true;}}// 校验性别选择function checkGender() {var gender = document.querySelector('input[name="gender"]:checked');var span = document.getElementById("genderSpan");if (!gender) {span.innerHTML = "请选择性别";span.style.color = "red";return false;} else {span.innerHTML = "";return true;}}// 校验兴趣选择function checkInterests() {var interests = document.querySelectorAll('input[name="interests"]:checked');var span = document.getElementById("interestsSpan");if (interests.length === 0) {span.innerHTML = "请至少选择一个兴趣";span.style.color = "red";return false;} else {span.innerHTML = "";return true;}}// 校验职业选择function checkOccupation() {var occupation = document.getElementById("occupation").value;var span = document.getElementById("occupationSpan");if (occupation === "") {span.innerHTML = "请选择职业";span.style.color = "red";return false;} else {span.innerHTML = "";return true;}}function checkRegister() {console.log("checkRegister called");var isUsernameValid = checkUsername();var isPasswordValid = checkPassword();var isConfirmPasswordValid = checkConfirmPassword();var isGenderValid = checkGender();var isInterestsValid = checkInterests();var isOccupationValid = checkOccupation();if (isUsernameValid && isPasswordValid && isConfirmPasswordValid && isGenderValid && isInterestsValid && isOccupationValid) {console.log("Validation passed, redirecting to login page");alert("注册成功!");window.location.href = "login.html";// 跳转到登录页面return false;// 阻止表单默认提交行为} else {console.log("Validation failed");alert("请检查表单内容!");return false;}}window.addEventListener('load', function () {var agreeCheckbox = document.getElementById('agreeCheckbox');var registerButton = document.querySelector('button[type="submit"]');agreeCheckbox.addEventListener('change', function () {if (this.checked) {registerButton.disabled = false;} else {registerButton.disabled = true;}});// 初始状态下禁用注册按钮registerButton.disabled = true;});</script>
</head><body><div class="container"><h2 align="center">注册</h2><form action="#" method="get" onsubmit="return checkRegister()"><table><tr><td>用户名:</td><td><input type="text" id="username" name="username" onblur="checkUsername()" /><span id="usernameSpan">*2 - 4位汉字</span></td></tr><tr><td>密码:</td><td><input type="password" id="password" name="password" onblur="checkPassword()" /><span id="passwordSpan">*字母开头,6 - 8位字符</span></td></tr><tr><td>确认密码:</td><td><input type="password" id="confirmPassword" name="confirmPassword" onblur="checkConfirmPassword()" /><span id="confirmPasswordSpan">*请再次输入密码</span></td></tr><tr><td>性别:</td><td><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label><span id="genderSpan"></span></td></tr><tr><td>兴趣爱好:</td><td><input type="checkbox" id="reading" name="interests" value="reading"><label for="reading">阅读</label><input type="checkbox" id="sports" name="interests" value="sports"><label for="sports">运动</label><input type="checkbox" id="music" name="interests" value="music"><label for="music">音乐</label><span id="interestsSpan"></span></td></tr><tr><td>职业:</td><td><select id="occupation" name="occupation"><option value="">请选择</option><option value="student">学生</option><option value="teacher">教师</option><option value="engineer">工程师</option></select><span id="occupationSpan"></span></td></tr><tr><td colspan="2"><input type="checkbox" id="agreeCheckbox"> 我同意相关信息</td></tr><tr><td colspan="2" align="center"><button type="submit">注册</button></td></tr></table></form><p align="center" style="color: white">已有账号?<a href="login.html" style="color: white">登录</a></p></div>
</body></html>

2、登录

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录页面</title><link rel="stylesheet" href="loginstyle.css"><script type="text/javascript">// 校验用户名function checkUsername() {var username = document.getElementById("username").value;var span = document.getElementById("usernameSpan");var reg = /^[\u4e00-\u9fa5]{2,4}$/; // 2-4位汉字if (username == "" || username == null) {span.innerHTML = "用户名不能为空";span.style.color = "red";return false;} else if (reg.test(username)) {span.innerHTML = "用户名OK";span.style.color = "green";return true;} else {span.innerHTML = "用户名必须是2-4位汉字";span.style.color = "red";return false;}}// 校验密码function checkPassword() {var password = document.getElementById("password").value;var span = document.getElementById("passwordSpan");var reg = /^[a-zA-Z][a-zA-Z0-9]{5,7}$/; // 字母开头,6-8位字符if (password == "" || password == null) {span.innerHTML = "密码不能为空";span.style.color = "red";return false;} else if (reg.test(password)) {span.innerHTML = "密码OK";span.style.color = "green";return true;} else {span.innerHTML = "密码必须字母开头,6-8位字符";span.style.color = "red";return false;}}function checkLogin() {console.log("checkLogin called");var isUsernameValid = checkUsername();var isPasswordValid = checkPassword();if (isUsernameValid && isPasswordValid) {console.log("Validation passed, submitting the form");alert("登录成功!");document.forms[0].submit(); // 提交表单return true;} else {console.log("Validation failed");alert("请检查表单内容!");return false;}}</script>
</head><body><div class="container"><h2 align="center">登录</h2><form action="index.html" method="get" onsubmit="return checkLogin()"><table><tr><td>用户名:</td><td><input type="text" id="username" name="username" onblur="checkUsername()" /><span id="usernameSpan">*2-4位汉字</span></td></tr><tr><td>密码:</td><td><input type="password" id="password" name="password" onblur="checkPassword()" /><span id="passwordSpan">*字母开头,6-8位字符</span></td></tr><tr><td colspan="2" align="center"><button type="submit">登录</button></td></tr></table></form><p align="center" style="color: white">没有账号?<a href="register.html" style="color: white">注册</a></p></div>
</body></html>

3、主界面

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>主界面</title><link rel="stylesheet" href="styles.css">
</head><body><!-- 添加标题 --><h1 class="title">个人网站</h1><!-- 新增用于显示头像和昵称的 span --><span class="avatar-nickname"><!-- 头像图片,需要替换为实际的图片路径 --><img src="img/个人简介.jpg" alt="头像" class="avatar"><!-- 昵称,可根据实际情况修改 --><span class="nickname">尹依婷</span></span><div class="container1"><div class="box"><h2>个人简历</h2><p></p><img src="img/个人简介.jpg" height="170px" width="140px" /><br><br><br><br><br><!-- 修正此处多了一个双引号的问题 --><a href="resume.html">查看详情</a></div><div class="box"><h2>我的理想</h2><p></p><img src="img/picture02.jpg" height="170px" width="140px" /><br><br><br><br><br><!-- 修正此处多了一个双引号的问题 --><a href="dream.html">查看详情</a></div><div class="box"><h2>我的生活</h2><p></p><img src="img/我的生活.jpg" height="170px" width="140px" /><br><br><br><br><br><a href="life.html">查看详情</a></div><div class="box"><h2>学习内容</h2><p></p><img src="img/我的书籍.jpg" height="170px" width="140px" /><br><br><br><br><br><a href="study.html">查看详情</a></div></div><div class="link-container"><a href="login.html">退出登录</a></div>
</body></html>

4、个人简介界面

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简介</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1 class="title">个人简介</h1><!-- 新增用于显示头像和昵称的 span --><span class="avatar-nickname"><!-- 头像图片,需要替换为实际的图片路径 --><img src="img/个人简介.jpg" alt="头像" class="avatar"><!-- 昵称,可根据实际情况修改 --><span class="nickname">依依</span></span><div class="container1"><div class="box1"><h2 class="title1">个人信息</h2><ul><p></p><li>姓名:婷婷</li><p></p><li>出生年月:2005.03.06</li><p></p><li>学历:本科</li><p></p><li>民族:汉</li></ul></div><div class="box1"><h2 class="title1">联系方式</h2><ul><p></p><li>qq:2382275991</li><p></p><li>电话:19151822256</li><p></p><li>微信:19151822256</li><p></p><li>地址:中南林业科技大学</li><p></p><li>毕业学校:中南林业科技大学</li></ul></div><div class="box1"><h2 class="title1">兴趣爱好</h2><p></p><p>喜欢听音乐、学习、画画、看小说、追剧、动漫</p></div><div class="box1"><h2 class="title1">特殊技能</h2><p></p><p>会C/C++、java语言、sql</p></div></div><div class="link-container"><a href="index.html">返回主界面</a></div>
</body>
</html>

5、我的梦想界面

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的理想</title><link rel="stylesheet" href="styles.css">
</head>
<body><body><h1 class="title">我的理想</h1><!-- 新增用于显示头像和昵称的 span --><span class="avatar-nickname"><!-- 头像图片,需要替换为实际的图片路径 --><img src="img/个人简介.jpg" alt="头像" class="avatar"><!-- 昵称,可根据实际情况修改 --><span class="nickname">尹依婷</span></span><div class="container1"><div class="box1"><h2 class="title1">职业理想</h2><ul><li>成为一名优秀的软件工程师。</li><li>创办一家科技公司,推动技术创新。</li><li>参与开源项目,为社区贡献力量。</li><li>成为一名技术导师,帮助更多人学习编程。</li></ul></div><div class="box1"><h2 class="title1">生活理想</h2><ul><li>环游世界,体验不同的文化和风景。</li><li>拥有一个温馨的家庭,享受平凡的生活。</li><li>保持健康的生活方式,坚持锻炼和阅读。</li><li>学习一门乐器,丰富自己的精神世界。</li></ul></div><div class="box1"><h2 class="title1">学习理想</h2><ul><li>掌握多门编程语言,成为全栈开发者。</li><li>学习人工智能和机器学习,探索未来科技。</li><li>提升英语水平,能够流利地与外国人交流。</li><li>阅读100本经典书籍,拓宽知识面。</li></ul></div><div class="box1"><h2 class="title1">社会理想</h2><ul><li>帮助贫困地区的孩子获得教育机会。</li><li>参与环保活动,为保护地球贡献力量。</li><li>推动社会公平,关注弱势群体的权益。</li><li>成为一名志愿者,积极参与公益活动。</li></ul></div></div><div class="link-container"><a href="index.html">返回主界面</a></div></body></html>

6、我的生活界面

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的生活</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1 class="title">我的生活</h1><p></p><!-- 新增用于显示头像和昵称的 span --><span class="avatar-nickname"><!-- 头像图片,需要替换为实际的图片路径 --><img src="img/个人简介.jpg" alt="头像" class="avatar"><!-- 昵称,可根据实际情况修改 --><span class="nickname">尹依婷</span></span><div class="container1"><div class="box2"><h2 class="title1">吃饭</h2><img class="img" src="img/吃饭1.jpg" alt=""/></div><div class="box2"><h2 class="title1">运动</h2><img class="img" src="img/运动.jpg" alt=""/></div><div class="box2"><h2 class="title1">志愿</h2><img class="img" src="img/志愿.jpg " alt=""/></div><div class="box2"><h2 class="title1">旅游</h2><img class="img" src="img/旅行.jpg" alt=""/></div></div><div class="link-container"><a href="index.html">返回主界面</a></div>
</body>
</html>

7、我的学习界面

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的学习</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1 class="title">我的学习</h1><!-- 新增用于显示头像和昵称的 span --><span class="avatar-nickname"><!-- 头像图片,需要替换为实际的图片路径 --><img src="img/个人简介.jpg" alt="头像" class="avatar"><!-- 昵称,可根据实际情况修改 --><span class="nickname">尹依婷</span></span><div class="container1"><div class="box1"><h2 class="title1">编程学习</h2><ol><li>HTML/CSS:掌握网页开发基础。</li><li>JavaScript:学习前端交互逻辑。</li><li>Python:掌握数据分析与人工智能。</li><li>Java:深入学习后端开发。</li></ol></div><div class="box1"><h2 class="title1">设计学习</h2><ol><li>UI/UX设计:学习用户界面与用户体验设计。</li><li>Photoshop:掌握图像处理技巧。</li><li>Figma:学习原型设计与团队协作。</li><li>Illustrator:掌握矢量图形设计。</li></ol></div><div class="box1"><h2 class="title1">语言学习</h2><ol><li>英语:提升听说读写能力。</li><li>日语:学习基础语法与词汇。</li><li>法语:掌握基础会话与写作。</li><li>西班牙语:了解基础语法与文化。</li></ol></div><div class="box1"><h2 class="title1">其他技能</h2><ol><li>项目管理:学习敏捷开发与团队协作。</li><li>数据分析:掌握Excel与SQL。</li><li>写作:提升技术文档与博客写作能力。</li><li>演讲:学习公开演讲与表达技巧。</li></ol></div></div><div class="link-container"><a href="index.html">返回主界面</a></div></body></html>

8、CSS格式

        /* 设置背景图片 */body {background-color: gray;background-image: url(img/d.jpg);background-size: cover; /* 使背景图片覆盖整个背景区域 */background-position: center; /* 将背景图片居中 */background-repeat: no-repeat; /* 防止背景图片重复 */font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;min-height: 100vh;margin: 0;}/* 设置容器样式 */.container {border-radius: 10px;width: 500px;padding: 20px;background-image: url(img/个人网站.jpg);background-size: cover;background-position: center;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}/* 设置表格样式 */table {margin: auto;color: black;}/* 设置输入框样式 */input[type="text"],input[type="password"],select,textarea {width: 100%;padding: 8px;margin: 5px 0;border: 1px solid #ccc;border-radius: 4px;}/* 设置按钮样式 */button {width: 60%;padding: 10px;background-color: deepskyblue;color: white;border: none;border-radius: 4px;cursor: pointer;}button:disabled {background-color: #ccc;cursor: not-allowed;}/* 设置提示信息样式 */span {font-size: 13px;color: red;}/* 设置密码格式提示样式 */#passwordSpan {color: gray;/* 初始提示文字颜色 */}

9、相关页面展示

相关文章:

个人网站:基于html、css、js网页开发界面

1、注册 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>注册页面</title><link rel&qu…...

嵌入式图像采集与显示系统实战详解:基于V4L2与Framebuffer的实现

在嵌入式Linux开发中&#xff0c;图像采集与显示是非常典型的一类应用场景。本文将基于 ARM9&#xff08;S3C2410&#xff09; 平台&#xff0c;深入讲解如何使用 V4L2 框架从 USB 摄像头采集图像数据&#xff0c;并通过 Framebuffer 接口实时显示到 LCD 屏幕。内容涵盖驱动架构…...

庙算兵棋推演AI开发初探(6-神经网络开发)

碎碎念&#xff1a; 老师让我和同学组队参加10月底截止报名的庙算比赛&#xff0c;我俩走运进了64强&#xff0c;打的过程中发现了一个重要问题——为什么别人总能打我&#xff0c;但是我都看不见&#xff01;就像玩dota被对面英雄莫名其妙单杀了但是他就一直隐身我都不知道怎…...

嵌入式硬件篇---嘉立创PCB绘制

文章目录 前言一、PCB绘制简介1.1绘制步骤1.1.1前期准备1.1.2原理图设计1.1.3原理图转PCB1.1.4PCB布局1.1.5布线1.1.6布线优化和丝印1.1.7制版 1.2原理1.2.1电气连接原理1.2.2信号传输原理1.2.3电源和接地原理 1.3注意事项1.3.1元件封装1.3.2布局规则1.3.3过孔设计1.3.4DRC检查…...

AI与.NET技术实操系列(四):使用 Semantic Kernel 和 DeepSeek 构建AI应用

1. 引言 在人工智能技术飞速发展的今天&#xff0c;大型语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为智能应用开发的核心驱动力。从智能客服到自动化内容生成&#xff0c;LLMs的应用正在深刻改变我们的工作和生活方式。 对于.NET开发者而言&#xff0c;…...

Vue 组件 - Slot 内容分发

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件 - Slot 内容分发 目录 Slot内容分发 旧版slot 单插槽 使用插槽 具名插槽 插槽实现导航 使用插槽优点 新版slot Or 插槽版抽屉 总结 Slot内容分发 混合父组件的内容和子组件自己模板 -- 内容分发 父组件模…...

Mysql之事务(下)

&#x1f3dd;️专栏&#xff1a;Mysql_猫咪-9527的博客-CSDN博客 &#x1f305;主页&#xff1a;猫咪-9527-CSDN博客 “欲穷千里目&#xff0c;更上一层楼。会当凌绝顶&#xff0c;一览众山小。” 目录 5. 事务的隔离级别与并发控制 5.1事务的隔离级别 5.2查看与设置事务的…...

LabVIEW液压控制系统开发要点

液压控制系统开发需兼顾高实时性、强抗干扰性和安全性&#xff0c;尤其在重工业场景中&#xff0c;毫秒级响应延迟或数据异常都可能导致设备损坏。本文以某钢厂液压升降平台项目为例&#xff0c;从硬件选型、控制算法、安全机制三方面&#xff0c;详解LabVIEW开发中的关键问题与…...

mybatis-genertor(代码生成)源码及扩展笔记

文章目录 生成过程MyBatisGenerator.generate()代码入口 pid0,id0context.generateFiles()代码 pid0,id1introspectedTable.getGeneratedJavaFiles() java部分生成 pid1,id11introspectedTable.getGeneratedXmlFiles() xml部分生成 pid1,id12这里是一波三连调用XMLMapperGenera…...

Mysql-数据库、安装、登录

一. 数据库 1. 数据库&#xff1a;DataBase&#xff08;DB&#xff09;&#xff0c;是存储和管理数据的仓库。 2. 数据库管理系统&#xff1a;DataBase Management System&#xff08;DBMS&#xff09;,操纵管理数据库的大型软件 3. SQL&#xff1a;Structured Query Language&…...

HTTP 请求方法

HTTP 请求方法 引言 HTTP(超文本传输协议)是互联网上应用最为广泛的网络协议之一。它定义了客户端与服务器之间通信的规则。HTTP请求方法,也称为HTTP动词,是客户端向服务器发送请求时使用的操作类型。本文将详细介绍HTTP请求方法的概念、分类、常用方法及其在实际应用中的…...

群体智能优化算法-算术优化算法(Arithmetic Optimization Algorithm, AOA,含Matlab源代码)

摘要 算术优化算法&#xff08;Arithmetic Optimization Algorithm, AOA&#xff09;是一种新颖的群体智能优化算法&#xff0c;灵感来源于加、减、乘、除四种基本算术运算。在优化过程中&#xff0c;AOA 通过乘除操作实现全局探索&#xff0c;通过加减操作强化局部开发&#…...

4.1-python操作wrod/pdf 文件

1.读取word文件 首先安装软件包 pip3 install python-docx from docx import Documentimport os path os.path.join(os.getcwd(),你的文档名字.docx)# 加载文档 doc Document(path)# 遍历数据 for p in doc.paragraphs:print(p.text)# 遍历文档中所有表格 for t in doc.t…...

C# 窗体应用(.FET Framework) 线程操作方法

一、Thread线程使用方法 初始化方法 Thread th1; th1 new Thread(方法名); th1.IsBackground true; th1.Start();传参 ///定义一个object接受参数的方法 private void Test(object n){string str1 n as string; MessageBox.Show(str1); }// 调用方法 Thread th2 string s…...

vscode/cursor编辑器中vue3文件里面的css不能注释解决办法

升级了cursor后发现css或者html里面的代码不能单行注释了&#xff0c;真的很烦人&#xff0c;找了很多解决办法&#xff0c;还是定位到插件上&#xff0c;有一个vue的插件&#xff0c;把它禁用掉就可以注释了&#xff0c;然后再把这个插件启用&#xff0c;就可以使用了&#xf…...

Jenkins详细安装配置部署

Jenkins是一款流行的开源持续集成/持续交付(CI/CD)工具&#xff0c;可以实现自动化构建、测试和部署软件。下面是Jenkins的详细安装、配置和部署过程。 安装Jenkins 1. 安装Java Jenkins运行需要Java环境&#xff0c;因此需要先安装Java。具体安装方式根据不同的操作系统有所…...

《Linux运维总结:基于银河麒麟V10+ARM64架构CPU源码编译部署单实例redis7.2.6》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;《Linux运维篇&#xff1a;Linux系统运维指南》 一、环境信息 环境信息如下&#xff1a; 主机IP 操作系统 Redis版本 CPU架构 192.168.1.111 K…...

音视频开发---常用工具

一、VLC播放器 1. 简介 VLC多媒体播放器(最初命名为VideoLAN客户端)是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘、VCD影音光盘和各类流式协议。它也能作为unicast或multicast的流式服务器在IPv4或IPv6的高速连接下使用。 它融…...

Java 大视界 -- 基于 Java 的大数据分布式计算在基因测序数据分析中的性能优化(161)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

关于跨域与.NET的处理方案

在 Web 开发里&#xff0c;浏览器的同源策略是一项关键的安全机制。同源指的是两个 URL 的协议、域名和端口都相同。当浏览器从一个源&#xff08;域名、协议、端口&#xff09;的网页去请求另一个源的资源时&#xff0c;就会产生跨域问题。例如&#xff0c;从 http://www.exam…...

中级:Maven面试题精讲

一、引言 在Java开发中&#xff0c;Maven作为一款强大的项目管理和构建工具&#xff0c;被广泛应用于项目构建、依赖管理和插件机制等方面。面试官通过相关问题考察候选人对Maven核心功能的理解和实际应用能力&#xff0c;以及在复杂项目场景下合理配置和优化Maven的能力。本文…...

MySQL与Redis数据一致性保障方案详解

前言 在现代分布式系统中&#xff0c;MySQL和Redis的结合使用非常普遍。MySQL作为关系型数据库负责持久化存储&#xff0c;而Redis则作为高性能缓存层提升系统的响应速度。然而&#xff0c;在这种架构下&#xff0c;如何保证MySQL与Redis之间的数据一致性是一个重要的挑战。本…...

外观模式详解

以下是一个结合外观模式解决实际开发问题的Java实现案例&#xff0c;涵盖复杂系统整合、接口简化、版本兼容等场景需求&#xff0c;附带逐行中文注释&#xff1a; 场景描述 开发一个智能家居控制系统&#xff0c;需整合多个子系统&#xff1a; 灯光系统&#xff1a;多房间灯光…...

JavaScript单例模式

单例模式保证一个类仅有一个实例&#xff0c;并提供一个访问它的全局访问点。 用一个变量来标志是否创建过对象&#xff0c;如果是&#xff0c;则在下次直接返回这个已经创建好的对象&#xff0c;示例代码如下&#xff1a; 单例模式的核心思想是让指定的类只存在唯一一个实例&…...

Kong网关研究

目录 概述 部署kong docker服务 kong初始化与启动 验证 部署konga 网关功能 JWT认证 若依的鉴权认证 kong的JWT支持 限流 黑名单 概述 Kong网关基于OpenResty&#xff0c;而OpenResty基于Nginx&#xff0c;Nginx本身是性能强大的方向代理与web容器&#xff0c;Ope…...

LangChain 结构化输出:用 Pydantic + PydanticOutputParser 驯服 LLM 的“自由发挥”

目录 一、Pydantic 二、PydanticOutputParser 1、为什么需要 PydanticOutputParser&#xff1f; 2、Pydantic和PydanticOutputParser核心区别 3、Pydantic的不足 &#xff08;1&#xff09;无法直接解析非结构化文本 &#xff08;2&#xff09;缺乏对 LLM 输出的适配性 …...

source(WEB)

##解题思路 首先打开kali&#xff0c;使用dirsearch扫描下网站目录&#xff0c;发现网站有.git源码泄露 dirsearch -u URL 接着使用wget将源码下载到本地&#xff08;尝试过使用githack&#xff0c;但是得到的信息是flag不在这&#xff09; wget -r URL/.git/ 接着cd到wget的…...

【蓝桥杯】单片机设计与开发,温度传感器DS18B20

一、温度传感器概述 结构图 二、通信过程 三、onewire单总线协议概述 四、单总线的工作原理 黑粗线是单片机发送的&#xff0c;浅的是s18b20回应的 五、温度传感器的应用 六、onewire 七、课后习题...

trae.ai 编辑器:前端开发者的智能效率革命

一、为什么我们需要更智能的编辑器&#xff1f; 作为从业5年的前端开发者&#xff0c;我使用过从Sublime到VSCode的各种编辑器。但随着现代前端技术的复杂度爆炸式增长&#xff08;想想一个React组件可能涉及JSX、CSS-in-JS、TypeScript和GraphQL&#xff09;&#xff0c;传统…...

【FPGA实战】基于DE2-115实现数字秒表

【FPGA实战】基于DE2-115实现数字秒表 一、项目概述二、层次化设计架构三、核心模块实现原理1. 时钟分频模块(clock_divider.v)2. 按键处理模块2.1 消抖(debounce .v)2.2 边沿检测(edge_detector .v) 3. 时间计数模块(time_counter .v)4. 显示驱动模块(seven_seg_display.v)5.顶…...

动态规划入门:从记忆化搜索到递推

本篇笔记基于b站灵茶山艾府。 198. 打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统…...

Linux 入门:基础开发工具(上)vim,gcc/g++,make/makefile

目录 一.软件包管理器 一&#xff09;.软件包 二&#xff09;.安装软件 三&#xff09;.删除软件 二.编辑器vim 一&#xff09;.vim的基本介绍 1.正常/普通/命令模式(Normal mode) 2.插入模式(Insert mode) 3.底行模式(last line mode) 二&#xff09;.vim的基本操作 …...

golang 的channel

理解 Go 语言的 Channel Channel 是 Go 语言中用于 goroutine 之间通信和同步的重要机制。通过 channel&#xff0c;goroutine 可以安全地交换数据&#xff0c;避免了共享内存带来的竞态条件和内存一致性问题。 1. Channel 的基本概念 Channel 是一个先进先出&#xff08;FI…...

HarmonyOS Next~鸿蒙元服务开发指南:核心功能与实践

HarmonyOS Next&#xff5e;鸿蒙元服务开发指南&#xff1a;核心功能与实践 一、元服务核心概念 原子化服务定义 元服务&#xff08;原子服务&#xff09;是鸿蒙系统的核心架构单元&#xff0c;具备独立业务能力的轻量化服务模块&#xff0c;支持免安装、跨设备调用和智能分发…...

stm32面试

数据结构相关问题 stm32面试 数据结构相关问题 目录基础数据结构树与图排序与查找算法 Linux相关问题Linux系统基础Linux命令与脚本Linux网络与服务 操作系统相关问题操作系统基础概念操作系统调度算法操作系统同步与通信 STM32相关问题STM32硬件基础STM32编程与开发STM32应用与…...

构建大语言模型应用:句子转换器(Sentence Transformers)(第三部分)

本系列文章目录 简介数据准备句子转换器&#xff08;本文&#xff09;向量数据库搜索与检索大语言模型开源检索增强生成评估大语言模型服务高级检索增强生成 RAG 在之前的博客中&#xff0c;我们学习了为RAG&#xff08;检索增强生成&#xff0c;Retrieval Augmented Generati…...

新能源汽车空调系统(R134A)性能评估(一)

国内外主流空调系统厂家&#xff1a;贝尔、德尔福、空调国际、法雷奥、电装、松芝、杰信、新电、豫新等 泛亚汽车的空调电子部是比较优秀的整车空调研发团队。 空调系统综合试验台架是一套由试验室、风量测定装置、空气调和器、空气温度测定装置、湿度测定装置、加热器试验辅助…...

STRUCTBERT:将语言结构融入预训练以提升深度语言理解

【摘要】最近&#xff0c;预训练语言模型BERT&#xff08;及其经过稳健优化的版本RoBERTa&#xff09;在自然语言理解&#xff08;NLU&#xff09;领域引起了广泛关注&#xff0c;并在情感分类、自然语言推理、语义文本相似度和问答等各种NLU任务中达到了最先进的准确率。受到E…...

MCP协议的Streamable HTTP:革新数据传输的未来

引言 在数字化时代&#xff0c;数据传输的效率和稳定性是推动技术进步的关键。MCP&#xff08;Model Context Protocol&#xff09;作为AI生态系统中的重要一环&#xff0c;通过引入Streamable HTTP传输机制&#xff0c;为数据交互带来了革命性的变化。本文将深入解读MCP协议的…...

基于 RK3588 的 YOLO 多线程推理多级硬件加速引擎框架设计(代码框架和实现细节)

一、前言 接续上一篇文章&#xff0c;这个部分主要分析代码框架的实现细节和设计理念。 基于RK3588的YOLO多线程推理多级硬件加速引擎框架设计&#xff08;项目总览和加速效果&#xff09;-CSDN博客https://blog.csdn.net/plmm__/article/details/146542002?spm1001.2014.300…...

stm32 can 遥控帧的问题

STM32单片机使用CAN协议进行通信 引用这个博客的一段话 CAN的遥控帧&#xff08;Remote Frame&#xff09;的主要作用是请求其他节点发送具 有特定ID的数据帧。具体来说&#xff0c;当一个节点需要从另一个节点获取数 据时&#xff0c;它可以发送一个遥控帧&#xff0c;而不是…...

机器人基础知识-1

1.六轴机器人中的六轴是什么&#xff1f; 第一轴&#xff08;J1&#xff09;&#xff1a;底座旋转 控制机器人整体绕垂直轴旋转&#xff08;左右摆动&#xff09;&#xff0c;决定工作范围的水平方向。 第二轴&#xff08;J2&#xff09;&#xff1a;下臂前后摆动 驱动机器人的…...

JAVA- 锁机制介绍 进程锁

进程锁 基于文件的锁基于Socket的锁数据库锁分布式锁基于Redis的分布式锁基于ZooKeeper的分布式锁 实际工作中都是集群部署&#xff0c;通过负载均衡多台服务器工作&#xff0c;所以存在多个进程并发执行情况&#xff0c;而在每台服务器中又存在多个线程并发的情况&#xff0c;…...

如何在WordPress中强制用户使用强密码?

在如今网络安全备受关注的环境下&#xff0c;弱密码问题不容忽视。很多用户习惯在多个网站使用相同且简单的密码&#xff0c;这样一来&#xff0c;若不强制他们在 WordPress 网站上使用强密码&#xff0c;网站的安全性就会受到威胁。尤其对于在线商店、会员网站、多作者博客等站…...

鸿蒙NEXT开发Base64工具类(ArkTs)

import util from ohos.util;/*** Base64 工具类* author: 鸿蒙布道师* since: 2025/03/31*/ export class Base64Util {/*** 创建 Base64Helper 实例* returns Base64Helper 实例*/private static createBase64Helper(): util.Base64Helper {return new util.Base64Helper();}…...

基于HUTOOL实现RSA工具类

一、前言&#xff1a;用 Hutool 简化 RSA 加密开发&#xff0c;提升代码安全与效率 在当今数据安全至关重要的时代&#xff0c;RSA 非对称加密作为保护敏感信息的核心技术&#xff0c;广泛应用于通信加密、数字签名、密钥交换等场景。然而&#xff0c;手动实现 RSA 算法涉及复…...

flink 分组窗口聚合 与 窗口表值函数聚合 的区别

警告&#xff1a;分组窗口聚合已经过时。推荐使用更加强大和有效的窗口表值函数聚合。 参考官方文档 在 Apache Flink 中&#xff0c;分组窗口聚合&#xff08;Group Window Aggregation&#xff09; 和 窗口表值函数聚合&#xff08;Windowing TVF Aggregation&#xff09;…...

prompt_status:5: command not found: wc解决办法

问题出现背景 想配置uniapp的命令行&#xff0c;在.zprofile配置路径的时候PATH 前面少打了一个$&#xff0c;执行了 source&#xff0c;导致各种命令都失效。 解决办法 用fider 打开用户文件夹&#xff0c;Command Shift .显示隐藏文件&#xff0c;用文本编辑器修改一下&…...

《STL 六大组件之容器篇:简单了解 list》

目录 一、list 简介二、list 的常用接口1. 构造函数&#xff08;constructor &#xff09;2. 迭代器&#xff08;iterator&#xff09;3. 容量、修改和访问&#xff08;capacity 、modify and access&#xff09; 一、list 简介 简单来说&#xff0c;list 就是数据结构初阶中学…...

向量数据库学习笔记(2) —— pgvector 用法 与 最佳实践

关于向量的基础概念&#xff0c;可以参考&#xff1a;向量数据库学习笔记&#xff08;1&#xff09; —— 基础概念-CSDN博客 一、 pgvector简介 pgvector 是一款开源的、基于pg的、向量相似性搜索 插件&#xff0c;将您的向量数据与其他数据统一存储在pg中。支持功能包括&…...