![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
踩坑笔记
煲仔灬饭
一名IT爱好者的自学之旅
展开
-
踩坑笔记(十五):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 · 687 阅读 · 0 评论 -
踩坑笔记(十四):阿里云服务器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 · 452 阅读 · 0 评论 -
踩坑笔记(十三):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 · 858 阅读 · 0 评论 -
踩坑笔记(十二):如何获取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 · 1029 阅读 · 0 评论 -
React生命周期暨子组件获取父组件更新值方法
React生命周期图:getDefaultProps执行过一次后,被创建的类会有缓存(这也是为什么父子组件以props形式传参后,再更新时子组件不会改变的原因),映射的值会存在于this.props;该方法在对象被创建前执行,因此不能在方法内调用this.propsgetInitialState组件加载之前执行,返回值会被用于state的初始化值componentWillMount执行一次,在初始化render之前执行,如果在这个方法内调用state,render()只原创 2021-01-03 18:00:47 · 1043 阅读 · 0 评论 -
踩坑笔记(十一):在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 · 1507 阅读 · 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 · 1720 阅读 · 0 评论 -
踩坑笔记(九): 修改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 · 1836 阅读 · 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 · 1601 阅读 · 1 评论 -
踩坑笔记(七):跨域问题解决方案
前言:在处理前后端交互时,经常会碰到前端向后端发送ajax/axios扥请求时的跨域问题,以下总结几种跨域问题的常见解决方案。**待完善跨域问题触发的条件原因:前后端分离,前端web和后端数据等部署在不同的服务器上,甚至后台数据都可能在不同的服务器上(图片服务器,音视频服务器等),导致AJAX等发送请求时不在同一域名下,产生跨域问题。协议名不一致主机名不一致端口号不一致跨域问题常见的解决方案JSONP特点:只能用于处理GET请求(不安全/有缓存/URL长.原创 2020-12-24 22:16:29 · 164 阅读 · 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 · 6988 阅读 · 0 评论 -
前端性能优化
前言:浅谈前端性能优化方案,后续继续完善与补充从开发流程开发流程优化途径网页开发时减少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 · 92 阅读 · 0 评论 -
踩坑笔记(五): 空对象与数组的类型转换
以下结果里,返回‘false’的是:A. []==trueB. !![]C.NaN ==NaND.null ==undefined答案:AC解析:==判断时,会转换为数值Number进行比较; === 判断时,按实际类型和值比较undefined衍生自null,所以null == undefined为true,但全等判断结果为false;NaN不与任何值相等,包括它自身对于空数组[]转换为字符串,为“”;其他非空数组直接转换为"元素"转换为数值,为0;其他非空数组转换为数值,.原创 2020-12-10 16:31:23 · 459 阅读 · 0 评论 -
踩坑笔记(四):CSS 可继承属性与不可继承属性
前言:在前期项目coding过程及牛客网刷题过程中,多次碰到CSS属性的继承,且在部分情况下混淆,故在此作总结记录。 CSS继承是指设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性。可以被继承的属性元素可见属性: visability字体系列属性属性含义font-family元素的字体系列font-wieght字体粗细font-size字体大小font-style字体风格font-varian.原创 2020-11-29 19:29:54 · 166 阅读 · 0 评论 -
踩坑笔记(三):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 · 123 阅读 · 0 评论 -
踩坑笔记(二):箭头函数和普通函数的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 · 222 阅读 · 0 评论 -
踩坑笔记(一):JavaScript中的深拷贝与浅拷贝
前言:在商城项目中,通过vuex实现商品详情页和购物车页面间的状态管理时,发现在添加商品(对象)到vuex后,在购物车页面点击勾选和去勾选时无法实现响应式管理,最终通过添加商品时采用深拷贝JSON.parse(JSON.stringify(goods))的方式解决。本文部分内容从JS深拷贝和浅拷贝的实现转载深拷贝与浅拷贝 浅拷贝和深拷贝都只针对于引用数据类型,浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存;但深拷贝会另外创造一个一模一样的对.原创 2020-11-21 20:39:36 · 155 阅读 · 0 评论