一周小计(1):实习初体验

实习的第一周,从最开始的配环境做好准备工作,到拉项目熟悉项目,然后自己去写需求,每一步都有很大收获,得到很多人帮助真的好感谢,以下是个人这几天的记录与感想。
(这个其实是我写的周报,有点水,记录的也不太详细,有些也是别人帮助我解决的没有记得很清楚,先发了水一篇,好长时间没发过了,下周一定好好做笔记呢~)

一、技术环境搭建与配置(前提基础)

环境配置
首要任务是下载并配置VS Code,安装Node.js,以及配置yarn和PNPM作为包管理器。

//1. 安装node
https://nodejs.org/zh-cn/ //官网下载
node -v npm -v //检查版本
npm config set registry https://registry.npm.taobao.org//配置镜像源
//2. pnpm
npm install -g pnpm@版本号
//3. 切换node版本
n //查看已安装的node 版本
ls //查看已安装
上下键选择要使用的node版本
//4. 必备插件
Auto Rename Tag //自动同步修改闭合标签
EsLint //语法纠错
Prettier - Code formatter //格式化代码
File->Preference->Settings输入Auto Save选择afterDelay //自动保存代码
vue3-snippets-for-vscode //clg快速log输出

感想

  • 环境搭建是基础工作,熟练掌握git的一些常用操作,利用好google和chatgpt来辅助开发,做好准备工作。
  • 但是搭环境的时候node跟pnpm版本不匹配导致项目运行不起来,还是让强哥涛哥坚哥他们帮忙好久,最后还是辛苦一哥帮忙解决了,遇到卡死的点尝试利用好搜索工具以及尽快寻求他人帮助吧,不能陷入死循环。

二、Git操作练习与项目熟悉(版本控制与协作)

熟悉Git的操作
从GitLab上克隆了公司官网项目,并通过创建本地分支进行了一些小修改的尝试,把代码push到远程,成功远程部署到jenkins。

项目熟悉
通过阅读项目代码,大致理解官网项目的架构和业务逻辑。

* git clone git@gitlab.linctex.com:front-end/style3d_homesite.git //克隆项目代码到本地
* git checkout -b cgd //创建并切换到新分支cgd
* git pull --rebase //将远程分支的最新提交合并到本地分支
* git add . //将要上传的所有代码存到暂存区
* git commit -m 'xxx' //提交的信息记录
* git push --force-with-lease //强制推送(force push)本地分支到远程仓库
* git rebase cgd //将当前所在分支的提交历史重新定位到cgd所代表的提交或分支的顶部
* git cherry-pick 123234 // git cherry-pick id .将指定提交(通过其哈希值或commit ID标识)应用于当前分支上,而不是合并整个分支.
* git log //可以查看以前的记录 查看ID
* git merge dev //合并

感想

  • 工欲善其事必先利其器,先牢固掌握好基础和一些方法,不要贪图新的知识,个人职业规划详细思考。
  • 利用好AI辅助未尝不是解决问题的给力工具,真的挺方便。
  • 个人的思维方式,遇到问题只是表面解决了,后面要透过现象看本质,通过不断追问“为什么”,剥离表象,直达问题的核心,然后从这个核心出发构建解决方案。

三、官网首页改版(实战)

首页Banner修改
英文和中文的文案均缩短,自动滑动速度再慢一点
添加功能判定
在“申请试用”按钮上添加一个判断逻辑,需要再写一个弹框组件,判定是个人用户还是企业用户,个人用户跳转到studio,企业用户跳转到表单。

