自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Jasmin博客

前端

  • 博客(129)
  • 问答 (3)
  • 收藏
  • 关注

原创 面试题 之 vue

vue2和vue3面试题

2024-04-02 13:22:54 1235

原创 WebGIS 之 vue3+vite+ceisum

项目搭建node版本在16以上

2024-03-31 22:02:45 1487

原创 WebGIS 之 Ceisum认识

Cesium是使用JavaScript开发的基于WebGL的,实现三维地球和地图可视化的JS库。Cesium支持海量的三维模型数据,影像数据,地形高程数据,矢量数据等丰富的地理数据的加载。在交通,规划,城市管理,地形仿真等领域有非常广泛的应用。Cesium为三维的GIS提供了一个高效的数据可视化平台。特点:1、跨平台,跨浏览器,无插件2、强大的地理数据可视化能力。Cesium自定义的3D Tiles数据格式,支持海量数据渲染3、丰富可用的工具。

2024-03-31 18:35:28 343

原创 WebGIS 之 Openlayer

通过这个参数的名字我可以推断一个map可以设置多个layer,图层是构成openlayers的基本单位,地图是由多个layer组成的,这种设计类似于Photoshop里面的图层,多个图层是可以叠加的,在最上面的会覆盖下面的。geojson数据是矢量数据,是包含地理信息的json数据,格式是以key:value的形式存在的。EPSG:4326 的经纬度范围是:经度范围在 -180° 到 180° 之间,纬度范围在 -90° 到 90° 之间。// 将初始化的地图设置到id为map的DOM元素上。

2024-03-30 17:36:06 855

原创 webGIS 之 智慧校园案例

2.使用控件3.标记功能4.使⽤GeoJSON数据持久化5.实现打卡6.推荐浏览路线

2024-03-30 15:21:41 1191

原创 WebGIS开发

高德开发API注册账号,创建项目拿到key和密钥高德key3.展示地图4.展示图层5.地图控件6.地图事件6.1获取经纬度7.点标记8.交互式绘制点9.灵活点标记10.矢量图形10.1折线10.2多边形polygon11.计算距离

2024-03-29 18:40:44 1013

原创 WebGIS概述

矢量图形,一般覆盖于底图图层之上,通过矢量的方式(路径或者实际大小)来描述其形状,用几何的方式来展示真实的地图要素,会随着地图缩放而发生视觉大小的变化,但其代表的实际路径或范围不变。坐标通常指经纬度坐标,高德地图的坐标范围大致为:东西经180度(-180180,西半球为负,东半球为正),南北纬85度(-85-- 85,北半球为正,南半球为负)。地图平面像素坐标指投影为平面之后的地图上的平面像素坐标,高德地图使用的Web卡托投影,在3级时,平面坐标范围为横纵0-256。底图(Map): 所有信息的载体。

2024-03-29 12:14:19 396

原创 面试题 之 JavaScript

元素响应事件的函数委托到另一个元素,事件流有三个阶段捕获阶段,目标阶段,冒泡阶段,事件委托在冒泡阶段事件有:click mousedown mouseup keydown keyup。

2024-03-29 09:05:25 480

原创 面试题 之 webpack

Webpack 是实现前端项目的模块化,用于现代 JavaScript 应用程序的静态模块打包工具,被webpack 直接引用的资源打包进 bunde.js的资源,当webpack 处理应用程序时,它会在内部构建一个依赖图,依赖图对应映射到项目所需的每个模块 ,并生成一个或多个 bundle。3️⃣模块能力,项目维护性增强,支持不同种类的前端模块类型,统一的模块化方案,所有资源文件的加载都可以通过代码控制。2️⃣模块整合能力,提高性能,可维护性,解决浏览器频繁请求文件的问题。

2024-03-27 18:00:26 494

原创 面试题 之 react

通过对传入的原始组件做一些你想要的操作(比如操作 props,提取 state,给原始组件包裹其他元素等),从而加工出想要的组件把通用的逻辑放在高阶组件中,对组件实现一致的处理,从而实现代码的复用所以,高阶组件的主要功能是封装并分离组件的通用逻辑,让通用逻辑在组件间更好地被复用。由于react hooks 的出现,函数式组件创建的组件通过使用 hooks 方法也能使之成为有状态组件,再加上目前推崇函数式编程,所以这里建议都使用函数式的方式来创建组件在考虑组件的选择原则上,能用无状态组件则用无状态组件。

