rainux

原创 12 款在手，前端无忧——Vue UI 组件库

今日分享下同事推荐的十二款VUE UI组件库，方便前端开发的伙伴们参考。

原创 深浅拷贝及赋值区别理解

深浅拷贝及赋值的理解

原创 在当前目录以及当前目录的所有子目录下查找文件名包含指定字符串的文件，并打印出相对路径

python基础

原创 箭头函数vs普通函数

区别并正确使用箭头函数与普通函数

原创 单行省略&多行省略

css实现单行省略&多行省略

原创 关于node的不同取参方式

关于node的获取参数方法及其用法，req.query/req.params/req.body

原创 使用Echarts出现的一些问题......

https://blog.csdn.net/qq6759/article/details/95632822

原创 iview的表格行/列合并（留存备用）

https://www.jianshu.com/p/c336ed843f11

原创 构建一个表格，能够实现一对多的数据形式（已自用于项目），形象而便于使用

getExProcess() { this.processList = [ [{ appname: "应用1", process_name: "进程1", pid: 1 }], [{ appname: "应用2", process_name: "进程2", pid: 2 }], [ { appname: "应用3", process_name: "进程3", pid: 3 }, { appname: "应用3", pro

原创 字符串、数组、对象等常用方法（留存备用）

Code Is Never Die !split(separator,howmany)split() 方法用于把一个字符串分割成字符串数组。let R = 'www.rainux.top'R.split('.') // ['www','rainux','top']R.split('.',2) // ['www','rainux']截前两部分R.split('',4) // ["w", "w", "w", "."]join(separator)join() 方法将数组作为字符串返回。元素将

原创 超简单使用Vue项目引入Vuex，随时更新新问题

Code Is Never Die !如何更好地在组件外部管理状态，Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架，将会成为自然而然的选择。今天就简单记录一下最简单的使用Vuex的方法。一、安装引入如果是Vue项目搭建的底层，推荐npm/yarn安装#npmnpm install vuex --save#yarnyarn add vuex...

原创 解决 Refused to display in a frame because it set ‘X-Frame-Options‘ to ‘deny‘.问题

Code Is Never Die !问题： 在做iframe预览PDF文件时，虽然nginx配置了X-Frame-Options SAMEORIGIN,但在iframe中仍然获取不到内容。介绍：X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在 frame , iframe 或者 object 中展现的标记。网站可以使用此功能，来确保自己网站的内容没有被嵌到别人的网站中去，也从而避免了点击劫持 (clickjacking) 的攻击。只有当用户使用支持X-Frame-

转载 你需要知道的 15 个很棒的 CSS 动画库

从一种 CSS 样式配置到另一种的过渡可以使用 CSS 动画进行动画处理。描述 CSS 动画的样式和指示动画样式的开始和结束状态的一组关键帧，以及可能的中间路点，构成了动画。与传统的脚本驱动动画技术相比，CSS 动画提供了三大优势：它们很容易用于简单的动画；你甚至不需要知道 JavaScript 来制作它们。即使系统负载适中，动画也能正常工作。在 JavaScript 中，简单的动画通常运行不佳。为了使性能尽可能流畅，渲染引擎可以使用跳帧和其他方法。例如，允许浏览器调节动画序列允许浏览器通过限制当前

原创 Electron“安装已中止，安装程序未成功地运行完成”

Code Is Never Die !最近在使用Electron桌面化程序时（官方定义：使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序），打包成exe文件时出了点问题，特此记录一下，同时分享给大家。本人打包安装的是使用比较多的electron-builder进行项目的打包，yarn build后会在build文件夹下生成 .exe 程序安装包，点击安装时出现了如图问题：检查了一下package.json的配置情况，发现一切配置也都正常，并未发现错误，安装路径也没错误。P

原创 闭包经典案例留存

Code Is Never Die !闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。function createFunction(){ var result = new Array(); for(var i=0; i<10; i++){ result[i] = function(){ return i;

原创 常见状态码，仍需必备呢~

2××3××4××5××

原创 Vue常用前端组件库【留存备用】

原创 Git：放弃本地(或Linux下)修改内容，全部拉取远端git仓库代码

Git：放弃本地(或Linux下)修改内容，全部拉取远端git仓库代码

原创 Vue本地项目实现其他局域网电脑在线访问

Code Is Never Die ！项目在本地npm run dev跑起来，默认为http://localhost:8080在当前IP下访问没有问题，但是同一局域网下的其他同事却访问不了，显示ERR_CONTENT_LENGTH_MISMATCH，没有办法访问同时直接通过同事电脑访问我的IPhttp://192.168.1.20:8080，也显示连接失败无法访问也无法访问成功。看到网上的解决办法如下：1.package.json中scripts的dev中最后加入--host 0.0.0.0

原创 点击当前元素将信息存在数组，再次点击从数组移除

Code Is Never Die ！真实场景： 昨天在做一个选中与取消选中元素的功能，需要用到频繁push(加入)和remove(移除)元素的操作。实现思路：首先需要先判断数组中是否包含即将操作的元素；若不存在，则将当前元素push至数组中；若存在则将当前所选元素在数组中找到并splice移除；引入新方法： 根据数组元素的 “值” 来删除数组中当前 “值” 元素。对数组增加内置属性方法：Array.prototype.contains = function(obj) { var i

原创 其他解决方法：Forbidden(403) CSRF verification failed.Request aborted.

Code Is Never Die ！今天在完成部分页面发起POST请求时，出现了如下所示的403报错情况度娘搜索了一下，解决方法包含了前端修改和后端修改的解决办法，前端来修改操作的90%都集中于在form标签里面添加{% csrf_token %}即可，也是最为简单的，然而，很不幸我加了之后依然报错。后来发现页面登陆进来会有一个接口获取csrfToken，用来防御CSRF攻击，在接口请求时为避免安全性的问题产生漏洞，会在headers中携带此csrfToken，故在请求时加上headers: {

原创 前端mockjs虚拟数据__留备使用

Code Is Never Die ！1.0 Vue环境下2.0 引入mock.js文件在main.js中引入mock.js3.0 mock.js文件拦截ajax请求，返回mock数据const Mock = require('mockjs')// 返回字符串Mock.mock('/api/data', (req, res) => { return Mock.mock({ 'string|3': '*' })})// 返回指定范围的整数Mock.

原创 服务器开发的网站http登录失败，必须https登录

Code Is Never Die ！公司系统使用默认（也就是http方式登录）都会出现问题应该是之前做了https的安全验证，但是有的时候默认输入地址是http的，所以往往会造成一定的不方便。考虑最简单的就是让系统自动使用https下访问在头部增加如下一行代码：<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />这样访问不管是http/https都会自动跳到https下

原创 数组、对象遍历收藏版

Code Is Never Die ！留存方便自己使用，方便大家使用遍历对象：1.Object.keys()var obj = {'0':'a','1':'b','2':'c'};Object.keys(obj).forEach(function(key){ console.log(key,obj[key]);});2.for…in…var obj = {'0':'a','1':'b','2':'c'};for(var i in obj) { consol

原创 离开页面提示beforeunload和unload的事件应用

Code Is Never Die ！需求： 在用户离开页面之前给一个提示，选择是否确认离开，并且用户确认离开的话，需要发出一个请求。代码：<!DOCTYPE HTML><html><body> <script> // 只有屏幕和用户互动过后，用户离开页面（关闭、刷新、跳转其他页面）才会触发 window.onbeforeunload = event => { console.

原创 记录:设置jtopo节点不可拖拽

Code Is Never Die !this.scene.mousedrag(function(e)){ e.target.dragable = false;//将拖拽设置为false}

原创 JS比较两个数组是否完全相同

Code Is Never Die !// 假设两个数组arr1、arr2var arr1=["11","22","33"];var arr2=["11","33","44"];// 定义变量用于标志var arr_status;// 判断两个数组长度是否相同if(arr1.length == arr2.length){ // 循环arr1 for (var x = 0; x < arr1.length; x++) { // 默认arr_status 为1 arr

原创 入手Node最好的文章---npm命令

Code Is Never Die !安装npm install 包名#简写npm i 包名#安装指定版本的包npm install 包名@版本号 -> npm install [email protected]#初始化npm init -y#安装所有的包npm install#卸载包npm uninstall 包名#安装开发依赖npm install 包名 -D#安装全局包npm install 包名 -g#卸载全局包npm uninstall 包名 -g

原创 入手Node最好的文章---第三部分

Code Is Never Die !包管理配置文件概念npm 规定，在项目根目录中，必须提供一个叫做 package.json 的包管理配置文件。用来记录与项目有关的一些配置信息。例如：项目的名称、版本号、描述等项目中都用到了哪些包哪些包只在开发期间会用到那些包在开发和部署时都需要用到1. 如何记录项目中安装了哪些包在项目根目录中，创建一个叫做 package.json 的配置文件，即可用来记录项目中安装了哪些包。从而方便剔除node_modules 目录之后，在团

原创 入手Node最好的文章---第二部分

Code Is Never Die !http 模块1.什么是http模块在网络节点中，负责消费资源的电脑，叫做客户端；负责对外提供网络资源的电脑，叫做服务器。http 模块是 Node.js 官方提供的、用来创建 web 服务器的模块。通过 http 模块提供的 http.createServer() 方法，就能方便的把一台普通的电脑，变成一台 Web 服务器，从而对外提供 Web 资源服务。如果要希望使用 http 模块创建 Web 服务器，则需要先导入它：2.进一步理解 http 模块的

原创 入手Node最好的文章---第一部分

一、Node.js 简介1.什么是 Node.jsNode.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 的官网地址： https://nodejs.org/zh-cn/2. Node.js 中的 JavaScript 运行环境3. Node.js 可以做什么Node.js 作为一个 JavaScrip

原创 使用keep-alive实现组件页面缓存

Code Is Never Die ！keep-alive 参考文档Props：include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。用法：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

原创 图片跟随鼠标样式跟随效果（附完整代码及效果）

Demo效果如下：完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <

原创 入手Ajax最好的文章---第五部分

Code Is Never Die !HTTP协议简介什么是通信通信，就是信息的传递和交换。通信三要素：通信的主体通信的内容通信的方式现实生活中的通信案例：张三要把自己考上某个大学的好消息写信告诉自己的好朋友李四其中：通信的主体是张三和李四；通信的内容是考上大学；通信的方式是写信；互联网中的通信案例： 服务器把大学的简介通过响应的方式发送给客户端浏览器。其中，通信的主体是服务器和客户端浏览器；通信的内容是大学的简介；通信的方式是响应；什么是通信协议通

原创 入手Ajax最好的文章---第四部分

Code Is Never Die !同源策略什么是同源如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：什么是同源策略同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制通俗的理解：浏览器规定，A 网站的

原创 入手Ajax最好的文章---第三部分

Code Is Never Die !XMLHttpRequest的基本使用什么XMLHttpRequestXMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的使用xhr发起GET请求步骤创建 xhr 对象调用 xhr.open() 函数调用 xhr.send() 函数监听 xhr.onreadystatechange 事

原创 npm err ! Error: connect ECONNREFUSED 127.0.0.1:8087

Code Is Never Dienpm安装了expressnpm install express然后出现了错误npm err ! Error: connect ECONNREFUSED 127.0.0.1:8087解决办法npm config set proxy null然后就OK啦！PS: 博主博客主页(Rainux)，精彩继续，欢迎来访！...

原创 element引入，但标签不显示问题

Code Is Never Die ！越简单，越是看半天都迷不过来啦。引了element的相关js、css文件，然后就随便测了一下直接这样走起，咳，一片空白，没有报错，给我脑子整懵了，一下摸不着头脑。after…然后就这就可以了！PS: 博主博客主页(Rainux)，精彩继续，欢迎来访！...

原创 入手Ajax最好的文章---第二部分

Code Is Never DieForm表单的基本使用什么是表单表单在网页中主要负责 数据采集功能。HTML中<form>标签，就是用于采集用户输入的信息，并通过 <form>标签的提交操作，把采集的信息提交到服务器端进行处理表单的组成部分表单标签表单域：包含了文本框，密码框，隐藏域，都行文本框，复选框，单选框，下拉选择框和文件上传框等等表单按钮：通过设置type属性为submit来触发form表单的提交<form> 标签的属性(⭐⭐⭐)act

原创 入手Ajax最好的文章---第一部分

Code Is Never Die今天我们一起揭开Ajax的神秘面纱！客户端与服务器（⭐⭐⭐）上网的目的上网的本质目的：通过互联网的形式来获取和消费资源服务器上网过程中，负责 存放和对外提供资源 的电脑，叫做服务器客户端在上网过程中，负责 获取和消费资源 的电脑，叫做客户端URL地址的概念&组成URL的概念URL（全称是 UniformResourceLocator） 中文叫 统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资