<template><div ref="customAModal" class="custom-a-modal"><AModal v-model:visible="visible" :centered="true" :get-container="() => $refs.customAModal as HTMLElement":footer="null" width="684px" @cancel="handleButtonCancel"><!-- 个人用户 --><div class="item" @click="toStudio"><img src="./Group 775280.png" /><span class="text">{{ $t('global_link_Individual') }}</span></div><!-- 企业用户 --><div class="item border" @click="toApplyTrial"><img src="./Group 775281.png" /><span class="text">{{ $t('global_link_Corporate') }}</span></div></AModal></div>
</template><script lang="ts" setup>
import { ifCNLocale } from '~~/composables/useLocale.ts';
import { computed, reactive, onMounted, onUnmounted, ref } from 'vue';defineExpose({ showButton, handleButtonCancel });const isCN = ifCNLocale();
const ifMatched = ref(false);
const visible = ref<boolean>(false);
const { $bus, $lenis } = useNuxtApp();
const isSubmitting = ref<boolean>(false);onMounted(() => {ifMatched.value = matchMobile();// 监听事件$bus.$on('show:applyButton', () => {showButton();});$bus.$on('close:applyButton', () => {handleButtonCancel();});
});// 打开与关闭弹窗
const showButton = () => {// 滚动阻塞$lenis.stop();visible.value = true;
};const handleButtonCancel = () => {// 滚动启用$lenis.start();visible.value = false;
};// 个人用户跳转
const toStudio = () => {window.open('http://studio.style3d.com/');
};// 企业用户跳转
const toApplyTrial = () => {if (ifMatched.value) {// 移动 端,展开Header$bus.$emit('show:mobileNav');} else {// PC 端,打开试用表单$bus.$emit('show:applyModal');handleButtonCancel();}
};
</script><style lang="less">
.custom-a-modal {.apply-for-trial-form.cn.dialog {.ant-input {background-color: transparent;}}.apply-for-trial-form.en.dialog {.ant-input {background-color: transparent;}}
}
</style>
<style lang="less" scoped>
@modal-border-radius: 20px;.custom-a-modal {font-family: Montserrat, 'HarmonyOS Sans SC';user-select: none;:deep(.ant-modal-content) {color: #ffffff;margin: 0 auto;border-radius: @modal-border-radius;background: rgba(0, 0, 0, 1) !important;// backdrop-filter: blur(20px);border: 0;position: relative;.ant-modal-close {// svg {//     color: #fff;// }visibility: hidden;.custom-a-modal-close {height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;font-size: 24px;}& {opacity: 0.5;transition: all 0.5s ease-in-out;&:hover {opacity: 1;}}}.ant-modal-body {width: 684px;height: 170px;display: flex;flex-direction: row;align-items: center;padding: 0px;}}.apply-for-trial-help {position: absolute;border-radius: 0 0 @modal-border-radius @modal-border-radius;bottom: 0;left: 0;height: 40px;width: 100%;background: rgba(255, 255, 255, 0.2);display: flex;justify-content: center;align-items: center;user-select: text;}.loading-mask {position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.6);display: flex;align-items: center;justify-content: center;border-radius: 20px;}.item {width: 50%;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;&.border {border-left: 1px solid #262626;}}.item:hover {background-color: blue;border-radius: 20px 0 0 20px;}.item.border:hover {background-color: blue;border-radius: 0 20px 20px 0;}.text {height: 23px;font-size: 20px;font-weight: 500;margin-left: 32px;}.item img {width: 50px;height: 50px;}
}:deep(.ant-modal-mask) {backdrop-filter: blur(20px);
}
</style>
<style lang="less">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none !important;
}input[type='number'] {-moz-appearance: textfield;
}
</style>

感想

  • 第一次体会到了理论知识与实际开发之间的差异,虽然自己有思路怎么做,但是去写的时候找不到在哪以及写了但是为什么这个功能没有实现,还好有强哥帮忙,掌握到怎么快速查找和输出大法。
  • 有思路不代表会做,自己去写也是有点混乱的,没有彻底理清思路。在遇到问题之前,必须把思路理清,再一步一步来
  • 语法规范,优美的写代码。

写在最后

  • 下面这一部分我是不会写在周报里面的哈哈哈,就是个人的一点小感受记录了
  • 第一次用mac,真的一点都不懂咋用的,好尴尬啊啊啊,电脑干干净净啥都没有。实习要用mac的小伙伴注意了!提前看一些基本操作!
  • 第一天第二天就配环境拉项目看项目,也还好。但是第三天就给了我两个小小的需求,我好心虚~。怕自己写不出来。果不其然,写的很不顺利,第三天就有点小郁闷了。还好带我的哪个哥人特别好一直在教我!提出表扬!第四天顺利写出来了,又开心了。
  • 第一周刚开始有一个新人介绍会(只是我们组的,挨个自我介绍就好了,大家都很厉害),老大还请我吃新人欢迎餐好感动,帮助了我很多谢谢老大!and周会(要写周报,以及要表扬谁我没来得及写好惭愧要感谢很多人都没写)和月会(刚好赶上月末),我是i人啊啊,月会整个研发的都要过来,最后我要自我介绍还有表演才艺,谁懂啊好尴尬,特别尴尬的表演了一个魔术。。不过最后还吃到了一个哥哥的生日蛋糕(好吃 祝他生日快乐)!
  • 最后,在实习期间也会不断学习的,老大还给我搞了学习计划,会更新自己的学习记录~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/37854.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hi3861 OpenHarmony嵌入式应用入门--LiteOS Semaphore做同步使用

信号量作为同步使用 创建一个Semaphore对象&#xff0c;并指定一个初始的计数值&#xff08;通常称为“许可”或“令牌”的数量&#xff09;。这个计数值表示当前可用的资源数量或可以同时访问共享资源的线程数。当一个线程需要访问共享资源时&#xff0c;它会尝试从Semaphore…

加油站可视化:打造智能化运营与管理新模式

智慧加油站可视化通过图扑 HT 构建仿真的三维模型&#xff0c;将加油站的布局、设备状态、人员活动等信息动态呈现。管理者可以通过直观的可视化界面实时监控和分析运营状况&#xff0c;快速做出决策&#xff0c;提高管理效率和安全水平&#xff0c;推动加油站向智能化管理转型…

后端之路第三站(Mybatis)——结合案例讲Mybatis怎么操作sql

先讲一下准备工作整体流程要做什么 我们要基于一个员工管理系统作为案例&#xff0c;进行员工信息的【增、删、改、查】 原理就是用Mybatis通过java语言来执行sql语句&#xff0c;来达到【增、删、改、查】 一、准备工作 1、引入数据库数据 首先我们把一个员工、部门表的数…

【51单片机入门】速通定时器

文章目录 前言定时器是什么初始化定时器初始化的大概步骤TMOD寄存器C/T寄存器 触发定时器中断是什么中断函数定时器点亮led 总结 前言 在嵌入式系统的开发中&#xff0c;定时器是一个非常重要的组成部分。它们可以用于产生精确的时间延迟&#xff0c;或者在特定的时间间隔内触…

对外发布的PDF文档进行数字证书签名的重要性?

对外发布的PDF文档进行数字证书签名具有以下几个重要性&#xff1a; 身份验证&#xff1a;数字签名可以证明文档的来源&#xff0c;即确认文档的签署者身份。这如同在纸质文档上手写签名或加盖公章&#xff0c;但更安全可靠&#xff0c;因为数字签名是基于加密技术&#xff0c;…

Java--常用类APl(复习总结)

前言: Java是一种强大而灵活的编程语言&#xff0c;具有广泛的应用范围&#xff0c;从桌面应用程序到企业级应用程序都能够使用Java进行开发。在Java的编程过程中&#xff0c;使用标准类库是非常重要的&#xff0c;因为标准类库提供了丰富的类和API&#xff0c;可以简化开发过…

【接口自动化测试】第三节.实现项目核心业务接口自动化

文章目录 前言一、实现登录接口对象封装和调用 1.0 登录接口的接口测试文档 1.1 接口对象层&#xff08;封装&#xff09; 1.2 测试脚本层&#xff08;调用&#xff09;二、课程新增接口对象封装和调用 2.0 课程新增接口的接口测试文档 2.1 接口对象层…

AVL树模拟

1.概念 虽然二叉搜索树可以缩短查找的效率&#xff0c;但如果数据有序或者接近有序时二叉搜索树树将退化为单支树&#xff0c;查找元素相当于在顺序表中搜索元素&#xff0c;效率低下。AVL 树是具有一下性质的二叉搜索树&#xff1a; 1.它的左右子树都是AVL树 2.左右子…

Mac 如何安装 wget

1.安装 Homebrew2.安装 wget3.检测 wget 是否安装成功 1.安装 Homebrew 在安装 wget 之前需要安装一个适用于 mac 的包管理器 Homebrew&#xff0c;打开 mac 终端执行如下命令进行安装&#xff1a; /usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/h…

【Git】GitIgnore不生效

这里可能有两种原因&#xff0c;一个没有刷新Git缓存&#xff0c;二是Git忽略规则有问题 更新Git缓存 git rm -r --cached . git add . git commit -m "modify git ignore rule"Ignore规则 检查下忽略文件的目录表示是否正确 XXX忽略任意目录下名为XXX的文件 …

新手第一个漏洞复现:MS17-010(永恒之蓝)

文章目录 漏洞原理漏洞影响范围复现环境复现步骤 漏洞原理 漏洞出现在Windows SMB v1中的内核态函数srv!SrvOs2FeaListToNt在处理FEA&#xff08;File Extended Attributes&#xff09;转换时。该函数在将FEA list转换成NTFEA&#xff08;Windows NT FEA&#xff09;list前&am…

【Golang - 90天从新手到大师】Day14 - 方法和接口

一&#xff0e; go方法 go方法&#xff1a;在函数的func和函数名间增加一个特殊的接收器类型&#xff0c;接收器可以是结构体类型或非结构体类型。接收器可以在方法内部访问。创建一个接收器类型为Type的methodName方法。 func (t Type) methodName(parameter list) {}go引入…

在 MATLAB 中显示 3D 图像

文章目录 前言1. 曲面图 (Surface Plot)2. 网格图 (Mesh Plot)3. 散点图 (Scatter Plot)4. 等值线图 (Contour Plot) 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 项目需要&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例…

享元模式(设计模式)

享元模式&#xff08;Flyweight Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过共享细粒度对象来减少内存使用&#xff0c;从而提高性能。在享元模式中&#xff0c;多个对象可以共享相同的状态以减少内存消耗&#xff0c;特别适合用于大量相似对象的场景。 享元模…

解决“Duplicate keys detected: ‘ ‘.This may cause an update error.”问题

问题原因 出现“Duplicate keys detected”的错误&#xff0c;通常表示在v-for指令中使的:key绑定值有重复。 如果前端是静态数据&#xff0c;一般能自我避免:key绑定值有重复。如果前端是绑定的动态数据&#xff0c;那么需要另外提供一个唯一的键。 在这个例子中&#xff0c…

【LeetCode】接雨水

目录 一、题目二、解法完整代码 一、题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff…

面向对象,常用类,集合,异常,JDBC,mysql数据库内容的复习,

1&#xff0c;面向对象 面向对象与面向过程对比 面向过程&#xff1a;关注过程&#xff0c;适合解决简单直接的问题&#xff0c;代码结构以函数为单位&#xff0c;如C语言。 面向对象&#xff1a;关注类&#xff0c;适合解决复杂问题更加适合解决复杂的项目中的问题等等&…

跨平台编程:在Conda中搭建R语言环境的终极指南

&#x1f310; 跨平台编程&#xff1a;在Conda中搭建R语言环境的终极指南 &#x1f310; 在数据科学和统计分析领域&#xff0c;R语言以其强大的数据处理能力和丰富的图形表示功能而广受欢迎。然而&#xff0c;对于习惯了使用Linux操作系统的用户来说&#xff0c;如何方便地在…

【UML用户指南】-23-对高级行为建模-状态机

目录 1、概述 2、状态 2.1、状态的组成 3、转移 3.1、转移的组成 4、高级状态和转移 4.1、进入效应和退出效应 4.2、内部转移 4.3、do活动 4.4、延迟事件 4.5、子状态机 5、子状态 5.1、非正交子状态 5.2、历史状态 5.3、正交子状态 6、分叉与汇合 7、主动对象…

GOROOT GOPATH GOPROXY GO111MODULE

GOROOT GOROOT代表Go的安装目录。可执行程序go(或go.exe)和gofmt(或gofmt.exe)位于 GOROOT/bin目录中。 配置GOROOT环境变量&#xff0c;其值为Go的安装目录&#xff1b;然后在环境变量PATH中添加GOROOT/bin路径。 注意&#xff1a;GOROOT变量只是代表了安装目录&#xff0c;不…