2024-03-20 21:57:18 1144

原创 vue 之 Quill编辑器封装

【代码】vue 之 Quill编辑器封装。

2024-03-02 17:26:37 567

原创 vue 之 element 图片上传组件封装

【代码】vue 之 element 图片上传组件封装。

2024-03-02 17:22:32 631

原创 node 之 解决下包速度慢的问题

在使用 npm 下包的时候,默认从国外的https://registry.npmis.org/ 服务器进行下载,此时,网络数据的传输需要经过漫长的海底光缆,因此下包速度会很慢。淘宝在国内搭建了一个服务器,专门把国外官方服务器上的包同步到国内的服务器,然后在国内提供下包的服务从而极大的提高了下包的速度。为了更方便的切换下包的镜像源,我们可以安装nrm这个工具,利用nrm提供的终端命令,可以快速查看和切换下包的镜像源。镜像是一种文件存储形式,一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像。

2024-03-01 10:08:53 392

原创 node 之 npm

node.js中的第三方模块又叫做包就像电脑和计算机指的是相同的东西,第三方模块和包指的是同一个概念,只不过叫法不同。

2024-02-29 18:02:02 552

原创 node 之 模块化

模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说,模块是可组合、分解和更换的单元。编程领域中的模块化编程领域中的模块化,就是遵守固定的规则,把一个大文件拆成独立并互相依赖的多个小模块。把代码进行模块化拆分的好处:1️⃣提高了代码的复用性2️⃣提高了代码的可维护性3️⃣可以实现按需加载模块化规范模块化规范就是对代码进行模块化的拆分与组合时,需要遵循的那些规则例如:使用什么样的语法格式来引用模块在模块中使用什么样的语法格式向外暴露成员。

2024-02-29 17:52:37 551

原创 node 之 http模块

在网络节点中,负责消费资源的电脑叫做客户端;负责对外提供网络资源的电脑,叫做服务器http模块是node.js官方提供的,用来创建web服务器的模块,通过http模块提供的http.createServer()方法,就能方便的把一台普通的电脑,变成一台web服务器,从而对外提供web资源服务。服务器和普通电脑的区别在于,服务器上安装了web服务器软件,例如IIs,Apache等。通过安装这些服务器软件,就能把一台普通电脑变成一台web服务器。

2024-02-28 16:47:46 1312

原创 鸿蒙开发 之 ArkTsUI基础组件

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript(简称TS)基本语法风格的基础上,对TS的动态类型特性施加更严格的约束,引入静态类型。同时,提供了声明式UI、状态管理等相应的能力,让开发者可以以更简洁、更自然的方式开发高性能应用。之前前端开发需要掌握html css javascript 三种不同的语言,现在只需要ArkTS。

2024-02-26 14:05:50 355

原创 node 之 path路径模块

path模块是node.js官方提供的,用来处理路径的模块,它提供了一系例的方法和属性,用来满足用户对路径的处理需求。

2024-02-23 09:46:49 928

原创 node 之 fs文件系统模块

fs模块是Node.js官方提供的、用来操作文件的模块。它提供了一系列的方法和属性,用来满足用户对文件的操作需求fs.readFile(),用来读取制定文件中的内容fs.writeFile(),用来向制定的文件中写入内容如果要在JavaScript代码中,使用fs模块来操作文件,则需要使用如下的方式先导入,这些模块在安装node时候就存在了。

2024-02-23 09:17:49 359

原创 node 之 初步认识

Node.js是一个基于ChromeV8引擎的JavaScript运行环境node.js。

2024-02-22 14:54:47 526

原创 TypeScript基本语法

TypeScript具备面向对象编程的基本语法,例如interface,class,enum等。具备封装、继承、多态等面向对象基本特征。模块可以相互加载,提高代码复用性。在TypeScript中,空字符串,数字0,null,undefined都被认为是false,其他则为true。TypeScript在JavaScript的基础上加入了静态类型检查功能,因此每一个变量都是有固定的数据类型。TypeScript通常利用function关键字声明函数,并且支持可选参数、默认参数、箭头函数等特殊语法。

2024-02-20 09:37:41 247

原创 鸿蒙开发 之 工具安装和环境搭建

