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

创新项目实训开发日志4

news 来源：原创 2025/7/5 3:06:59

一、开发简介

核心工作内容：logo实现、注册实现、登录实现、上传gitee

工作时间：第十周

二、logo实现

1.设计logo

2.添加logo

const logoUrl = new URL('@/assets/images/logo.png', import.meta.url).href

<div class="aside-first"><el-image  :src="logoUrl" :fit="'scale-down'" />
</div>

.aside-first {@include hold(100, 10);@include position-center-box("row,column");}

三、注册实现

1.配置后端

下载后端代码
配置MySql数据库
利用Postman测试后端功能

2.页面开发

<!--注册抽屉--><el-drawer v-model="drawer" :direction="direction"><el-form ref="registerForm" :model="registerData" :rules="registerRules"  label-width="80px"><el-form-item label="手机号" prop="phone"><el-input v-model="registerData.phone" placeholder="请输入手机号" /></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="registerData.password" placeholder="请输入密码" show-password /></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="registerData.name" placeholder="请输入姓名" /></el-form-item><el-form-item><el-button type="primary" @click="resister">注册</el-button><el-button @click="drawer = false">取消</el-button></el-form-item></el-form></el-drawer>

3.定义API

/*** @description: 用于用户的注册* @return {Promise<>} - 返回Promise*/
export const registerService = (conditions) => {return request.post('/auth/register', conditions, {headers: {'Content-Type': 'application/json'}});
}

4.事件处理

//注册——抽屉显示
const drawer = ref(false)
//注册——抽屉方向
const direction = ref("rtl")
//注册——表单
const registerForm = ref(null)
//注册——数据
const registerData = ref({phone: '',password: '',name: ''
})
//校验规则——注册
const registerRules = {phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }],name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
}

/*** @description: 用于用户的注册* @return {Promise<>} - 提示操作的结果*/
const register = async () => {// 先验证表单const valid = await registerForm.value.validate();if (valid) {try {// 调用注册服务const result = await registerService(registerData.value);// 成功后提示ElMessage.success('注册成功');} catch (error) {// 捕获并处理可能的错误console.error('注册过程中出现错误:', error);// ElMessage.error('注册失败，请稍后再试');}} else {// 如果验证失败，提示用户检查表单信息ElMessage.error('请检查表单信息');}
};

四、登录实现

1.页面开发

<template><div id="background"><el-row id="login"><!--左表格--><el-col :span="9" id="left"><div id="avatar"><el-avatar :size="150" :src="circleUrl" fit="cover"/></div><el-text id="WELCOME">WELCOME</el-text></el-col><!--右表格--><el-col :span="15" id="right"><el-form ref="loginForm" size="large" autocomplete="off" :model="loginData" :rules="loginRules"><!--手机号--><el-form-item prop="phone" id="inputPhone"><!-- <el-input :prefix-icon="User" placeholder="请输入手机号" v-model="registerData.phone" class="rounded-input" input-styles="border-radius: 15px;"></el-input> --><input class="rounded-input" placeholder=" 手机号:" v-model="loginData.phone"></el-form-item><!--密码--><el-form-item prop="password" id="inputPassword"><!-- <el-input name="password" type="password" :prefix-icon="Lock" placeholder="请输入密码"v-model="registerData.password"></el-input> --><input type="password" class="rounded-input" placeholder=" 密  码:" v-model="loginData.password"></el-form-item><!--功能区块--><el-form-item class="flex"><div class="flex"><button  class="registerButton" type="button" @click="drawer = true">注册账号</button><el-link :underline="false" style="color: #FFFFFF;">重置密码？</el-link></div></el-form-item><!-- 登录按钮 --><el-form-item id="loginButton"><el-button id="button1" @click="login">立 即 登 录</el-button></el-form-item></el-form></el-col><!--注册抽屉--><el-drawer v-model="drawer" :direction="direction"><el-form ref="registerForm" :model="registerData" :rules="registerRules"  label-width="80px"><el-form-item label="手机号" prop="phone"><el-input v-model="registerData.phone" placeholder="请输入手机号" /></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="registerData.password" placeholder="请输入密码" show-password /></el-form-item><el-form-item label="姓名" prop="name"><el-input v-model="registerData.name" placeholder="请输入姓名" /></el-form-item><el-form-item><el-button type="primary" @click="register">注册</el-button><el-button @click="drawer = false">取消</el-button></el-form-item></el-form></el-drawer></el-row></div>
</template>

2.定义API

