- 博客(46)
- 收藏
- 关注
RSS订阅
原创 如何将前后端分离的react+node+express+mongodb项目部署上线到阿里云
前期将项目代码写好之后，第一次尝试上线，遇到不少问题。今天索性把过程梳理一下，希望以后的新手遇到跟我一样的问题时，能少走弯路。这是一个前后端分离的项目。前端使用React➕Antd-Mobile构建用户界面，状态管理使用Redux；服务端是node+express，使用的是mongodb数据库。云服务器和域名在阿里云购买，数据库直接在云服务器上安装的mongodb。项目地址：一、购买云服务器...
2019-09-04 17:48:04
2136
2
原创 Mac端如何将本地的react项目部署到Nginx上？【详细过程】
前几天将项目完成之后，捋了一遍项目代码。这是一个前后端分离的项目，前端采用react全家桶+ES6技术栈、anted-mobile移动端组件库；后端使用node+express+mangodb+socketIO技术栈；数据库使用的是mongdb，并采用能够基于node.js环境下对mongodb进行便捷操作的mongoose对mongodb数据库进行增、删、改、查的操作。项目完成之后需要打包部...
2019-08-21 17:01:07
1035
原创 运行vue项目时报错opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error‘ ],
【代码】运行vue项目时报错opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error‘ ],
2023-04-04 14:24:13
559
原创 chrome浏览器启动时候的默认网页设置不生效怎么解决
chrome浏览器启动时候的默认网页设置不生效怎么解决鼠标放在Google chrome图标上，右键点击属性2.
2022-04-01 09:38:44
7588
2
原创 跨域资源共享（CORS）
浏览器处于安全考虑，请求资源时将基于同源策略进行限制。而我们在实际开发中的大多数请求，都是跨域的。那么什么是同源策略？什么是跨域？我们要如何解决跨域的问题呢？W3C为克服资源只能同源使用的限制，制定了CORS标准，即为“跨域资源共享”。一、什么是同源策略同源策略是由Netscape提出的一种浏览器安全策略，它保证了在没有明确授权的前提下，限制不同源之间的数据交换。所谓同源，指的是协议名、域名、端口号完全相同的源；有一个不同即为跨域。二、CORS简介CORS，即跨域资源共享，需要浏览器和服务器同时支
2020-10-26 12:14:41
482
原创 手动实现new、深拷贝、防抖、节流等js原生方法
一、手动实现new操作符new操作符的实现过程包括以下几个步骤：1、创建一个空对象2、将空对象的__proto__指向构造函数的 prototype；3、将空对象的this值绑定到构造函数上；4、通过new创建的对象，其prototype最终将指向构造函数的prototype5、如果函数没有显式返回对象类型，那么new会返回这个this根据new操作符的作用原理，我们可以创建以下函数来实现new：function New(func){ let res = {} if(func.proto
2020-07-10 15:18:17
302
原创 正则表达式的exec方法与字符串match方法的对比
正则表达式的exec()方法exec()是正则表达式检索字符串的方法，返回一个数组。数组的第0个元素是与正则表达式相匹配的文本；第1个元素是与正则表达式第1个子表达式匹配的文本；第2个元素是与正则表达式第2个子表达式匹配的文本，以此类推。示例：var reg=/([^a-z])([a-z])/;//括号里的是子表达式，([^a-z]）子表达式表示非字母字符；([a-z])子表达式表示字母字...
2020-06-22 14:09:55
268
原创 阿里巴巴矢量图标库批量下载图标
阿里巴巴矢量图标库是前端工程师常用到的一个网站。网址：阿里巴巴矢量图标库但是每次下载图标都要挨个点击一下下载按钮，页面不提供批量下载。操作起来很不方便。后来我在网上查询，总算找到批量下载的方法，很简单，跟着操作就可以了：1. 按F12，或者 右键-->检查元素 打开浏览器的控制台： 2. 在控制台console处输入以下代码：var iconList...
2019-09-18 17:00:23
7699
原创 如何在react中使用mockjs来模拟数据
一、引入mockjs：sudo cnpm install mockjs// mock.js// 使用 Mockvar Mock = require('mockjs')var data = Mock.mock("/mock",{ //"/mock"是通过ajax获取数据时填写的地址，可以随意写。但要和ajax请求时填写的地址一致。 "userinfo|4":[{ ...
2019-09-14 14:45:48
9941
1
原创 Redux的三大定律
今天去面试的时候，面试者问了我这个问题：redux的三大定律指的是什么。回想起来，我用过redux，但还没有做过系统的了解。这应该是一个很基础的问题，我却没有回答上来。回家之后立刻总结了一下关于redux的资料，做进一步的了解。Redux是什么？Redux是JavaScript的状态管理容器，它可以运行在不同环境下。客户端、服务器端、原生应用都可以运行redux。需要注意的是，不...
2019-09-11 15:51:39
204
原创 Mac端如何使用Nginx配置多个域名
上次写了如何将本地项目部署到Nginx上，今天正好需要在Nginx上部署两个不同项目，趁着刚刚顺利完成，将步骤写下来，以备将来查询。一、将项目打包文件复制到Nginx目录下二、把配置文件nginx.conf拖到编辑器里进行编辑，设置第一个前后端分离的项目在nginx.conf里的http{}内，找到未被注释掉的server，配置项目路径。第一个文件是前后端分离的app应用，因此前、后端都...
2019-08-24 19:56:51
1342
原创 引入antd-mobile过程中报错：The "injectBabelPlugin" helper has been deprecated as of v2.0. 【已解决】
报错：The “injectBabelPlugin” helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins原因是新版本的react-app-rewired...
2019-08-21 17:04:42
624
原创 【CSS学习总结】--transition过渡属性
目录一、transition的定义和语法1. 定义2. 语法transition-propertytransition-durationtransition-timing-functiontransition-delay二、transition属性的使用一、transition的定义和语法1. 定义transition是CSS3中新增的一个属性，...
2019-08-15 09:26:24
1382
原创 【CSS学习总结】边框阴影：box-shadow
今天在写一个点亮灯泡的小项目的时候，用到了box-shadow属性。感觉这个属性挺有意思的，索性专门整理一下。一.box-shadow的定义和语法二. box-shadow属性值的详细解析1. h-shadow【必需】2. v-shadow【必需】3. blur【可选】4. spread【可选】5. color【可选】6. inset 【可选】7. 一些有...
2019-08-14 19:10:09
1897
原创 git push代码之后，删除node_modules文件夹
使用create-react-app脚手架工具搭建一个项目的时候，官方没有内置.gitignore文件。因此在git提交代码的时候容易忘记忽略node_modules的提交。如果已经git push了才发现node_modules被提交上去，如何做才能再删除这个文件夹呢？其实操作很简单，只要cd到项目文件夹下，创建一个.gitignore文件并指定git时要忽略的文件，再执行git rm -r...
2019-08-12 19:06:40
866
原创 Warning: Accessing PropTypes via the main React package is deprecated
在使用react过程中，后台给出一个警告：Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead.上...
2019-08-10 15:19:09
782
原创 在react里实现点击回车键执行事件
在网页应用里，我们搜索、提交账户名密码等等操作的过程中，不太经常会去一个个用鼠标点击提交或者执行某个按钮类型的操作。对于我个人而言，直接用回车键就很顺手了，鼠标还要去定位，很麻烦。这几天在搭建一个前后端交互应用app的，最后完善项目一些细节的时候想要加上这个小小的便捷操作功能。项目是用react+antd-mobile搭建的。如果是用JavaScript代码实现的话，直接在body标签里绑定o...
2019-08-09 18:15:03
19504
1
原创 Webpack创建react项目的时候babel报错：TypeError: this.setDynamic is not a function
今天用webpack搭建一个react项目的时候总是报错：Module build failed (from ./node_modules/[email protected]@babel-loader/lib/index.js):TypeError: this.setDynamic is not a function显示模块构建失败，并且问题出在babel里。查到网上有人出现过和我...
2019-07-27 15:10:23
3321
原创 gulp搭建的项目如何在手机端运行测试
一、首先要保证手机和电脑在同一个局域网里【连接同一个Wi-Fi】|| 【手机开热点给电脑】||【电脑开Wi-Fi给手机】二、 获取电脑的IP地址：以mac电脑为例，打开【系统偏好设置 – > 网络】，获取到以 192.168开头的IP地址；三、打开gulpfile.js配置文件，在服务器设置任务里设置主机名host：gulp.task("server",async()=>{...
2019-07-26 13:47:45
295
原创 gulp报错解决方案： The following tasks did not complete: html Did you forget to signal async completion?
使用前端自动化构建工具gulp时，在gulpfile.js文件里编写配置，var gulp = require("gulp");var imagemin = require("gulp-imagemin");var newer = require("gulp-newer");var htmlClean = require("gulp-htmlclean");var folder = {...
2019-07-24 13:11:10
908
1
原创 常用的npm命令【持续更新】
查看npm版本$ npm -v更新npm至最新版本$ sudo npm install npm@latest -g安装依赖至生产环境，如vue、react等$ npm install --save (-S)安装依赖至开发环境，比如gulp、webpack、babel等，一般是辅助工具。$ npm install --save-dev (-D)淘宝...
2019-07-23 20:20:38
150
原创 搭建一个webpack打包项目，需要注意的事项
以下是自己初学webpack的时候会犯的错误，记录下来以备以后翻阅。加载lodash依赖的时候，需要安装在生产依赖而不是开发依赖中：dependencies：使用当前包所需要的依赖devDependencies：一些模块在开发时需要依赖。配置这个属性可以提示包的后续开发者安装依赖包。$ sudo cnpm install lodash -S加载html-webpack-...
2019-07-23 20:19:02
281
原创 javascript 类的创建/继承方式
类的创建方式：1、工厂模式：在构造函数里定义一个对象，最后return这个对象。function app(name,age,job){var obj = {name: name,age: age,job: job}return obj;}var myObj = app(“bill”,32,“engineer”);console.log(myObj.name) //bi...
2019-07-17 16:09:49
146
原创 webpack的安装步骤和使用
1、建立一个空的项目文件夹；2、终端cd定位到该文件夹；3、sudo cnpm init -y 「初始化一个json文件」4、sudo cnpm install -D webpack 「安装webpack」5、sudo cnpm install -D webpack-cli 「安装webpack-cli」6、在项目根目录下创建文件夹src【放置项目源文件】、dist【打包后的文件会在这里...
2019-06-04 11:51:51
268
原创 react文件包【React-dom.j / react.js / browser.min.js】
链接：[email protected]:xiamo12/react_files.git
2019-06-01 17:29:40
930
原创 react安装----通过 npm 使用 React
一、通过 npm 使用 React$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org$ sudo npm config set registry https://registry.npm.taobao.org使用 create-react-app 快速构建 React 开发环境$ sudo cnpm...
2019-05-31 10:26:32
1874
原创 【CSS学习总结】两边宽度固定，中间宽度自适应的布局方法
一、圣杯布局中间列的三栏float布局，中间栏放在文档流前面保证最先加载。关键在于如何使中间列的内容不被遮挡。<!DOCTYPE html><html><head> <title>圣杯布局-双飞翼布局</title> <meta charset="utf-8"> <link rel="stylesheet"...
2019-05-22 17:26:05
605
转载 【转】正则表达式大全
原文地址：https://blog.csdn.net/onebigday/article/details/5429868常用正则表达式大全！（例如：匹配中文、匹配html）匹配中文字符的正则表达式： [u4e00-u9fa5] 评注：匹配中文还真是个头疼的事，有了这个表达式就好办了 匹配双字节字符(包括汉字在内)：[^x00-xff] 评注：可以用来计算字符串的长度（一个双字节字符...
2019-05-09 11:08:23
175
原创 页面缩放时溢出的文字内容隐藏为省略号，应该如何实现？
当我们拉伸网页的时候，如果设置了div宽度自适应，并且希望被挤压的部分内容布局不变的同时，宽度不够的话会被隐藏起来，类似于这种：实现这一效果的css代码：(关键在于 #sidebar_left{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden;})这部分内容ht...
2019-05-08 09:35:24
1240
1
转载 Javascript正则构造函数与正则表达字面量/常用正则表达式
本文不讨论正则表达式入门，即如何使用正则匹配。讨论的是两种创建正则表达式的优劣和一些细节，最后给出一些常用正则匹配表达式。 Javascript中的正则表达式也是对象，我们可以使用两种方法创建正则表达式：使用new RegExp()构造函数 使用正则表达字面量 先说结果，使用正则表达字面量的效率更高。文章链接https://www.cnblogs.com/coco1s/p/40...
2019-05-07 14:26:13
501
原创 行内元素和块状元素的水平居中设置
我在上一篇文章里总结了一下块状元素、内联元素、内联-块状元素的区别三者的一个重要区别在于是不是独占一行以及能不能设置宽高、内外间距。在这个前提下，我们应该怎么设置元素在水平方向上的居中呢？行内元素的水平居中设置行内元素的水平居中有一个通用的方法：通过在其父元素中设置text-align:center来实现：我们给出一个html文件，写入一个div块状元素，包裹一个span内联元素：&l...
2019-05-06 11:49:39
1227
原创 块状元素、内联元素、内联-块状元素的区别
块状元素块状元素最大的特点是可以独占一行。div是html中典型的块状元素。我们可以给块状元素设置宽度（width）、高度（height）、外间距（margin）、内间距（padding）。我们在一个html文件里写入块状元素、内联元素、内联-块状元素，并给它们分别设置样式来看一看效果：<!DOCTYPE html><html><head> <...
2019-05-06 10:31:09
1819
原创 两边宽度固定，中间宽度自适应的几种布局方法
我们在用css设置页面布局的时，归根结底是要让页面中的块按照我们的需求进行排列组合。以下是几种常用的中间自适应，两边固定的布局方法。一、flex弹性盒布局：核心：将父元素设置为弹性盒布局：display:flex;html代码：<div id="father"> <div id="son1"><h3>宽度固定</h3></div&g...
2019-04-24 10:41:04
3414
原创 ajax请求成功，服务器响应成功，但是前台接受不到数据，控制台也没有报错
状态ok代码200但是前端没有返回数据，控制台也没有报错。逐行核对代码发现是因为“readyState”中的s没有大写导致的。修改完成后代码可以正常运行，前端正确异步更新数据。...
2019-04-20 13:23:35
6194
1
原创 用xampp建站，文件修改后无法显示更新，后台引用的还是旧文件的解决办法
问题：今天用xampp建站的时候出现了一个问题，就是我将文件修改并保存之后，刷新页面仍然显示的是未更新的版本。后台引用的资源也是显示的文件更改之前的旧版本。解决办法：查询以后发现。可能是缓存的问题。我用的是safari浏览器，打开“开发->清空缓存”，然后刷新页面。这时候再右键检查元素，发现引用文件更新了。...
2019-04-20 12:09:05
1197
原创 安装vue-cli的时候报错errno -13的解决办法
安装vue-cli的时候，执行命令npm install --global @vue/cli报错：errno -13提示原因为不是按照管理员身份运行，请求被拒绝npm ERR! Error: EACCES: permission denied解决办法：使用sudo命令：sudo npm install --global @vue/cli结果可以顺利安装。...
2019-04-17 10:28:26
6355
原创 JavaScript函数-创建参数个数不限数量的函数
函数参数实际上是被保存在一个被称为arguments的类似于数组的对象当中。函数的length属性表明了期望的参数个数。当传入的函数参数个数未知，比如想要创建一个函数，接收任意数量的参数并返回它们的和时，这种情况下使用arguments比使用命名参数更为有效。function sum(){ var sum=0; for (var i = 0; i < arguments.lengt...
2019-03-20 09:35:53
3019
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人