8.如果说你的SDK没有安装成功,可以点击页面上的help里的 Diagnose Development Environment来判断你当前的开发环境是否是完整的,打开后,这里会检查你缺少哪些依赖,红色叉号提示你报出哪些错误的信息,绿色对号代表全部安装成功。4.在弹出的SDK下载信息页面,单击Next,并在弹出的License Agreement窗口,阅读License协议,需同意License协议后,单击Next。2.在如下安装选项界面勾选DevEco Studio后,单击Next,直至安装完成。

2024-02-19 10:31:04 953

原创 vue3 之 商城项目—封装SKU组件

颜色 尺寸 产地都选择了。

2024-02-18 17:35:39 963

原创 vue3 之 商城项目—会员中心

当路由path为二级路由路径member的时候,右侧可以显示个人中心三级路由对应的组件。1️⃣个人中心—个人信息和猜你喜欢数据渲染。2️⃣我的订单—各种状态下的订单列表展示。页数 = 总条数 / 每页条数。

2024-02-18 13:40:57 368 2

原创 vue3 之 数据格式化函数

在很多项目中,都会有数据字典表,前端通过请求后端拿到数据字典表里的数据,一般在页面列表上面状态数据都会是返回的数字,前端需要把数字转换成字典表里对应的数据值,下面写了一个前端写死的数据,stateMap里的数据可以换成从接口请求过来的数据。

2024-02-18 12:03:02 378 2

原创 vue3 之 倒计时函数封装

编写一个函数useCountDown可以把秒数格式化为倒计时的显示xx分钟xx秒。2️⃣start是倒计时启动函数,调用时可以设置初始值并且开始倒计时。1️⃣formatTime为显示的倒计时时间。

2024-02-15 22:54:31 534

原创 vue3 之 商城项目—支付

编写一个函数useCountDown可以把秒数格式化为倒计时的显示状态。2️⃣start是倒计时启动函数,调用时可以设置初始值并且开始倒计时。1️⃣formatTime为显示的倒计时时间。

2024-02-15 22:50:10 372

原创 vue3 之 商城项目—结算模块

2️⃣通过动态类名:class控制激活样式类型active是否存在,判断条件为:激活地址对象的id===当前项id。1️⃣点击时记录一个当前激活地址对象activeAddress,点击哪个地址就把哪个地址对象记录下来。2️⃣切换地址交互:点击切换地址,点击确定按钮,激活地址替换成默认收货地址。地址切换是我们经常遇到的tab切换类需求,这类需求的实现逻辑都是相似的。1️⃣打开弹框交互:点击切换地址按钮,打开弹框,回显用户可选地址列表。1️⃣调用接口生成订单id,并且携带id跳转到支付页。

2024-02-15 19:00:58 508

原创 vue3 之 商城项目—购物车

到目前为止,购物车在非登陆状态下的各种操作都已经ok了,包括action的封装,触发,参数传递,剩下的事情就是action中做登录状态的分支判断,补充登录状态下的接口操作逻辑即可。v-model双向绑定指令不方便进行命令式的操作(因为后续还需要调用接口),所以把v-model回退到一般模式,也就是model-value和@change的配合实现。单选的核心思路就是始终把单选框的状态和Pinia中的store对应的状态保持同步。2️⃣商品总价钱计算逻辑:商品列表中的所有商品的count*price累加之和。

2024-02-14 16:16:04 925

原创 vue3 之 商城项目—登陆

思考:每个表单域都有自己的校验触发事件,如果用户一上来就点击登陆怎么办呢?在点击登陆时需要对所有需要校验的表单进行统一校验// 调用实例方法// valid: 所有表单都通过校验 才为true// 以valid做为判断条件 如果通过校验才执行登录逻辑// 1. 提示用户ElMessage({ type: 'success', message: '登录成功' })// 2. 跳转首页})

2024-02-09 13:39:08 1031 1

原创 vue3 之 Pinia数据持久化

在设置state的时候会自动把数据同步给localstorage,在获取state数据的时候会优先从localstorage中取。操作state时自动把用户数据在本地的localStorege也存一份,刷新的时候会从localStorege中先取出。1️⃣用户数据中有一个关键的数据叫做token(用来标识当前用户是否登陆),而token持续一段时间才会过期。2️⃣Pinia的存储是基于内存,刷新就丢失,为了保持登陆状态就要做到刷新不丢失,需要配合持久话进行存储。

2024-02-09 13:10:08 404

原创 vue3 之 通用组件统一注册全局

vue3 之 通用组件统一注册全局。

2024-02-09 12:08:25 706

原创 vue3 之 商城项目—详情页