/*** @description: 用于用户的登录* @return {Promise<>} - 返回Promise*/
export const loginService = (conditions) => {return request.post('/auth/login', conditions, {headers: {'Content-Type': 'application/json'}});
}

3.事件处理

/*** @description: 用于用户的登录* @return {Promise<>} - 提示操作的结果*/
const login = async () => {// 先验证表单const valid = await loginForm.value.validate();if (valid) {try {// 调用登录服务const result = await loginService(registerData.value);console.log(result)// 成功后提示tokenStore.setToken(result.data);router.push('/home')ElMessage.success('登录成功');} catch (error) {// 捕获并处理可能的错误console.error('登录过程中出现错误:', error);// ElMessage.error('登录失败，请稍后再试');}} else {// 如果验证失败，提示用户检查表单信息ElMessage.error('请检查表单信息');}
};

五、上传gitee

1.上传logo相关

2.上传认证相关

3.将web分支并入master分支

创新项目实训开发日志4

一、开发简介核心工作内容：logo实现、注册实现、登录实现、上传gitee 工作时间：第十周二、logo实现 1.设计logo 2.添加logo const logoUrl new URL(/assets/images/logo.png, import.meta.url).href <div class"aside-first">…...

编程日记 2025/7/5 3:06:59

ospf综合作业

需求需求分析区域划分： 网络划分为 area 0、area 1、area 2、area 3、area 4 多个区域。其中 area 0 作为骨干区域，其他为非骨干区域。这种划分符合 OSPF（开放式最短路径优先）协议中区域设计原则，不同区域通过 ABR…...

编程日记 2025/6/29 10:12:30

旋转磁体产生的场-对导航姿态的影响

pitch、yaw、roll是描述物体在空间中旋转的术语，通常用于计算机图形学或航空航天领域中。这些术语描述了物体绕不同轴旋转的方式： Pitch（俯仰）：绕横轴旋转，使物体向前或向后倾斜。俯仰角度通常用来描述物体…...

编程日记 2025/7/5 2:50:51

Hive 数据同步到 Doris 最佳实践方案：从场景适配到性能调优全解析

在大数据领域，Hive 作为成熟的数据仓库解决方案，常用于海量数据存储与离线处理，而 Doris 凭借其强大的 OLAP 能力，在实时分析、即席查询等场景表现卓越。当企业需要将 Hive 数据仓库中的数据与 Doris 的分析能力结合时&#xff0c…...

编程日记 2025/6/29 11:04:52

netty中的Channel与Java NIO中的Channel核心对比

Netty的Channel和Java NIO的Channel虽然都用于网络通信，但设计理念、功能扩展及适用场景存在显著差异。以下从核心特性、设计模式及性能优化等维度展开对比： 1. 抽象层次与功能范围 Java NIO Channel 基础IO模型：仅支持非阻塞IO（NIO），如SocketChannel、ServerSocketChann…...

编程日记 2025/6/29 9:22:02

基于whisper和ffmpeg语音转文本小程序

目录一、环境准备 ✅ 第一步：安装并准备 Conda 环境 ✅ 第二步：创建 Whisper 专用的 Conda 虚拟环境 ✅ 第三步：安装 GPU 加速版 PyTorch（适配 RTX 4060） ✅ 第四步：安装 Whisper 和 FFMPEG 依赖 ✅…...

编程日记 2025/6/29 10:37:32

使用ffmpeg 将图片合成为视频,填充模糊背景,并添加两段音乐

1.输入3张图片,每张播放一次,播放两秒,视频分辨率设置为1920:1080,每张图片前0.3秒淡入,后0.3秒淡出,图片宽高比不变,用白色填充空白区域 ffmpeg -loop 1 -t 2 -i "img1.jpg" \-loop 1 -t 2 -i "img2.jpg" \-loop 1 -t 2 -i "img3.jpg" \-filte…...

编程日记 2025/6/29 9:21:56

Python协程详解：从基础到实战

协程是Python中实现并发编程的重要方式之一，它比线程更轻量级，能够高效处理I/O密集型任务。本文将全面介绍协程的概念、原理、实现方式以及与线程、进程的对比，包含完整的效率对比代码和详细说明，帮助Python开发者深入理解并掌握协…...

编程日记 2025/6/29 9:22:07

服务器部署LLaMAFactory进行LoRA微调

一、什么是LLaMAFactory LlamaFactory 是一个专为大型语言模型（LLM）微调设计的开源工具库，旨在简化大模型（如 LLaMA、GPT、Mistral 等）的定制化训练流程，降低技术门槛和硬件成本。以下是它的核心功能和应…...

编程日记 2025/6/29 11:31:10

