- 博客(71)
- 收藏
- 关注
RSS订阅原创 nrm，nvm日常使用
开发node.js的时候,经常会遇到某些包无法下载, 或者下载太慢, 还有需要加载我们自己是有源中的包的问题, nrm 镜像源管理工具就是解决这类问题的。切换不同的node版本工具，nvm下载好之后。
2024-07-03 16:52:29
197
原创 前端处理axios请求下载后端返回的文件流
请求下载一个文件，请求成功时返回的是一个文件流，type是对应文件类型，例如：text/xml，正常导出文件；读取操作完成时触发FileReader.onload()，在这里通过reader.result拿到读取的文件内容（即后端返回值），然后对其json序列化，即可拿到后端返回的message，然后进行相应的展示即可。因此可以通过返回的blob数据type类型进行区分，如果type是文件类型，导出文件，如果type是json则把blob数据转为string，处理错误信息。2.定义一个下载的方法。
2024-04-09 18:02:46
1280
原创 把一个数组里面每项的值变成对象的键值对 | 将一个tree结构的数据子集变成平级
const arr = [ { id: 1, value: "白色" }, { id: 1, value: "黑色" }, { id: 1, value: "粉色" } ]arr.reduce((p, c) => Object.assign(p, { [c.id]: c.value }), {})console.log(arr) // [// { // "id": 1, // "value": "白色"// },/.
2022-04-12 17:51:37
873
原创 es6中的flat方法，可以把多维数组摊平成一维
// 返回新数组对原数组没有影响，flat（）默认摊平一层[5,6,[7,8]].flat()// [5,6,7,8] // 默认摊平一层[1,2,[3,[4,5]]].flat()// [1,2,3,[4,5]]// 想摊平多层就将flat()方法的参数写出一个整数，表示想要拉平的层数[1,2,[3,[4,5]]].flat(2)//[1,2,3,4,5]// 不管多少层嵌套数组， 都只想转成一维数组， 可以用infinity关键字作为参数[1,[2,3,[4]]].flat(i
2021-08-16 17:46:50
1026
原创 一些命令哈
1. 用vue-clinpm i -g @vue/cli vue create 项目名cd 项目名npm run serve路由是npm i vue-router2. 用react:npx create-react-app 项目名cd 项目名npm start或者npm i -g create-react-appcreate-react-app 项目名cd 项目名npm start路由是npm i react-router-dom3. 用vitenpm init v
2021-03-20 15:47:34
246
1
原创 CSS3实现0.25px的边框
给p这个盒子设置0.25的下边框线 p { position:relative; color: #888; &::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: red; -w
2021-03-04 10:53:42
338
1
原创 dayjs
插件Durationimport dayjs from "dayjs"import Duration from "dayjs/plugin/duration";dayjs.extend(Duration);const duration = dayjs.duration(352 * 1000);const s = duration.seconds(); const m = duration.minutes();const h = duration.hours();console.error(
2021-02-27 12:35:19
370
原创 yarn的命令安装
yarnYarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 js 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的安装速度慢，安装包的版本不一致的缺陷而出现的。安装yarn可以使用npm命令来全局安装yarnnpm i yarn -gyarn常用命令以下列出了Yarn和npm的区别，可以对比学习：NPM YARN 说明npm init yarn init初始化某个项目npm install yarn install 默认的
2020-07-20 20:21:17
2437
原创 12-小程序(优购商城整合Vuex,发布H5和App兼容性问题解决,mpvue快速上手,mpvue项目结构,mpvue创建自己的页面,uniapp优购商城迁移到mpvue,mpvue坑点)
01.Vuex复习概念: vuex存储所有组件的状态，改变状态有自己规范状态可以理解把原来组件里面属性公开放到vuex中作为状态改变状态的规范是mutations方便理解，你可以认为vuex就是一个全局变量，只不过改变全局变量有规范(function(){ 防止全局变量污染})vuex的核心概念：state状态：就是用来存储所有组件状态getters：state计算属性mutations: 改变state的规范//store实例const store = ne
2020-07-13 23:36:26
383
原创 11-小程序(登录前配置,微信支付,收货地址,request中设置token,授权拒绝处理wx.openSetting(),微信授权地址)
01.登录-页面分析与静态页面入口: 如果需要登录态，就会跳转登录主要模块点我登录按钮其他说明本质上微信授权登录02.登录-微信授权登录接口分析url /api/public/v1/users/wxlogin方法 post参数code 通过uni.login另外一些参数用户信息步骤声明button open-type="getUserInfo"来获取用户信息uni.login获取code发请求获取code存token，提示成功03
2020-07-13 17:16:29
1439
原创 11-小程序(购物车页面,深度监听购物车数据变化让本地也跟着变化,数组reduce方法算总价总数量,计算属性弄全选状态,数组方法集合)
01.购物车-页面分析入口: 点击底部tab菜单购物车时显示购物车页面;商详点击购物车跳转购物车页面主要模块商品列表每一个商品包括选中状态，商品图片，商品名称，商品单价，商品数量全选，总价，总数量其他说明收货地址放在支付页面商品列表每一项目可以调整选中状态及数量点击结算跳转到支付02.购物车数据存哪里？（补充 ）描述：购物车的数据的改变是发请求还是存本地，还是存Vuex?发请求即可对比以上三个方案购物车添加商品，刷新页面数据依然在vuex刷新
2020-07-10 20:51:14
1925
原创 10-小程序(做搜索页面,里面有历史记录,计算属性setter的基本使用)
01.搜索页面-页面分析&静态页面入口: 首页或者分类搜索链接点击跳转的主要模块searchBar历史搜索列表其他说明输入框输入内容inputVal，点击键盘右下角按钮时，跳转搜索列表，按inputVal搜索点击历史搜索项时，也会跳转搜索列表，按这一项的值搜索第1，2步，inputVal会加入到历史搜索的头部，并去重点击x清空历史搜索历史搜索列表存储在小程序数据缓存在搜索列表页面，输入内容触发搜索也应该把输入内容添加到历史搜索列表中02.搜索页面-跳转搜索列
2020-07-08 19:53:50
396
原创 09-小程序(商品详情,轮播预览图片,富文本rich-text,分享功能,客服功能,组件通信)
01.商品详情-页面渲染参数从哪里来搜索列表点击一个商品跳转的，并传参goods_id@click:toItem跳转uni.navigateTo传参goodsId模拟器页面参数检验goodsId是OK的添加商品详情编译模式，设置启动参数goodsId=291在商品详情获取到传参分析接口get请求 /api/public/v1/goods/detail?goods_id=57396发请求发请求的时机，获取到传参后请求方法queryGoodsDetail
2020-07-08 19:44:37
1145
原创 07-小程序(优购分类,搜索列表,上拉下拉列表)
优购案例-分类01.页面分析入口: 点击底部tab分类时显示分类页面主要模块左侧一级分类右侧展示二级分类和三级分类其他说明左右两侧分别滚动点击左侧一级分类时，显示对应的二级和三级分类02.静态页面-练习抽取首页搜索链接为组件原因：首页和分类的搜索链接是一样的步骤新建components/Search.vuecopy原来首页属性搜索链接的结构和样式使用首页引入，注册，把组件名当标签使用同理分类也可以一样使用主体部分左侧一
2020-07-08 09:37:57
838
1
原创 08-小程序(搜索列表上拉下拉, image的mode属性,git冲突的解决, Tabbar页与页面栈,uniapp生命周期,场景值,uniapp中用字体图标)
01-image mode属性（了解）传送门图片裁剪、缩放的模式。学习时可以类比于css background-size:cover,containscaleToFill不保持纵横比，短边拉伸aspectFit 保持纵横比，长边显示，短边留空aspectFill保持纵横比，短边显示，长边截取widthFix保持纵横比,宽度不变，高度自动变化注意点：如果图片显示的区域的纵横比和原图片是一致，不管用什么模式都是一样的效果设计稿的图片宽高尽量要和后端返回的图片宽高的比例保持一致
2020-07-07 21:17:53
542
原创 面试会问的 history路由跟反向代理解决跨域的问题
history模式路由是怎么实现的吗history模式路由利用history.pushState改变URL，但并不会刷新页面的原理; 并在改变URL同时切换组件的显示/隐藏。设置反向代理解决跨域的问题 以及 如何配置webpack的代理一般前端项目启动在localhost:8080, 联调需要访问不同环境的服务器，如果服务器恰好没有设置CORS，那么就会跨域。反向代理可以解决跨域问题，前端访问代理服务器，代理服务访问目标服务器，由于服务器访问服务器是不是跨域的，所以前端也就可以正常获取..
2020-07-04 21:14:15
534
原创 06-小程序(uni-app优购商城首页, uni-app语法工程结构)
01-设置反向代理解决跨域的问题 以及 如何配置webpack的代理跨域因为浏览器的同源策略，协议域名或者端口有一个不一样，就会跨域解决跨域的方案JSONP不安全基本不用原理反向代理服务器访问服务器是不会跨域的CORS最常见的一种解决方案代理的概念所谓代理就是在我们和真实的服务器之间有一台代理服务器，我们所有的请求都是通过它来进行转接的。正向代理正向代理就是我们访问不了Google，但是我在国外有一台vps，它可以访问Googl
2020-07-04 21:12:55
895
原创 05-小程序(优购商城项目介绍,HBuilder和HBuilderX,uni-app介绍)
07- 优购商城项目介绍商城的业务类型很ok商城类的小程序是最多的优购商城的基本逻辑分类->按关键字搜索找到商品->商品详情->加入购物车->结算可以参考京东App, 或者小米ite项目支持多端uniapp框架本身就用vue写的, 编译成代码兼容多端, iOS, Android, H5, 微信小程序接口接口文档08-原生小程序与第三方小程序框架们原生小程序是什么？有原生HTML这种说法吗？原生来自于英文raw原生是指官方语法原
2020-07-02 13:54:01
4014
原创 05-小程序(wx.setStorageSync等相关数据存储API,-小程序App和Page生命周期,跳转tabbar页面wx.switchTab, 进入我的页面如果未登录跳转微信授权登录与手机号)
01-数据缓存传送门就是小程序里面存取数据回顾localStorage与sessionStorage使用localStorage.setItem(key,value) //存，value必须是字符串localStorage.getItem(key)//取localStorage.removeItem(key) //清除指定key的存储localStorage.clear() //全部清除区别sessionStorage在浏览器关闭后就消失了缺点：存储大小是5M一
2020-07-02 13:51:03
879
原创 04-小程序(小程序发送请求wx.request的封装, 发送请求添加loading效果,Tab栏基本使用,小程序授权,小程序登录,微信授权登录)
01- 异步请求wx.request传送门豆瓣电影API : https://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a在小程序里面用来发ajax请求的发ajax请求的，和axios，jQuery.ajax一样也是基于XMLHttpRequest封装的使用方法API和jQuery.ajax基本一致不同地方在于header的content-type默认是applicati
2020-07-02 13:24:57
1417
原创 03-小程序(码云管理项目, vscode的基本git功能)
01-项目git(码云)管理在远端创建仓库设置仓库名称是否开源设置为公开其他都不要动！！！根据提示，初始化仓库选择SSH协议# 去到mushroom_lite50目录git init #初始化本地仓库git add . #添加当前目录下所有文件到暂存区git commit -m "first commit" #本地提交git remote add origin git@gitee.com:xxx/mushroom.git #添加远端服务器地址git push -u
2020-06-30 23:41:48
225
原创 02-小程序(swiper,navigator组件 wx:key的设置,编程式导航,事件方法传参,事件对象event的target与currentTarget,编译模式的设置,英雄案例,小程序上线步骤
01-轮播图组件传送门小程序提供除了基本的标签之外，还提供很多稍复杂一些的组件，包括：轮播图组件，横向滚动，进度条等等。。。轮播图组件使用参考官方示例代码 <!-- indicator-dots :是否显示面板指示点 indicator-color : 指示点颜色 autoplay: 是否自动切换 indicator-color: 指示点颜色(透明) indicator-active-color: 当前选中的指示点颜色
2020-06-27 20:41:16
556
原创 01-小程序(开发流程,数据绑定,注册事件,this,导入导出用es6模块化)
01.如何开发微信小程序传送门微信小程序发布就是发布到微信服务器上，免费的注册小程序信息完善开发小程序微信开放文档微信开发者工具提交审核和发布h5页面如果想让外网访问到，必须放到有公网IP的服务器上，可能配置域名02.注册小程序账号及信息完善微信公众平台账号信息邮箱必须是没有绑定过其他公众账号的，或者没有绑定到个人微信的邮箱激活打开邮箱点击链接信息登记主体类型，选择个人其他类型需要认证的微信扫码你的微信就是小程序账号的管理员
2020-06-26 20:46:58
387
原创 03-vue中补充(渲染方式SSR与CSR,nuxt[简单说安装,路由,视图,异步数据,生命周期],vuex简单说,keepalive)
关于优化01 - SPA在 vue 这个阶段中我们所学的： 黑马面面项目 & 黑马头条项目。其实都是单页应用全称：Single Page Application （单页面应用）概念：网站的效果都是显示在一个静态页面中的在页面切换时，其实并没有从一个页面中跳转到另一个页面中，只是通过 js 动态的将内容进行了修改在网站的源代码中是看不到任何数据（关键字）的特点：优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA
2020-06-26 20:46:46
619
原创 02-vue中补充(mock模拟后端随机返回数据,scoped, deep,完整版生命周期, rem适配)
01 - mock.js在项目开发过程中：前端：根据静态页面完成结构 & 样式 ，根据接口文档完成数据渲染后端：开发接口问题：前端的静态页面已经写完，后端的接口文档还没有开发完成mock.js 可以用来解决：当前端的静态页面写完，但是接口还没有出来，就可以使用 mock.js 来模拟后端的接口传送门也可以在github中搜作用： 生成随机数据，拦截 Ajax 请求(模拟后端的接口)使用：生成随机数据步骤：1.0 下载 mock：npm i mo
2020-06-23 20:22:44
336
原创 01-vue中补充(特性继承,inheritAttrs,$attrs.$listeners动态组件,异步组件(路由懒加载),插槽, 自己封装一个组件)
01 - 特性继承在父组件中使用子组件时，如果给子组件传入一些非 props 属性(就是不用props接收)，那么这些属性会作用到子组件的根元素上props 属性：在组件使用过程中经常出现父组件给子组件传参， props 就是用来进行父传子的非 props 属性：父组件传给子组件中的属性，没有通过 props 来接收02 - inheritAttrs取值 a. true：（默认）启用继承特性 b. false 禁用继承特性注意点：特性继承对 class & st
2020-06-23 13:41:21
362
原创 11-vue移动端项目(小智机器人聊天使用websocket协议使用socket.io客户端第三方包, 让div滚动条自动滚到最底部)
小智同学01 - 创建组件创建组件 & 创建路由设置入口02 - 完成静态页面头部标题聊天区域设置内容高度时会出现一个问题：由于不同的手机型号的高度是不一样的，但是聊天区域的高度必须是整个页面除去头部 & 底部的高度。解决方案：不给这个盒子设置一个固定高度给这个盒子设置一个定位（fixed固定定位）给盒子同时设置 top & bottom 属性将来盒子的高度就是 top 与 bottom 之间距离信息发送03 - 渲染聊天
2020-06-22 19:59:03
833
1
原创 10-vue移动端项目(websocket的简单案例与创建一个聊天室)
WebSocket01- 什么是WebSocket它与 http 协议一样，也是一种通讯协议http 协议：作用：规范浏览器与服务器交互的一种标准。特点：每次浏览器与服务器之间进行交互都需要重复开启和断开连接请求只能由浏览器主动发送，服务器被动响应总结：由于以上两个特点，让 http 协议在某些场合下不适用。比如说：实时聊天。websocket 协议：它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话
2020-06-21 10:32:47
1389
原创 10-vue移动端项目(v-model的原理跟使用主要模仿在父组件定义一个值控制子组件的显示与隐藏)
现在有一个父组件App.vue,它有一个子组件mycom.vue,并且这个mycom.vue中使用了vant组件(模拟的)App.vue<template> <div> <!-- 将 vant 中的 mycom01 封装为组件 --> <h3>封装 mycom01 组件</h3> <!-- <vantCom v-model="value" /> --> <vant
2020-06-20 21:30:57
361
原创 10-vue移动端项目(我的my页面与个人信息info页面: vant预览图片组件, formdata管理头像文件上传,fileReander将图片文件转换为路径)
我的页面01 - 静态页面结构 & 样式作者信息区域：收藏区域消息区域<template> <div class="my"> <!-- 个人信息区域 --> <div class="top"> <div class="msg"> <img @click="$router.push('/info')" :src="userInfo.photo" alt/>
2020-06-20 21:13:42
8135
7
原创 09-vue移动端项目(detail详情页中的reply回复组件的渲染与添加: bus兄弟传值, v-model的引用)
详情页面中回复组件01 - 封装评论回复的面板步骤：a. 在 detail/com 添加一个 reply.vue 组件添加一个弹出层，默认是隐藏的b. 在 index.vue 中使用这个组件c. 给回复按钮添加一个点击事件，显示这个组件02- 完成回复面板的结构 & 样式组成：当前评论评论的回复03 - eventbus在 vue 中经常涉及到组件之间的传参，但是如果是兄弟组件之间传参太麻烦了，为了解决这个问题可以使用： eventbus作用：用来解决
2020-06-20 00:20:35
640
原创 08-vue移动端项目(文章详情detail（以及它的子组件评论comment，write组件）页面)
详情页面01 - 完成静态页面创建组件 & 设置路由设置入口完成结构 & 样式头部标题文章标题作者信息文章内容点赞 & 不喜欢区域评论区域将单条评论封装为一个单独的组件步骤：1.0 在detail中创建一个文件夹：com2.0 在 com 添加一个comment.vue 组件3.0 在 detail 页面中使用这个组件4.0 完成静态的结构 & 样式评论书写区域将评论书写区域封装为一个组件步骤1.0 在
2020-06-19 23:20:33
913
1
原创 07-vue移动端项目(搜索结果searchResult页面的一些优化，自己封装插件Vue.use（MyPulgin)来判断登录，token失效处理，)
判断登录01- 直接在评论按钮中完成登录判断步骤：a. 给评论按钮添加一个点击事件在事件中判断用户是否登录：判断 $store 中是否存在 token用户登录：执行后续的逻辑代码（也就打印：评论功能）用户未登录：跳转到登录页面进行登录02 - 将登录验证封装为一个全局方法如果将登录验证的方法直接写到逻辑代码中，将来重用不太方便，我们可以尝试将登录验证的代码封装为一个 vue 的全局方法步骤：a. 在 main.js 中向 Vue 的 prototype 中添
2020-06-17 20:45:31
281
原创 07-vue移动端项目(搜索结果searchResult页面：路由返回back(),动态传参中取参)
搜索结果searchResult01 - 页面结构&样式顶部的导航给导航的左侧箭头添加一个点击事件(这个@click-left方法是vant组件中定义的)：<van-nav-bar left-arrow @click-left="onClickLeft" fixed title="搜索结果" />在事件中应该回退到上一个页面新闻数据的渲染使用 list 组件来渲染数据将首页中的结构复制过来，稍作修改 <!-- 上拉显示下面数据 -->
2020-06-16 19:59:15
1373
原创 06-vue移动端项目(搜索search页面: 防抖与节流, 动态路由传值,new Set数组去重的使用,传值数据跟页面渲染要用的数据不同时可以采取遍历每项返回两个项,数组方法replace)
搜索01 - 创建组件步骤：1.0 创建文件 views/search/index.vue2.0 设置路由： search它应该是 home 的子路由3.0 将问答改为搜索02 - 完成结构 & 样式头部搜索框使用 vant 中的组件：search联想区域搜索历史区域03 - 数据搜索任务：在搜索框中输入内容，点击回车，将输入的内容传入到搜索结果页面中步骤：在 onSearch 方法中得到输入框中的关键字跳转到搜索结果页
2020-06-16 19:45:09
967
1
原创 05-vue移动端项目(主页index文章列表数据的渲染,插件弄图片懒加载,dayjs的相对时间(比momentjs体积小用法一样)的使用,全局过滤器,解决js处理数字最大范围json-bigint)
主页数据01 - 完成数据的结构 & 样式文章数组的组成：文章的标题文章的图片可以使用 vant 中的组件：文章的作者 & 评论数 & 发布日期 更多操作按钮02 - 动态渲染数据打印当前频道的文章列表可以看到以下数据,然后再渲染到页面上了解文章数据源中的数据：art_id：文章的 idaut_id：作者的 idaut_name ：作者的名称ch_id：所属频道的 idcollect_count：收藏数comm_count：
2020-06-15 20:08:26
469
原创 04-vue移动端项目(主页index的子组件频道面板com：单向数据流概念, 利用数组的filter与map从一个数组删除另外一个数组中所有的元素,计算属性compute缓存问题,.sync的问题）
频道面板模块01 - 打开频道操作面板面板可以使用 vant 中的组件：弹出层popup属性： v-model 控制面板的显示和隐藏的特点：v-model：设置为 true，面板就开启点击黑色遮罩层区域，面板就关闭步骤：a. 在页面上添加一个频道操作面板：默认隐藏b. 给操作面板按钮添加一个点击事件：将面板显示出来02- 将频道操作面板封装为组件1.0 由于频道操作是在 home 中完成了，home 中的逻辑已经足够多了，如果我们再将频道操作的逻辑也放到 home 中。将
2020-06-14 16:11:59
395
原创 04-vue移动端项目(接上一篇主页index：拦截器带token，$set给动态添加的数据渲染在页面上，上拉加载下拉刷新发送请求版）
主页10 - 加载频道数据步骤：a. 在 mounted&created 中请求服务器接口，得到频道数据接口： 获取用户频道列表b. 将返回的频道数据保存起来c. 将频道数据渲染到页面上11- 给请求设置 token获取频道数据的接口其实是这一种情况：没有传入 Authorization（token）： 只会得到默认的 7 条频道数据传入了 Authorization（token） ：就会得到当前登录用户的频道数据由于在项目中有很多像获取频道数据一样的接口，
2020-06-11 20:40:26
413
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人