- 博客(149)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 React-路由跳转-Cannot read property ‘push‘ of undefined
报错：Cannot read property ‘push’ of undefined问题描述：使用history的push方法手动跳转路由。结果报错push方法undefined了this.props.history.push('地址')问题原因：如果一个组件是通过路由创建的, 那么系统就会自动给这个组件传递一个history对象。但是如果一个组件不是通过路由创建的, 那么系统就不会给这个组件传递一个history对象，history对象都找不到了，那push方法自然就报错undefined解
2021-04-21 17:40:20
1247
原创 如何搭建一个React项目
1.自行手动配置详见：手动创建一个React项目https://zh-hans.reactjs.org/docs/add-react-to-a-website.htmlhttps://reactjs.org/docs/add-react-to-a-website.html2. 通过脚手架自动配置详见：脚手架自动创建React项目https://zh-hans.reactjs.org/docs/create-a-new-react-app.html...
2021-04-05 16:16:35
234
原创 脚手架自动创建React项目
1.什么是脚手架?脚手架是一种能快速帮助我们生成项目结构和依赖的工具每个项目完成的效果不同，但是它们的基本工程化结构是相似的。既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生成基本的项目模板。那么这个帮助我们生成项目模板的工具我们就称之为’脚手架’2.什么是create-react-app?create-react-app就是React的脚手架工具,它可以快速的帮我们生成一套利用webpack管理React的项目模板3.如何安装和使用create-react-app?
2021-04-05 16:15:56
350
原创 手动创建一个React项目
手动创建一个React项目1.创建一个DOM容器2.添加两个script标签，导入文件react.js和react-dom.js3. 通过react.js创建虚拟DOM4.通过react-dom.js渲染虚拟DOM完整代码需求：给一个div绑定带内容的div1.创建一个DOM容器<div id="app"></div>2.添加两个script标签，导入文件react.js和react-dom.js <script src="https://unpkg.com
2021-04-05 16:09:08
482
原创 React项目查看webpack【报错：Remove untracked files, stash or commit any changes, and try again.】
在React项目中，，webpack的相关文件默认被隐藏，如果想查看webpack文件，就在项目目录下输入：npm run eject如果报错Remove untracked files, stash or commit any changes, and try again，是因为使用脚手架新建的项目中，有文件被删除。因此五大执行该命令。...
2021-04-05 15:21:19
423
原创 Error: connect ETIMEDOUT xxx.xxx.xx.xxx:xxxx
问题描述：Error: connect ETIMEDOUT xxx.xxx.xx.xxx:xxxx显示的是连接错误，链接时间超时，附带下载地址这个问题一般是在使用npm或yarn安装依赖是报错。问题原因：一般是因为下载依赖的服务器访问不到造成的，大家都懂得。解决办法：将npm或yarn的下载镜像地址修改一下yarn修改镜像地址1、查看一下当前源：yarn config get registry2、切换为淘宝源：yarn config set registry https://regis.
2021-03-30 12:14:00
6546
1
原创 安装React developer tool避坑
安装React developer tool避坑问题1.This is probably not a problem with npm. There is likely additional logging output above.问题2.npm ERR! code EUNSUPPORTEDPROTOCOL npm ERR! Unsupported URL Type "link:": link:./scripts/eslint-rules3.总结时间有限的童鞋直接看标题3 总结即可问题1.This i
2021-03-28 15:52:58
1279
原创 Redis-Cluster的结构及搭建方法
1.Redis Cluster完整结构在Redis Cluster必须至少有6台服务器在Redis Cluster每一台分片服务器都必须是一个主从结构在Redis Cluster中可以给主服务器分配槽，只要给主服务器分配了槽，那么这个主服务器就变成了分片服务器。由于每个分片都是主从复制结构, 所以就保证了数据的’安全性’和’可分流性’但是Redis Cluster的’高可用性’并不依赖于Redis Sentinel,在Redis Cluster中它自己实现了Redis Sentinel高可用相
2021-03-26 13:20:51
257
原创 Redis的哨兵Sentinel的搭建
0.主观下线和客观下线主观下线： 一个Sentinel节点认为主节点下线客观下线： 多个Sentinel节点认为主节点下线注意点：客观下线后，才会切换主节点。1.Redis-Sentinel搭建1.1 首先搭建一个主从结构本案例解压六分压缩包，分别命名为Redis-master、Redis-slave1、Redis-slave2。一主二从结构。1.2 然后搭建一个奇数个Sentinel节点的Sentinel本案例解压六分压缩包，分别命名为Redis-x64-Sentinel1、Redis
2021-03-24 17:54:34
375
原创 Redis-RDB和AOF对比
AOF优先级高于RDB如果Redis服务器同时开启了RDB和AOF, 那么宕机重启之后会优先从AOF中恢复数据RDB体积小于AOF由于RDB在备份的时候会对数据进行压缩, 而AOF是逐条保存命令, 所以RDB体积比AOF小RDB恢复速度比AOF恢复速度快由于AOF是通过逐条执行命令的方式恢复数据, 而RDB是通过加载预先保存的数据恢复数据所以RDB的恢复速度比AOF快AOF数据安全性高于RDB由于AOF可以逐条写入命令, 而RDB只能定期备份数据, 所以AOF数据安全性.
2021-03-24 12:42:53
338
原创 生成Redis的RDB文件
1.RDB(快照)将内存中所有内容写入到一个文件中2.触发生成RDB三种机制2.1 手动执行save命令同步执行【会阻塞进程】如果已经存在旧的RDB文件, 会利用新的覆盖旧的2.2 手动执行bgsave命令异步执行【不会阻塞进程】如果已经存在旧的RDB文件, 会利用新的覆盖旧的2.3 通过配置文件自动生成通过配置文件【Redis安装目录-redis.windows-service.conf】指定自动生成条件, 一旦满足条件就会自动执行bgsave生成RDB文件dir ./
2021-03-23 17:09:43
1652
原创 MongoDB-分片集群搭建
MongoDB-分片集群搭建1.分片集群搭建整体思路1.1 搭建配置服务器复制集1.2 搭建分片服务器复制集1.3 搭建路由服务器2.搭建配置服务器集群2.0 创建配置文件目录结构2.1 编写配置文件2.2 注册MongoDB服务2.3 开启任务【服务】2.4 测试服务可用性2.5 添加复制集[初始化]3.搭建分片服务器集群3.0 创建文件目录结构3.1编写配置文件3.2注册MongoDB服务3.3 在任务管理器中开启任务3.4 测试服务可用性3.5 添加复制集4.搭建路由服务器4.0 创建文件目录结构4.
2021-03-21 18:35:36
2336
原创 MongoDB复制集搭建
阅读本文需要有复制集的基础概念，如阅读有困难可留言。有空了写一篇复制机基础概念。MongoDB复制集搭建1.什么是复制集用大白话阐述，就是当所有用户在一台MongoDB服务器读取写入数据的时候，会有宕机等风险。那么我们就引申出了复制集，也就是使用多台MongoDB服务器, 并且每台服务器中存储的内容都相同，来解决高可用，数据安全性，数据分流的问题。2.复制集的搭建2.1 下载MongoDB安装包：安装包地址2.2 随便找一个文件夹，解压MongoDB安装包，本次实验解压三次【相当于三台Mong
2021-03-20 22:53:18
595
原创 mongoose基本使用
mongoose基本使用1.什么是Mongoose?2.Mongoose和MongoDB映射关系3.使用：3.1 初始化一个nodeJS项目：3.2 安装mongoose3.3 使用mongoose4.基本操作5.完整js代码1.什么是Mongoose?Mongoose和MySQL的Sequelize一样, 都是NodeJS中操作数据库的对象模型工具Mongoose使用面向对象的思想对原生的mongoDB命令进行了封装http://www.mongoosejs.net/https://mong
2021-03-19 16:57:16
1565
原创 使用mongoose操作MongoDB数据库【mongoose的增删改查】
使用mongoose操作MongoDB数据库【mongoose的增删改查】0 快读了解mongoose的增删改查1.操作数据库基本步骤1.1 定义集合中存储数据规则1.2 利用规则创建集合1.3 操作文档【数据的增删改查】2.具体增删改查的方法2.1 文档的增加2.2 文档的查询2.3 文档的修改2.4 文档的删除0 快读了解mongoose的增删改查1.操作数据库基本步骤1.1 定义集合中存储数据规则const userSchema = new mongoose.Schema({ // 说明集合
2021-03-19 16:56:13
1378
原创 数据库迁移工具
数据库迁移工具-创建数据库一、数据库迁移工具-使用1.什么是Sequelize-CLI?2.如何使用Sequelize-CLI?二、数据库迁移工具-创建表1.创建模型2.根据模型创建表3.回退到某个时刻三、数据库迁移工具-修改表1.如何修改表?2.修改表步骤3.实例：给User表添加age字段并删除：四、数据库迁移工具-种子文件0.什么是种子文件?1.创建种子文件2.执行种子文件3.记录种子文件操作记录4.回退到某个时刻一、数据库迁移工具-使用1.什么是Sequelize-CLI?在编程开发中为了能
2021-03-10 16:50:41
1802
原创 Node中操作MySQL
Node中操作MySQL12.1、Node中操作MySQL1.如何在Node程序中操作MySQL数据库?2.Node程序中操作MySQL具体步骤：具体代码见app.js文件2.1.npm init -y：初始化package.json文件。2.2.安装mysql或mysql2驱动2.3.app.js文件中处理连接MySQL服务器语句2.4.右键-run运行app.js文件3.驱动器文档3.1 mysql驱动库3.2 mysql2驱动库4.注意点：4.1、更改加密方式：4.2、更改密码12.1、Node中操
2021-03-05 17:48:44
487
原创 Vue初始化创建项目
Vue初始化创建项目1.创建项目：2.打开项目：3.删除项目中的默认添加文件4.添加自己的东西4.1.初始化HTML中的代码：4.2.使用视口缩放+rem的方式适配移动端。4.3.运行查看效果：npm run serve4.4.借助postcss-pxtorem实现自动将px转换为rem。4.5.借助webpack实现CSS3/ES678语法的兼容4.6.借助fastclick，解决移动端点击事件100-300ms延迟的问题4.7.初始化默认的全局样式：5.创建后目录结构1.创建项目：安装脚手架工具
2021-02-16 18:09:35
1075
原创 使用Vue-CLI手动配置【初始化项目】
配置的时候使用键盘，而不是鼠标。方向键：选择选项空格：键选中选项回车：下一步选择需要配置的项目是否安装Router配置CSS配置标准规范配置文件存储位置是否保存本次配置，以便下次使用...
2021-02-16 17:12:59
1030
2
原创 MySQL基础语法【库、表的增删改查】
1.链接与断开链接：mysql -h127.0.0.1 -P3306 -uroot -proot-h 主机地址 -P 端口号-u 用户名 -p 用户密码断开：1.exit;2.quit;3.\q;2.数据库2.1、 显示：show databases;1、information_schema保存着关于MySQL服务器所维护的所有其他数据库的信息。 如数据库名，数据库的表，表栏的数据类型与访问权限等。一般不会修.
2021-02-07 16:20:40
847
原创 MySQL数据类型基本理解
MySQL数据类型基本理解1.MySQL为什么要提供数据类型?2.MySQL中有哪些数据类型?3.整数类型 - 专门用来保存整数的4.浮点类型 - 专门用来保存小数的5.定点类型 - 也是用于存储小数的,存储的比浮点类型精确6.字符类型 - 专门用来存储字符的7.大文本类型7.1、MySQL中每一行存储的数据是有大小限制的, 每一行最多只能存储65534个字节，超出就会报错7.2、大文本类型8.枚举类型9.集合类型10.布尔类型 - 专门用来保存真假的11.日期类型 - 专门用来保存时间的1.MySQL为
2021-02-07 13:19:31
553
原创 NodeJS 编写工具包的版本号和帮助文档 [报错：error: unknown option ‘--version]
一般全局的工具包有两个参数必须要处理：–version和–help，分别会输出包的版本号，和帮助文档。编写步骤：1、获取传递参数：NodeJS 通过process.argv获取参数2、根据不同的参数，返回不同内容返回不同内容，除了使用if语句判断自定义指令传递的参数外。还可以使用commander工具，快速编写工具包的版本号和帮助文档。1.安装commander包：npm i commander2.导入commander：const program = require(‘commande
2020-11-11 20:59:17
1798
原创 报错：Error: Cannot find module
编写自定义执行指令时，写js文件第一行写执行环境#! /usr/bin/env node // 执行环境报错如下：internal/modules/cjs/loader.js:797throw err;^Error: Cannot find module ‘C:*index鏂囦欢鍦╪ode鐜涓墽琛?’?[90m at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)?[39m?[9
2020-11-11 18:37:36
6789
原创 webstrom设置eslint，即：指定修复规则
本文介绍win系统下，设置webstrom的修复规则。1.点击webstrom的File菜单项2.点击Setting3.输入eslint4.选择Manual ESLint configuration（开启ESLint）5.选择对应的配置（当前项目中的配置）6.Apply即可设置完成后，webstrom中右键，既可看到自动修复按键...
2020-10-29 17:45:54
643
原创 获取、监听hash值和路径值
1.获取hash值location.hash：hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）2.获取路径值location.pathname：pathname 属性是一个可读可写的字符串，可设置或返回当前 URL 的路径部分...
2020-10-09 17:48:08
2104
原创 MySQL数据库介绍及安装
MySQL数据发展及安装1.什么是数据库?2.什么是MySQL?3.什么是关系型数据库?3.1数据库萌芽阶段:3.2、第一代数据库:3.3、第二代数据库:4.MySQL数据库安装4.1.安装包下载地址:4.2.安装过程:4.3.测试是否安装成功1.什么是数据库?数据库就是存储数据的仓库数据库和Excel很像, 本质上是一个文件；有很多的表；每张表也是用来存储数据的所以学习数据库和学习Excel差不多,就是学习如何新建数据库文件,如何在数据库中新建表,如何往表中存储数据和操作表中的数据2.什么
2020-09-29 13:14:26
636
原创 Duplicate keys detected: ‘0‘. This may cause an update error.
报错：Duplicate keys detected: ‘0’. This may cause an update error.原因：同一个模板里，有两个v-for，:key都用的是遍历得到的index<template><div v-for="(value, index) in arr" :key="index"></div><div v-for="(value, index) in arr2" :key="index"></div>
2020-09-04 12:31:26
796
原创 elementUI点击NavMenu的一个菜单，跳转到另一个页面，菜单，头部消失
使用elementUI的NavMenu，点击菜单时，有时需要跳转到另一个页面后，菜单，头部消失，就像一个新开的页面。解决方法：在新页面的组件中，使用css实现，如下：<template> <div class="direct"> </div></template><script>export default { name: 'Direct',}</script><style scoped lang
2020-08-25 17:03:36
3892
1
原创 vue 使用iscroll5做滚动效果，造成@click点击事件失效
vue组件的click失效，查明原因是被iscroll禁用了。添加preventDefault即可。如下： this.iscroll = new IScroll(this.$refs.wrapper, { preventDefault: false })
2020-08-17 20:55:07
540
原创 Invalid prop: type check failed for prop “index“.
Vue使用ElementUI的NavMenu时，有个index属性。此属性需要传递string类型。
2020-08-14 13:53:47
236
原创 Could not install from “element-ui\lib\nav-menu“ as it does not contain a package.json file.
使用Element-UI编写导航栏，需要使用NavMenu。为避免项目过大，[ 按需引用 ] NavMenu后报错：Could not install from “element-ui\lib\nav-menu” as it does not contain a package.json file.。// 按需引用import { NavMenu } from 'element-ui'解决办法：使用NavMenu 按需引用需修改如下：import { Menu, Submenu, MenuIte
2020-08-13 21:39:31
2021
原创 简述Vue生命周期
1.什么是生命周期方法?从生到死的特定阶段调用的方法PS: 生命周期钩子 = 生命周期函数 = 生命周期事件Vue生命周期介绍，官网2.Vue生命周期方法分类2.1、创建期间的生命周期方法beforeCreate:方法特点——调用时没有初始化好Vue实例中的数据（data）和方法（methods）。即调用此方法时还不能调用Vue实例的数据和方法。created:——是我们最早能够访问Vue实例中保存的数据和方法的地方。beforeMount:——表示Vue已经编译好了最终模板，但是还没有将最
2020-07-09 18:09:11
851
1
原创 【Vue报错】did you register the component correctly
问题描述：Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.报错原因1：:是因为暴露组件的时候加了组件扩展名，导致未识别。//错误写法：export default { name: 'xxx.vue'}//正确写法export default { name: 'xxx'
2020-06-22 11:23:54
6422
原创 Vue的渲染方式（如何将组件添加到实例控制区域）
1.Vue渲染组件的两种方式1.1先定义注册组件, 然后在Vue实例中当做标签来使用<div id="app"> <one></one>//在实例中当做标签使用</div><template id="one"> <div> <p>我是组件22</p> </div></template><script> Vue.compo
2020-06-04 18:47:54
812
原创 Vue父子组件数据传递方式
使用Vue的同学，本文一、二两个小结必须掌握。Vue父子组件数据传递方式一*、父组件给子组件传递数据二*、父组件给子组件传递方法三、子组件给父组件传递数据四、组件数据多级传递五、组件方法多级传递一*、父组件给子组件传递数据1在父组件中通过v-bind传递数据传递格式 v-bind:自定义接收名称 = "要传递数据"2在注册组件的子组件中通过props接收数据接收格式 props: [“自定义接收名称”]<!DOCTYPE html><html lang="en">
2020-05-12 18:49:13
730
原创 Vue常用指令
指令：即Vue内部提供的自定义属性，其封装了Vue内部实现的一些功能。v-once：界面不跟数据变化，只渲染一次。v-cloak：数据渲染后自动显示元素。 [v-cloak]:{display: none}默认先隐藏未渲染的界面等到生成HTML渲染之后再重新显示。Vue数据绑定过程：1.会先将未绑定数据的界面展示给用户2.然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML...
2020-04-22 13:00:33
235
原创 webpack中常用loader及plugins（插件）
本文主要简单讲解常用loader及plugins的作用，方便快速查找。具体使用方法见官网或github一、loader同plugins是什么loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 l...
2020-03-02 15:05:51
3776
原创 ES6模块化使用方式
ES6之前javascript比较怂巴巴，没有模块化的概念，是ES6的新特性。本文主要介绍js模块化的使用。ES6模块化一、ES6模块化的第一种方式:1.1 使用方法1.2.注意点：注意点1的案例：解构赋值案例：注意点2案例：通过as修改接收的变量名称二、ES6模块化的第二种方式:2.1 使用方法2.2 注意点：三、两种方式混合使用一、ES6模块化的第一种方式:1.1 使用方法导出数据：...
2020-03-02 14:00:36
833
动态数据填入ul（新闻展示页面）.zip
2020-05-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人