ASP.NET MVC 入门指南

以下是一份 MVC（Model - View - Controller）培训教程，以ASP.NET MVC 为例进行讲解，适合有一定编程基础的学习者快速上手。 1. MVC 概述 1.1 什么是 MVC MVC 是一种软件设计模式，它将应用程序分为三个主要部分&#…...

编程日记 2025/6/29 9:22:03

mapbox高阶，高程影像、行政区边界阴影效果实现

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️line线图层样式1.4 ☘️symbol符号图层…...

编程日记 2025/6/29 9:21:58

如何下载适用于语音识别功能增强的Google Chrome浏览器

谷歌浏览器一直是互联网用户的首选工具之一，尤其是它强大的扩展功能，使得用户可以根据需求定制浏览器。对于需要使用语音识别功能的用户来说，谷歌浏览器提供了优秀的支持，通过简单的设置和插件，可以显著提升语音识别的…...

编程日记 2025/6/29 9:55:57

运维打铁：Centos 7 安装 redis_exporter 1.3.5

文章目录一、CentOS 7 安装 redis_exporter 1.3.51. 安装2. 配置自启动，并连接 Redis，修改端口3. 配置 Prometheus 采集 redis_exporter 数据4. 配置 Grafana 查看数据5. Redis 集群配置二、常见问题及解决办法1. 下载二进制包失败2. 解压部署时权限问…...

编程日记 2025/6/29 11:46:05

3台CentOS虚拟机部署 StarRocks 1 FE+ 3 BE集群

背景：公司最近业务数据量上去了，需要做一个漏斗分析功能，实时性要求较高，mysql已经已经不在适用，做了个大数据技术栈选型调研后，决定使用StarRocks StarRocks官网：StarRocks | A High-Performa…...

编程日记 2025/6/29 11:03:35

Oracle 11g RAC ASM磁盘组剔盘、加盘实施过程

环境：AIX6.1 Oracle RAC 11.2.0.3 前期准备： 1.查看DG磁盘组空间情况： –查看DG磁盘组空间情况： ASMCMD> lsdg State Type Rebal Sector Block AU Total_MB Free_MB Req_mir_free_MB Usable_file_MB Of…...

编程日记 2025/6/29 9:23:28

网站高可用架构设计基础——高可用策略和架构原则

一、正面保障与减少损失要想让系统能够稳定可用，首先要考虑如何避免问题的发生。比如说可以通过 UPS（不间断电源）来避免服务器断电，可以通过事先增加机器来解决硬件资源不足的问题。然后，如果问题真的发生了&#…...

编程日记 2025/6/29 9:22:20

从入门到精通【MySQL】视图与用户权限管理

文章目录 📕1. 视图✏️1.1 视图的基本概念✏️1.2 试图的基本操作🔖1.2.1 创建视图🔖1.2.2 使用视图🔖1.2.3 修改数据🔖1.2.4 删除视图 ✏️1.3 视图的优点 📕2. 用户与权限管理✏️2.1 用户🔖…...

编程日记 2025/6/29 9:22:19

使用QML Tumbler 实现时间日期选择器

目录引言相关阅读项目结构示例实现与代码解析示例一：时间选择器（TimePicker）示例二：日期时间选择器（DateTimePicker） 主窗口整合运行效果总结下载链接引言在现代应用程序开发中，时间与日期选…...

编程日记 2025/6/29 9:22:21

[golang] 介绍 | 特点 | 应用场景

“编程不仅仅是写代码，更是一种思考方式。” 参考资料《Unix编程环境》- Brian W. Kernighan, Rob Pike《程序设计实践》- Brian W. Kernighan, Rob PikeGo语言官方网站：https://golang.orgRob Pike的个人博客：http://herpolhode.com/rob/ …...

编程日记 2025/6/29 9:22:43

Python 爬虫实战 | 企名科技

文章目录一、企名科技1、目标网站2、网站特点3、确定解密位置4、扣js代码一、企名科技 1、目标网站网址：https://wx.qmpsee.com/articleDetail?idfeef62bfdac45a94b9cd89aed5c235be目标数据：获取消费行业研究下面的13篇文章数据 2、网站特点服…...

编程日记 2025/6/29 9:22:14

c加加学习之day06-＞STL标准库-＞day01

1.介绍：C 标准模板库（Standard Template Library，简称 STL）是一组泛型编程的模板类和函数，旨在提供常用的数据结构、算法和函数对象。STL 是 C 标准库的一部分，极大地提高了编程效率和代码的可重用性。STL …...

编程日记 2025/6/29 10:07:16

