- 博客(423)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Vue2项目之移动端购物商城(三) 首页的实现,搜索页和搜索历史记录的实现,搜索列表页的实现,分类页的实现
首页的实现通过对Layout/home.vue的二级路由动态渲染完成。首先，使用vant-ui.js按需引入所需组件。静态页面布局包括导航条、搜索框、轮播图、导航网格、主会场和“猜你喜欢”部分。随后，在api/home.js中封装了获取首页数据的接口getHomeData，并在home.vue中调用该接口，动态获取轮播图、导航和商品列表数据。最后，通过v-for指令将数据动态渲染到页面中，并封装GoodsItem子组件用于展示商品信息。
2025-05-07 19:06:02
463
原创 Vue2项目之移动端购物商城(二) 登录页的实现,vant组件Toast的使用,对axios进行二次封装,将数据的请求封装成api接口,设置路由导航守卫-全局前置守卫
在上例中,若在页面中类似的请求多了起来,整个页面会充斥着请求的代码,可阅读性较差,而且相同的请求也没有被复用,更没有被统一管理。所以在项目开发中,都会对axios进行基本的二次封装,单独封装到一个request模块中,便于维护使用。使用axios请求后端接口,一般都会对axios进行一些配置,比如配置基础地址,请求&响应拦截器等。在用户输入手机号后,需要给出提示,若输入正确:“发送成功,请注意查收!在中大型项目中,最好把请求封装成方法,统一存放到api模块,与页面分离。若输入不正确:“请输入正确的手机号”
2025-05-06 14:15:04
1027
原创 Vue2项目之移动端购物商城(一) 项目介绍,路由配置,vant组件库的下载和使用
这个vue2项目具有完整的商品购物流程,购物类项目是必须掌握的项目,建议多敲几次项目代码:h第三方封装好了很多组件,整合到一起就是一个组件库常见场景:日期选择框,数字输入框,五星评价,用户密码输入框。
2025-05-03 17:30:33
998
原创 综合案例:使用vuex对购物车的商品数量和价格等公共数据进行状态管理
显然,此处可以用到vuex,这也是Vuex在Vue项目中常见的使用场景之一。在vue根目录下创建db/db.json(数据可以让deepseek模拟)购物车的商品数量,商品价格以及下方的总价,总数量,是共用一个数据,
2025-05-02 20:46:08
478
原创 vuex的安装和使用,vuex的核心概念state,mutations,actions,getters和modules,以及相关的辅助函数mapState,mapMutations等
Vuex是vue的状态管理工具,状态就是数据通俗来说,Vuex是一个插件,帮我们管理vue通用的数据(多组件共享的数据)共同维护一份数据,集中化管理响应式变化操作简洁,vuex的辅助函数立大功。
2025-04-29 21:04:52
925
原创 ESLint介绍,常见的ESLint代码规范,创建Vue项目的过程中如何配置ESLint规范,下载ESLint插件自动排除格式报错
ESLint是js的静态代码分析工具,用来识别代码中的潜在问题,让用户强制执行统一的代码规范,它会自动检测代码,对于不符合格式要求的代码会报错。
2025-04-28 23:00:05
397
原创 新闻客户端案例的实现,使用axios获取数据并渲染页面,路由传参(查询参数,动态路由),使用keep-alive实现组件缓存
keep-alive是Vue的内置组件,用来包裹动态组件,使其缓存不活动的组件实例,而非销毁组件keep-alive是一个抽象组件,它自身不会渲染成一个DOM元素,也不会出现在父组件中。
2025-04-27 20:47:44
747
原创 单页面应用的特点,什么是路由,VueRouter的下载,安装和使用,路由的封装抽离,声明式导航与编程式导航的介绍和使用
定义和特点:所有功能都在一个HTML中实现示例:网易云音乐多页面应用:京东和淘宝区别:两者的导航栏跳转方式明显不同单页只有一个HTML页面,按需更新性能高,开发效率快,用户体验好,但学习成本高,首屏加载慢,SEO较差多页即多个HTML页面,整页更新的特点让其性能较低,开发效率一般,用户体验一般,学习成本中等,但首屏加载快,SEO较好*SEO:搜索引擎优化,可以理解为搜索结果的友好度使用场景单页:系统类网站,内部网站,文档类网站,移动端网站多页:公司官网,电商类网站。
2025-04-21 19:39:07
320
原创 使用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
523
原创 深入了解v-model的原理,封装表单类组件并用v-model简化代码,.sync修饰符的介绍与使用
v-model本质上是一个语法糖,在input文本框中,它是由value属性和oninput事件构成的在多选框中,它是由checked属性和onchange事件构成的在select下拉菜单中,它是由value属性和onchange事件构成的
2025-04-17 19:29:36
366
原创 webpack下载和使用,对一个项目进行打包的示例
新建modules文件夹和文件夹下的hello.js和main.js文件。在dist文件下创建inde.html,并引用result.js。dist文件夹下的result.js文件。
2024-10-24 13:33:34
1007
原创 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
892
原创 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
2436
原创 2023-04-01 解决使用sort()方法对数字数组排序失效的问题,sort()方法的参数:比较函数,如何根据对象属性,将对象构成的数组进行排序?
文章目录0.回顾sort()的用法示例一:对字符数组进行排序示例二:对数字数组进行排序1.sort()无法对由两位数以上的数组元素构成的数组进行合理排序示例出现原因和解决方法2.sort()的参数——比较函数示例:使用比较函数将数字数组进行正确排序比较函数的参数比较函数不能对混搭(字符+数字)数组进行排序3.对于由对象构成的数组,如何排序?需求解决方法:使用比较函数改进一:此时只能针对age属性进行排序,把age也替换成形参,写法如下改进二:让比较函数可以使用 属性值是数字型字
2023-04-01 10:26:55
1927
原创 2023-03-24 什么是服务器渲染?什么是预渲染?服务器渲染和预渲染的区别是什么?
文章目录0.客户端渲染什么是客户端渲染?客户端渲染的优缺点是什么?优点缺点客户端渲染的使用场景是什么?1.服务器渲染什么是服务器渲染?服务器渲染的优缺点是什么?优点缺点服务端渲染的使用场景是什么?2.预渲染什么是预渲染?预渲染的优缺点是什么?优点缺点预渲染的使用场景是什么?3.服务端渲染和预渲染的异同相同点不同点预渲染和服务器渲染的流程比较预渲染的流程服务器渲染的流程总结4.参考博文0.客户端渲染什么是客户端渲染?客户端渲染(CSR)又称为前端渲染,
2023-03-24 18:51:48
529
原创 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
156
原创 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
410
原创 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
347
原创 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
409
原创 2023-02-18 什么是chatGPT？如何使用chatGPT?chatGPT可以胜任人类当前哪些工作?.什么是openAI?chatGPT的使用示例
chatGPT本质上是一个应用在对话场景中的语言模型,它是基于GPT3.5(Generative Pre-trained Transformer,是指一种深度学习模型),通过人类反馈的强化学习微调而来,它能够回答用户的后续问题,理解自然语言,像人类一样回答问题,与人类进行自然语言交互2.如何使用chatGPT?方式一:微信搜索公众号或小程序"chatGPT"即可使用方式二:CSDN搜索栏:https://so.csdn.net/so/search?t=chat3.chatGPT可以胜任人类当前哪
2023-02-18 09:36:24
1953
原创 2023-02-07 vue中的高级修饰符sync超级语法糖背后的核心代码
文章目录介绍出现背景sync的一个使用场景介绍出现背景sync的一个使用场景element-ui 的dialog对话框示例代码中:https://element.eleme.cn/#/zh-CN/component/dialog 这是一段信息
2023-02-07 10:00:30
135
原创 2023-02-06 【踩坑】解决flex布局下ul的子元素不能水平居中的问题:改用div
问题描述在做商品列表时,发现div下的所有商品(ul)已经按照flex+换行成功布局,但是ul中的两个子元素:img图片标签和span文本标签不能正常居中显示在这里插入图片描述在这里插入图片描述问题解决使用div,不用ul
2023-02-06 19:26:51
953
原创 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
406
原创 2023-01-26 JS设计模式-单例模式:单例模式的原理和实现,懒汉模式和饿汉模式,单例模式实现登录框
1.什么是单例模式?介绍单例模式是最简单的设计模式之一,属于创建型模式,单例模式提供了一种创建对象的最佳方式特点-单例模式的类(单例类)只有一个实例对象这个单例对象必须由单例类创建单例类对外提供一个访问这个单例的全局访问点结构单例类:包含一个实例且能自行创建这个实例的类访问类:使用单例的类2.如何实现一个单例模式?思路通过单例模式的特点:一个类只有一个实例,先判断实例存在与否,若存在,则直接返回若不存在,则创建了再返回*在JS中单例作为一个命名空间提供者,从全局命名空
2023-01-26 13:45:29
1073
原创 2023-01-05 对vue生命周期的理解,父组件和子组件生命周期钩子执行顺序,第一次页面加载会触发哪几个钩子,vue获取数据在一般在哪个周期函数
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后： 在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.messa
2023-01-05 07:15:00
312
原创 2023-01-04 Echarts学习笔记(三) Echarts的实际应用场景:在网页中插入Echarts的折线图,饼状图和柱状图
零.准备和说明1.最终页面效果2.资源地址一.网页布局1.网页结构分析2.其他准备3.完整代码index.htmlcss/index.scss4.效果5.知识点5.1.伪类选择器:after 选择器,:before和content属性示例counter-increment函数5.2.z-index属性示例:图片设置 z-index: -1, 会显示在文字之后5.3.动画animate和关键帧@keyframe示例animation的属性值:动画执行时间 延迟时间 执行关键
2023-01-04 11:26:11
1497
原创 2023-01-03 Echarts学习笔记(二) 常见Option配置项介绍:xAxis,yAxis,series,grid,toolbox,legend,tooltip,title,color等
Echarts的基础配置1.color:调色盘颜色列表2.title:标题组件2.1.设置图表的标题2.2.同时主标题和副标题(了解)3.tooltip:提示框组件触发类型4.legend:图例组件5.toolbox:工具箱组件5.1.saveAsImage:可以另存为图片等功能,即下载按钮5.2.dataZoom:区域缩放5.3.dataView:数据视图,转化为本文格式5.4.restore:还原5.5.综上,以上都是feature的方法6.grid:网格配置7.xAxis
2023-01-03 19:06:00
997
原创 2023-01-02 Echarts学习笔记(一) 基础概念和应用示例:折线图
ECharts.js是 百度出品的一个开源 Javascript 数据可视化库一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。1.常见使用场景折线图、柱状图、散点图、饼图、K线图2.使用Echarts的基本步骤引入echarts 插件文件到html页面中准备一个具
2023-01-02 21:21:07
248
原创 2023-01-01 Promise常见机试题和答案,主要考察:执行顺序,值透传,错误处理,返回值,链式调用
Promise 构造函数是同步执行的,then方法是异步执行的var p = new Promise((resolve, reject) => { console.log(1) resolve(3) console.log(2)})p.then(res => { console.log(res)})console.log(4)//输出结果:1 2 4 3new 一个Promise示例后,立即执行executor函数,它是同步的,一直遇到resolve函数,把它
2023-01-01 14:16:03
616
2
原创 2022-12-31 Promise源码实现
1.实现一个简单的 promise2.实现一个Promise类3.实现then方法4.对上面已完成的Promise构造函数和then方法进行测试5.then方法返回的是一个Promise对象时该如何处理?6.修改then方法7.更新后的版本8.promise 的 then 函数实际上是注册一个微任务，then 函数中的参数函数并不会同步执行。9.解决这个问题:将 onFulfilled、onRejected 的执行放在下一个事件循环中
2022-12-31 18:38:59
764
1
原创 2022-12-30 Promise是构造函数,then()和catch()是绑定在原型上的方法,then的第二个参数和catch的区别,基于Promise处理AJAX请求
文章目录1.验证:Promise的本质是一个构造函数2.Promise的原型上绑定的属性和方法2.1.Promise的原型上绑定的属性constructor指向new Promise出来的实例2.2.Promise的原型上绑定的方法then语法说明示例当executor函数抛出错误或者返回一个拒绝的Promise时,then将返回一个拒绝的Promise2.3.Promise的原型上绑定的方法catch语法概括描述示例3.then的第二个参数和catch有什么区别?
2022-12-30 18:15:47
343
原创 2022-12-29 [整理]flex弹性布局
0.前言1.设置flex布局后的父子元素2.容器(父元素)的属性3.项目(子元素)的属性4.示例一:flex布局实现flex容器中子元素的水平垂直居中5.示例二:flex:1实现子元素平分flex容器宽度6.示例三:换行,多行布局7.示例四:flex-grow,flex-shrink和flex-basis属性的使用7.1.flex-grow的使用7.2.flex-shrink的使用7.3.flex-basis与width和min-width,max-width的区别7.4 flex-b
2022-12-29 18:58:50
658
原创 2022-12-27 使用lodash库实现两个非空对象的深拷贝并输出这两个对象的并集
解决方案使用lodash库中的merge函数引入lodash库(在线地址)使用merge函数 console.log(_.merge(a, b));
2022-12-27 18:30:23
460
原创 2022-12-26 JS实现数组的交集,并集和补集
var newArr = arr1.concat(arr2.filter(val => { return !(arr1.indexOf(val) > -1);}));
2022-12-26 21:47:55
298
原创 2022-12-24 三阶魔方完整教程和口诀速记,二级魔方教程
step1:黄色小花+白色十字略step2:复原白色底面即复原四个角块,公式:RUR’U’step3:中间层即复原四个侧面的棱块,左侧公式:U’L’UL UFU’F’右侧公式:URU’R’ U’F’UF UFU’F’step4:顶部十字公式:FRU R’U’F’情况一:中心直线,直接使用公式情况二:直角,摆成九点钟,再使用公式,变成情况一情况三:既不是中心直线也不是直角,用一次公式,变成情况二step5:复原黄色顶面即复原四个黄色角块,小鱼公式:LUL’U
2022-12-24 13:52:03
2831
原创 2022-12-20 事件流,事件委托,事件冒泡,事件捕获,阻止冒泡,一个DOM同时绑定事件冒泡和事件捕获,DOM0级事件,DOM2级事件,使用事件委托解决新增节点没有绑定上事件的问题
文章目录1.事件流2.事件冒泡3.事件捕获4.阻止冒泡5.事件委托6.DOM0级事件和DOM2级事件7.一个DOM同时绑定事件冒泡和事件捕获会输出什么?8.使用事件委托解决新增节点没有绑定上事件问题1.事件流JS事件:用于HTML和JavaScript之间的交互事件流:事件传播的过程DOM中完整的事件流包括三个阶段:事件捕获阶段,目标阶段,事件冒泡阶段(注意中间的目标阶段不要记成事件委托阶段)事件通过捕获到达目标元素,这个时候就是目标阶段,从目标节点元素将事件上传到根节点的构成阶段
2022-12-20 18:55:44
209
原创 2022-12-19 [汇总] 字符串方法,数组方法,数组遍历,数组去重,判断数据类型是数组还是对象,forEach的return,v-for的key使用数组的索引index,数组中出现最多的字符
文章目录一.数组方法和数组遍历1.unshift/shift,pop/push方法2.some和every方法3.slice和splice方法3.1.数组arr.slice(start,end)方法不会改变原数组而是返回一个子数组3.2.数组arr.splice(index, n, item1,...itemx)方法会改变原数组语法[重要] splice方法可以删除，添加，替换4.concat方法5.使用forEach和for..in遍历数组二.字符串方法1.substr和subst
2022-12-19 19:48:17
460
原创 2022-12-13 什么是语法糖?JS中常见的语法糖有哪些?
语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法,使操作变得更加清晰方便,更符合编程习惯通俗理解就是一种便捷写法,去掉不用也不影响语言的表达,因为处理程序本身就会把语法糖构建转换成更加基础的构件
2022-12-13 14:31:43
716
原创 2022-12-12 如何判断一个变量是一个对象还是一个数组?
2.instanceOfinstanceof运算符返回一个布尔值，表示对象是否为某个构造函数的实例var obj = {name: "zhangsan"};var arr = [1, 2, 3];console.log(arr instanceof Array); //trueconsole.log(arr instanceof Object); //true(万物皆对象)console.log(obj instanceof Array); //falseconsole.log(obj in
2022-12-12 15:44:27
370
原创 2022-12-11 isPrototypeOf、instanceof、hasOwnProperty的用法和示例
1.instanceof运算符用法一:instanceof返回一个布尔值,表示对象是否为某个构造函数是的实例function Person() { this.age = 18};var p = new Person();console.log(p instanceof Person);//true;instanceof左边是实例对象，右边是构造函数它会检查右边构造函数的原型对象是否在左边对象的原型链上,即console.log(Person.prototype.isPrototypeOf(p))
2022-12-11 10:38:39
171
vue或者uniapp有哪些API可以达到原生JS动态绑定css样式的效果？
2023-06-28
js定时器中的间隔时间能否设置为随机数
2021-07-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人