- 博客(19)
- 收藏
- 关注
RSS订阅原创 加入购物车-数组框组件封装(v-model父传子，子传父$emit的使用，e.target.value，isNAN方法)
利用e.target.value获取输入框的值，然后声明一个num，利用+转为number型。首先，在父组件中声明变量count（初始值），如何利用v-model传值给子组件。减和加的点击事件逻辑差不多，需要注意的就是减到1的时候要return无法继续减了。要注意的是，父组件中的v-model不要写成动态传参了！input框的change事件要考虑两个，一个是非数字，一个是小于1。如果满足以上任一条件，吧输入框的值恢复到原来的value即可。分别问减事件，input框内的change事件，加事件。
2024-06-05 00:33:33
164
原创 商品详情页（computed和methods调用的区别）
2.如果有多个请求方法，可以分别在methods中写，然后在created中统一调用。3.computed的调用不需要()，methods中的是方法，需要（）！1.computed中如果要写方法的话，要return。其他的就是要注意头像如果没有的话给个默认图像。
2024-06-05 00:32:21
174
原创 继上篇学习的“对象的可选链操作符”
省流:这里的问号是一个叫可选链操作符的东西，简单来说就是如果对象中有?后的参数就传，没有就不传，不会报错。百度错误，发现这个是条件语句，作用是访问属性是否存在于该对象上。往下翻发现确实有的有children，有的没有。不过我不太懂框出来的？的作用，为什么不能直接.访问呢。我将问号删掉后发生以下报错，但是服务还是正常的。继上篇获取到数据后的渲染。
2024-06-05 00:31:45
89
原创 搜索页列表（跳转传参和动态传参接收query,params）
最后渲染到页面即可，在value中可以动态渲染一下，没值的时候渲染“搜索商品”，而那边是多参数，传的是对象过来，这边也一定要用对象来接收！需要注意的是，注意传值的形式，如果（{}）接收的是对象，传值也要是对象。跳转传参的查询方法是 this.$route.query.参数名。动态传参的查询方法是this.$route.params.参数名。首先在api下新建个produce.js，封装一下请求方法。比如下列错误案例中，传值为非对象，在views中。接下来就是分类页，还是先写api接口。
2024-06-05 00:27:59
139
原创 搜索历史管理(相关css的过长省略方法，数组方法indexof，splice，unshift）
做完了历史记录添加和清除后，接下来要做的是将历史记录保存在本地存储localStorage中。存储和清除可以归在一起--->设置 如果要清除直接传空数组过来，如果要设置传一个数组来即可。不存在会返回-1，如果不等于-1也就是存在的意思，存在需要用。goSearch最后还需要添加一个带参跳转，跳转到搜索商品页。，而且要判断是否存在，不存在给空（为后面初始化赋值做准备）goSearch是需要传参的，根据要找的值，利用。需要了解的是当搜索记录的字数过多要记得隐藏！（不存在的话也是直接添加即可）
2024-06-05 00:23:30
162
原创 首页-静态结构准备和动态渲染(父组件使用子组件三步骤，请求参数和父组件与子组件的通信）
这里比较有意思的是flex: 1，当我们设置好图片后，我们可以用flex: 1 将剩下的空间分配给信息盒子。父组件中用子组件有三步 1.导入子组件 2.在script中声明component 3.使用组件。太久没写过css了，复习一下，要记得在组件的样式中写上lang=”less“和scoped。还是一样，把接口封装到api --> 然后父组件请求数据 -->接着子传父传递数据即可。盒子可以看为左右两部分，左边放图片，右边放产品相关的信息。有需要参数，在方法中额外写params。最后就是父传子，组件通信。
2024-06-05 00:21:10
162
原创 页面访问拦截--全局前置导航守卫（includes方法
1.非权限页面最后的return非常重要！否则会继续走下面的逻辑。是: 是否有token？有-->放行 没有-->跳转到登录页面。3.进行判断 是否去的是需要权限的页面？2.数组判断存在方法 includes()也可以对获取token方法进行封装。1.创建一个需要权限的页面的数组。2.利用全局前置守卫，官网直接找。接着在路由可以这样调用。
2024-06-05 00:19:28
109
原创 添加请求loading效果(响应拦截器）
可能因为网络原因导致请求延时，如果用户点击多次就会发送多次登录请求，导致以下错误。不用担心Toast会重复，toast只会存在一个，下一个会把上一个覆盖。forbidClick: true 表示背景无法点击，起到节流的效果。当res.status === 200时清除掉toast即可。很多地方需要用到请求，所以我们还是在拦截器中统一设置。在请求拦截器中添加toast的loading效果。duration: 0 表示toast不会消失。导航跳转重复，禁止重复导航到...↓。
2024-06-05 00:17:07
91
原创 登录权证信息存储/vuex持久化处理(本地存储，vuex)
接着在state中创建一个对象用于接收用户的userId和token，在mutations中请求更改state中的数据。2.存储个人信息是将用户登录的信息保存到localStorage，需要从vuex中获取值，所以需要一个对象参数用于传值。在获取个人信息时由于数据存储在localStorage是字符串形式，所以我们需要转为。1.获取个人信息是从localStorage中获取，所以需要先获取值在return。所以我们在模块中也利用三目表达式进行验证，如果有的话就存，没有的话就给个初始值。在组件的登录方法中，
2024-06-05 00:08:42
200
原创 短信倒计时，正则验证和获取短信验证码---＞登录功能(失败？响应拦截器)
获取到手机号是否通过验证的状态值后，我们找到发送验证码（openCountdown）方法，添加一个逻辑，也就是如果 phoneStatus === false 或（!要设置一个timer来记录计时器的id是否开启（timer: null），如果已经存在timer（即开启计时器）了，就不再调用了。我们这里用到三目表达式，判断当前秒数和总秒数是否相同，相同则显示”获取验证码“否则显示**秒后重新获取。接下来，我们就要考虑，如果填入错误的手机号的格式应该是无法请求发送验证码的，method2();
2024-06-05 00:05:57
369
原创 智慧商城项目--登录页静态布局和图形验证码功能（通用默认样式，axios封装，api接口模块）
最后一个的添加导航的通用样式，因为我们要确保页面颜色统一，在其他页面的箭头是同个颜色，还是在通用css中修改，利用浏览器获取属性名。要注意的是当数据还没有访问到的时候，图片无法正常显示，所以我们要添加一个v-if 有数据了再渲染。接下来在组件中导入request，调用图形验证码接口，并且在created钩子函数中调用即可。获取到的data下的base64就是url地址，key则是后期做验证用的，我们接下来需要做的。注意我们创建的实例是instance，所以后面的拦截器也要将axios改为instance。
2024-05-28 11:59:29
328
原创 智慧商城项目--路由配置（一，二级路由，路由重定向）
特别要注意的是，路由中的component和组件component无关！我们先把视图创建好，views下创建一级路由的文件夹，并命名为index.vue，然后就把vant组件库的标签页导入，标签栏支持路由模式，还要记得写to标签。路由配置好后，就要配置路由出口了 <router-view>index.vue的作用是作为一个路由输出口，供路由输出。一级路由下的二级路由将其命名为 ***.vue。目标: 我们要把标签栏（二级路由）导航做出来。2）接下来创建路由和配置二级路由。1）首先把视图创建好。
2024-05-28 11:47:40
183
原创 npm报错：npm ERR! cb.apply is not a function
有时，npm 缓存中可能会存储一些损坏的数据，导致安装过程出错。尝试清除缓存并重新安装依赖。可能是npm版本高无法解析依赖树导致依赖下载失败，在后缀填上--legacy-peer-deps即可。2. 执行npm install --legacy-peer-deps依赖对等。在使用npm i时候发生报错，总结了下列两种方法。
2024-05-28 11:43:54
199
原创 智慧商城项目--前期准备(VueCli脚手架，Vant-ui组件库,vw适配）
由于手机大小不一，我们希望在移动端上页面都能够正常显示，所以我们要添加适配。然后在main.js吧这个文件导入即可，然后就可以使用了。按需导入可以放在utils下的vant-ui.js下。按需引入时不要把原有的替换掉了，添加上去即可。postcss插件-实现vw适配。vue组件库--vant-ui。
2024-05-28 11:36:56
112
原创 Vue小案例-购物车案例(知识点:json-server,vuex,axios,组件通信和数组方法find，reduce)
小案例设计知识点蛮多，日后需要时候方便找，也算一个巩固。虽然这个小案例比较简单，但是设计的知识点还是蛮多，如json-server,vuex,axios，组件通信和一些数组的常用方法，非常利用巩固学习。
2024-05-26 00:08:20
611
原创 TypeScript的环境搭建及部署到Vscode编译器
然后在VSCode中打开tsDemo文件夹，修改tsconfig.json文件的配置。需要注意的是，我最开始是的默认路径是:"outDir": "./", 但是发生报错。我们需要将outDir的路径设置为"./js"，即把编译过的文件放到js文件夹下，然后需要在这个位置上生成一个tsconfig.json文件，指令为。接着，在命令窗口上跳转到该tsDemo文件夹位置上（cd指令）所以我们需要去tsDemo文件夹下创建一个js文件夹，如图。出现版本号后表示安装成功了。终端出现以下内容表示成功。
2023-12-12 18:44:15
541
原创 Windows下安装Nodejs和环境配置
测试 配置完成后，安装个module测试下，咱们就安装最经常使用的express模块，打开cmd窗口，输入命令。//如npm config set cache “C:\Program File\Node.js\node_cache”
2023-12-12 18:28:59
1051
原创 微信小程序开发问题集（持续更新中）
目前正在学习微信程序小开发，希望有个问题集记录自己遇到的问题以便自己加强记忆和以后遇到此类问题也可以作为参考，如果有错误地方请各位大佬指正~谢谢
2023-11-30 23:53:59
362
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人