并发设计模式实战系列(6)：读写锁

🌟 大家好，我是摘星！ 🌟 今天为大家带来的是并发设计模式实战系列，第六章读写锁模式，废话不多说直接开始~ 目录一、核心原理深度拆解 1. 读写锁三维模型 2. 关键实现原理二、生活化类比&am…...

编程日记 2025/6/29 10:53:40

【网络原理】从零开始深入理解TCP的各项特性和机制.(一)

本篇博客给大家带来的是网络原理的相关知识.其中传输层这一部分非常重要,面试中只要是涉及到网络这一部分知识,几乎是必定会考传输层TCP的. 🐎文章专栏: JavaEE初阶 🚀若有问题评论区见 ❤ 欢迎大家点赞评论收藏分享如果你不知道分享给谁,那就分享给…...

编程日记 2025/6/29 9:23:35

基于Pytorch的深度学习-第二章

2.1 CIFAR-10数据集简介 CIFAR-10数据集包含10个类别：plane、car、bird、cat、deer、dog、frog、horse、ship、truck，每个类别有6000张图片。其中训练集图片有50000张，测试集有10000张图片。训练集和测试集的生成方法是，分别从每…...

编程日记 2025/6/29 9:21:57

gitlab-ce容器镜像源（国内）

下载命令 docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/gitlab/gitlab-ce:17.10.4-ce.0 更多参考： https://docker.aityp.com/image/docker.io/gitlab/gitlab-ce:17.10.4-ce.0...

编程日记 2025/6/29 9:22:53

TinyVue v3.22.0 正式发布：深色模式上线！集成 UnoCSS 图标库！TypeScript 类型支持全面升级！

我们非常高兴地宣布，2025年4月7日，TinyVue发布了v3.22.0🎉。本次 3.22.0 版本主要有以下重大变更： 支持深色模式增加基于 UnoCSS 的图标库更丰富的 TypeScript 类型声明支持 XSS 配置详细的 Release Notes 请参考&#xff1a…...

编程日记 2025/6/29 9:21:55

Browser-Use WebUI：让AI自动使用浏览器帮你查询信息执行任务

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/6/29 9:22:18

使用PyTorch如何配置一个简单的GTP

目录一、什么是GPT 1. Transformer Block 的核心结构 2. 关键组件解析 (1) 掩码多头自注意力（Masked Multi-Head Self-Attention） (2) 前馈神经网络（FFN） (3) 层归一化（LayerNorm&…...

编程日记 2025/6/29 9:22:15

【FAQ】针对于消费级NVIDIA GPU的说明

概述本文概述 HP Anyware 在配备消费级 NVIDIA GPU 的物理工作站上的关键组件、安装说明和重要注意事项。注意：本文档适用于 NVIDIA 消费级 GPU。NVIDIA Quadro 和 Tesla GPU 也支持 HP Anyware 在公有云、虚拟化或物理工作站环境中运行。请参阅PCoIP Graphi…...

编程日记 2025/6/29 9:22:08

02_java的运行机制以及JDKJREJVM基本介绍

1、运行机制 2、JDK&JRE&JVM JDK 基本介绍 （1） JDK 的全称(Java Development Kit Java开发工具包) JDK JRE java的开发工具 [ java, javac, javadoc, javap等 ] （2）JDK是提供给Java开发人员使用的，其…...

编程日记 2025/6/29 10:33:16

go 的 net 包

目录一、net包的基本功能 1.1 IP地址处理 1.2 网络协议支持 1.3 连接管理二、net包的主要功能模块 2.1 IP地址处理 2.2 TCP协议 2.3 UDP协议 2.4 Listener和Conn接口三、高级功能 3.1 超时设置 3.2 KeepAlive控制 3.3 获取连接信息四、实际应用场景 4.1 Web服…...

编程日记 2025/6/29 11:47:14

ShenNiusModularity项目源码学习（21：ShenNius.Admin.Mvc项目分析-6）

菜单列表页面用于新建、维护及删除系统所有模块所需的菜单信息，包括菜单名称、菜单中的按钮、菜单关联的后台服务地址及请求方式等。菜单列表页面的后台控制器类MenuController位于ShenNius.Admin.Mvc项目的Areas\Sys\Controllers内，页面文件位于同项目的…...

编程日记 2025/6/29 10:59:44

基于单片机的游泳馆智能管理系统

标题:基于单片机的游泳馆智能管理系统内容:1.摘要随着人们生活水平的提高，游泳馆的规模和客流量不断增大，传统的管理方式已难以满足高效、便捷的管理需求。本研究的目的是设计并实现一种基于单片机的游泳馆智能管理系统。方法上，采用单片机…...

