- 博客(73)
- 收藏
- 关注
RSS订阅原创 react-router v6版本使用记录
第二种：通过params方式传参，通过这种方式跟第一种相比，麻烦的地方在于路由配置那里也要做出相应的调整，即参数作为path的一部分。注意：BrowserRouter指定路由是history模式，而HashRouter可指定路由模式是哈希模式，哈希模式路径会出现#主页，也就是home组件里，是显示二级路由的组件，需要加上路由出口组件<Outlet />我们这里是举例从登陆页面，跳转到主页面，在主页面有菜单，点击菜单可看到对应的内容。通过编程方式进行路由跳转，也就是useNavigate跳转。
2023-08-16 11:15:16
102
原创 vue项目打包发布到服务器页面空白找不到static文件夹
1：修改config下的index.js文件，将输出路径由绝对路径改为相对路径2;修改build文件夹下utils.js文件3：注意，如果路由使用的是history模式则还是会空白，需要在服务器端设置匹配不到路由则跳转到index.html,简单的还是使用默认路由模式hash模式，搞定。...
2021-07-09 14:16:05
3361
原创 vue项目简单部署
由于自己没有服务器，因而是申请的华为云免费服务器2：申请过服务器以后登录主机，安装nginx,nginx安装命令apt-get install nginx启动nginxservice nginx start查看nginx是否处于启动状态systemctl status nginx可以添加配置，让每次打开主机都自动启动nginxsystemctl enable nginx设置过程意：如果申请的是华为云的免费云服务器，还要设置一下安全组才能将公网对外访问这时候去访
2021-07-09 11:47:11
1813
8
原创 vuex之getters用法
vuex的作用是用来状态共享的，state中定义数据，但如果需要对数据进行一定的处理，比如说state中有一个数组，但我们需要显示该数组中某些符合特定要求的值，而这些特定的数据需要在多个组件中shi'yong...
2021-06-01 17:04:36
284
原创 vue之v-for中key的作用
vue中使用v-for指令进行循环渲染的时候需要动态绑定一个key属性，那么，绑定key的作用到底是什么呢官方给出的解释是作为唯一标识，高效的更新虚拟DOM，优化性能，那么我们来看下是如何提高性能的如果vue组件中data里有一数组list，是[1,2,3,4]，我们利用v-for循环输出如下，那么可想而知一定是1，2，3，4这样的顺序进行渲染，可是，如果我们改变list为[0,1,2,3,4]呢那么vue的渲染顺序将是在原来的1，2，3，4的基础上进行修改，将之前1的内容换成0，将之前2.
2021-05-30 17:22:54
1566
原创 redux简单实用实例
公司今年下半年的项目用到了react作为技术栈，在使用的过程中我发现它本身学习并不难，难得是当一个项目复杂的时候，只是单纯的父子组件通信并不是很便捷，所以我在项目中引入了redux模块，然后一直没时间进行一个归纳，所以今天就特意做了一个demo，用来小小的总结一下，以后学习起来，也有东西可以翻阅。首先说下什么是redux官方的解释是redux是js应用的可预测状态的容器，可以理解为全局数据状态管理工具，通常我们需要坐组件通信的时候会需要用到，如果只是简单的父组件往子组件传值可使用props进行传值，
2020-12-14 15:52:43
576
1
原创 微信小程序使用scroll-view无法触发下拉刷新事件onPullDownRefresh解决方案
在跟着某网学习的时候发现使用scroll-view无法触发下拉刷新事件onPullDownRefresh，在网上找了找解决方案，其中我觉得最佳的解决方案如下1：将scroll-view换成view，如此以来就可以触发下拉刷新onPullDownRefresh事件二： 改成view，那原来scroll-view组件的onScrollLower上拉加载更多事件就不能用了，这时候可以使用onReachBottom...
2020-10-12 17:57:25
3505
原创 es6 promise async await学习
最近在写代码的时候遇到了异步请求的问题，在这里呢，我想到了应用es6的async awaitasync函数是在ES2017引入的，它主要是让异步操作变得更加方便，他的用法是作为关键字放到函数面前，表示这个函数是一个异步方法，异步方法就是不用管这个方法，会继续往下走，不会阻塞下面js代码的执行async函数返回的是一个promise对象，如果想要获取peomise返回值，需要用then方法await是依附于async的，它的作用就相当于它的字面意思，等一下，就是等着我返回结果以后，再继续走下去
2020-09-29 17:59:50
172
原创 js 之this复习理解
最直接重要的一点，this始终指向当前对象举个例子第一次正常输出，因为getName函数的调用对象时test这个对象，而这个对象里面有name这个属性，所以可以拿到这个值正常输出第二个全局调用getName,相当于window.getName()，而window中没有声明name变量，所以，没有输出名字2：对象里的方法this指向，毫无疑问，指向的是当前对象3：对象里的方法里再声明一个函数，this则指向window，这里getName的内部this指向的是当前对象，也就是tes
2020-06-27 18:09:13
192
原创 js对象之深拷贝
浅拷贝是之拷贝一个对象的值，新对象值发生改变，旧对象随之改变，这是因为新对象拷贝的是旧对象的内存地址，指向的是同一个内存地址，所以值会一起改变深拷贝则意味着拷贝新旧对象不会相互影响，具体实现如下结果如下...
2020-06-24 11:22:40
207
原创 js代码执行步骤
最近有个朋友去面试，面试中问到了js代码执行步骤的问题，这里记录下自己的理解大体上是两个步骤，1：预编译阶段，也就是变量提升阶段，把js代码中所有声明的变量提升到顶端2：执行阶段，运行写的执行代码，比如赋值操作，以及函数的执行，打印语句等例如这段代码的编译过程如下...
2020-06-22 15:33:58
670
原创 react-router使用示例
1：首先在项目中引入模块npm install --save react-router react-router-dom2：然后新建一个文件，专门用来设置整个项目所用的路由，我这里叫router.js,在这个文件里引入想要配置路由的组件，给组件设置名称import './index.css'import React,{Component} from 'react';import ...
2019-10-23 17:43:25
335
原创 react-redux 实现计数器
1：首先编写action，描述要发生的行为，我们要做的是实现简单的加减，所以定义两种action，type字段就是描述这两种行为，最后暴漏这两种action//定义action，主要用于描述将要发生的行为const counterAddAction={ type:'add'};const counterSubAction={ type:'sub'};export ...
2019-10-23 10:14:44
472
原创 this指向小结
1：普通函数中的this定义时不明确，最终指向调用函数的对象的thisvar x=11;var obj={ x:22, say:function(){ console.log(this.x) }}obj.say();这里this.x的this指向的时调用其的对象obj，obj中有x值为22,所以输出结果22下面箭头函数输出结果11这里匿名函...
2019-10-16 11:51:01
121
原创 react学习一：组件
react组件允许你将UI拆分为独立可复用的代码片段，并对每个片段进行独立构思，从概念上类似于js函数,它接受任意的入参（即props），并返回用于描述页面展示内容的React元素举例声明组件Welcome,如果React元素是自定义组件时，它会将JSX所接收的属性转换为单个对象传递给组件，这个对象被称之为"props",组件名称必须以大写字母开头，以小写字母开头的组件视为原生DOM标签...
2019-09-17 16:34:38
146
翻译 git 在工作中使用的常见操作总结
1：首先下载安装githttps://www.git-scm.com/download/2：新建一个文件夹作为存放你项目的文件夹，然后问你们项目上的人要你们项目的git地址，你们老大把你拉到项目里，你就能看到下面的东西，能看到项目的地址，然后复制该地址，回到你的git终端，执行命令 git clone 你的项目地址3：然后配置下你的ssh key首先配置下信息，查看个人信息命令...
2019-07-24 10:32:08
132
原创 es6模板字符串使用总结
es6的模板字符串个人觉得是很好用的，尤其简化了字符串拼接这块，下面说下它是如何使用的首先，模板字符串是增强版的字符串，使用反引号``来包括字符串，如果需要拼接上变量，那拼接的格式是使用${}包裹变量即可举个例子看下最基本的用法，可以看出来跟普通字符串拼接比较起来简洁容易了很多2：模板字符串的另一优点是，空格和缩进都会保留在输出中,之前的字符串换行的话需要拼接换行符，缩进需要使用缩...
2019-06-26 15:57:38
2122
原创 angularjs ui-router详解
1：首先为什么选择ui-router,而没有选择ng-router最主要的原因是ui-router路由可以多层路由嵌套具体用法1：首先引入这个插件2：如何使用路由1：首先全局注入路由模块angular.module('mainApp',['ul.router'])2:开始使用首先，配置路由 angular.module('mainApp',['ui....
2019-05-13 16:24:01
2168
原创 自定义指令实例示例和分析
今天要尝试写一个指令，因为，有个人跟我说，如果只是业务上的问题能解决但不尝试新的东西，不会有什么进步。这个指令的功能是点击编辑图标，会出来输入框让用户输入，输入完毕以后点击对号图标则保存该数据到数据库，点击叉则取消保存到数据库。//编辑完成状态//编辑状态首先看下指令的声明html代码指令绑定link方法中的三个参数，分别代表该指令的作用域，绑定指令的元素，...
2019-04-23 15:02:43
581
原创 将json数据格式转化成excel插件JsonExportExcel.js的使用demo
公司业务中有做报表导出的功能，后端给的是json数据，也就是表格数据，我要做的就是在前端生成表格，并且可以下载，在万能的百度上搜索到了插件JsonExportExcel.js现在看下使用方法<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></...
2019-04-09 10:11:19
8408
2
原创 vscode打开多个项目（亲测可用）
1：一般使用ide打开项目的时候我都是直接将新的项目文件夹拖进去就可以再打开一个项目，但是vscode的时候直接通过file ->open file 会覆盖原来的文件夹，这时候应该怎么办呢1我们通过 选项file ->open workspace的选项打开文件夹就好了...
2019-03-28 15:50:05
12629
原创 vscode 打开新文件覆盖窗口中已打开文件详细解决步骤(亲测可用)
当一个项目很大的时候我们去找某一个文件经常使用搜索功能，本人使用vscode的时间不是很长，经常使用快捷键ctrl+p进行某个文件的搜索，但我发现打开搜索的文件的时候会覆盖掉原来窗口中打开的文件，灰常不爽，其实我也没想想明白这款开发软件这样默认的意义是啥，后来实在觉得麻烦。去往上搜了搜解决方法，写的啥都有，最终靠着广大网友的力量解决了，岁数大了，好的事情都喜欢记下来，以便以后慢慢回忆，哈哈首选...
2019-03-28 15:39:15
8797
4
原创 webpack安装使用演示
去年的时候做了一个项目，技术选型选用的是vue，当时也是第一次使用mvvm类型的框架，一切都是从o开始，但是跟着官方文档去搭建的vue项目结构，其中接触到了webpack打包，但一直没有时间好好的去整理下具体的使用方法，现在整理下。webpack官方解释说它是一个现代的javascript应用程序的1静态模块打包器，当webpack处理应用程序时，它会递归的构建一个依赖关系图，其中包含应用程序...
2019-03-21 20:41:20
251
翻译 gulp使用
首先，我们都知道gulp是基于Node.js的构建工具，使用者只需要写好相关的命令，gulp就能够根据命令去自动化的构建。比如前端经常要做的图片压缩，代码压缩，css预处理等。用gulp我们只需写命令等待gulp执行就完成全部工作了，而我们只需要关注自己的业务开发就好了。先说下使用流程全局安装gulp$ npm install --global gulp2.作为项目的开发依赖$...
2019-03-12 14:23:02
232
原创 git实践总结
1：想看下自己的改动文件都是那些git status2:想看下分支git branch （本地分支）git branch -a (所有分支)3:将改动保存到暂存区git add4:提交暂存区文件git commit -m "提交说明"如果想改变提交说明或者发现遗漏了一些改动，重新添加到暂存区以后想要重新提交git commit --amend就会进入vi...
2019-02-28 17:31:17
201
原创 VS code安装以及转换成中文
最近学习使用angular，发现在使用mvvm前端框架的时候，都推荐使用vs code。于是乎，我开始试着使用vs code官网是 https://code.visualstudio.com/，下载与自己的电脑系统相匹配的版本，然后安装即可不知道自己的系统是多少位的？。。。好吧，打开终端（windows+R）,输入cmd，然后输入命令systeminfo,如下图所示，系统类型就是你要找的，...
2019-01-17 15:39:42
842
1
原创 json浅析
写这篇文章主要是因为面试的时候总是会被问道，什么是json这个问题，我想大家心里都明白json在我们前端开发中都是怎么用，怎么处理json数据。但对于这个问题，可能很多人就不能清清楚楚的说出来。首先json全称是"JavaScript Object Notation",意思是JavaScript对象表示法。是一种轻量级的数据交换格式。下面来说下我们工作中常见的json数据结构，有两种，Js...
2019-01-14 17:52:27
174
原创 vue-router路由的使用
我们都知道，Vue.js是用来开发单页面应用的，那什么是单页面应用呢，单页面应用英文简写就是SPA，也就是根据不同的url地址，显示不同的内容，但显示在同一个页面中，所以称为单页面应用。那怎么根据不同的地址来显示不同的内容呢，主要呢就是通过路由配置了，vue中的路由指的是vue-router进来就来说说vue-router的用法1：安装安装有两种方法1：下载vue-router...
2019-01-14 12:53:58
181
原创 reactJs 入门学习
1：首先安装搭建react项目所需的环境1：打开cmd命令行，首先安装node步骤：https://nodejs.org/en/download/ node官网，选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可，输入node -v，如果出现版本信息即表示安装成功。2：npm包管理器是集成在node中的，所以直接输入npm -v就能查看到版本信息3:：选择一个位置用...
2019-01-14 12:50:51
309
原创 iview 图片上传
前端开发工作中，难免会遇到做文件上传的功能，现在的前端开发一般都是使用各种框架，基本的前端框架一般都会有自己的上传组件。虽然前端框架很多，但其实相同的组件基本使用方法是大同小异的。公司最近使用的前端框架是iview+vuejs,因工作需要做一个身份证文件上传的功能，组件选择的是iview的上传组件Upload 先展示下效果图，好让这篇文章的同学判断一下需求是否一致未上传之前上传...
2018-12-21 15:26:16
7603
4
原创 call,apply,bind方法的区别和相同点
直接贴代码实例 var name="Mary"; var age="17"; var person={ name:this.name, getAge:function(){ console.log(this.name+" is "+this.age) } } console.log(person.name) person.get...
2018-12-17 17:42:32
1185
原创 vuejs 之 $set
有次在作业的时候，业务需要，点击改变某个数组的某个数据，然而，数组改变了视图却没有更新，各种尝试都没有解决，后来，在网上查资料，了解了vuejs的$set首先说下我了解到的视图不更新的原因，网上说的原因主要是受制于ES5的限制，vuejs不能检测到对象属性的变化，只能检测到data对象上的变化。引用别的博客总结的vuejs能检测带对象变化的·方法和不能检测到的Vue包装了数个数组操作函...
2018-12-13 11:13:48
783
原创 js变量拼接
1：常见的在html代码中需要加入某个变量1：通过单引号双引号拼接<div class="container"> </div> <script type="text/javascript"> var test='测试id'; var testHtml="<span id='"+test+"'>
2018-12-13 10:46:34
2777
1
原创 数组驱动视图之动态实现组件循环删除
描述一下需求项目经历是请求接口拿到的数据，点击叉号可以从前端进行删除，点击添加可以增加一个相同的组件。点击保存，可以增加一个新的项目经历。说一下实现思路1：首先声明一个数组（这里是声明的item数组），用来存放项目经历数据，通过v-for循环，展示数据2：请求接口拿到原有的项目经历数据，放到item数组中，具体操作代码如下这时候就把数据库里原来的数据显示在页面上...
2018-12-03 19:22:52
197
原创 vuejs数据超出单行显示更多，点击展开剩余数据
说下我在工作中遇到的这个需求1：页面上的菜单选项，选项内容是后台接口返回的数据，现在的需求是当选项的内容超出一行，在这行的右面显示更多，点击更多，显示剩下的选项的内容看下效果图这是展开的效果图下面先看下我的html部分代码<div :class="bussinessType?'show':'hidde'"> <dl> <dt...
2018-11-29 17:34:38
12279
2
原创 vuejs异步更新
如上所示，如果你想拿到视图中最新的数据进行一定的操作的话，如果直接取值是拿不到视图中最新的数据的。原因就是vuejs的异步更新问题，实际上是先执行了你的打印操作，然后对视图进行了更新。所以呢，如果想拿到最新数据，需要用到vuejs的nextTick方法官方对这个方法的解释是：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 顾名思义就...
2018-11-24 16:38:02
1572
原创 slice与splice用法
最近工作的时候用到了slice，这时候我想起了splice，两者的具体用法总是搞混，这里记录一下~用于数组的时候slice（）方法可从已有的数组中返回选定的元素，也就是在该方法中指定的元素。该方法不会改变原数组，，返回值是一个新的数组。从该示例中能看到第一个参数代表的是开始选取的位置，如果是负数的话代表从数组尾部开始算起的位置，-1代表从最后一个元素开始，-2代表从倒数第二个开始。第二个参数代表的...
2018-06-14 16:12:56
8182
翻译 git使用二
上面一篇我们已经创建好本地仓库，并且把文件放到本地仓库了，下面我们来讲一下如何上传代码到你的githup上首先登录你的github，新建一个仓库只需要填入仓库名字即可，这里我跟着学习资料填的命名为learngit，这个仓库是空的，可以从这个仓库克隆出新的仓库，也可以把一个已有的本地仓库与之关联，然后，把本地仓库的内容推送到GitHub仓库。第二步就是关联仓库，就是把你的本地仓库和你的github上...
2018-06-14 10:56:48
166
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人