- 博客(50)
- 收藏
- 关注
RSS订阅原创 CSS常见浏览器兼容性问题与解决方案
在前端项目中，经常会碰到需要处理不同浏览器兼容性的CSS样式，故在此做初步的记录总结，后续继续更新完善。问题一.不同浏览器的标签默认的外补丁和内补丁不同现象：不同浏览器标签的margin/padding差异较大解决方案：*{margin:0;padding:0}问题二. 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大现象：在横向布局中，使用div float布局时，同时横向间距设置用margin实现时，在IE6中后面的一块会.
2021-02-17 13:19:55
1349
原创 踩坑笔记（十五）：React-Router browserHistory浏览器刷新出现页面404解决方案
前言：在基于React-Router的SPA项目部署上线后，会出现刷新或访问具体路径时浏览器页面404的问题，本质上是由于所有的URL默认先经后端处理，但后端无该路由处理模块或该路径/文件，导致返回404。该问题通过如下方式解决：通过配置Nginx，访问任何URI都指向index.html，浏览器上的path，会自动被React-router处理，进行无刷新跳转。 location / { root html; .
2021-01-12 20:23:22
659
原创 踩坑笔记（十四）：阿里云服务器mongodb服务自启动配置
前言：”在阿里云服务器（Centos系统）部署前后端项目中，安装完成mongodb数据库后，需要设置mongodb服务器后台自启动，方式如下。新增vim /etc/mongodb.cnf, 修改设置参数，通过配置文件启动# 设置mongd.conf自启动dbpath=/var/mongodb/data/dblogpath=/var/mongodb/data/log/mongod.loglogappend=trueport=27017fork=true命令方.
2021-01-12 19:32:07
440
原创 踩坑笔记（十三）：Error: couldn‘t connect to server 127.0.0.1:27017 src/mongo/shell/mongo.js
在阿里云服务器部署node.js项目的安装启动mongodb过程中，./mongo时报标题错误，最终通过以下方式解决。connecting to: mongodb://127.0.0.1:270172021-01-10T15:30:50.314+0800 W NETWORK [thread1] Failed to connect to 127.0.0.1:27017, in(checking socket for error after poll), reason: .
2021-01-10 16:09:27
830
原创 踩坑笔记（十二）：如何获取select选中的值
在React项目中，新增角色模块中，需要选择角色所在的权限，在提交时需要获取select选中的值。此处作为记录，方法是通用的。// render()内jsx语法 <select className="sel"> { allRoleType.map((item, index) => { return ( <option key={index} value={index}>{item.roleType}&l.
2021-01-03 18:19:01
966
原创 React生命周期暨子组件获取父组件更新值方法
React生命周期图：getDefaultProps执行过一次后，被创建的类会有缓存（这也是为什么父子组件以props形式传参后，再更新时子组件不会改变的原因），映射的值会存在于this.props；该方法在对象被创建前执行，因此不能在方法内调用this.propsgetInitialState组件加载之前执行，返回值会被用于state的初始化值componentWillMount执行一次，在初始化render之前执行，如果在这个方法内调用state，render（）只
2021-01-03 18:00:47
1020
原创 踩坑笔记（十一）：在jsx中向事件回调函数传递参数的方法
在jsx中遍历时，有时会往事件回调函数中传递遍历的参数，如以下场景；此时需要用到jsx中传递参数的方法。//举例const jobs=[1,2,3,4...]return ({ jobs.map((item, index) => { return ( <tr key={index}> <td>{item.position}</td> <td>{item.depart}</.
2021-01-03 16:59:47
1450
1
原创 踩坑笔记（十）：在jsx中遍历forEach与map的区别
在React JSX语法中，有时需要对数组或对象等进行遍历，数组的遍历有2种方式：forEach和map； 但是需要知晓，JSX语法最终是要return返回html标签或对应内容的，而数组的遍历方法中forEach没有返回值，重在执行；map可以设置返回值。所以，在jsx中只能使用map方法进行遍历，需要知晓！{newDepart.map((element, index) => { return ( <a key={index}
2020-12-29 22:07:14
1659
原创 踩坑笔记（九）: 修改ant-design组件库中的样式
前言：在响应式项目中，有部分地方使用到了React UI组件库ant-design，由于是封装好的UI库，使用的单位都是px；与在响应式项目中用到单位（rem）不符，因此，需要修改。新建css或less文件引入UI库并渲染到页面后，右键检查元素，通过选择到对应的UI标签，查看它的class类名3. 根据对应的类名和父子关系等，在css或less文件等修改样式，如：4.在jsx文件中等引入。后记：UI组件库毕竟就是已经将样式进行了更好的封装，在实际应用中更加偏向于固定样式的布局，在响.
2020-12-29 21:31:53
1792
1
原创 踩坑笔记（八）：React中局部css样式的实现
前言：在Vue项目组可以直接通过添加scoped的方式实现局部样式；但在React项目中，在组件中需要设置css/less样式，有时会出现className冲突的情况，导致影响到其他组件的问题。因此，在查阅相关资料后，在这里总结下React项目中局部样式的设置与实现。步骤：将css/less等样式文件命名为xxx.module.css/less在jsx文件通过import导入//普通导入方式import "./job.css"// 局部样式导入方式，styles命名自.
2020-12-24 23:06:53
1545
1
原创 踩坑笔记（七）:跨域问题解决方案
前言：在处理前后端交互时，经常会碰到前端向后端发送ajax/axios扥请求时的跨域问题，以下总结几种跨域问题的常见解决方案。**待完善跨域问题触发的条件原因：前后端分离，前端web和后端数据等部署在不同的服务器上，甚至后台数据都可能在不同的服务器上（图片服务器，音视频服务器等），导致AJAX等发送请求时不在同一域名下，产生跨域问题。协议名不一致主机名不一致端口号不一致跨域问题常见的解决方案JSONP特点：只能用于处理GET请求（不安全/有缓存/URL长.
2020-12-24 22:16:29
158
1
原创 踩坑笔记（六）: npm ERR!cb.apply is not a function
npm安装包时返错如下：npm ERR！cb.apply is not a function解决步骤：npm root -g 确认全局安装所在目录$ npm root -g示例：C:\Users\~~~\AppData\Roaming\npm\node_modules进入对应C:\Users~~~\AppData\Roaming目录，查看并备份或截图npm\node_modules下的核心模块rm -rf 删除C:\Users~~~\AppData\Roaming目录下的np.
2020-12-17 11:26:58
6824
原创 前端性能优化
前言：浅谈前端性能优化方案，后续继续完善与补充从开发流程开发流程优化途径网页开发时减少http请求：CSS SpritesCSS放在顶部：加载完成后同步渲染页面JavaScript脚本在底部引入使用浏览器缓存：cookie，session Storage等 异步加载：Ajax.Axios.Fetch等vue开发时组件化管理v-for与v-if不同时使用：（原因）v-for优先级更高，v-if会每次重复运行，影响性能和效率；（解决）：使用computed计算属性，或先.
2020-12-16 23:29:52
84
原创 踩坑笔记（五）: 空对象与数组的类型转换
以下结果里，返回‘false’的是：A. []==trueB. !![]C.NaN ==NaND.null ==undefined答案：AC解析：==判断时，会转换为数值Number进行比较； === 判断时，按实际类型和值比较undefined衍生自null，所以null == undefined为true，但全等判断结果为false;NaN不与任何值相等，包括它自身对于空数组[]转换为字符串，为“”；其他非空数组直接转换为"元素"转换为数值，为0；其他非空数组转换为数值，.
2020-12-10 16:31:23
417
原创 踩坑笔记（四）：CSS 可继承属性与不可继承属性
前言：在前期项目coding过程及牛客网刷题过程中，多次碰到CSS属性的继承，且在部分情况下混淆，故在此作总结记录。 CSS继承是指设置上级（父级）的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。可以被继承的属性元素可见属性： visability字体系列属性属性含义font-family元素的字体系列font-wieght字体粗细font-size字体大小font-style字体风格font-varian.
2020-11-29 19:29:54
160
原创 踩坑笔记（三）：mpvue搭建微信小程序问题
在通过mpvue搭建微信小程序中，碰到以下问题或要点，作总结记录微信小程序的所有界面都在page目录下；因为设置宽高继承时要先设置page属性，或直接在app.vue文件中统一设置全局样式。2. 利用原生小程序中swiper轮播标签的bindchange事件，判断swiper里每个轮播图的索引，并在最后显示“开始体验”字样3. 跳转时选用原生小程序的wx.navigateTo()方法，url要选择绝对路径4.全局配置app.json下tabbar里的路径以pages下的为准5.从列表.
2020-11-21 22:02:27
114
原创 踩坑笔记（二）：箭头函数和普通函数的this指向
前言：在使用mpVue搭建小程序项目中，调用wx.getUserInfo时，sucess函数下this无法指向vue实例，进而给data属性赋值，无法实现响应式结果；修改为箭头函数后实现。methods: { handleGetUserInfo() { wx.getUserInfo({ success:function (res) { // success console.log(thi.
2020-11-21 21:42:06
214
原创 踩坑笔记（一）:JavaScript中的深拷贝与浅拷贝
前言：在商城项目中，通过vuex实现商品详情页和购物车页面间的状态管理时，发现在添加商品（对象）到vuex后，在购物车页面点击勾选和去勾选时无法实现响应式管理，最终通过添加商品时采用深拷贝JSON.parse(JSON.stringify(goods))的方式解决。本文部分内容从JS深拷贝和浅拷贝的实现转载深拷贝与浅拷贝 浅拷贝和深拷贝都只针对于引用数据类型，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存；但深拷贝会另外创造一个一模一样的对.
2020-11-21 20:39:36
149
原创 原生微信小程序和Vue的语法区别
前言：在原生微信小程序的学习中，发现很多与Vue不同的地方，容易混淆。故在此记录总结碰到的一部分；当前还处于学习阶段，只是沧海一粟，后续如在实际工作中应用到，会继续补充。核心点原生微信小程序Vue.jsdata属性在父组件js文件中，data属性是一个object；引用data中的属性时要通过this.data.xx的方式；设置修改data中的属性时要通过this.setData({ })的方式在vue中，因为涉及到组件间的引用与实例的创建，所以必须通过函数的形式，内部返回一.
2020-11-21 15:41:02
1673
原创 阿里云服务器搭建前端项目
*前言 *：蹭着双十一的活动购买了阿里云ECS服务器，网上教程也很多，由于之前工作关系对Linux接触比较多，以下为简单笔记，仅做个人记录。建议版本选择Centos，yum安装外网资源支持性较好；suse12sp系列zipper不太好使用，前期踩坑较多。下载yum镜像(如果已经有的话就不需要了，Centos版本默认已安装)wget http://mirrors.163.com/centos/7/os/x86_64/Packages/python-iniparse-0.4-9.el7.noarc.
2020-11-21 14:26:25
602
原创 TypeScript 基础知识与语法
TypeScript基础知识 TypeScript是微软开发的一款开源的编程语言，是JavaScript的超级，遵循最新的ES5、ES6规范，扩展了JavaScript的语法。**个人感受，TypeScript与JavaScript最大的区别是增加了数据类型的校验，和封装的各种接口。安装： npm install -g typescript数据类型函数函数定义//1.无参数，返回值类型确定function run():string{return “无参数
2020-11-07 22:02:23
73
原创 CSS 垂直居中的方法
CSS垂直居中方法一 : 设置行高line-height原理：将line-height设置为和父元素高度一样的值，即在行内元素的上下都加行高的1/2适用范围：“单行”的行内元素（inline、inline-block）。如果是多行，还将line-height设置为高度一样的值时，会“溢出”父元素。方法二： 添加伪元素vertical-align:middle，指的是父元素内的所有元素垂直位置相互居中，并不是相对于外框的高度垂直居中，即子元素的“中心”在一条直线上。所以，可以利用添加伪元
2020-11-01 15:40:45
159
原创 JavaScript 时间戳格式化日期
JavaScript 时间戳格式化日期项目中从后台获取接口数据时常需要按自己的需求将时间戳转化为对应的日期格式。// 时间戳格式化为日期function formatDate(timestamp, fmt) { // 这里传入的timestamp应该是Number数值，如果是字符串，需要先转换为Number // var timestamp=parseInt(timestamp) var date = new Date(timestamp) if (/(y+)/.tes
2020-11-01 12:35:53
501
原创 Vue中slot插槽的使用
Vue slot插槽组件的插槽：让封装的组件更加具有扩展性。可以根据条件决定设置内容。将共性抽取到组件中，将不同暴露为插槽。插槽的基本使用在定义子组件模板时，设置插槽<slot></slot>在Vue实例中，在子组件标签内添加对应标签，放入插槽内Note1: 如果有公共样式，可以在子组件模板内设置默认标签样式，如<slot><button></button></slot>；在Vue实例中使用时，如果不新增则使用默
2020-10-17 13:51:57
188
1
原创 Vue父子组件间的通信与访问
Vue父子组件间的通信（父传子）在父组件data属性中声明对应的数据，并建立父子组件间的关系在子组件中定义props属性，属性值为在HTML模板中使用时的标签名在Vue实例范围内创建v-bind绑定属性，绑定对应关系在子组件HTML莫版内使用创建的模板名即可 <div id="app"> <cpn :childmessage="message"></cpn> </div> <template id="t
2020-10-17 00:46:06
211
原创 Vue基本概念与基本语法
VueVue是一套用于构建用户界面的渐进式与响应式框架。基本概念概念含义介绍MVVMModel ViewModel ViewView层： 视图层，即DOM层，主要的作用是给用户展示各种信息 Model层：数据层基本语法...
2020-10-16 22:33:20
118
原创 HTML 行内元素与块元素
块级元素-block element行内元素-inline element块级元素，行内元素与行内块元素的区别元素特性块元素独占一行可以设置宽高，如果不设置则宽度自动填满父元素宽度，高度被内容撑开；如无内容，则高度为空行内元素不会独占一行，相邻的行内元素会排列在同一行，直至换行设置width、height、margin、padding等无效行内块元素特殊的行内元素，可以设置宽高不会独占一行，相邻的行内元素会排列在同一行，直至换行典型元素：img button
2020-09-16 16:15:05
122
原创 项目构建工具Webpack环境配置与优化
Webpack前言：webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）；在webpack看来，所有的前端资源文件（js/css/less/img/…）都会作为模块处理；它将依据模块间的依赖关系进行静态分析，打包（bundle）生成对象的静态资源。核心配置文件webpack.config.js核心概念核心知识点介绍Entry入口作用：指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图类型：1）字符串string：单入口。打包
2020-09-08 22:51:45
135
原创 ECMAScript6-11新特性及核心知识点介绍
ECMAScript6新特性核心知识点let变量声明1.变量不能重复声明；2. 引入块级作用域；3. 不再存在变量提升；4.不影响作用域链const定义常量1.一定要赋初始值；2.一般常量使用大写或驼峰命名法；3. 常量的值不能修改；4.也是块级作用域；5. 对于数组和对象元素的修改，因为指向的堆内存地址值不变，所以不算对常量的修改，不报错解构赋值1. 针对数组和对象；2. 数组的解构是按索引/顺序进行赋值；3. 对象的解构是寻找同名属性进行赋值，如果没有同名属性则被
2020-09-07 22:18:32
267
原创 JS模块化规范
JS模块化规范 模块：将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起。模块的内部数据/实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。commonJS每个文件都可当做一个模块。在服务器端：模块的加载是运行时同步加载的__>node.js在浏览器端：模块需要提前编译打包处理，不然体验差，且浏览器端不认识require__>browserify基本语法暴露模块（单个）: module.exports=value;暴露模块（多个）: ex
2020-09-06 22:30:49
100
原创 Node.js模块化使用及管理
Node.js的模块化使用及管理模块职责要求app.js1. 创建服务;2.做一些服务相关的配置，如模板引擎，body-parser 解析表单post请求体，提供静态资源服务等；3.挂载路由；4.监听端口启动服务router.js创建路由器，并挂载到路由之中附：简单项目创建思路/框架创建目录结构– 项目目录– public 公共资源目录（css/js/img -存放jquery. bootstrap.css/js 等）– views 前端文件目录（静态页
2020-08-16 14:20:47
145
原创 Node.js 基础知识点【不定期更新】
Node.js索引：– fs文件处理模块– path路径处理模块– os 操作系统处理模块– http服务构建模块– 响应内容类型content-type– 客户端渲染与服务端渲染– 模块作用域与访问– require加载模块规则– package.json与package-lock.json– 重定向– 获取表单提交信息– Express json响应方法最近一次更新：2020-08-16fs模块(1)读取文件readFile参数一：文件路径不是相对于当前文件路径
2020-08-16 00:47:23
153
原创 jQuery操作对象
jQuery操作属性/文本/类jQuery中文在线手册jQuery操作CSS/位置/尺寸jQuery操作元素jQuery动画处理
2020-07-18 22:59:41
96
原创 jQuery基础与选择器
jQuery简介 jQuery是一个JavaScript库，里面封装存放了特定的函数/方法，将js中的DOM操作做了封装，可以更方便的操作使用。优点：优化了DOM操作、事件处理、动画设计和Ajax交互；链式编程、隐式迭代；轻量级，不会影响页面加载速度；支持插件扩展开发等。版本：1.x --兼容老版本IE 文件更大；2.x – 部分IE8及以下不支持 | 文件小，执行效率更高；3.x – 完全不再支持IE8及以下版本 | 提供了一些新的API | 提供不包含ajax/动画API的版本
2020-07-18 15:40:28
84
原创 JavaScript 原型链与闭包
JavaScript原型与原型链原型 JavaScript中创建的每一个函数，解析器都会向函数中添加一个属性prototype。该属性默认指向一个空object实例对象，即原型对象。 原型对象中有一个constructor属性，它指向函数对象。 通过构造函数创建的每个实例对象，解析器都会向对象中添加一个属性__proto__,默认指向的也是原型对象。prototype可称为显示原型属性；__proto__可称为隐式原型属性。即，实例对象.__proto__===类.prototyp
2020-07-11 15:19:31
535
原创 DOM 事件与事件的冒泡/委派/绑定
DOM事件处理模型与事件的冒泡/委派/绑定基本事件类型事件就是用户和浏览器之间的交互行为，如点击按钮、鼠标移动和关闭窗口等。可以为对应的对象绑定事件处理函数来响应事件。常用事件类型有：点击类：onclick文档加载：onload --页面加载后才触发，常为window绑定。鼠标类：onmousemove onmousedown onmouseup onmousewheel --鼠标事件，绑定给document键盘类：onkeydown onkeyup onkeypress --一
2020-07-04 17:10:16
146
原创 JavaScript DOM 节点的获取与增删改操作
DOMDocument Object Model, 即文档对象模型。JS中通过DOM来对HTML文档进行操作。节点Node构成HTML文档最基本的单元。常用节点类型：文档节点 元素节点 属性节点 文本节点节点Node的获取 - 节点Node的增删改...
2020-07-04 15:55:01
113
原创 JavaScript浏览器兼容问题及解决方案（不定期更新）
JavaScript兼容问题及解决方案因在JS学习中碰到大量需适配不同浏览器的问题，故总结截止目前碰到的一些属性/方法/函数/语句等在的兼容情况和解决方案。并进行定期更新：
2020-06-28 16:51:06
331
原创 JavaScript字符串String属性及方法
String字符串【包装类】基本数据类型：number string boolean null undefined引用数据类型：object在JS中提供了三个包装类，通过这三个包装类可以将基本数据类型转换为对象：String(). 比如var str=new String(‘hello’);Number(). 比如var str=new Number(‘hello’);Boolean(). 比如var str=new Boolean(‘hello’);但是注意，在实际应用中不会使用基
2020-06-26 18:20:36
172
原创 JavaScript数组及其方法
数组Array1.数组也是对象的一种（内建对象），主要用来存储一些数据。2.普通对象是通过字符串作为属性名，而数组是使用数字作为索引来操作元素。3. 数组中的元素可以使任意的数据类型，包括对象和函数。4. 使用typeof检查数组的数据类型，结果返回object。创建数组对象方式语法使用构造函数var 数组名=new Array(值1,值2…值n);使用字面量var 数组名=[值1,值2…值n];操作数组对象读取：数组[索引]添加：数组[索引]=值;
2020-06-26 15:54:56
137
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人