- 博客(25)
- 收藏
- 关注
RSS订阅原创 react16开发环境搭建
最近想学node，需要编写配套的前端页面，想着顺带把新的react特性都了解一遍，又不想用Create React App 创建一个新的项目，想着还是自己搭建一个react项目，顺带写个react不依赖脚手架，搭建react开发环境吧。在本地创建一个文件夹，如demo，打开命令行语句，进入该目录初始化项目npm init...
2019-06-14 10:49:50
1138
原创 reactNative踩坑记录
这是一篇学习reactNative的踩坑问题整理，写了一个小Demo后，发现学会reactNative后还要学会安卓和IOS的兼容性处理，进入到了另一个前端领域，所以暂时只写了个小Demo了解一下，没有继续深入。目录结构说明android/ android 原生代码（使用 android studio 要打开这个目录，如果直接打开父目录报错）ios/ ios 原生代码（使用 xcode 打...
2019-06-12 14:44:08
248
原创 烧烤准备
最近烧烤得比较多，整理一下烧烤经验：1、调料：烧烤汁、盐、油、蚝油、生抽、蒸鱼食油、蜂蜜、味精、孜然粉（老W这方面真是专业啊，还用矿泉水瓶钻了眼，好用来撒料）蒜蓉酱（提前做好的蒜蓉酱），切好的葱花、香菜、辣椒酱（提前用油炒好的辣椒）、姜末，2、食材：提前俺制的鱼、肉、鸡翅、鸡腿、羊肉串、牛肉串，虾（放酒、姜、生抽，开背腌制）、生蚝、扇贝各类鱼丸、虾丸、贡丸烤肉配方（记得找HH要他们家...
2019-06-03 11:47:35
313
原创 老瓶装新酒：在老页面中使用vue实现功能
老瓶装新酒：在老页面中使用vue实现功能起因公司有些老项目需要维护，这些项目老到什么程度呢，没有前后分离，开发的时候需要在本地打开Eclipse，在本地启动服务，一边运行后端服务一边调试代码。最近接了一个老系统的需求，其中有个需求就是改造手动分配功能，让它变得更好用。我们先来看看，原界面是长什么样的：再来看看新需求的界面是什么样的：其实也没改太多，对不对。接到需求的时候，我也是这么想...
2019-05-14 18:02:34
436
原创 vue踩坑记录
1、绑值绑定值{{message}}绑定属性值v-bind:title=""注意：如果绑定的值是字符串，记得再加'',如"'vue'"2、数组生成生表格，每隔七列换行显示VUE一般使用template来创建HTML，查了下template没有语法可以实现这种情况。查看了element的源码，它先把数组先处理成行，再循环行中的列。这个写法还是觉得复杂了。可以使用javascript...
2019-05-10 14:52:24
225
1
原创 vue-cli2升级webpack4记录
目录结构分析，找出配置文件这个项目是由vue-cli2生成的，我们先来看看现有的目录结果，找出我们需要改代码的地方，打开各文件查看，找到我们需要修改文件的地方存于放build和config两个目录下：这次我们修改的js文件主要有以下三个：./build/webpack.dev.conf.js ./build/webpack.prod.conf.js ./config/webpa...
2019-03-26 11:12:52
1327
原创 url 下载文件
后端返回url地址，通过这个url地址下载文件，用法如下： const fileUrl = res.data; if(res.code === 0){ if (!fileUrl) { return; } let link = document.createElement('a'); li...
2019-03-21 17:35:27
997
原创 chrome浏览器中cookie失效
最近碰到了一奇葩bug，记录一下：点击在新的标签页弹出新路由，cookie会更新，每请求一次cookie自动更新一次，在FF和IE中请求是正常的，可以正确拿到数据。但是在chrome中请求，报cookie失效。复现步骤如下：1、在本地启动服务，打开chrome浏览器，点击打开新标签页，多次请求正常。2、刷新当前页，再次发送第三次请求（第一次获取正常的，第二次改变了，第三次拿到的co...
2019-03-08 11:57:37
10283
1
原创 多状态请求后端接口简写形式
如有多种状态需要操作，每个状态需要写不同的向后端请求的接口，可写成如下形式。其中queryRecommend是接口名称export function queryRecommend(options) { return request('/api/recommend', options, 'POST')}console.log('接收当前状态', type)let status ...
2019-02-18 11:56:06
477
原创 ant-design 使用踩坑
1、采用getFieldDecorator()循环生成表单项时，设置了initialValue值，如何给select设置默认值<Select defaultValue={this.props.value.toString()} onChange={this.props.onChange}>...
2019-02-11 14:09:59
646
1
原创 git 操作收集
1、无法查看所有远程分支若遇到 git branch -a 无法全部显示远程的分支，只显示master分支可以通过 git fetch 将本地远程跟踪分支进行更新，与远程分支保持一致2、放弃本地所有修改git checkout .3.放弃本地所有新增文件git clean -xdf4.版本回退git reset (–mixed) HEAD~1回退一个版本,且会将...
2019-02-11 09:37:39
583
原创 Jest编译过程中的报错汇总
持续更新中~1、Couldn't find preset "env" relative to directory "E:\\gitHub"解决方案：Many of the github issues relating to this suggest that babel-preset-env is not installed.Indeed it doesn't seem to ...
2018-08-30 10:08:59
1298
1
原创 没有webapck安装jest，运行单元测试用例
在当前项目下安装以下文件：npm install babel-jest jest babel-preset-env在根目录下创建.babelrc，添加如下代码{ "presets": ["env"]}package.json配置如下参数： "scripts": { "test": "jest" },运行命令行:npm test即可自动寻找...
2018-08-30 10:07:36
619
原创 与后端或APP联调时如何定位问题3——移动端对接
移动端联调主要是三类问题：第一类问题，后端返回的数据是否符合要求 第二类问题，JSBridge传参或回调错误 第三类问题，兼容性问题三类问题中，除了第一类查看服务端返回的数据是否符合要求可以在pc机上调试，另外两种都需要真机调试，如何连接真机调试呢？非常重要：真机调试的APP一定要用debug包，找你对接的APP开发人员打debug包给你，同样，你部署到测试服务器的JS、CSS不要开...
2018-08-28 20:00:55
2969
原创 与后端或APP联调时如何定位问题2——与后端联调接口
一、XHR面板chrome开发者工具是个很齐全的前端调试工具，涉及的内容较多，可以调试DOM、CSS兼容，打断点调试Javascript，还可以根据各类输出优化性能。这一次，我们只讲前端与后端数据联调部分，所以我们重点关注network面板。前后端数据交互，多是XHR（JS的一套HTTP调用接口）类型的请求，打开XHR面板，点击任意一条xhr资源name可以看到该资源的详细信息：包...
2018-08-24 16:08:17
2260
原创 与后端或APP联调时如何定位问题1--chrome开发者工具简介
前端工程师是个背锅的存在怎么没数据了？---> 找前端 页面怎么又点不动了?——>找前端 不同的机型（IOS/ANDRIA）页面展示效果不一样，还是找前端前端是最接近用户的工种，尤其是Hybrid App涉及到三方协作，任何一方出了问题，第一个找的就是前端。这些问题中有些并不是前端错误引起的BUG，如何定位问题出在哪一方呢？ 调试工具——chrome开发者工具...
2018-08-24 11:04:04
978
ant-design的文档系统生成工具BiSheng
最近一直想参照ant-design给react-inputPassword组件写demo，查看ant-design的编译配置，终于找到了它的文档系统生成工具-Bisheng，git地址https://github.com/benjycui/bisheng。一、介绍bisheng 是一个把 Markdown 转为 React 单页网站的工具，可以支持简单的 个人博客，通过插件扩展后可支持更加...
2018-08-07 11:00:25
12684
原创 webpack编译过程中的报错汇总
1、全局webpack安装环境和本地环境不一致：运行webpack -v时，查看当前版本是4.14.0(在写上篇博客时升级了全局安装环境)，打开package.json，查看当前配置的webpack的版本，在现项目是3.0.0，运行编译命令webpack会报如下错误：compiling(node:15460) DeprecationWarning: Tapable.plugin ...
2018-08-01 17:49:09
5445
React编译环境配置：webpack3迁移至webpack4
这次我们以inputPassword组件为例，将编译配置环境 从webpack3迁移至webpack4，新装的webpack版本是4.14，但是配置文件还是用的webpack3的配置。git地址：https://github.com/jean0218/react-inputPassword先来看看pack.json文件：{ "name": "react-inputpassword...
2018-07-25 17:41:32
725
原创 React与vue的生命周期对照
新学vue，对vue还不是很理解，参照React将vue的生命周期分为三个阶段。第一阶段：组件挂载阶段疑问：哪一个阶段被调用后，组件会被更新？第二阶段：组件更新阶段第三阶段：组件卸载阶段Vue独有的：以上是在学vue过程中为了更好的理解，对照react的生命周期，个人觉得vue和react有非常多相似的地方，只是在学习的过程中，感觉生命周期和语法一类的，没有React直观，处理方式要绕一些。...
2018-06-25 13:59:28
2863
转载 整理：console的用法
console.log() 输出字符串或变量console.debug()、console.info()、console.warn()、console.error()这四个方法的使用方法跟 console.log() 一模一样，差别在于输出的颜色与图标不同console.table()当输出类似于这种两层嵌套的对象时，我们可以选择 console.table() 以表格的形式输出。当然，嵌套三层及...
2018-04-11 14:59:58
265
原创 《深入浅出Node.js 》测试--读书笔记
前言：这篇笔记适合关于单元测试的知识点扫盲。测试包含单元测试、性能测试、安全测试和功能测试等几个方面。单元测试主要用于检测代码的行为是否符合预期。单元测试的意义在于每个测试用例的覆盖都是一种可能的承诺。如果API升级时，测试用例可以很好地检查是否向下兼容。编写可测试代码有以下几个原则可以遵循：单一职责。将复杂的功能解耦分离。接口抽象层次分离单元测试主要包含断言、测试框架、测试用例、测试覆盖率、mo...
2018-04-09 15:35:41
154
原创 react16的单元测试1--基础环境安装
学react最痛苦的是什么？知识更新太快。最近在学写单元测试，网上找的react单元测试资料，按教程的git地址安装，示例没有问题。但如果要放到自己项目中，代码就运行不了。说到底还是版本比较久远，安装环境配置又有了新的不同（摔~~）。这次接触单元测试，踩了不少坑，纪录一下踩坑历程。非常重要的提示：本文提到的单元测试是针对react16的，默认你已经安装了react16的相关配置。 1、安装依赖包 ...
2018-04-08 11:40:18
849
原创 react16的单元测试2--函数测试
react单元测试用例由简到难，先说最简单的，函数测试。请教了一下公司的测试工程师，函数测试和他们的功能性测试很像，即传入参数，预估预期值，将计算结果和预期结果对比，即可判断方法是否符合预期。例：trim方法，删除传入字符串的左右空格function trim(s) { if (s == undefined || s == "") { return ""; } el...
2018-04-08 11:01:17
369
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人