- 博客(36)
- 收藏
- 关注
RSS订阅原创 js下载文件
H5中a链接新增下载属性export const downloadFile = (blobFile, fileName) => {let link = document.createElement('a')link.href = URL.createObjectURL(blobFile)link.style = 'visibility:hidden'link.download = fileNamedocument.body.appendChild(link)link.cli
2022-04-26 14:32:13
230
原创 前端操作数据库
创建 .js文件const mysql = require('mysql')const db = mysql.createPool({ host: '127.0.0.1', user: 'root', password: '123456', database:'my_db_01'})//内置方法测试是否正常工作// db.query('SELECT 1',(err,results) => {// if(err) return console.l...
2022-04-21 10:05:40
2125
原创 对象克隆与合并，Object.assign
1.对象的浅拷贝，拷贝一份一样的数据，存储在不同的堆中。2.拷贝方法 Object.assign(a,b,.............)
2022-02-11 19:18:00
369
原创 reduce（）数组去重
关于reduce函数实现数组去重的注意点1.这里使用concat而不使用push是因为push改变的是原数组而在这里需要返回的是新的数组 使用 concat 不会改变原数组且会产生新的数组2.关于去重的bug，如果数组过大，则非常占用内存，因为要频繁循环当前项与当前的累加项使用es6 set实现去重...
2022-02-08 20:29:31
715
原创 es6对象解构
解构是ES6新加的解构功能，可以使得我们获取数据更方便，从而提高日常编码效率。解构可以用于对象，也可以用于数组，这篇文章我们只讲在对象类型上使用解构可以做哪些事情：一：解构用于变量声明let/const/var 后面跟上用一对{}包裹的变量列表，变量名与对象属性名相同，则就会取对象属性对应的值初始化变量。二：解构用于变量赋值以上代码的逻辑为：预先定义的变量name和age分别被初始化为'lily'和20之后，又用node对象的属性，重新赋值给name和age变量。解构...
2022-01-15 11:00:27
4661
原创 js对象的方法 indexOf（） ，valueOf（），Object.keys(对象名)，Object.values(对象名)
1.indexOf（）indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。2.valueOf() valueOf() 方法返回 Array 对象的原始值。该原始值由 Array 对象派生的所有对象继承。valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。注意： valueOf() 方法不会改变原数组...
2022-01-11 19:35:43
1210
原创 javaScript 数组方法之splice,split,sort,join, slice() 方法
splice() 方法用于添加或删除数组中的元素。注意：这种方法会改变原始数组。1.一个参数的情况（表示删除数组元素）arr.splice(2)表示删除第二个元素后的所有元素2，两个参数的情况（第一个参数表示起始位置，第二个表示要删除的个数）3，3个及以上参数的情况（第一个参数表示起始位置，第二个表示要删除的个数，后面的元素都表示要增加的元素split() 方法用于把一个字符串分割成字符串数组。提示： 如果把空字符串 ("") 用作 separat..
2021-12-24 19:15:12
992
原创 ES6数组方法 forEach ，map， filter，find，every，reduce，some
这6个方法都是arr.调用然后接受一个回调函数1.arr.forEach使用格式使用运行结果如下使用箭头函数简写如下2.map、filter、fing、every的格式都是一样的，都有一个return 会返回一个新的值，所以不会改变原数组，forEach 则会改变原数组map（映射） 也是和forEach一样，遍历数组，但不会改变数组案例，对数组元素值进行翻倍结果如下箭头函数简写3、filter（过滤器） 过滤元素...
2021-12-18 14:38:34
637
原创 按钮控制模块的显示与隐藏
1.按钮提交事件并且传递参数2.提交事件给父组件3.父组件接收4.控制变量初始赋值5.事件逻辑处理6控制显示与隐藏. 父向子传值7.子接受，进行样式控制
2021-12-10 10:00:05
390
原创 Git工作总结
1.git branch 查看本地分支2.git checkout 分支名 切换分支3.git branch -a 查看本地和远程所有分支4.git stash 将内容保存至暂存区5.git stash pop 把stash到本地栈中的代码pop到本地6.git checkout -b origin/dev_sxs 创建并切换分支7.git diff 路径 比较文件的不同 ，比较文件......
2021-12-09 17:31:40
321
原创 使用watch属性完成页面选择跳转
1.对发生变化的值进行监听2.对监听的值进行深监听，立即执行，提交一个事件，传递一个新值3.search父组件接受事件 定义变量selectId,事件改变这个值4.模块组件将这个值传递下去5.显示的组件接受并判断是否显示...
2021-12-09 15:23:56
402
原创 cookie localStorage和sessionStorage 的区别
1.cookie 首先，cookie的本性是联系服务端通信存储大小最大为 4kBhttp请求时发送到服务端，增加请求数据量只能用document.cookie = ‘ ’ 来修改，太过简陋2.localStorage和sessionStorageHtml5专门为存储而设计，最大可存5MApi简单易用 setItem getItem不会随http请求发送出去区别：localstorage 数据会永久存储，除非代码手动删除sessionStorage 数据...
2021-10-09 15:12:17
91
原创 将Vue项目打包上传到gitee码云代码托管平台
1.新建仓库 勾选开源允许别人访问2.在项目根目录下的空白区域打开右击打开git bash 输入 git init 初始化3.同步仓库，在gitee仓库创建完后，已有仓库里，复制代码并执行4 git add . 提交所有代码 add后面有一个空格 然后再 点5. 关于本次提交描述6.推送代码入仓库 复制你仓库中的这句代码提示并执行7.如果你想让你的代码在线上运行则需要进行如下操作1进入vue ui 进行项目打包2.打包会生成到dist...
2021-09-23 16:06:47
2891
原创 确认订单页面实现及请求发送
1.页面布局2.以下关于确认订单发送请求需要携带的参数3.以下是打印的是 productlist 的内容，其中 productlist 为vuex中的数据以下是获取productList里面的value4.以下是正确发送方式，但是这样会包含（count = 0）的商品，7关于解决办法5.清空购物车6.关于潜藏Bug报错当清空购物车后并进行本地存储清除会发生页面报错一般来说 有JSON.parse( 将json字符串转化为 js 对象)一...
2021-09-15 10:48:32
575
原创 使用LocalStorage 实现购物车数据永久存储
1.定义一个 setLocalCartList 方法用于设置 cartList 里面的数据，数据存储一般要JSON格式，所以进行转化，本地存储的 cartList 数据等于 vuex里的 cartList 数据只要每个数据改变都调用一下这个方法2.定义一个getLocaCartList 方法用于获取本地存储，没有则返回空对象vuex中的 cartList 等于本地存储的cartList数据...
2021-09-13 11:08:37
385
原创 点击弹出购物车及其它操作
假设你已经完成基本购物逻辑，以下是购物车更详细操作1.复制原有以及css2.从vuex中获取商品数据3.对页面进行渲染4.对vuex修改部分进行翟离复用5。复用操作加减数量事件6.关于数量小于0时的显示判断，这里要注意一点，template放在外面不会实际占位，v-if 放在div里的话，如果数量小于0就不会显示,不会出现数量为0的商品还会有个一空盒子占位7.关于购物车选中与非选中，以及从新计算总额，如果选中就计算8.关于购物车选中状态切换，定义一个方法，
2021-09-12 11:25:52
317
原创 使用VueX实现购物车功能
假设你已经完成相关html css 布局1.给加减按键绑定点击事件，传递店铺Id，商品id 商品详情 ，加减数以及店铺名2.点击事件派发一个action 名为 changeCartItemInfo,并且传递参数3.mutations感知到提交的changeCartItemInfo改变，执行changeCartItemInfo方法，在这个方法中，接收两个参数，vue中的state和外面传递进来的payload,定义一个shopinfo等于vuex中传递进来的店铺id,如果不存在则.
2021-09-10 17:10:51
984
原创 垂直导航栏以及内容联动
1.商家详情页的展示 1.1定义 categories 存储列表信息 1.2 列表循环 ，绑定点击事件并传值 1.3 因为每次点击都要调用axios获取函数并且传值，所以将axios单独拎出请求要携带不同列表参数 1.4 每次点击列表项都调用一次 axios 并传 tab 值，此外每次进入的时候都要展示all(所有)商品信息总结流程：1.v-for循环列表数据，并展示2.在每一个列表绑定一个点击事件并传值3.点击事件调用...
2021-09-09 16:48:38
179
原创 将附近店铺翟离成通用组件及部分不同样式的显示与隐藏
1.新建通用组件 ShopInfo.vue 完成基础布局，（此处不需要进行 v-for 循环遍历 ）2.父组件调用，并进行v-for循环遍历 以及传递item 给子组件进行页面渲染3.子组件接收
2021-09-09 09:29:35
102
原创 使用axios发送登录moke请求
1.定义一组数据2.双向数据绑定3.封装请求引入axios 创建一个axios实例 设置请求地址和请求时长post方法返回一个promise对象 （axios的实例接收两个参数：地址和内容，设置返回内容类型，成功返回响应的数据（response.data），失败返回err）4.调用post方法 并发送登录内容 try catch 解决失败不会 继续往后执行5.弹窗内容实现...
2021-09-08 10:27:10
232
原创 登录页面布局常见问题
outline 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。1. placeholder="请输入密码" （输入框文字）2.style中的 scoped作用css样式局域，如果多个文件存在同类名，防止类样式对其他文件造成影响3.垂直居中布局...
2021-09-07 15:55:24
151
原创 vue 实现底部导航栏点击颜色变化
假设你已写好布局及样式，以订单页为例1.调用底部导航栏，同时传递订单页的数组下标2.子组件接收3.子组件进行比较判断默认样式显示（true） 索引与传递过来的值相等，则该导航的点击样式显示...
2021-09-07 14:56:12
928
原创 vscode常用插件
1.Chinese (Simplified)vscode下载完毕是英文版的，先安装这个插件，改为中文版。2.Auto Rename Tag修改开始标签，结束标签跟着自动变化，比较好用。3.One Dark Pro 颜色主题我比较喜欢的一个颜色主题页面的效果：4.格式化代码（vscode系统自带）现在格式化代码的插件非常多，比如Prettier等等。刚开始学，不太建议安装插件，先自己手写规范的语法格式但是html标签嵌套比...
2021-09-07 09:30:55
357
原创 从零开始使用vue-cli创建项目
1.创建项目 一.在任意盘创建文件夹 删除原目录输入cmd(进入命令模式) 二. 输入 vue add vue-next2.关于配置信息
2021-09-06 19:51:35
127
原创 Ant Design 4.0 import error: ‘Icon‘ is not exported from ‘antd‘ 引入图标报错
在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？）。使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。新版 Icon 使用方式：其中第四行为需要引入的图标名代码及效果如下：当执行完后仍会报出下面的错误：Module not found:.
2021-05-17 09:36:01
755
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人