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

鸿蒙OSUniApp 实现精美的用户登录和注册页面#三方框架 #Uniapp

UniApp 实现精美的用户登录和注册页面

前言

在开发鸿蒙APP时,登录注册页面作为用户与应用交互的第一道门槛,其体验与质量往往决定了用户的第一印象。去年我接手了一个电商小程序项目,产品经理特别强调要做一个既美观又实用的登录注册页面。经过一番摸索和实践,我用UniApp实现了一套完整的登录注册流程,今天就把这个过程分享给大家。

设计思路

一个好的登录注册页面应该具备以下特点:

  1. 简洁美观 - 视觉上吸引用户
  2. 交互流畅 - 包括动画过渡、表单验证反馈等
  3. 功能完整 - 常规登录、手机验证码登录、第三方登录等
  4. 兼容适配 - 适应不同设备尺寸

基于这些考虑,我采用了卡片式设计、渐变色背景,并加入适当的动效,让整个页面既现代又不失实用性。

页面结构

我们的登录注册系统包含三个主要页面:

  1. 登录页面 - 支持账号密码登录和手机验证码登录
  2. 注册页面 - 新用户注册表单
  3. 忘记密码页面 - 用于密码找回

下面我们逐一实现这些页面。

登录页面实现

首先来看登录页面的结构代码:

<template><view class="login-container"><!-- 背景 --><view class="bg-wrapper"><image class="bg-image" src="/static/images/login-bg.jpg" mode="aspectFill"></image><view class="bg-mask"></view></view><!-- 顶部Logo --><view class="logo-box"><image class="logo" src="/static/images/logo.png" mode="widthFix"></image><text class="slogan">探索移动应用的无限可能</text></view><!-- 登录表单 --><view class="login-form"><view class="tab-header"><view class="tab-item" :class="{ active: loginType === 'password' }"@tap="switchLoginType('password')">账号登录</view><view class="tab-item" :class="{ active: loginType === 'sms' }"@tap="switchLoginType('sms')">短信登录</view><view class="tab-line" :style="tabLineStyle"></view></view><!-- 账号密码登录 --><view v-if="loginType === 'password'" class="form-content"><view class="input-item"><uni-icons type="person" size="20" color="#999"></uni-icons><input class="input" type="text" placeholder="请输入账号/手机号" v-model="account"/></view><view class="input-item"><uni-icons type="locked" size="20" color="#999"></uni-icons><input class="input" :type="showPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="password"/><view class="eye-icon" @tap="togglePasswordVisibility"><uni-icons :type="showPassword ? 'eye' : 'eye-slash'" size="20" color="#999"></uni-icons></view></view></view><!-- 手机验证码登录 --><view v-else class="form-content"><view class="input-item"><uni-icons type="phone" size="20" color="#999"></uni-icons><input class="input" type="number" maxlength="11"placeholder="请输入手机号" v-model="phone"/></view><view class="input-item"><uni-icons type="chat" size="20" color="#999"></uni-icons><input class="input" type="number" maxlength="6"placeholder="请输入验证码" v-model="smsCode"/><view class="code-btn" :class="{ disabled: counting }"@tap="sendSmsCode">{{ codeText }}</view></view></view><!-- 登录按钮 --><view class="action-area"><button class="login-btn" :disabled="!isFormValid" :class="{ disabled: !isFormValid }"@tap="handleLogin">登录</button><view class="additional-links"><navigator url="/pages/auth/register" class="link-item">注册账号</navigator><navigator url="/pages/auth/forgot-password" class="link-item">忘记密码</navigator></view></view><!-- 第三方登录 --><view class="third-party-login"><view class="divider"><view class="line"></view><text class="text">其他登录方式</text><view class="line"></view></view><view class="icons-row"><view class="icon-item" @tap="thirdPartyLogin('wechat')"><image src="/static/images/wechat.png" mode="widthFix"></image></view><view class="icon-item" @tap="thirdPartyLogin('apple')"><image src="/static/images/apple.png" mode="widthFix"></image></view></view></view></view><!-- 底部隐私政策 --><view class="privacy-policy">登录即表示您同意<text class="policy-link" @tap="openPrivacyPolicy">《用户协议》</text>和<text class="policy-link" @tap="openPrivacyPolicy">《隐私政策》</text></view></view>
</template>

上面的模板看起来代码挺多,但结构非常清晰。接下来实现逻辑部分:

