- 博客(439)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 uniapp项目之小兔鲜儿小程序商城(八) 订单模块:填写订单页的实现，支付订单页的实现，订单详情页的实现，订单列表页的实现
本文介绍了订单模块的设计实现，主要包括以下内容： 创建订单模块分包pagesOrder，用于集中管理订单相关页面：填写订单页create.vue、支付订单页payment.vue、订单详情页detail.vue和订单列表页。 填写订单页create.vue的三种生成方式：购物车结算、立即购买和再次购买。 页面结构包含： 收货地址选择区域 商品信息展示区 配送时间选择器（提供三种配送时段） 订单备注输入框 支付金额结算区 底部提交订单按钮 实现了配送时间选择和订单备注填写功能，页面采用响应式布局，考虑到了不同
2025-06-26 19:38:25
586
原创 uniapp项目之小兔鲜儿小程序商城(七) 商品详情页(登录后):加入购物车，立即购买（SKU 模块）
摘要 本文主要介绍了商品详情页SKU模块的实现方法。SKU（库存管理最小单元）是电商系统的核心功能，文章通过以下步骤实现： 从uni-app插件市场下载vk-data-goods-sku-popup组件 通过easycom机制自动引入组件 创建类型声明文件规范组件属性 使用v-model控制弹窗显示 处理后端数据适配组件格式要求 实现规格选择、加入购物车等交互功能 关键点包括：组件自动扫描机制、数据类型转换、弹窗交互控制等，为电商详情页开发提供了完整解决方案。
2025-06-25 19:59:37
380
原创 uniapp项目之小兔鲜儿小程序商城(六) 地址模块:地址管理页的实现,地址表单页的实现
地址模块包含地址管理页和地址表单页两个功能页面，主要用于收货地址的增删改查操作。地址管理页显示地址列表，支持删除和跳转修改；地址表单页通过id参数区分新建/修改两种场景，动态设置页面标题，并封装API接口实现地址新增功能。模块采用分包加载模式，包含完整的静态页面结构和样式代码。
2025-06-24 20:48:00
716
原创 uniapp项目之小兔鲜儿小程序商城(五) 登录页的实现,会员中心页的实现,设置页的实现,会员信息页的实现
本文摘要：微信小程序登录页实现方案解析。文章介绍了如何利用微信开放能力获取用户信息，通过wx.login获取code参数，并结合button组件获取encryptedData和iv参数完成登录请求。详细展示了login.vue页面的静态布局，包括样式设计和结构搭建。重点讲解了小程序获取手机号的特殊机制，必须通过用户主动点击授权按钮才能获取加密信息。还提供了api接口封装和类型定义的方法，以及页面调用时获取code参数的具体实现。整个登录流程符合微信安全规范，实现了无需填写用户名密码的一键登录功能。
2025-06-21 16:46:52
309
原创 uniapp项目之小兔鲜儿小程序商城(四) 商品详情页的实现:uniapp弹层组件uni-popup的使用
文章摘要：本文介绍了商品详情页的uni-app实现方案。页面分为登录前（商品展示、轮播图）和登录后（购物车功能）两大模块。代码展示了商品详情页静态布局，包括商品主图轮播、基本信息、操作面板、商品详情和同类推荐等核心区域。页面采用scroll-view实现滚动效果，底部工具栏包含收藏、客服、购物车及购买按钮，并考虑了安全区域适配。实现细节涵盖商品图片展示、价格信息、规格选择、服务说明等功能模块，为电商应用提供了完整的商品详情页开发参考。
2025-06-19 19:41:33
216
原创 uniapp项目之小兔鲜儿小程序商城(三) 热门推荐页的实现,商品分类页的实现
本文介绍了如何实现一个热门推荐页面的复用功能，主要包含以下内容：静态布局与路由跳转创建hot.vue页面，包含封面图、推荐选项和商品列表通过查询参数实现不同推荐类型（特惠/爆款/一站买全/新鲜好物）的路由跳转使用defineProps接收URL参数并动态设置页面标题数据获取实现分析接口文档，发现四个推荐类型接口结构相似封装通用推荐接口getHotRecommendAPI使用组合类型HotParams（包含页码参数和子类型）该方案通过一个页面复用四种推荐类型展示，减少了代码重
2025-06-18 18:52:59
753
原创 uniapp项目之小兔鲜儿小程序商城(二) 首页的实现:自定义导航栏,轮拨图,前台分类,热门推荐,猜你喜欢,下拉刷新,骨架屏
本文介绍了一个Uni-app项目中的首页优化实践。首先通过自定义导航栏组件(包含Logo和搜索框)，利用uni.getSystemInfoSync()获取安全区域距离实现机型适配。其次封装了全局轮播图组件XtxSwiper，支持自动播放和指示点功能，采用小程序原生swiper标签实现。两个组件均采用组件化设计，提高了代码复用性，其中导航栏通过隐藏默认导航栏并自定义样式，轮播图通过配置circular和autoplay参数实现循环播放效果。整个方案体现了Uni-app跨平台开发中组件化和自适应布局的设计思想
2025-06-16 18:07:25
874
原创 uniapp项目之小兔鲜儿小程序商城(一) 项目介绍,技术栈,小程序的基础架构,封装拦截器和请求函数
本文介绍了B2C渡河平台项目的前期准备与技术架构。项目采用Vue3+TypeScript技术栈，包含Vuex状态管理、Axios请求封装等功能。详细说明了uniapp项目的两种创建方式（HBuilderX和命令行），重点演示了使用vscode开发uniapp的配置步骤，包括插件安装、TS类型校验和json文件设置。文章还对比了uniapp与原生小程序开发的区别，提供了项目代码拉取指引，并概述了小程序基础架构的三大模块：页面构建、状态管理和数据交互。最后介绍了uni-ui组件库的安装和请求工具的封装方法。
2025-06-16 11:11:37
1031
原创 TypeScript学习笔记:TS的介绍和安装,常用类型,高级类型,类型声明文件
emit(‘success’, ‘add’)//通知父组件ArticleManage.vue添加成功了,额外传参add为了与编辑做区分。ElMessage({ type: ‘success’, message: ‘删除成功’ })await artEditService(fd)//编辑操作:调用封装的编辑接口。console.log(‘编辑操作’)//先留坑,后续补上此功能。if (formModel.value.id) {//编辑操作。ElMessage.success(‘添加成功’)//提示信息。
2025-06-02 16:43:25
658
原创 vue3项目之大事件管理系统(四) 二级路由:个人中心页的实现,用AI大模型开发整个项目模块
文章摘要：本文介绍了个人中心页面的三个子模块实现方案：1.基本资料模块(UserProfile.vue)包含表单布局、昵称和邮箱校验功能，采用Vue3和elementPlus实现表单校验与提交；2.更换头像模块(UserAvatar.vue)提供图片选择和上传功能；3.重置密码模块(UserPassword.vue)。重点展示了基本资料页的实现细节，包括表单结构、校验规则配置（昵称2-10位非空、邮箱格式校验）、数据绑定和接口调用逻辑，使用Pinia进行状态管理，通过ElMessage反馈操作结果。全文采
2025-05-28 21:06:17
296
原创 vue3项目之大事件管理系统(三) 二级路由:文章分类页的实现,文章管理页的实现
文章分类与管理页面的组件封装与功能实现本文介绍了基于Vue3和Element Plus的文章分类和管理页面的开发过程。主要内容包括：封装可复用的PageContainer组件，使用插槽机制实现标题和按钮的自定义文章分类页实现：封装API接口获取分类数据使用el-table动态渲染分类表格添加编辑、删除功能按钮优化加载状态和空数据展示文章管理页实现：静态页面布局与表单设计动态渲染文章列表分页功能实现搜索和重置功能实现添加文章功能的实现，包括抽屉组件封装、文件上传和富
2025-05-26 19:47:50
1047
原创 vue3项目之大事件管理系统(二) 一级路由:登录页的实现和首页的实现,el-dropdown下拉菜单中如何绑定点击事件
本文摘要介绍了使用Element Plus组件库实现登录注册页面的静态布局和功能开发。主要包括：1)通过el-row和el-col实现响应式栅格布局，左侧展示背景图，右侧放置表单；2)使用v-if/v-else指令切换登录/注册表单；3)详细讲解了表单校验的实现步骤：创建formModel数据对象、定义rules校验规则、绑定prop属性等。文章还提供了代码示例，展示了如何配置用户名校验（必填项、长度限制等）的完整流程。整个实现基于Vue3的script setup语法，并结合Element Plus的表单
2025-05-23 19:40:48
435
原创 vue3项目之大事件管理系统(一) 项目介绍和相关配置,下载相关插件和配置路由
使用Vue3组件式API使用Pinia进行持久化处理使用Element-plus作为组件库(提供表单校验,表格处理和组件封装等功能)使用升级的包管理工具pnpm使用ESLint+Prettier作为代码规范使用husky(Git hook工具)作为代码提交的规范校验使用VueRouter4作为路由设置和请求模块的设计尝试使用AI(deepseek或chatGPT),向其提出明确的,描述准确的功能需求,让其返回可为我们所用的代码
2025-05-22 19:05:51
381
原创 Vue3基础知识介绍,组件式api的常用方法,Pinia的介绍和使用
Vue3相较于Vue2在维护性、速度、体积和响应式系统上均有显著提升。Vue3引入了组合式API，使得代码组织更加灵活，同时支持更好的TypeScript集成。Vue3使用Proxy进行数据劫持，解决了Vue2中无法检测新增属性的问题。创建Vue3项目时，推荐使用create-vue脚手架，其底层基于Vite构建工具，提供了更快的开发体验。Vue3的项目结构包括vite.config.js、package.json、main.js等文件，其中main.js使用createApp函数创建应用实例。Vue3的组
2025-05-19 19:14:54
653
原创 Vue2项目之移动端购物商城(五) 结算页的实现,订单管理页的实现,个人中心的实现,项目打包优化,mixin封装弹出确认框,vuex中的跨模块访问
文章介绍了结算页的实现，主要分为静态页面布局和功能实现两部分。静态页面布局包括确认收货地址和订单信息两个部分，使用Vue.js框架和Vant组件库进行开发。页面结构包括地址信息、订单明细、支付方式、买家留言和底部提交按钮。订单明细展示了商品信息、数量、价格等，支付方式支持余额支付，买家留言为选填项。底部提交按钮显示实付款金额，用户可提交订单。整体页面设计简洁，功能清晰，便于用户完成订单结算操作。
2025-05-09 21:49:54
610
原创 Vue2项目之移动端购物商城(四) 商品详情页的实现,购物车实现
本文介绍了商品详情页的实现，主要包括静态页面布局和功能实现。页面结构分为轮播图、商品信息、商品评价、商品描述和底部操作栏。轮播图支持自动播放，并显示当前图片序号。商品信息部分展示了价格、销量、商品描述及服务承诺。商品评价部分展示了用户评价及其评分。商品描述通过图片展示详细信息。底部操作栏提供了返回首页、购物车、加入购物车和立即购买的功能。代码使用了Vue.js框架和Vant UI组件库，通过动态数据绑定和事件处理实现交互功能。
2025-05-08 10:22:59
896
原创 Vue2项目之移动端购物商城(三) 首页的实现,搜索页和搜索历史记录的实现,搜索列表页的实现,分类页的实现
首页的实现通过对Layout/home.vue的二级路由动态渲染完成。首先，使用vant-ui.js按需引入所需组件。静态页面布局包括导航条、搜索框、轮播图、导航网格、主会场和“猜你喜欢”部分。随后，在api/home.js中封装了获取首页数据的接口getHomeData，并在home.vue中调用该接口，动态获取轮播图、导航和商品列表数据。最后，通过v-for指令将数据动态渲染到页面中，并封装GoodsItem子组件用于展示商品信息。
2025-05-07 19:06:02
565
原创 Vue2项目之移动端购物商城(二) 登录页的实现,vant组件Toast的使用,对axios进行二次封装,将数据的请求封装成api接口,设置路由导航守卫-全局前置守卫
在上例中,若在页面中类似的请求多了起来,整个页面会充斥着请求的代码,可阅读性较差,而且相同的请求也没有被复用,更没有被统一管理。所以在项目开发中,都会对axios进行基本的二次封装,单独封装到一个request模块中,便于维护使用。使用axios请求后端接口,一般都会对axios进行一些配置,比如配置基础地址,请求&响应拦截器等。在用户输入手机号后,需要给出提示,若输入正确:“发送成功,请注意查收!在中大型项目中,最好把请求封装成方法,统一存放到api模块,与页面分离。若输入不正确:“请输入正确的手机号”
2025-05-06 14:15:04
1227
原创 Vue2项目之移动端购物商城(一) 项目介绍,路由配置,vant组件库的下载和使用
这个vue2项目具有完整的商品购物流程,购物类项目是必须掌握的项目,建议多敲几次项目代码:h第三方封装好了很多组件,整合到一起就是一个组件库常见场景:日期选择框,数字输入框,五星评价,用户密码输入框。
2025-05-03 17:30:33
1019
原创 综合案例:使用vuex对购物车的商品数量和价格等公共数据进行状态管理
显然,此处可以用到vuex,这也是Vuex在Vue项目中常见的使用场景之一。在vue根目录下创建db/db.json(数据可以让deepseek模拟)购物车的商品数量,商品价格以及下方的总价,总数量,是共用一个数据,
2025-05-02 20:46:08
520
原创 vuex的安装和使用,vuex的核心概念state,mutations,actions,getters和modules,以及相关的辅助函数mapState,mapMutations等
Vuex是vue的状态管理工具,状态就是数据通俗来说,Vuex是一个插件,帮我们管理vue通用的数据(多组件共享的数据)共同维护一份数据,集中化管理响应式变化操作简洁,vuex的辅助函数立大功。
2025-04-29 21:04:52
986
原创 ESLint介绍,常见的ESLint代码规范,创建Vue项目的过程中如何配置ESLint规范,下载ESLint插件自动排除格式报错
ESLint是js的静态代码分析工具,用来识别代码中的潜在问题,让用户强制执行统一的代码规范,它会自动检测代码,对于不符合格式要求的代码会报错。
2025-04-28 23:00:05
410
原创 新闻客户端案例的实现,使用axios获取数据并渲染页面,路由传参(查询参数,动态路由),使用keep-alive实现组件缓存
keep-alive是Vue的内置组件,用来包裹动态组件,使其缓存不活动的组件实例,而非销毁组件keep-alive是一个抽象组件,它自身不会渲染成一个DOM元素,也不会出现在父组件中。
2025-04-27 20:47:44
760
原创 单页面应用的特点,什么是路由,VueRouter的下载,安装和使用,路由的封装抽离,声明式导航与编程式导航的介绍和使用
定义和特点:所有功能都在一个HTML中实现示例:网易云音乐多页面应用:京东和淘宝区别:两者的导航栏跳转方式明显不同单页只有一个HTML页面,按需更新性能高,开发效率快,用户体验好,但学习成本高,首屏加载慢,SEO较差多页即多个HTML页面,整页更新的特点让其性能较低,开发效率一般,用户体验一般,学习成本中等,但首屏加载快,SEO较好*SEO:搜索引擎优化,可以理解为搜索结果的友好度使用场景单页:系统类网站,内部网站,文档类网站,移动端网站多页:公司官网,电商类网站。
2025-04-21 19:39:07
361
原创 使用ref和refs获取DOM元素和组件方法,使用$nextTick解决Vue异步更新的逻辑下无法获取DOM的问题
需求v-if==>标题文字和"编辑"按钮,点击后它们会消失,同时渲染v-elsev-else==>input文本框,要求让input出现的同时自动获得焦点初步逻辑//显示输入框://获取焦点//在input上绑定ref="inp"出现问题input成功被渲染,但无法自动获得焦点此时获取不到inp,打印出来是undefined原因分析Vue出于提升性能的考量,是异步更新DOM的.
2025-04-19 20:06:44
574
原创 深入了解v-model的原理,封装表单类组件并用v-model简化代码,.sync修饰符的介绍与使用
v-model本质上是一个语法糖,在input文本框中,它是由value属性和oninput事件构成的在多选框中,它是由checked属性和onchange事件构成的在select下拉菜单中,它是由value属性和onchange事件构成的
2025-04-17 19:29:36
388
原创 webpack下载和使用,对一个项目进行打包的示例
新建modules文件夹和文件夹下的hello.js和main.js文件。在dist文件下创建inde.html,并引用result.js。dist文件夹下的result.js文件。
2024-10-24 13:33:34
1042
原创 2023-06-22 使用事件委托来为所有子节点绑定事件,e.target和this的区别,vue获取DOM节点的常见方法
文章目录1.使用事件委托为子节点绑定事件2.e.target和this的区别3.vue中如何获取DOM节点?方法一:通过事件源来获取当前点击的节点方法二:通过ref来获取当前点击的节点方法三:使用自定义指令来获取当前点击的节点1.使用事件委托为子节点绑定事件 1 2 3 4 5
2023-06-22 12:13:16
902
原创 2023-04-14 使用纯JS实现一个2048小游戏
一.实现思路1.2048的逻辑2.移动操作的过程中会有三种情况二.代码部分:分为初始化部分和移动部分1.初始化部分1.1.生成第一个方块:1.2.生成第二个方块:2.移动过程部分:三.实现代码1.HTML部分2.CSS部分3.JS部分3.1.game对象的属性3.2.game对象的start方法3.3.game对象的randomNum方法3.4.game对象的dataView方法3.5.game对象的isGameOver方法3.6.game对象中设置移动的方法(以左移动为例
2023-04-14 21:36:33
2496
原创 2023-04-01 解决使用sort()方法对数字数组排序失效的问题,sort()方法的参数:比较函数,如何根据对象属性,将对象构成的数组进行排序?
文章目录0.回顾sort()的用法示例一:对字符数组进行排序示例二:对数字数组进行排序1.sort()无法对由两位数以上的数组元素构成的数组进行合理排序示例出现原因和解决方法2.sort()的参数——比较函数示例:使用比较函数将数字数组进行正确排序比较函数的参数比较函数不能对混搭(字符+数字)数组进行排序3.对于由对象构成的数组,如何排序?需求解决方法:使用比较函数改进一:此时只能针对age属性进行排序,把age也替换成形参,写法如下改进二:让比较函数可以使用 属性值是数字型字
2023-04-01 10:26:55
1943
原创 2023-03-24 什么是服务器渲染?什么是预渲染?服务器渲染和预渲染的区别是什么?
文章目录0.客户端渲染什么是客户端渲染?客户端渲染的优缺点是什么?优点缺点客户端渲染的使用场景是什么?1.服务器渲染什么是服务器渲染?服务器渲染的优缺点是什么?优点缺点服务端渲染的使用场景是什么?2.预渲染什么是预渲染?预渲染的优缺点是什么?优点缺点预渲染的使用场景是什么?3.服务端渲染和预渲染的异同相同点不同点预渲染和服务器渲染的流程比较预渲染的流程服务器渲染的流程总结4.参考博文0.客户端渲染什么是客户端渲染?客户端渲染(CSR)又称为前端渲染,
2023-03-24 18:51:48
562
原创 2023-03-22【总结：常见性能优化（三）】对于vue项目你有哪些常见的优化的方案?—— 在基础的Web技术层面对Vue项目进行优化
文章目录三.基础Web基础优化1.使用gzip压缩网页大小什么是gzip?在express中开启gzip压缩2.使用浏览器缓存来提高页面加载速度3.使用CDN从服务器中获取数据4.使用谷歌浏览器的Performance面板来查找性能瓶颈5.参考博文三.基础Web基础优化1.使用gzip压缩网页大小什么是gzip?gzip是GNUzip的缩写,用于UNIX系统文件的压缩,在http协议上的gzip编码是一种用来改进web应用程序性能的技术web服务器(比如阿帕奇,nginx)和客户
2023-03-22 18:58:01
171
原创 2023-03-21【总结：常见性能优化（二）】对于vue项目你有哪些常见的优化的方案?—— 在Webpack层面对Vue项目进行优化
文章目录二.在Webpack层面对Vue项目进行优化1.使用webpack对图片进行压缩vue项目中的图片处理如何使用image-webpack-loader压缩图片?2.减少ES6转成ES5的冗余代码为什么会出现冗余代码?解决冗余代码的方法原理插件3.提取公共代码为什么要提取公共代码?配置插件4.使用模板预编译5.提取组件的CSS6.优化SourceMap打包后用于线上环境的代码出现bug时不好定位和调试解决方法:sourceMap解决不好调试代码的问题7.构建结果输出
2023-03-21 10:59:57
422
原创 2023-03-20 【总结：常见性能优化（一）】对于vue项目你有哪些常见的优化的方案?—— 在Vue代码层面对Vue项目进行优化
文章目录零.前言一.在Vue代码层面对Vue项目进行优化1.分场景使用v-if和v-show面试题:v-if和v-show的区别?使用场景2.分场景使用computed和watch面试题:computed和watch的区别?使用场景3.为v-for添加数组的item作为key值,并避免同时使用v-if面试题:v-for为什么要添加key?面试题:v-for为什么要使用数组的item作为key而不是index?面试题:v-for和v-if的优先级哪个更高?4.仅仅用于数据展示的组件不
2023-03-20 19:51:07
365
原创 2023-03-11 摄影构图小技巧汇总:点构图,线构图,面构图
文章目录1.点构图1.1.中心点示例1.2.九宫格示例1示例2注意事项:三分点构图可能导致画面不平衡,可以通过在相对三分点放入另一元素平衡画面2.线构图2.1.对称线构图示例1:水平对称示例2水平对称示例3:垂直对称示例4:垂直对称2.2.三分线构图示例1示例2注意事项1:水平三分线构图需要留意强调的部分注意事项2:垂直三分线构图要注意人像,特别是人物朝向2.3.对角线构图示例2.4.曲线构图示例1示例22.5.引导线构图示例1示例2注意事项:引导的主体
2023-03-11 11:18:56
454
原创 2023-02-18 什么是chatGPT？如何使用chatGPT?chatGPT可以胜任人类当前哪些工作?.什么是openAI?chatGPT的使用示例
chatGPT本质上是一个应用在对话场景中的语言模型,它是基于GPT3.5(Generative Pre-trained Transformer,是指一种深度学习模型),通过人类反馈的强化学习微调而来,它能够回答用户的后续问题,理解自然语言,像人类一样回答问题,与人类进行自然语言交互2.如何使用chatGPT?方式一:微信搜索公众号或小程序"chatGPT"即可使用方式二:优快云搜索栏:https://so.youkuaiyun.com/so/search?t=chat3.chatGPT可以胜任人类当前哪
2023-02-18 09:36:24
1971
原创 2023-02-07 vue中的高级修饰符sync超级语法糖背后的核心代码
文章目录介绍出现背景sync的一个使用场景介绍出现背景sync的一个使用场景element-ui 的dialog对话框示例代码中:https://element.eleme.cn/#/zh-CN/component/dialog 这是一段信息
2023-02-07 10:00:30
144
原创 2023-02-06 【踩坑】解决flex布局下ul的子元素不能水平居中的问题:改用div
问题描述在做商品列表时,发现div下的所有商品(ul)已经按照flex+换行成功布局,但是ul中的两个子元素:img图片标签和span文本标签不能正常居中显示在这里插入图片描述在这里插入图片描述问题解决使用div,不用ul
2023-02-06 19:26:51
964
原创 2022-02-05 window,html,body和document的区别,BOM和DOM相关知识点
1.window,html,body和document的定义htmlbodywindowdocument2.window,html,body和document的区别3.document.body 和 document.documentElement的区别4.document.body.clientWidth、document.documentElement.clientWidth和window.innerWidth的区别示例结论5.复习:BOM和DOMBOM(Browser Objec
2023-02-05 21:22:02
412
原创 2023-01-26 JS设计模式-单例模式:单例模式的原理和实现,懒汉模式和饿汉模式,单例模式实现登录框
1.什么是单例模式?介绍单例模式是最简单的设计模式之一,属于创建型模式,单例模式提供了一种创建对象的最佳方式特点-单例模式的类(单例类)只有一个实例对象这个单例对象必须由单例类创建单例类对外提供一个访问这个单例的全局访问点结构单例类:包含一个实例且能自行创建这个实例的类访问类:使用单例的类2.如何实现一个单例模式?思路通过单例模式的特点:一个类只有一个实例,先判断实例存在与否,若存在,则直接返回若不存在,则创建了再返回*在JS中单例作为一个命名空间提供者,从全局命名空
2023-01-26 13:45:29
1078
vue或者uniapp有哪些API可以达到原生JS动态绑定css样式的效果？
2023-06-28
js定时器中的间隔时间能否设置为随机数
2021-07-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人