1️⃣获取到当前的鼠标在盒子内的相对位置(useMouseInElement),控制滑块跟随鼠标移动(left/top)思路:维护一个数组图片列表,鼠标划入小图记录当前小图下标值,通过下标值在数组中取对应图片,显示到大图位置。2️⃣实现放大效果,大图的宽高是小图的两倍,大图的移动方向和滑块移动方向相反,且数值为2倍。3️⃣鼠标移入盒子(isOutside),滑块和大图才显示(v-show)3️⃣鼠标移入控制滑块和大图显示隐藏。1️⃣左侧滑块跟随鼠标移动。2️⃣右侧大图放大效果实现。

2024-02-09 08:00:00 1283

原创 vue3 之 商城项目—二级分类

使用elementPlus提供的v-infinite-scroll指令监听是否满足触底条件,满足加载条件时让页数参数加一获取下一页数据,做新老数据拼接渲染。在不同路由切换的时候,可以自动滚动到页面的顶部,而不是停留在原先的位置。点击tab,切换筛选条件参数sortField,重新发送列表请求。

2024-02-08 17:15:38 881

原创 vue3 之 商城项目—一级分类

缓存问题:当路由path一样,参数不同的时候会选择直接复用路由对应的组件,相同的组件实例会被重复使用,两个路由渲染同一个组件,

2024-02-08 16:28:51 733

原创 vue3 之 商城项目—home

非复杂的模版抽象成props,复杂的结构模版抽象为插槽。

2024-02-07 14:53:17 587

原创 vue3 之 商城项目—layout静态模版结构搭建

需求:浏览器在上下滚动的过程中,如果距离顶部的滚动距离大于78px,吸顶导航显示,小于78px隐藏。一般情况下我们会有nav区域,header区域,二级路由出口区域以及footer区域,如图。阿里的字体图标库支持多种引入方式,项目里采用的是font-class引用的方式。我们在开发的时候先把大模块搭建起来,再一步一步填充小模块。项目中有两种导航,一种普通导航一种吸顶导航。

2024-02-06 15:09:07 634

原创 vue3 之 商城项目—项目搭建起步

在编写代码的过程中,一旦输入@/,vscode会立刻联想出src下的所有子目录和文件,统一文件路径访问不容易出错。

2024-02-06 13:11:08 476

原创 Vue3 之 Pinia

Pinia是一个Vue的专属的最新状态管理库,是vuex状态管理工具的替代品1️⃣Pinia是用来做什么的?集中状态管理工具,新一代的vuex2️⃣Pinia中还需要mutation吗?不需要,action既支持同步也支持异步3️⃣Pinia如何实现getter?computed计算性函数4️⃣Pinia产生的Store如何解构赋值数据保持响应式?

2024-02-06 09:45:08 261

原创 uniapp 之 base64转临时地址播放mp3

需求是:进入页面的时候是先有背景音乐,发送问题请求回答的时候会返回文字和音频,前端要把音频读出来,并且把背景音乐停止,读完音频后再打开背景音乐。

2024-02-05 14:38:13 867

vue-rabbit.zip小鲜兔商城项目

技术栈:vue3 、element—plus 、vite、pinia、pinia-plugin-persistedstate、dayjs、vue-router、sass、vueuse 项目模块:layout页、home页、一级分类、二级分类、商品详情、登陆权限、购物车、订单页、第三方支付宝支付、会员 封装组件:放大镜、sku组件、倒计时 商品展示与分类:小鲜兔商城将各类商品进行分类展示,包括食品、家居用品、服装等。用户可以浏览不同分类下的商品,并查看详细的商品信息和图片。 购物车和结算:用户可以将心仪的商品加入购物车,随时调整商品数量。在确认购买后,用户可以选择合适的支付方式进行结算。 会员:小鲜兔商城设有会员制度,用户可以注册成为会员并享受会员专属的折扣、促销活动和积分奖励等福利。 订单管理:用户可以查看自己的订单列表,包括待付款、待发货、已发货和已完成的订单。用户还可以查看订单状态、物流信息等。

2024-02-18

react+ts+antd-mobile 动态tabs和下拉加载及详情

react+ts+antd-mobile 动态tabs和下拉加载及详情

2024-02-03

vue3+elementPlus pc和小程序ai聊天文生图

vue3+elementPlus pc和小程序ai聊天文生图

2024-01-26

react 之 记账本案例

react 之 记账本案例

2023-12-30

react+redux美团案例

美团案例

2023-12-29

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除