- 博客(39)
- 收藏
- 关注
原创 服务器使用指南(适用于前端开发者)
作为前端开发者,我们经常需要服务器来部署项目,但很多新手对服务器的配置不太熟悉。本指南将帮助你快速上手,从购买服务器到部署前端项目,涵盖必要的步骤和工具。
2025-03-30 22:43:08
1122
原创 处理sass-loader安装失败
我们在开发中,经常会使用sass语法来编写css,在安装node-sass和sass-loader时,经常会出现错误(通常是依赖冲突)导致安装失败。
2023-10-17 11:02:39
1392
原创 使用echarts开发世界地图,以东半球为中心
比如美国的经纬度为(“-96,37.09024”)需要修改成(“264.287109,37.09024”),也就是让经度+360。链接:https://pan.baidu.com/s/1rKeRvNF3L6usA_t9mojs9w 提取码:json。使用这份json文件需要注意一个问题,也是我在开发中遇到的。如果是要在地图上渲染美洲区域的数据,经度会出错,
2023-10-12 10:11:58
1627
1
原创 实现路由切换显示进度条效果
在进行页面路由跳转的时候,如果页面的资源过多或者网络较差的情况下,页面的加载速度很慢,而且用户也不知道加载到了那一步,进度到了哪里。这个时候在页面顶部添加一个进度条可以很好的增加用用户的体验。
2023-02-12 15:53:20
460
原创 使用插件将SVG图标转化为雪碧图
在开发过程中,经常要使用SVG图标去进行页面的一个布局,分享一个好用的插件(本人在vue3开发中使用),可以将**icons**文件夹中的所有SVG图生成雪碧图。
2023-02-09 17:02:21
906
原创 如何在项目中高效的修改头像
在大多数的开发过程中,都有编辑个人信息的功能需求,需要能够修改头像、名称、密码等功能,其中较为繁琐的就是修改头像头像的功能。使用组件可以让我们的开发效率得到显著的提升,专注于功能的实现。如果是做移动端,推荐使用vant组件库中的文件上传https://vant-contrib.gitee.io/vant/v2/#/zh-CN/uploader上传文件必须使用formdata的数据格式其中的formdata.append(“键名”,键值)的形式,将数据添加到formdata 中调用接口打印数据之后,可以获
2022-06-03 10:31:07
457
原创 超简单设置右键 VS Code 打开文件
超简单设置右键 VS Code 打开文件每次羡慕小伙伴,右键一下就跳出来vscode打开的快捷键;于是自己就查了下资料(百毒了一下),找到原因,安装vscode时,直接全部默认了,没有选择Open with Code(右键快捷方式)。但是,选择都已经安装完了,总不能为了这个小功能让我卸载了又重新安装一遍吧,于是又开始敲键盘百毒,果然,网友们总是更强的,方法如下:首先找到自己的vscode的安装地址,直接找到vscode的快捷方式,右键点击属性 ,选择快捷方式,就可以一键复制地址建议:在复制地址的时候
2022-05-08 14:00:04
13718
16
原创 将本地代码推送到远程仓库(方式二)
theme: channing-cyan将本地代码推送到远程仓库用户先在本地电脑上进行初始化 git 仓库的操作git init正常在这个页面添加文件,提交版本touch //创建文件git add . //将文件保存在暂存区git commit -m "上传代码到本地仓库" // 这个命令是将代码上传到本地仓库 ""内的内容自己定义这是使用git 命令行创建的方式,也可在 vscode 中创建文件完成上述的过程之后, 打开码云如果我们直接输入 gi.
2022-04-30 18:32:20
370
原创 设置码云SSH将本地代码推送到远程仓库
theme: channing-cyan设置码云SSH将本地代码推送到远程仓库之前的两种推送方式都是使用HTTPS协议,需要输入账号跟密码。一些电脑系统在使用码云的时候,没有自动记录密码功能,就可能会出现频繁要求添加账号和密码的问题。 这个时候可以通过设置 ssh 来解决。什么是SSHSSH(Secure Shell,安全外壳)是一种网络安全协议,通过加密和认证机制实现了设备之间的安全保障。传统远程登录或文件传输方式,例如 Telnet,FTP,使用明文传输数据,存在很多的安全隐患。随着人们对网络.
2022-04-30 18:31:40
2400
原创 将本地代码上传到码云仓库
克隆远程仓库到本地在本地安装设置好git 之后,可以通过码云https://gitee.com/ 建立远程仓库,将远程仓库克隆到本地,也可以将本地的代码上传到码云上进行管理。克隆远程仓库登录码云之后,点击我的创建仓库,再点击右下角的 HTTPS ,复制地址。打开存放代码的文件夹,创建本地仓库,创建文件并将文件推送至本地仓库;在该文件夹中右键调出 git终端 ,输入命令行:git clone https://gitee.com/C-aliang/a-liangs-small-treasury.g
2022-04-29 20:23:23
2050
原创 01-箭头函数 数组及常见方法 创建对象 面向对象
JS高级箭头函数函数的简写 常做形参使用代码展示 <script> // 箭头函数 const fun1 = (Num) => Num + 1; // 定义箭头函数,没有形参 没有返回值 2行实际业务 const fun2 = () => { console.log('箭头函数'); } // 没有形参 没有返回值 业务只有一行代码 大括号可
2022-04-23 16:10:21
873
原创 07-正则表达式
theme: channing-cyanhighlight: a11y-dark正则表达式正则表达式1.初识正则表达式定义正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象作用通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式。使用场景例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)比如用户名: /1{3,16}$/过滤掉页.
2022-04-18 14:37:34
811
原创 06-BOM- 操作浏览器
06-BOM- 操作浏览器window对象BOM(浏览器对象模型)BOM(Browser Object Model ) 是浏览器对象模型[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jlup6WqG-1650025584363)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649993396853.png)]window 是浏览器内置中的全局对象,我们所学习的所有 Web A
2022-04-15 20:26:52
1006
原创 05-DOM- 网页特效篇
DOM- 网页特效篇滚动事件和加载事件滚动事件 scroll1.初识滚动事件定义 scroll当页面进行滚动时触发的事件作用很多网页需要检测用户把页面滚动到某个区域后做一些处理, 比如固定导航栏,比如返回顶部2.滚动事件使用监听整个页面滚动[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-StGRWy6x-1649939359890)(05-DOM-%20%E7%BD%91%E9%A1%B5%E7%89%B9%E6%95%88%E7%AF%87.asse
2022-04-14 20:29:35
399
原创 04-DOM- 事件高级
DOM- 事件高级事件对象1.初识事件对象事件对象定义也是个对象,这个对象里有事件触发时的相关信息例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息获取事件对象在事件绑定的回调函数的第一个参数就是事件对象一般命名为event、ev、e[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ui90yfl-1649939300223)(04-DOM- 事件高级.assets/1649504156570.png)]代码<body>
2022-04-14 20:28:57
155
原创 03-DOM- 节点操作
DOM- 节点操作节点操作初识节点1.什么是节点?DOM树里每一个内容都称之为节点2.节点的类型元素节点所有的标签 比如 body、 divhtml 是根节点属性节点所有的属性 比如 href文本节点所有的文本[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SBNSo0dE-1649571477766)(03-DOM- 节点操作.assets/1649246049328.png)]查找节点节点关系父节点子节点兄弟节点
2022-04-10 14:18:14
970
原创 02-DOM-事件基础
DOM-事件基础事件事件监听什么是事件?事件是在编程时系统内发生的动作或者发生的事情比如用户在网页上单击一个按钮什么是事件监听?就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 注册事件语法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rMcXkjK4-1649571398631)(02-DOM-事件基础.assets/1649129032481.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片
2022-04-10 14:17:46
945
原创 01-DOM-获取DOM元素、修改属性
DOM-获取DOM元素、修改属性Web API 基本认知1.作用和分类作用: 就是使用 JS 去操作 html 和浏览器分类:DOM (文档对象模型)、BOM(浏览器对象模型)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vPOKUg7l-1649142008677)(01-DOM-获取DOM元素、修改属性.assets/1648970987152.png)]2.什么是DOMDOM(Document Object Model——文档对象模型)是用来呈现以及
2022-04-05 15:00:56
1619
原创 07-对象
对象1.对象的基本认识什么是对象对象是一种数据类型,无序的数据的集合用来描述某个事物,例如描述一个人人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能如果用多个变量保存则比较散,用对象比较统一比如描述 班主任 信息:静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示动态行为 (点名, 唱, 跳, rap) => 使用函数表示对象的组成对象包含属性跟方法(函数)2.对象的使用1.声明对象语法[外链
2022-04-05 14:57:50
1070
原创 04-循环语句
循环语句[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5tM7U09J-1648781940967)(04-循环语句.assets/1648339759197.png)]循环的目的:在实际问题中,有许多具有规律性的重复操作,因呲在程序腰完成这类操作就需要重复执行某些语句。for循环1.什么是for循环for 语句中不断重复某些代码,对计数器变量进行更新,实现递增或者递减好处:把声明起始值、循环条件、变化值写到一起,让人一目了然2.for循环的语法[外链图片转存
2022-04-01 10:59:11
156
原创 06-函数
函数初识函数函数的基本认识1.什么是函数function,是被设计为执行特定任务的代码块。2.为什么需要函数可以实现代码复用,提高开发效率。函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。函数使用1.函数语法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0p9pmUc-1648729284321)(06-函数.assets/1648692531197.png)][外链图片转存
2022-04-01 10:57:34
878
原创 05-响应式布局
响应式布局作用:只写一套代码,可以在PC端跟移动端运行原理:根据屏幕的宽度不同,去使用不同的CSS(媒体查询)那响应式布局是如何实现的呢?又能在开发中给我们带来什么便利呢?讲到响应式布局,需要先了解一下媒体查询。因为响应式布局的本质就是媒体查询。媒体查询1.1什么是媒体查询媒体查询( Media Query )是CSS3新语法。@media可以针对不同的屏幕尺寸设置不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重 置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲
2022-03-31 15:05:45
713
原创 05-数组
数组1.初识数组数组是什么?数组(Array)是一种可以按顺序保存数据的数据类型数组的作用?可以将多个数据储存到数组中如何筛选出数组内的其他元素?使用下标,数组内的元素依次从0开始计算下标,选中相应的下标就会输出相应的元素2.数组的基本使用1.数组的声明及了解声明语法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ApHaf7LO-1648710320835)(05-数组.assets/1648608362168.png)][外链图片
2022-03-31 15:05:27
623
原创 03-语句
JS流程控制——分支语句目标:掌握流程控制,写出能“思考”的程序语句的三大结构以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构有的时候要根据条件选择执行代码,这种就叫分支结构某段代码被重复执行,就叫循环结构[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UrGFW33C-1648709921639)(03-语句.assets/1648276840764.png)]今天我们着重学习一下分支语句If分支语句(一)作用以及组成作用分支语句可以让我们
2022-03-31 15:04:26
333
原创 04-移动适配
移动适配当前用户的屏幕宽度不同,网页元素尺寸不同,那如何在不同的屏幕尺寸中实现网页元素的等比缩放,实现宽高自适应呢?px单位或百分比布局是否可以实现这种效果呢?今天让我们来了解一下移动适配。百分比布局特点宽度自适应,高度固定,并不能做到宽高随着屏幕尺寸的变化而完全自适应。想要实现屏幕适配,重点就在相对单位上,只能选择相对长度单位。目前 解决这种问题的方法有两种:rem : 目前多数企业在用的解决方案vw / vh:未来的解决方案初识vw/vh文字解析1.什么是vw/vh?vw是相对长度
2022-03-31 15:04:00
5055
原创 03移动端知识
移动端移动端特点逻辑分辨率(可改):屏幕的宽度跟高度的单位是像素(PX);设备分辨率(硬件不可改):屏幕中一共拥有的物理像素点的个数;针对不同清晰度的设备,如何自动加载出对应清晰度的图片答:srcset[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4difxhwX-1648710146680)(03移动端知识.assets/1647505844031.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l0U3PYiI-1
2022-03-31 15:03:25
167
原创 02空间转换+动画
空间转换+动画空间转换(3D转换)作用 :使用transform属性实现元素在空间内的位移、旋转、缩放等效果空间:是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同 。属性:transform空间位移trasnlate目标:使用translate实现元素空间位移效果语法: transform: translate(x,y);中间使用“,”隔开 transform: translateX(值);沿着X轴移动 transform: transl
2022-03-31 15:02:16
212
原创 01初识web前端-
初识web前端字体图标作用 :使用字体图标实现网页中简洁的效果图标。优点:可以灵活改变图标的样式大小跟颜色(一)使用方法前往字体图标网站 Iconfont:https://www.iconfont.cn/下载字体包登录(新浪微博) → 选择图标库 → 选择图标,加入购物车 → 购物车 → 添加至项目 → 下载至本地解压之后,将字体包命名为iconfont使用link引入iconfont.css文件 <link rel="stylesheet" href="./ic
2022-03-31 15:00:37
609
原创 02-JS运算符md
运算符在程序的运行和开发当中呢,都涉及到运算,我们来了解一下JS中的运算符。以下为运算符篇的学习目录[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vUpCWfpt-1648709903832)(02-JS运算符md.assets/1648262568215.png)]算术运算符目标:握算术运算符,能写出一些具备运算能力的小程序1.什么是算数运算符?数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。+:求和-:求差*:求积/:求商%:取模(
2022-03-31 14:58:32
1205
原创 01-初识JS
初识JS1.JS介绍1.1什么是JS什么是JS?是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。JS有什么作用?网页特效 (监听用户的一些行为让网页作出对应的反馈)表单验证 (针对表单数据的合法性进行判断)数据交互 (获取后台的数据, 渲染到前端)服务端编程 (node.js)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5HXwNnnB-1648709861026)(01-初识JS.assets/1648024367047.png)
2022-03-31 14:58:10
1287
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