<script>
export default {data() {return {loginType: 'password', // 登录类型:password-密码登录,sms-短信登录account: '',password: '',phone: '',smsCode: '',showPassword: false,counting: false, // 是否正在倒计时countDown: 60, // 倒计时秒数codeText: '获取验证码'};},computed: {tabLineStyle() {return {transform: this.loginType === 'password' ? 'translateX(0)' : 'translateX(100%)'};},isFormValid() {if (this.loginType === 'password') {return this.account.trim() && this.password.trim();} else {return this.phone.trim().length === 11 && this.smsCode.trim().length === 6;}}},methods: {// 切换登录方式switchLoginType(type) {this.loginType = type;},// 切换密码可见性togglePasswordVisibility() {this.showPassword = !this.showPassword;},// 发送短信验证码sendSmsCode() {if (this.counting) return;// 验证手机号if (!this.validatePhone()) {return;}// 开始倒计时this.counting = true;this.countDown = 60;this.codeText = `${this.countDown}秒后重发`;const timer = setInterval(() => {this.countDown--;this.codeText = `${this.countDown}秒后重发`;if (this.countDown <= 0) {clearInterval(timer);this.counting = false;this.codeText = '获取验证码';}}, 1000);// 发送验证码请求this.requestSmsCode();},// 验证手机号validatePhone() {if (!/^1[3-9]\d{9}$/.test(this.phone)) {uni.showToast({title: '请输入正确的手机号',icon: 'none'});return false;}return true;},// 请求发送验证码requestSmsCode() {// 实际项目中这里应该调用API发送验证码uni.showLoading({ title: '发送中...' });setTimeout(() => {uni.hideLoading();uni.showToast({title: '验证码已发送',icon: 'success'});}, 1500);},// 处理登录handleLogin() {if (!this.isFormValid) return;uni.showLoading({ title: '登录中...' });// 登录验证逻辑setTimeout(() => {uni.hideLoading();// 模拟登录成功uni.setStorageSync('token', 'demo_token_' + Date.now());uni.setStorageSync('userInfo', {id: 1,nickname: '测试用户',avatar: '/static/images/avatar.png'});uni.showToast({title: '登录成功',icon: 'success',duration: 1500,success: () => {// 延迟跳转,让用户看到成功提示setTimeout(() => {uni.switchTab({url: '/pages/home/home'});}, 1500);}});}, 2000);},// 第三方登录thirdPartyLogin(type) {uni.showToast({title: `正在尝试${type === 'wechat' ? '微信' : '苹果'}登录`,icon: 'none'});// 这里应该调用对应的第三方登录API// 微信登录示例if (type === 'wechat' && uni.getSystemInfoSync().platform !== 'devtools') {uni.login({provider: 'weixin',success: (loginRes) => {console.log('微信登录成功', loginRes);// 获取用户信息uni.getUserInfo({provider: 'weixin',success: (infoRes) => {console.log('获取用户信息成功', infoRes);// 将用户信息传给后端进行登录验证// this.wxLoginToServer(loginRes.code, infoRes.userInfo);}});},fail: (err) => {console.error('微信登录失败', err);}});}},// 打开隐私政策openPrivacyPolicy() {uni.navigateTo({url: '/pages/common/privacy-policy'});}}
};
</script>

最后是样式部分,一个漂亮的UI很大程度上取决于CSS:

<style lang="scss">
.login-container {position: relative;width: 100%;min-height: 100vh;display: flex;flex-direction: column;align-items: center;overflow: hidden;
}// 背景样式
.bg-wrapper {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;.bg-image {width: 100%;height: 100%;}.bg-mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to bottom, rgba(29, 36, 52, 0.5), rgba(29, 36, 52, 0.8));}
}// Logo区域
.logo-box {margin-top: 80rpx;display: flex;flex-direction: column;align-items: center;.logo {width: 180rpx;margin-bottom: 20rpx;}.slogan {font-size: 28rpx;color: #ffffff;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);}
}// 登录表单
.login-form {width: 85%;margin-top: 80rpx;background-color: rgba(255, 255, 255, 0.95);border-radius: 16rpx;padding: 40rpx 30rpx;box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);// 标签头部.tab-header {display: flex;position: relative;border-bottom: 1px solid #f2f2f2;margin-bottom: 50rpx;.tab-item {flex: 1;text-align: center;font-size: 32rpx;color: #666;padding-bottom: 20rpx;transition: all 0.3s;&.active {color: #3b7aff;font-weight: 500;}}.tab-line {position: absolute;bottom: 0;left: 0;width: 50%;height: 4rpx;background-color: #3b7aff;border-radius: 4rpx;transition: all 0.3s ease;}}// 表单内容.form-content {margin-bottom: 50rpx;.input-item {display: flex;align-items: center;height: 100rpx;border-bottom: 1rpx solid #eee;margin-bottom: 30rpx;.input {flex: 1;height: 100%;font-size: 30rpx;padding-left: 20rpx;}.eye-icon {padding: 0 10rpx;}.code-btn {width: 200rpx;height: 70rpx;line-height: 70rpx;background: #3b7aff;color: #fff;font-size: 26rpx;text-align: center;border-radius: 35rpx;&.disabled {background: #cccccc;}}}}// 操作区域.action-area {.login-btn {width: 100%;height: 90rpx;line-height: 90rpx;background: linear-gradient(135deg, #4b8eff, #3b7aff);color: #fff;font-size: 32rpx;border-radius: 45rpx;margin-bottom: 30rpx;&.disabled {background: linear-gradient(135deg, #cccccc, #aaaaaa);}}.additional-links {display: flex;justify-content: space-between;font-size: 26rpx;color: #666;margin-bottom: 40rpx;.link-item {padding: 10rpx;}}}// 第三方登录.third-party-login {margin-top: 30rpx;.divider {display: flex;align-items: center;margin-bottom: 40rpx;.line {flex: 1;height: 1rpx;background-color: #eee;}.text {padding: 0 20rpx;font-size: 26rpx;color: #999;}}.icons-row {display: flex;justify-content: center;.icon-item {width: 80rpx;height: 80rpx;margin: 0 40rpx;image {width: 100%;height: 100%;}}}}
}// 底部隐私政策
.privacy-policy {position: absolute;bottom: 40rpx;font-size: 24rpx;color: rgba(255, 255, 255, 0.8);text-align: center;.policy-link {color: #4b8eff;}
}
</style>

注册页面实现

注册页面与登录页面类似,但表单内容有所不同。这里我们简化一下代码,只展示关键部分:

<template><view class="register-container"><!-- 背景和顶部与登录页类似 --><view class="register-form"><view class="form-header"><text class="title">新用户注册</text><text class="subtitle">加入我们,体验更多精彩</text></view><view class="form-content"><view class="input-item"><uni-icons type="phone" size="20" color="#999"></uni-icons><input class="input" type="number" maxlength="11"placeholder="请输入手机号" v-model="form.phone"/></view><view class="input-item"><uni-icons type="chat" size="20" color="#999"></uni-icons><input class="input" type="number" maxlength="6"placeholder="请输入验证码" v-model="form.smsCode"/><view class="code-btn" :class="{ disabled: counting }"@tap="sendSmsCode">{{ codeText }}</view></view><view class="input-item"><uni-icons type="locked" size="20" color="#999"></uni-icons><input class="input" :type="showPassword ? 'text' : 'password'" placeholder="请设置6-20位密码" v-model="form.password"/><view class="eye-icon" @tap="togglePasswordVisibility"><uni-icons :type="showPassword ? 'eye' : 'eye-slash'" size="20" color="#999"></uni-icons></view></view><view class="input-item"><uni-icons type="locked" size="20" color="#999"></uni-icons><input class="input" :type="showPassword ? 'text' : 'password'" placeholder="请确认密码" v-model="form.confirmPassword"/></view></view><view class="action-area"><button class="register-btn" :disabled="!isFormValid" :class="{ disabled: !isFormValid }"@tap="handleRegister">注册</button><view class="login-link">已有账号?<text class="link" @tap="goToLogin">去登录</text></view></view></view></view>
</template><script>
export default {data() {return {form: {phone: '',smsCode: '',password: '',confirmPassword: ''},showPassword: false,counting: false,countDown: 60,codeText: '获取验证码'};},computed: {isFormValid() {return this.form.phone.length === 11 && this.form.smsCode.length === 6 && this.form.password.length >= 6 &&this.form.password === this.form.confirmPassword;}},methods: {// 密码可见性切换togglePasswordVisibility() {this.showPassword = !this.showPassword;},// 发送验证码(与登录页类似)sendSmsCode() {// 实现与登录页类似},// 处理注册handleRegister() {if (!this.isFormValid) return;// 表单验证if (this.form.password !== this.form.confirmPassword) {uni.showToast({title: '两次密码不一致',icon: 'none'});return;}uni.showLoading({ title: '注册中...' });// 模拟注册请求setTimeout(() => {uni.hideLoading();uni.showToast({title: '注册成功',icon: 'success',duration: 1500,success: () => {// 延迟跳转到登录页setTimeout(() => {uni.navigateTo({url: '/pages/auth/login'});}, 1500);}});}, 2000);},// 跳转到登录页goToLogin() {uni.navigateBack();}}
};
</script>

注册页面的样式可以参考登录页面,只需对一些细节进行调整即可。

实际效果与优化方案

在实际项目中,我们实现的登录注册页面已经投入使用,用户反馈非常好。不过在使用过程中也发现了一些问题和优化点:

1. 动画效果优化

为了让登录体验更流畅,我们加入了一些过渡动画:

// 切换标签时添加动画
switchLoginType(type) {// 添加动画类this.animating = true;setTimeout(() => {this.loginType = type;setTimeout(() => {this.animating = false;}, 300);}, 150);
}

对应的CSS:

.form-content {transition: opacity 0.3s ease;opacity: 1;&.animating {opacity: 0;}
}

2. 表单验证优化

在用户输入过程中实时验证并给出友好提示:

<view class="input-item" :class="{ error: phoneError }"><uni-icons type="phone" size="20" color="#999"></uni-icons><input class="input" type="number" maxlength="11"placeholder="请输入手机号" v-model="phone"@input="validatePhoneInput"/><text v-if="phoneError" class="error-tip">{{ phoneErrorMsg }}</text>
</view>
validatePhoneInput() {if (this.phone && !/^1[3-9]\d{9}$/.test(this.phone)) {this.phoneError = true;this.phoneErrorMsg = '请输入正确的手机号';} else {this.phoneError = false;this.phoneErrorMsg = '';}
}

3. 记住登录状态

用户体验优化,记住登录状态避免频繁登录:

// 登录成功后保存状态
handleLoginSuccess(userInfo, token) {// 保存用户信息和tokenuni.setStorageSync('token', token);uni.setStorageSync('userInfo', userInfo);uni.setStorageSync('loginTime', Date.now());// 如果用户勾选了"记住登录状态"if (this.rememberMe) {uni.setStorageSync('rememberMe', true);} else {uni.removeStorageSync('rememberMe');}
}

在App启动时检查登录状态:

// 在App.vue的onLaunch中
checkLoginStatus() {const token = uni.getStorageSync('token');const rememberMe = uni.getStorageSync('rememberMe');const loginTime = uni.getStorageSync('loginTime');const currentTime = Date.now();// 如果有token且选择了记住登录,或者登录时间在7天内if (token && (rememberMe || (currentTime - loginTime < 7 * 24 * 60 * 60 * 1000))) {// token验证this.verifyToken(token);} else {// 清除登录信息,跳转到登录页this.clearLoginInfo();uni.reLaunch({url: '/pages/auth/login'});}
}

总结与心得

通过这次实践,我总结了几点关于实现好的登录注册页面的经验:

  1. 设计先行 - 在编码前先做好设计稿,确保视觉效果和交互流程
  2. 拆分组件 - 将复杂页面拆分为多个可复用组件,便于维护
  3. 验证健壮 - 表单验证要全面且给出友好提示
  4. 安全考虑 - 密码加密传输,防止中间人攻击
  5. 适配兼容 - 适配不同尺寸的设备,兼容不同平台

UniApp提供了很多实用组件和API,极大简化了我们的开发过程。通过合理利用这些功能,我们能够快速实现一个既美观又实用的登录注册系统。

希望这篇文章对你在UniApp中实现登录注册页面有所帮助。如果有任何问题或建议,欢迎在评论区交流!

参考资料

  1. UniApp官方文档:https://uniapp.dcloud.io/
  2. uni-ui组件库:https://ext.dcloud.net.cn/plugin?id=55

相关文章:

鸿蒙OSUniApp 实现精美的用户登录和注册页面#三方框架 #Uniapp

UniApp 实现精美的用户登录和注册页面 前言 在开发鸿蒙APP时&#xff0c;登录注册页面作为用户与应用交互的第一道门槛&#xff0c;其体验与质量往往决定了用户的第一印象。去年我接手了一个电商小程序项目&#xff0c;产品经理特别强调要做一个既美观又实用的登录注册页面。…...

c#中equal方法与gethashcode方法之间有何关联?

文章目录 前言一、对hash运算的深入思考二、equal与gethashcode的关联三、 equal与gethashcode不同步的后果四、 规范的重写gethashcode 前言 大家有没有遇到过&#xff0c;当你重写了c#对象的equal方法之后&#xff0c;编译器会提示你对相应的gethashcode进行重写&#xff0c…...

查询公网IP地址的方法:查看自己是不是公网ip,附内网穿透外网域名访问方案

本地搭建服务并提供互联网连接时&#xff0c;较为传统的方法是使用公网IP地址。因此&#xff0c;如何查询本地自己是不是公网IP&#xff0c;是必须要掌握的一种技巧。当面对确实无公网IP时&#xff0c;则可以通过内网穿透方案&#xff0c;如nat123网络映射工具&#xff0c;将本…...

【轻松学 C:编程小白的大冒险】— 16 函数的定义与调用

在编程的艺术世界里&#xff0c;代码和灵感需要寻找到最佳的交融点&#xff0c;才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里&#xff0c;我们将共同追寻这种完美结合&#xff0c;为未来的世界留下属于我们的独特印记。 【轻松学 C&#xff1a;编程小白的大冒险…...

【Tools】CPU 分析

CPU 分析 Windows SDK 本指南提供了可用于调查影响评估指标的中央处理单元 (CPU) 相关问题的详细技术。 特定于评估的分析指南中的各个指标或问题部分确定了需要调查的常见问题。 本指南提供了可用于调查这些问题的技术和工具。 本指南中的技术使用 Windows Performance Too…...

进阶2_1:QT5多线程与定时器共生死

1、在widget.ui中使用 LCD Number控件 注意&#xff1a;若 LCD 控件不是多线程&#xff0c;LCD控件则会瞬间自增到最大的数值&#xff0c;如上图&#xff0c;说明两者都是多线程处理 2、实现方式 1、创建 LCD 控件并修改为 LCD1 2、创建任务类 mytask. h&#xff0c;对任务类…...

ECharts:数据可视化的强大引擎

在当今这个信息爆炸的时代&#xff0c;如何有效地展示和理解复杂的数据成为了每一个开发者和技术爱好者面临的挑战。Apache ECharts 作为一款基于 JavaScript 的开源可视化库&#xff0c;以其强大的功能、丰富的图表类型以及高度的可定制性&#xff0c;迅速成为了数据可视化领域…...

记录 QT 在liunx 下 QFileDialog 类调用问题 ()Linux下QFileDialog没反应)

1. 2025.05.14 踩坑记录 因为QT 在 liunx 文件系统不同导致的 Windows &#xff1a; QString filePath QFileDialog::getOpenFileName(nullptr, "选择文件", ".", "文本文件 (*.txt);所有文件 (*.*)"); 没问题 liunx 下 打不开&#xff…...

通用软件项目技术报告 - 导读III

现在,我们正式进入报告的第六个主要领域:6. 领域六:与第三方服务/API 集成 (含 LLM API)。 连接: 在现代软件开发中,很少有应用程序是完全孤立的。我们经常需要与各种外部的第三方服务或 API 进行集成,以利用它们提供的特定功能(如支付处理、地图服务、社交媒体登录、云…...

Kali Linux 桌面环境安装与配置指南

一、为什么选择 Kali Linux&#xff1f; Kali Linux 由 Offensive Security 维护&#xff0c;集成了数百种安全测试工具&#xff08;如 Metasploit、Nmap 和 Burp Suite&#xff09;&#xff0c;非常适合安全研究。但需要注意的是&#xff0c;Kali 默认以 root 用户运行&#…...

FFmpeg视频编码的完整操作指南

步骤如下&#xff1a; 安装和准备FFmpeg&#xff1a;确保包含所需编码器&#xff08;如libx264&#xff09;。基本命令行编码&#xff1a;使用ffmpeg命令进行转码&#xff0c;设置视频编码器、CRF、预设等。API编码流程&#xff08;针对开发者&#xff09;&#xff1a; a. 注册…...

【网络协议】TCP、HTTP、MQTT 和 WebSocket 对比

从协议本质、工作原理、特点、应用场景等方面详细对比 TCP、HTTP、MQTT 和 WebSocket。 1. TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09; 本质 协议类型&#xff1a;传输层协议&#xff08;OSI模型第4层&#xff09;。核心功能&#x…...

Leetcode数组day1

704 二分查找 注意点&#xff0c;左闭右闭 class Solution { public:int search(vector<int>& nums, int target) {//整数类型的动态数组的引用。int left0;int right nums.size()-1;while (left < right){int middle (rightleft)/2;if (nums[middle]>targ…...

leetcode2934. 最大化数组末位元素的最少操作次数-medium

1 题目&#xff1a;最大化数组末位元素的最少操作次数 官方标定难度&#xff1a;中 给你两个下标从 0 开始的整数数组 nums1 和 nums2 &#xff0c;这两个数组的长度都是 n 。 你可以执行一系列 操作&#xff08;可能不执行&#xff09;。 在每次操作中&#xff0c;你可以选…...

常见相机焦段的分类及其应用

相机焦段是指镜头的焦距范围&#xff0c;决定了拍摄时的视角、画面范围和透视效果。不同焦段适合不同的拍摄场景和主题&#xff0c;以下是常见焦段的分类及其应用&#xff1a; 一、焦段的核心概念 焦距&#xff1a;镜头光学中心到成像传感器的距离&#xff08;单位&#xff1a…...

FPGA在光谱相机中的核心作用

FPGA&#xff08;现场可编程门阵列&#xff09;作为光谱相机的核心控制与加速单元&#xff0c;通过硬件级并行处理能力和动态可编程特性&#xff0c;实现高速、高精度的光谱数据采集与处理。以下是其具体作用分类&#xff1a; 一、高速光电信号处理 ‌实时光谱复原‌ 通过硬…...

【证书与信任机制​】证书透明度(Certificate Transparency):如何防止恶意证书颁发?​​

证书透明度&#xff08;Certificate Transparency, CT&#xff09;的核心原理 证书透明度&#xff08;CT&#xff09;是一项由Google主导的开放标准&#xff0c;旨在通过公开记录所有SSL/TLS证书的颁发行为&#xff0c;防止恶意CA错误或故意颁发虚假证书。其核心机制如下&#…...

【RabbitMq C++】消息队列组件

RabbitMq 消息队列组件 1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C客户端库4. AMQP-CPP 库的简单使用4.1 使用4.1.1 TCP 模式4.1.2 扩展模式 4.2 常用类与接口介绍4.2.1 Channel4.3.2 ev 5. RabbitMQ样例编写5.1 发布消息5.2 订阅消息 1. RabbitMq介绍 RabbitMq - …...

基于SpringBoot+Vue的房屋租赁管理系统源码包(完整版)开发实战

基于SpringBootVue的房屋租赁管理系统源码包&#xff08;完整版&#xff09;开发实战 一、引言 随着城市化进程加速&#xff0c;房屋租赁市场规模持续扩大&#xff0c;传统管理方式已无法满足高效、精准的业务需求。本文基于SpringBootVue框架&#xff0c;设计并实现了一套完…...

《AI大模型应知应会100篇》第61篇:FastAPI搭建大模型API服务

第61篇&#xff1a;FastAPI搭建大模型API服务 摘要 随着大语言模型&#xff08;LLM&#xff09;在各行各业的广泛应用&#xff0c;构建一个高性能、可扩展的大模型 API 服务变得尤为重要。FastAPI 以其异步支持、类型安全、自动生成文档等优势&#xff0c;成为当前最流行的选择…...

Java 源码 HashMap源码分析

Java 源码 HashMap源码分析 1 初始容量 /*** The default initial capacity - MUST be a power of two.* 默认的初始容量&#xff0c;必须为2的幂*/static final int DEFAULT_INITIAL_CAPACITY 1 << 4; // aka 16容量表示哈希表中槽的数量&#xff08;即哈希数组的长度…...

requestAnimationFrame 与 requestIdleCallback 对比

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、背景与问题场景二、核心API对比分析三、选择 requestIdleCallback 的核心原因四、特殊场景处理建议五、最佳实践总结六、结论前言 看过埋点库 sunshine-track ,很多人疑惑为啥批量上报埋点信息的时候,用的是 request…...

【C/C++】自定义类型:结构体

文章目录 前言自定义类型&#xff1a;结构体1.结构体类型的声明1.1 结构体回顾1.1.1 结构的声明 1.1.2 结构体变量的创建和初始化1.2 结构的特殊声明1.3 结构的自引用 2.结构体内存对齐2.1 对⻬规则2.2 为什么存在内存对齐&#xff1f;2.3 修改默认对⻬数 3. 结构体传参4.结构体…...

视频编解码学习十二之Android疑点

一、android.view.SurfaceControl.setDisplaySurface的作用 android.view.SurfaceControl.setDisplaySurface 是 Android 系统中一个 native 层级别的 API&#xff0c;主要用于 设置某个物理显示屏&#xff08;Display&#xff09;的输出 Surface&#xff0c;属于 SurfaceFlin…...

web第三次课后作业--基于JDBC对mysql数据库的增删查改操作

一、工程搭建步骤 1.新建java项目&#xff0c;添加jdbc依赖 2.写java程序 3.添加mysql数据源&#xff0c;连接本地数据库 4.运行程序二、运行结果 三、代码 代码解析 加载数据驱动 try {Class.forName("com.mysql.jdbc.Driver"); } catch (ClassNotFoundExceptio…...

fiftyone-数据库配置和config与app_config配置文件

一数据库配置&#xff1a;&#xff08;以本地为例&#xff09; fiftyone数据库信息存在配置文件中&#xff1a; 配置文件地址&#xff1a; ~/.fiftyone/config.json 这个配置文件的作用&#xff1a;存放数据库地址信息&#xff1b;&#xff08;如果不配置&#xff0c;fiftyon…...

Nginx的核心功能--正向代理、反向代理、缓存和Rewrite

Nginx作为高性能的Web服务器&#xff0c;其核心功能主要体现在以下四大模块&#xff1a; 一、正向代理 主要用于客户端访问外部网络的中转服务。典型配置示例&#xff1a; server {listen 8080;resolver 8.8.8.8;location / {proxy_pass http://$http_host$request_uri;prox…...

mac latex vscode 配置

mac latex vscode 配置 安装mactex.pkg 这里有个快速下载的镜像 https://mirrors.aliyun.com/CTAN/systems/mac/mactex/ 可以检查是否将 PATH 写入 export PATH"/Library/TeX/texbin:$PATH"vscode 下载插件 Latex Workshop 在配置文件 settings.json 中输入如下的…...

【GESP真题解析】第 4 集 GESP一级 2023 年 3 月编程题 1:每月天数

大家好&#xff0c;我是莫小特。 这篇文章给大家分享 GESP 一级 2023 年 3 月编程题第 1 题&#xff1a;每月天数。 题目链接 洛谷链接&#xff1a;B3835 每月天数 一、完成输入 根据题目要求&#xff0c;我们需要输入两个整数&#xff0c;分别表示一个日期的年份和月份。 年…...

国产免费工作流引擎star 6.5k,Warm-Flow升级1.7.2(新增案例和修复缺陷)

文章目录 主要更新内容项目介绍功能思维导图设计器流程图演示地址官网Warm-Flow视频 主要更新内容 [feat] 开启流程实例&#xff0c;新增流程定义是否存在校验[feat] 新增合同签订流程案例[feat] 新增企业采购流程案例[update] mybatis-plus逻辑删除&#xff0c;删除值和未删除…...

计算机网络:移动通信蜂窝网络指的是什么?

无线基站的蜂窝网络(Cellular Network)是现代移动通信系统的核心架构,其核心思想是通过蜂窝状小区划分和频率复用,实现广域覆盖、高效频谱利用和动态资源管理。以下从设计原理、网络架构、关键技术及实际挑战等方面深入解析蜂窝网络。 一、蜂窝网络的设计原理 1. 蜂窝结构…...

scratch基础-外观模块

一、本次任务 二、内容详解 1、模块介绍 1、说[你好] (2)秒&#xff1a;临时对话框&#xff0c;短暂对话 2、说[你好]&#xff1a;持续显示对话框&#xff0c;长文本显示 3、思考[嗯…] (2)秒&#xff1a;临时显示思考气泡&#xff0c;用于角色思考 4、思考[嗯…] &#xff1a…...

前端服务器部署分类总结

目前所了解的部署有三种方式&#xff1a; 一是本地服务器部署&#xff1b;二是 nginx 服务器部署&#xff1b;三是云服务器部署 本地部署&#xff0c;准备好部署的包 以Vue项目为例&#xff0c;执行npm run build 命令打成前端包 第二步&#xff1a;将打包结果交给服务器(本地…...

精益数据分析(58/126):移情阶段的深度实践与客户访谈方法论

精益数据分析&#xff08;58/126&#xff09;&#xff1a;移情阶段的深度实践与客户访谈方法论 在创业的漫长旅途中&#xff0c;正确识别和验证问题是成功的第一步。今天&#xff0c;我们继续围绕《精益数据分析》中创业阶段的核心内容&#xff0c;深入探讨移情阶段的关键实践…...

MK米客方德SD NAND:无人机存储的高效解决方案

在无人机技术迅猛发展的当下&#xff0c;飞控系统的数据记录对于飞行性能剖析、故障排查以及飞行安全保障极为关键。以往&#xff0c;SD 卡是飞控 LOG 记录常见的存储介质&#xff0c;但随着技术的革新&#xff0c;新的存储方案不断涌现。本文聚焦于以 ESP32 芯片为主控制器的无…...

LVDS系列12:Xilinx Ultrascale系可编程输入延迟(二)

本节讲解Ultrascale IDELAYE3的参数&#xff1b;  IDELAYE3参数&#xff1a; REFCLK_FREQUENCY&#xff1a;如果使用COUNT模式&#xff0c;保持300MHz的默认值即可&#xff1b; 如果使用TIME模式&#xff0c;则该值与IDELAYCTRL参考时钟要匹配&#xff1b; DELAY_SRC&#…...

Spring的bean的生命周期?

Spring中bean的生命周期包括以下步骤&#xff1a; 通过BeanDefinition获取bean的定义信息。 调用构造函数实例化bean。 进行bean的依赖注入&#xff0c;例如通过setter方法或Autowired注解。 处理实现了Aware接口的bean。 执行BeanPostProcessor的前置处理器。 调用初始化…...

OpenCV CUDA模块中逐元素操作------逻辑运算

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 比较、AND、OR、NOT等。这类操作可用于创建基于条件的掩码&#xff0c;这对于图像分割或特征选择非常有用。 主要函数 1. 按位与 (cv::cuda::b…...

微信开发者工具里面模拟操作返回、录屏、网络速度、截屏等操作

微信开发者工具里面模拟操作返回、录屏、网络速度、截屏等操作...

Void: Cursor 的开源平替

GitHub&#xff1a;https://github.com/voideditor/void 更多AI开源软件&#xff1a;发现分享好用的AI工具、AI开源软件、AI模型、AI变现 - 小众AI Void&#xff0c;这款编辑器号称是开源的 Cursor 和 GitHub Copilot 替代品&#xff0c;而且完全免费&#xff01; 在你的代码库…...

【MySQL】日志缓冲区详解 以及 InnoDB内存结构总结

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;博客仓库&#xff1a;https://gitee.com/JohnKingW/linux_test/tree/master/lesson &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &…...

在Spark搭建YARN

&#xff08;一&#xff09;什么是SparkONYarn模式 Spark on YARN&#xff08;Yet Another Resource Negotiator&#xff09;是 Spark 框架在 Hadoop 集群中运行的一种部署模式&#xff0c;它借助 Hadoop YARN 来管理资源和调度任务。 架构组成 ResourceManager&#xff1a;作…...

postman 用法 LTS

postman 用法 LTS File ---- View ---- Show Postman Console...

Spring Boot requestBody postman

Spring Boot requestBody postman 在处理Spring Boot应用程序中的RequestBody注解时&#xff0c;通常用于接收客户端&#xff08;如Postman&#xff09;发送的JSON格式数据。如果你在Postman中配置请求&#xff0c;并希望将JSON数据发送到Spring Boot后端&#xff0c;你可以按…...

OpenHarmony 开源鸿蒙南向开发——linux下使用make交叉编译第三方库——wget

准备工作 请依照这篇文章搭建环境 OpenHarmony 开源鸿蒙南向开发——linux下使用make交叉编译第三方库——环境配置_openharmony交叉编译-CSDN博客 编译依赖 Wget依赖Gnutls库&#xff0c;gnutls库依赖gmp、nettle、libunistring库 上述库可在历史文章中自行查找 下载 w…...

枢轴支压点策略

一种基于枢轴点&#xff08;Pivot Point&#xff09;的交易策略&#xff0c;主要用于在趋势行情中进行交易。 策略的核心思路是通过计算前一天的最高价、最低价和收盘价来确定当天的枢轴点&#xff0c;并据此计算出第一和第二阻力位以及第一和第二支撑位。 可以根据这些关键点位…...

【SSL部署与优化​】​​TLS 1.3的核心改进与性能优化​​

TLS 1.3 的核心改进与性能优化 TLS 1.3 是当前最安全的 TLS 协议版本&#xff0c;通过简化协议、增强加密算法和优化握手流程&#xff0c;显著提升了性能和安全性。以下是其核心改进、性能优化及关键技术的详细解析&#xff1a; 一、TLS 1.3 核心改进 精简加密套件 • 移除弱算…...

等经纬度投影下求经纬度的行列号

一 概述 使用等经纬度投影&#xff08;Equirectangular Projection&#xff09;&#xff0c; 将经纬度转换为行列号。 二 C实现 1 代码 以下是C的实现方法。该实现将地球的经纬度范围划分为固定分辨率的网格&#xff0c;每个网格对应一个行列号。 #include <cmath> #in…...

MetaHipMer2:从头组装宏基因组

Terabase-scale metagenome coassembly with MetaHipMer | Scientific Reports https://academic.oup.com/nar/advance-article/doi/10.1093/nar/gkaf369/8126258 安装 配置环境 berkeleylab / upcxx / wiki / INSTALL — Bitbucket mamba create -n mhm2_env -c conda-fo…...

CK-S654-PA60一拖四分体式半导体电子货架专用RFID读写器|读码器接线使用说明

半导体行业RFID电子货架通过物联网技术将传统仓储从“经验驱动”转向“数据驱动”&#xff0c;其自动化识别、实时追踪与智能决策能力&#xff0c;正重塑物流与库存管理的底层逻辑。从晶圆盒的精准定位到柔性化生产&#xff0c;这一技术不仅提升了效率&#xff0c;更让半导体行…...