编程日记 2025/6/29 12:15:39

开发了一个b站视频音频提取器

B站资源提取器-说明书一、功能说明本程序可自动解密并提取B站客户端缓存的视频资源，支持以下功能： - 自动识别视频缓存目录 - 将加密的.m4s音频文件转换为标准MP3格式 - 将加密的.m4s视频文件转换为标准MP4格式（合并音视频流）…...

编程日记 2025/7/4 7:02:04

vue2项目，为什么开发环境打包出来的js文件名是1.js 2.js，而生产环境打包出来的是chunk-3adddd.djncjdhcbhdc.js

Vue2项目开发环境与生产环境JS文件名差异的核心原理及配置逻辑如下： 一、文件名差异的底层机制 1‌、Webpack默认命名策略‌ 开发环境默认禁用哈希，采用[id].js命名规则（如1.js），生产环境启用[chunkhash]生成chunk-xxx…...

编程日记 2025/6/29 9:52:14

SQL进阶知识：六、动态SQL

今天介绍下关于动态SQL的详细介绍，并结合MySQL数据库提供实际例子。动态SQL是指在运行时动态构建和执行SQL语句的技术。这种技术在处理复杂的查询逻辑、参数化查询或在某些情况下需要根据用户输入动态调整查询时非常有用。MySQL支持动态SQL，主要通过PRE…...

编程日记 2025/6/29 9:23:10

Spring Boot常用注解详解：实例与核心概念

Spring Boot常用注解详解：实例与核心概念前言 Spring Boot作为Java领域最受欢迎的快速开发框架，其核心特性之一是通过注解（Annotation）简化配置，提高开发效率。注解驱动开发模式让开发者告别繁琐的XML配置&#xff…...

编程日记 2025/6/29 12:18:46

java 富文本转pdf

前言： 本文的目的是将传入的富文本内容(html标签，图片)并且分页导出为pdf。所用的核心依赖为iText7。因为itextpdf-core的核心包在maven中央仓库中，阿里云华为云等拉不下来，中央仓库在外网，并且此包在中央仓库中未…...

编程日记 2025/6/29 10:36:52

17.第二阶段x64游戏实战-人工遍历二叉树结构

免责声明：内容仅供学习参考，请合法利用知识，禁止进行违法犯罪活动！ 本次游戏没法给内容参考于：微尘网络安全上一个内容：16.第二阶段x64游戏实战-分析二叉树结构上一个内容里把二叉树的结构写了写&am…...

编程日记 2025/6/29 9:22:06

C#基于Sunnyui框架和MVC模式实现用户登录管理

C#基于Sunnyui框架和MVC模式实现用户登录管理 1 Controller1.1 UserManagementController.cs（控制器入口） 2 Model2.1 UserRepository.cs（用户管理模型）2.2 User.cs（用户结构体）2.3 SQLiteHelper.cs&#x…...

编程日记 2025/6/29 10:27:23

Spring Boot实战（三十六）编写单元测试

目录一、什么是单元测试？二、Spring Boot 中的单元测试依赖三、举例 Spring Boot 中不同层次的单元测试3.1 Service层3.2 Controller 层3.3 Repository层四、Spring Boot 中 Mock、Spy 对象的使用4.1 使用Mock对象的背景4.2 什么是Mock对象，有哪些好处…...

编程日记 2025/7/2 21:00:28

声音分离人声和配乐-从头设计数字生命第4课——仙盟创梦IDE

音频分离在数字人中具有多方面的重要作用，主要体现在以下几个方面： 提高语音合成质量：通过音频分离，可以将原始音频中的语音部分与其他背景噪音或干扰声音分离开来。这样在进行语音合成时，能够获得更纯净的语音信号&am…...

编程日记 2025/6/29 9:22:58

http协议、全站https

一、http协议 1、为何要学http协议？用户用浏览器访问网页，默认走的都是http协议，所以要深入研究web层，必须掌握http协议 2、什么是http协议 1、全称Hyper Text Transfer Protocol（超文本传输协议） ### 一个请求得到一个响应包普通…...

编程日记 2025/6/29 10:24:19

1.本地推拉流启服推流 ffmpeg -re -stream_loop -1 -i ./DJI_0463.MP4 -s 1280x720 -an -c:v h264 -b:v 2000k -maxrate 2500k -minrate 1500k -bufsize 3000k -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:8554/stream 拉流 ffplay -rtsp_transport tcp rtsp://43.136.…...

编程日记 2025/6/29 11:28:36