Tangoneone的博客

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": "白色"// },/.

// 返回新数组对原数组没有影响，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

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

给p这个盒子设置0.25的下边框线 p { position:relative; color: #888; &::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: red; -w

插件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(

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 默认的

01.Vuex复习概念: vuex存储所有组件的状态，改变状态有自己规范状态可以理解把原来组件里面属性公开放到vuex中作为状态改变状态的规范是mutations方便理解，你可以认为vuex就是一个全局变量，只不过改变全局变量有规范(function(){ 防止全局变量污染})vuex的核心概念：state状态：就是用来存储所有组件状态getters：state计算属性mutations: 改变state的规范//store实例const store = ne

01.登录-页面分析与静态页面入口: 如果需要登录态，就会跳转登录主要模块点我登录按钮其他说明本质上微信授权登录02.登录-微信授权登录接口分析url /api/public/v1/users/wxlogin方法 post参数code 通过uni.login另外一些参数用户信息步骤声明button open-type="getUserInfo"来获取用户信息uni.login获取code发请求获取code存token，提示成功03

01.购物车-页面分析入口: 点击底部tab菜单购物车时显示购物车页面;商详点击购物车跳转购物车页面主要模块商品列表每一个商品包括选中状态，商品图片，商品名称，商品单价，商品数量全选，总价，总数量其他说明收货地址放在支付页面商品列表每一项目可以调整选中状态及数量点击结算跳转到支付02.购物车数据存哪里？（补充 ）描述：购物车的数据的改变是发请求还是存本地，还是存Vuex?发请求即可对比以上三个方案购物车添加商品，刷新页面数据依然在vuex刷新

01.搜索页面-页面分析&静态页面入口: 首页或者分类搜索链接点击跳转的主要模块searchBar历史搜索列表其他说明输入框输入内容inputVal，点击键盘右下角按钮时，跳转搜索列表，按inputVal搜索点击历史搜索项时，也会跳转搜索列表，按这一项的值搜索第1，2步，inputVal会加入到历史搜索的头部，并去重点击x清空历史搜索历史搜索列表存储在小程序数据缓存在搜索列表页面，输入内容触发搜索也应该把输入内容添加到历史搜索列表中02.搜索页面-跳转搜索列

01.商品详情-页面渲染参数从哪里来搜索列表点击一个商品跳转的，并传参goods_id@click:toItem跳转uni.navigateTo传参goodsId模拟器页面参数检验goodsId是OK的添加商品详情编译模式，设置启动参数goodsId=291在商品详情获取到传参分析接口get请求 /api/public/v1/goods/detail?goods_id=57396发请求发请求的时机，获取到传参后请求方法queryGoodsDetail

优购案例-分类01.页面分析入口: 点击底部tab分类时显示分类页面主要模块左侧一级分类右侧展示二级分类和三级分类其他说明左右两侧分别滚动点击左侧一级分类时，显示对应的二级和三级分类02.静态页面-练习抽取首页搜索链接为组件原因：首页和分类的搜索链接是一样的步骤新建components/Search.vuecopy原来首页属性搜索链接的结构和样式使用首页引入，注册，把组件名当标签使用同理分类也可以一样使用主体部分左侧一

01-image mode属性（了解）传送门图片裁剪、缩放的模式。学习时可以类比于css background-size:cover,containscaleToFill不保持纵横比，短边拉伸aspectFit 保持纵横比，长边显示，短边留空aspectFill保持纵横比，短边显示，长边截取widthFix保持纵横比,宽度不变，高度自动变化注意点：如果图片显示的区域的纵横比和原图片是一致，不管用什么模式都是一样的效果设计稿的图片宽高尽量要和后端返回的图片宽高的比例保持一致

history模式路由是怎么实现的吗history模式路由利用history.pushState改变URL，但并不会刷新页面的原理; 并在改变URL同时切换组件的显示/隐藏。设置反向代理解决跨域的问题 以及 如何配置webpack的代理一般前端项目启动在localhost:8080, 联调需要访问不同环境的服务器，如果服务器恰好没有设置CORS，那么就会跨域。反向代理可以解决跨域问题，前端访问代理服务器，代理服务访问目标服务器，由于服务器访问服务器是不是跨域的，所以前端也就可以正常获取..

01-设置反向代理解决跨域的问题 以及 如何配置webpack的代理跨域因为浏览器的同源策略，协议域名或者端口有一个不一样，就会跨域解决跨域的方案JSONP不安全基本不用原理反向代理服务器访问服务器是不会跨域的CORS最常见的一种解决方案代理的概念所谓代理就是在我们和真实的服务器之间有一台代理服务器，我们所有的请求都是通过它来进行转接的。正向代理正向代理就是我们访问不了Google，但是我在国外有一台vps，它可以访问Googl

07- 优购商城项目介绍商城的业务类型很ok商城类的小程序是最多的优购商城的基本逻辑分类->按关键字搜索找到商品->商品详情->加入购物车->结算可以参考京东App, 或者小米ite项目支持多端uniapp框架本身就用vue写的, 编译成代码兼容多端, iOS, Android, H5, 微信小程序接口接口文档08-原生小程序与第三方小程序框架们原生小程序是什么？有原生HTML这种说法吗？原生来自于英文raw原生是指官方语法原

01-数据缓存传送门就是小程序里面存取数据回顾localStorage与sessionStorage使用localStorage.setItem(key,value) //存，value必须是字符串localStorage.getItem(key)//取localStorage.removeItem(key) //清除指定key的存储localStorage.clear() //全部清除区别sessionStorage在浏览器关闭后就消失了缺点：存储大小是5M一

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

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

01-轮播图组件传送门小程序提供除了基本的标签之外，还提供很多稍复杂一些的组件，包括：轮播图组件，横向滚动，进度条等等。。。轮播图组件使用参考官方示例代码 <!-- indicator-dots :是否显示面板指示点 indicator-color : 指示点颜色 autoplay: 是否自动切换 indicator-color: 指示点颜色(透明) indicator-active-color: 当前选中的指示点颜色

01.如何开发微信小程序传送门微信小程序发布就是发布到微信服务器上，免费的注册小程序信息完善开发小程序微信开放文档微信开发者工具提交审核和发布h5页面如果想让外网访问到，必须放到有公网IP的服务器上，可能配置域名02.注册小程序账号及信息完善微信公众平台账号信息邮箱必须是没有绑定过其他公众账号的，或者没有绑定到个人微信的邮箱激活打开邮箱点击链接信息登记主体类型，选择个人其他类型需要认证的微信扫码你的微信就是小程序账号的管理员

关于优化01 - SPA在 vue 这个阶段中我们所学的： 黑马面面项目 & 黑马头条项目。其实都是单页应用全称：Single Page Application （单页面应用）概念：网站的效果都是显示在一个静态页面中的在页面切换时，其实并没有从一个页面中跳转到另一个页面中，只是通过 js 动态的将内容进行了修改在网站的源代码中是看不到任何数据（关键字）的特点：优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA

111

01 - mock.js在项目开发过程中：前端：根据静态页面完成结构 & 样式 ，根据接口文档完成数据渲染后端：开发接口问题：前端的静态页面已经写完，后端的接口文档还没有开发完成mock.js 可以用来解决：当前端的静态页面写完，但是接口还没有出来，就可以使用 mock.js 来模拟后端的接口传送门也可以在github中搜作用： 生成随机数据，拦截 Ajax 请求(模拟后端的接口)使用：生成随机数据步骤：1.0 下载 mock：npm i mo

01 - 特性继承在父组件中使用子组件时，如果给子组件传入一些非 props 属性(就是不用props接收)，那么这些属性会作用到子组件的根元素上props 属性：在组件使用过程中经常出现父组件给子组件传参， props 就是用来进行父传子的非 props 属性：父组件传给子组件中的属性，没有通过 props 来接收02 - inheritAttrs取值 a. true：（默认）启用继承特性 b. false 禁用继承特性注意点：特性继承对 class & st

小智同学01 - 创建组件创建组件 & 创建路由设置入口02 - 完成静态页面头部标题聊天区域设置内容高度时会出现一个问题：由于不同的手机型号的高度是不一样的，但是聊天区域的高度必须是整个页面除去头部 & 底部的高度。解决方案：不给这个盒子设置一个固定高度给这个盒子设置一个定位（fixed固定定位）给盒子同时设置 top & bottom 属性将来盒子的高度就是 top 与 bottom 之间距离信息发送03 - 渲染聊天

WebSocket01- 什么是WebSocket它与 http 协议一样，也是一种通讯协议http 协议：作用：规范浏览器与服务器交互的一种标准。特点：每次浏览器与服务器之间进行交互都需要重复开启和断开连接请求只能由浏览器主动发送，服务器被动响应总结：由于以上两个特点，让 http 协议在某些场合下不适用。比如说：实时聊天。websocket 协议：它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话

现在有一个父组件App.vue,它有一个子组件mycom.vue,并且这个mycom.vue中使用了vant组件(模拟的)App.vue<template> <div> <!-- 将 vant 中的 mycom01 封装为组件 --> <h3>封装 mycom01 组件</h3> <!-- <vantCom v-model="value" /> --> <vant

我的页面01 - 静态页面结构 & 样式作者信息区域：收藏区域消息区域<template> <div class="my"> <!-- 个人信息区域 --> <div class="top"> <div class="msg"> <img @click="$router.push('/info')" :src="userInfo.photo" alt/>

详情页面中回复组件01 - 封装评论回复的面板步骤：a. 在 detail/com 添加一个 reply.vue 组件添加一个弹出层，默认是隐藏的b. 在 index.vue 中使用这个组件c. 给回复按钮添加一个点击事件，显示这个组件02- 完成回复面板的结构 & 样式组成：当前评论评论的回复03 - eventbus在 vue 中经常涉及到组件之间的传参，但是如果是兄弟组件之间传参太麻烦了，为了解决这个问题可以使用： eventbus作用：用来解决

详情页面01 - 完成静态页面创建组件 & 设置路由设置入口完成结构 & 样式头部标题文章标题作者信息文章内容点赞 & 不喜欢区域评论区域将单条评论封装为一个单独的组件步骤：1.0 在detail中创建一个文件夹：com2.0 在 com 添加一个comment.vue 组件3.0 在 detail 页面中使用这个组件4.0 完成静态的结构 & 样式评论书写区域将评论书写区域封装为一个组件步骤1.0 在

判断登录01- 直接在评论按钮中完成登录判断步骤：a. 给评论按钮添加一个点击事件在事件中判断用户是否登录：判断 $store 中是否存在 token用户登录：执行后续的逻辑代码（也就打印：评论功能）用户未登录：跳转到登录页面进行登录02 - 将登录验证封装为一个全局方法如果将登录验证的方法直接写到逻辑代码中，将来重用不太方便，我们可以尝试将登录验证的代码封装为一个 vue 的全局方法步骤：a. 在 main.js 中向 Vue 的 prototype 中添

搜索01 - 创建组件步骤：1.0 创建文件 views/search/index.vue2.0 设置路由： search它应该是 home 的子路由3.0 将问答改为搜索02 - 完成结构 & 样式头部搜索框使用 vant 中的组件：search联想区域搜索历史区域03 - 数据搜索任务：在搜索框中输入内容，点击回车，将输入的内容传入到搜索结果页面中步骤：在 onSearch 方法中得到输入框中的关键字跳转到搜索结果页

主页数据01 - 完成数据的结构 & 样式文章数组的组成：文章的标题文章的图片可以使用 vant 中的组件：文章的作者 & 评论数 & 发布日期 更多操作按钮02 - 动态渲染数据打印当前频道的文章列表可以看到以下数据,然后再渲染到页面上了解文章数据源中的数据：art_id：文章的 idaut_id：作者的 idaut_name ：作者的名称ch_id：所属频道的 idcollect_count：收藏数comm_count：

频道面板模块01 - 打开频道操作面板面板可以使用 vant 中的组件：弹出层popup属性： v-model 控制面板的显示和隐藏的特点：v-model：设置为 true，面板就开启点击黑色遮罩层区域，面板就关闭步骤：a. 在页面上添加一个频道操作面板：默认隐藏b. 给操作面板按钮添加一个点击事件：将面板显示出来02- 将频道操作面板封装为组件1.0 由于频道操作是在 home 中完成了，home 中的逻辑已经足够多了，如果我们再将频道操作的逻辑也放到 home 中。将

主页10 - 加载频道数据步骤：a. 在 mounted&created 中请求服务器接口，得到频道数据接口： 获取用户频道列表b. 将返回的频道数据保存起来c. 将频道数据渲染到页面上11- 给请求设置 token获取频道数据的接口其实是这一种情况：没有传入 Authorization（token）： 只会得到默认的 7 条频道数据传入了 Authorization（token） ：就会得到当前登录用户的频道数据由于在项目中有很多像获取频道数据一样的接口，

首页:01 - 完成 home 组件步骤：1.0 在 views 下面创建一个 home文件夹,再在里面建一个index.vue文件2.0 router文件夹中的index.js文件中设置路由const routes = [ { path: '/useVant', component: UseVant }, { path: '/', component: Login }, { path: '/home', component

登录完成静态页面添加一个登录页面：创建一个 login 组件设置 login 路由完成静态页面代码:<template> <div> <van-form> <!-- navbar导航栏 --> <van-nav-bar title="标题"></van-nav-bar> <!-- 用户名密码输入框 --> <van-cell-group&gt

01-搭建项目结构步骤:1.0 在桌面上打开终端2.0 使用终端创建一个项目执行指令： vue create heimatt(heimatt是项目名字+6)生成项目时选择： Manually select features选择自己项目中需要用到的特性： babel、vuex、vue-router、css Pre-process、eslint是否开启 history 模式 ,选no选择一个 css 预处理器 ,选less选择 eslint 的校验时机,都选设置保存特性的位置,将以

任务：使用 webpack 搭建一个类似于 vue-cli 搭建的项目结构主线：整个 webpack 的学习我们会以一个计算器案例作为主线来完成。01-webpack 的作用就是 vue-cli 实现的底层的原理vue-cli 搭建的项目有哪些功能：可以运行为一个服务器可以进行实时更新可以解析 css 文件…上述的这些功能，其实都是 webpack 来实现的02-案例1.0 使用 js 完成计算器功能：结构：页面上放置三个输入框，一个符号选择器，一个按钮交