hx_programmer的博客

原创 脱离百度开发

1.英文key转化为中文key formatData(list) { const map = { 'id': '编号', 'password': '密码', 'mobile': '手机号', 'username': '姓名', 'timeOfEntry': '入职日期', 'formOfEmployment': '聘用形式', 'correctionTime': '转正日期',

原创 巩固整理常用的数组方法

常用的遍历数组方法1. forEach 说明: forEach是最简单、最常用的数组遍历方法，它提供一个回调函数，可用于处理数组的每一个元素，默认没有返回值。回调函数的参数,第一个参数是数组的每一项,第二个参数是数组中每一项的索引,第三个参数是该数组本身,后两个参数可选 示例:var arr = [1, 2, 3, 4, 5]arr.forEach((item, index) => { c...

原创 VUE初次渲染父子组件生命周期执行顺序

听到很多这个问题,想了一下,自己也不是很清楚,写了一个demo,打印结果如下1.父组件的beforeCreate2.父组件的created3.父组件的beforeMount4.子组件的beforeCreate5.子组件的created6.子组件的beforeMount7.子组件的mounted8.父组件的mounted...

原创 TypeScript基础

TypeScript 是什么? TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行 TypeScript有什么作用? JS是弱类型的,没有类型的概念,当你类型写错了的时...

原创 react登录访问控制--鉴权

这里给出的解决方案是封装一个鉴权路由组件组件代码import { hasToken } from '@/utils/storage' // 这里是封装了获取token的函数import React from 'react'import { Route, Redirect } from 'react-router-dom'// 我们需要解构所有的属性，除了component属性export default function PrivateRoute ({ component, path })

原创 react项目中非组件环境下拿到路由信息

问题导入 一般我们在非组件中跳转路由,由于hooks只能在函数组件中使用,所以我们在非组件中可以用window.location.href,例如:window.location.href = '/login'这里有一个问题,就是使用window.location.href跳转路由会刷新页面,那么如何在不刷新页面的情况下跳转路由呢,接下来我们来说一下解决办法背景react-router-dom中直接有Router这个包，但是它Router 没有histo...

原创 react-router-dom基本使用

react-router-dom现在发了6.0版本，目前不稳定,这里我们使用5.X基础步骤第一步安装包npm i react-router-dom@5.3.0第二步导入包，并使用。import { HashRouter, Route, Link } from 'react-router-dom'第三步使用Link指定导航链接使用Route指定路由规则(哪个路径展示哪个组件)路由三大对象之-RouterRouter 组件：包裹整个应用，一个 R...

原创 温故而知新(第六天)

1、js 防抖和节流函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在延迟时间后触发函数，但是在延迟时间内再次触发的话，就会取消之前的计时器而重新设置。只有最后一次操作能被触发应用场景:搜索联想函数节流（throttle）：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数应用场景: 鼠标滚动事件,轮播图2.、什么是类数组（伪数组），如何将其转化为真实的数组？伪数组有下面几个特点1、具有 length 属性2、按索引方式存储数据3、不具有数组

原创 React-redux库的使用

为什么要使用React-redux 每个组件都需要单独导入store 在根组件上的写法不友好 什么是react-redux是 Redux 官方提供的 React 绑定库 React 和 Redux 是两个独立的库，两者之间职责独立。 Redux可以和其他的js库，框架一起使用，而并不专门用于react。 为了实现在 React 中使用 Redux 进行状态管理 ，就需要一种机制，将这两个独立的库关联在一起。这时候就用到 React-Redux 这个绑定库了

原创 react中redux的使用

什么是reduxRedux 是 JavaScript 应用的状态容器，提供可预测的状态管理。为什么Rect要用 ReduxReact 是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案。因此react在涉及到数据的处理以及组件之间的通信时会比较复杂。 对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React，写大型应用比较吃力 不使用 Redux ： 只能使用父子组件通讯、状态提升等 React 自带机制 ...

原创 useEffect副作用的使用

概念:接收一个包含命令式、且可能有副作用代码的函数使用时有几种使用方式: 1.不带第二个参数。执行时机：初始执行，每次更新之后都要执行。 可以模拟 componentDidmount + componentDidUpdateuseEffect(() => { // 副作用函数的内容}) 2.带第二个参数，参数是空数组。执行时机：只执行第一次。模拟 componentDidMountuseEffect(() ...

原创 useRef的基本用法

1.使用useRef获取DOM元素const refContainer = useRef(null);console.log(refContainer)返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( null)。可以把这个ref对象利用元素的ref属性绑定在dom元素上,示例如下:import React, { useRef } from 'react'import reactDom from 'react-dom'export .

原创 useContext的基本用法

useContext基本使用可以分为固定的三步 1.根组件导入并调用createContext方法，得到Context对象，并导出import { createContext } from 'react'export const Context = createContext() 2.在根组件中使用 Provider 组件包裹需要接收数据的后代组件，并通过 value 属性提供要共享的数据return ( <Context.Provider val...

原创 react组件之间的通信

111111

原创 温故而知新(第五天)

一 .Vue 中怎么重置 data? 要初始化 data 中的数据，可以使用 Object.assign()方法，实现重置 data 中的数据， 下面我详细介绍一下Object.assign()方法基本定义:Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 用法:Object.assign(target, ...sources)，第一个参数是目标对象，第二个参数是源对象，就是将源对象属...

原创 怎样快速搭建web的api接口

一 .安装json-server包npm install -g json-server二 . 创建一个文件夹,在里面创建一个json文件,名字随意,在json文件中把你需要的数据按json合适的要求定义一个对象例如:{ "assets": [ { "id": 1, "name": "外套", "price": 99 }, { "id": 2, "name": "裤子", "price": 34 }, { "id": 3, "name": "鞋", ".

原创 温故而知新(第四天)

1.你知道 style 上加 scoped 属性的原理吗？ 先说一下scoped是干什么的,在 Vue 组件中，为了使样式私有化（模块化），不对全局造成污染，可以在 style 标签上添加 scoped 属性以表示它的只属于当下的模块，局部有效。如果 一个项目中的所有 Vue 组件 style 标签全部加上了 scoped，相当于实现了样式 的私有化. 它的原理是通过PostCSS 转移实现,PostCSS 给所有 dom 添加了一个唯一不重复的动态属性，然后，给 CSS...

原创 温故而知新(第三天)

1.编程式导航使用的方法以及常用的方法 首先我们先说一下什么是编程式导航,顾名思义,就是在业务逻辑代码中实现导航我们常用的方法一般有四种:1.路由跳转 ： this.$router.push() 2.路由替换 : this.$router.replace() 3.后退： this.$router.back() 4.前进 ：this.$router.go(n) (这里的n可以是负数也可以是正数,负数代表后退,正数代...

转载 前端从入门到进阶必备的N个网站

文档学习类1.MDNMDN是一个完整的学习平台，你可以在这里深入学习Web技术以及能够驱动Web的软件，包括：网络标准（例如：CSS、HTML 和 JavaScript）、开发开放网络应用、开发 Firefox 附加组件。2.菜鸟教程菜鸟教程提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识，可以看做是前端开发字典，可在上边查漏补缺。3.W3CSchoolw3cschool是一个专业

原创 温故而知新(第二天)

1.简述vuex数据传递流程 当我们调用dispatch 来触发 actions 里面的 方法。actions 里面的每个方法中都会 有一个 commit 方法，当方法执行的时候 会通过 commit 来触发 mutations 里面的方法进行数据的修改。 mutations 里面 的每个函数都会有一个 state 参数，这样就可以在 mutations 里面进行 state 的数据修改 ，当数据修改完毕后,会同步到组件中,因为数据双向绑定,所以页面的数据也会发生改变2.Vuex 的 ...

原创 温故而知新(第一天)

1.Vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗？在Vue.cli中使用自定义组件一般分为四步第一步: 新建组件文件,一般在src下的components文件夹中创建,script标签中一定要有export default {} 第二部: 在父组件中导入该组件第三步: 在父组件的components属性上注册该组件第四步: 在父组件的template中使用该组件遇到的问题: 如果导入的时候子组件名用的是驼峰命名法,在template中使用时eslint会自动转化为用减号

原创 如何在老项目中添加Eslint和保存自动格式化

1.在项目中安装eslintnpm i eslint typescript -D2.在项目根目录，运行npx eslint --initnpx eslint --init (1)按交互提示安装相关插件 (2)它会自动生成eslint的配置文件3.设置vscode的自动保存格式化在项目根目录下，补充配置文件：.vscode\settings.json代码:{ "eslint.run": "onType", ...

原创 vue中v-if与v-show的区别以及使用场景

区别1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏； 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； 3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件

原创 VUE如何侦听url变化

现在页面上显示的都是大数据学科下的标签列表,需求时点击左侧导航标签按钮页面显示所有学科的标签列表点击之前:点击之后:上面的图可以看出点击之后调试工具里面的数据和URL都发生了变化,所以我们可以侦听$route里面的数据,代码如下: watch: { $route (to, from) { if (to.fullPath === to.path) { this.form.subjectID = null ...

原创 如何从多个盒子中找出空盒子

题目:20个div有一个div里面没有内容,如何用css选择器快速找出这个盒子? <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <di

原创 vue如何添加自定义指令

为什么需要自定义指令?除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个例子有一个输入框,当页面加载时，该元素将获得焦点 (注意：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：...

原创 使用addRoutes之后会出现的bug

在我们使用addRoutes方法配置动态路由时,经常会出现两个bug,以下我们就来说说这两个bug和解决办法1.刷新页面出现的白屏bug// 解决刷新出现的白屏bug next({ ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次) replace: true // 重进一次, 不保留重复历史 })2.退出后，再次登陆，发现菜单异常 （控制台有输出说路由重复）原因:路由设置是通过rout...

原创 如何做Excel导入功能

介绍： Excel 的导入导出都是依赖于js-xlsx来实现的。 在 js-xlsx的基础上又封装了upload-excel.vue来方便导入数据。1.下载js-xlsx插件Excel 的导入导出都是依赖于js-xlsx来实现的 js-xlsx是必须插件npm install xlsx -S2. 下载或复制 Excel 的导入 组件下载地址:vue-admin-elementvue-element-admin/src/component...

原创 创建分页组件需要的按钮数组,在可能的情况下，让page处于正中间

题目:// btnCount: 最多能看到几个按钮// total: 总条数// size: 每页几条// page: 当前第几页function f(total, size, page，btnCount=5) { // show me your code const arr = [] // 能看到的页码集合 return arr}// 在可能的情况下，让page处于正中间f(100, 10, 1, 5) // ==> [1, 2, 3, 4, 5]f(10...

原创 如何把excel里面的时间编码转换为我们经常用的时间格式

当我们做excel导入的时候例如导入上图所示的excel表格,你会发现excel会对时间进行特殊的编码,我们获取的值如下图但是后端通常需要的是标准的时间格式,这是我们需要进行还原解决办法:function formatExcelDate(numb, format = '/') { const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 .

原创 table中添加和编辑功能共用一个form表单时可能出现的问题

如上图所示两个按钮用的同一个弹出框,这里表单我是单独封装的一个组件问题: 例如要验证用户名不能重复,当你在表单验证时,编辑和添加是共用一套表单验证规则，而在添加时: 约定所有的已有的用户名是不能使用的, 但是当你做编辑功能时,你只是改了别的数据,没改用户名,这种情况应该是允许的,但是你会发现用户名那一栏就会提示你的用户名必须唯一下面我们说说解决方案:1.定义一个用来接收你验证表单需要用到的数据 data() { return { // 用来接收验证表单数据...

原创 Element-ui中Table组件的用法

这里我们从基础用法一点点说一,基础用法二,带斑马纹表格三,带边框表格边框和斑马纹基本一样,在Table标签上加一个border属性就可以四,带状态表格这里row-class-name的值为一个函数函数里可以给任意行加上状态类名,这里的状态类名可以去Element-ui中Alert 警告组件中查看,只需要在警告类名后加"-row"就行这里就说这么多,详情可以参考Element-ui...

原创 复习巩固vue侦听器

一, 为什么要用侦听器虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。二,watch是什么watch是一个对象，对象就有键跟值，　　键就是我们要监听的数据，　　值可以是函数：当我们监听的数据发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前的值，第二个是变化后的值；　　值也可以是method中的函数名：函数..

原创 svg-icon的工作原理(超详细)

一,怎样使用svg-icon组件1,安装依赖npm i svg-sprite-loader@4.1.32,配置 vue.config.jsconst path = require('path')function resolve (dir) { return path.join(__dirname, dir)}补充一个配置{ }chainWebpack (config){ // set svg-sprite-loader config.module

原创 组件中v-model和:sync的区别

我们先来说说他们两的原理 v-model: :sync:小结.sync与v-model区别是 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。 区别点： 格式不同。 v-model="num", :num.sync="num" v-model： @input + value :num.sync: @update:num v-model只能用一次；.sync可以有多个...

原创 统计每个数组元素出现的次数

const arr = ["b", "c","b", "c","a", "b", "c"]const obj = {}// 你的代码 ...console.log(obj) // ==> {a：1， b: 3, c: 3}这里我写出了两种方法 第一种方法:forEach代码如下// 第一种方法(forEach) var arr = ['a', 'b', 'c', 'b', 'a', 'f', 'b'] var obj = ...

原创 在vuex中发送ajax请求的过程

原创 解析左侧导航高亮

因为是用第三方组件写的,所以我们可以先用浏览器调试工具看一看我们分别点击他们的时候有没有什么变化上面的两张图可以看出当我们分别点击的时候,被点击的选项会多一个类名(is-active)所以我们可以直接给这个类名添加高亮的样式就可以,代码如下:...

原创 深入解析vue中route和router的区别

vue-router中经常会操作的两个对象route和router两个。1、$route对象 $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 1. $route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。 2. $route.params 一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果...

原创 巩固一下常用的git指令

git常用命令一, 新建代码库 1.git init (在当前目录新建一个Git代码库) 2.git init [project-name] (新建一个目录，将其初始化为Git代码库) 3.gitclone [url] (下载一个项目和它的整个代码历史)二,配置 1.git config --list (显示当前的Git配置) 2.git config -e [--global] (编...