小榴莲爱编程-优快云博客

原创 elementui表格排序功能

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。在列中使用sort-by定义排序规则在第一个参数相等的情况下，对第二个参数代码如下：<template> <div class="about"> <h1>About Element UI Table</h1> <el-table :dat

2021-12-01 17:48:04 3381

原创本地项目初次上传git仓库

1、git remote add origin git@repo.shinewonder.com:cindy/next.git （git远程地址）2、git add .3、git commit -m “init”4、git push --set-upstream origin main

2021-08-13 11:20:17 202

原创 Electron 渲染进程不能使用node.js模块

Electron为了安全性的考虑，是渲染子进程不能使用node.js模块的，如果要在渲染进程中使用node.js模块，需要在创建主进程时进行设置，设置代码如下：//设置在创建主进程的方法中添加 webPreferences: { nodeIntegration: true, contextIsolation: false //Electron 12.0以上版本需要的额外设置此项 }...

2021-06-30 16:34:40 1296 1

原创浅拷贝与深拷贝区别

什么是浅拷贝与深拷贝？简单的说就是A复制了B之，后当我们去改变A的时候B也跟着改变了，那么就说明是浅拷贝，如果B没有改变，那么就说明是深拷贝。栗子????let A = ['cindy','lily'];A = B;A[0] = 'newcindy';console.log(B) // ['newcindy','lily'];是不是很奇怪？明明是在复制之后改变A的为什么B会跟着变化呢？hhhh继续看下面的解释基本数据类型和引用数据类型基本数据类型：Number , String

2020-11-05 17:59:32 238

原创 Git本地分支与远程分支关联(git branch --set-upstream-to=origin/＜branch＞＜mybranch＞)

Git在本地新建分支后，可做远程分支关联。关联目的是，如果在本地分支下进行pull 和push操作时，便不需要指定远程的分支。如果在没有关联且没有指定分支的情况下，直接使用 git pull 命令，会提示你如下信息：解决办法：git branch --set-upstream-to=origin/v1.12 v1.12解释：将远程的v1.12分支与本地的v1.12建立连接，以后在本地v1.12分支pull和push的时候就不需要指定远程分支的名称直接进行git push和git p.

2020-09-23 14:53:19 8517

原创 Vue插槽(slot)详解

插槽可以分为几点：插槽的内容具名插槽插槽作用域一.插槽的内容一句话：插槽内可以是任意内容先看一下下面的代码<div id="#app"> <child>Hello World</child></div><script>Vue.component('child', { template: ` <div> <slot></slot> </div>

2020-09-08 11:47:27 1566

原创 Vue单元测试实战教程(Mocha/Karma + Vue-Test-Utils + Chai)

安装测试插件npm install --save-dev @vue/test-utils@1.0.0-beta.12修改test/unit/specs/HelloWorld.spec.js// 引入vue的测试工具import { mount } from "@vue/test-utils"// 引入需要测试的组件import HelloWorld from '@/components/HelloWorld'// 创建测试套件describe('helloWorld测试套件',...

2020-08-26 16:25:53 2847 1

原创 vue 解决Invalid Host header

ue 解决Invalid Host header在build/webpack.dev.conf.js文件中，加上disableHostCheck: true、如下图：

2020-08-25 16:54:22 1053

转载 Vue实现导出Excel表格

一、安装三个依赖项$ cnpm install -S file-saver$ cnpm install -S xlsx$ cnpm install -D script-loader二、在项目中新建一个文件夹（一般在src下新建，文件名自取，在这里命名为excel），在文件夹中放入Blob.js 和 export2Excel.js （这两个文件可在gitup上进行下载）Blob.js ，export2Excel.js下载地址：https://pan.baidu.com/s/1bzLCiRFvPy

2020-08-11 10:13:04 1546 1

原创 vuex

什么是Vuex？vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。vuex的核心概念statestate提供唯一的公共数据源，所有共享的数据都要统一放到store中的state中进行存放组件中访问state中数据的第一种方式this.$store.state.全局数据名称（在template中this可以省略）组件中访问state中数据的第二

2020-07-10 17:18:02 120

原创 Material Design（四）--模式

Material Design–模式. 确认 & 确知确认和确知操作可以帮助减少事情的不确定性它还可以防止用户犯下会让他们后悔的错误。1.1:确认：要求用户核实需要继续执行的操作。用户请求从库中删除一个相册，会显示一个警告框来确认此操作，并告知用户此相册在任何设备上都将不能使用。1.2:确知：是显示文本，让用户知道他们执行的操作已完成。如果用户从编写界面向后导航，则会保存电子邮件的草稿，一个 toast 形式的确知出现，然后几秒钟后淡出。2. 数据格式2.1:日

2020-06-03 10:18:55 226

原创 Material Design（三）--组件

Material Design–组件浮动操作按钮 FAB浮动操作按钮是 Material Design 中最明显的标志了同时它也是当前页面最重要的操作，（比如在邮箱的页面中，FAB 很可能是发邮件的按钮）并且一个页面中只建议有一个 FAB。 △ FAB在APP的右下角位置并且常驻屏幕 △ FAB是一个页面中最显眼的设计，但并不是每个页面都需要FAB浮动操作按钮强制使用圆形样式。不要给浮动操作按钮添加额外的维度。 FAB的尺寸FAB 默认尺寸 (56

2020-06-03 10:17:10 720

原创 Material Design（二）--动效和样式

Material Design动效动效是什么动效用于描述空间关系以及提供优雅流畅的交互效果。为什么动效很重要?引导用户在视图中的视觉焦点提示用户完成手势操作后会发生什么使应用更有个性、更优雅、更令人愉悦材料如何移动?运动中的材料有以下特性：反映敏捷自然的有意识的有意图的Material Design色彩Material Design 的配色灵感来源于现代主义设计和路标等标识，所以它的色彩选择都非常鲜亮，颜色在明度和纯度上都较为适中，在我们设计 APP

2020-06-03 10:15:43 269

原创 Material Design（一）--初识

一：Material Design–概述Material Design – 是将经典的设计原则和科技、创新相结合而创造的设计语言。Material Design原则Material 是一种隐喻通过构建系统化的动效和空间合理化利用，并将两个理念合二为一，构成了实体隐喻。鲜明、形象、有意义Material Design 设计语言强调根据用户行为凸显核心功能，进而为用户提供操作指引。有意义的动画效果动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定，能够

2020-06-03 10:13:12 617

原创 sketch(四)--镂空图片和动画

Sketch制作镂空图标的制作流程打开Sketch，新建文件并点击左上角的”+“选择Image图片选项然后导入我们想要处理的图片：双击图片进入到编辑模式我们来看一下右边出现的一个图像工具分别对上图的五个小图标进行一个解释1:手动识别2：自动识别3:反选（意思就是要选取白色部分还是图像部分，可以自己进行选择）4:剪裁5:填充选择完成之后点击裁剪就完成啦，让我们来看一下对比效果吧！介绍完镂空图标的制作我们再来了解一下动效的制作吧动效的制作——Anima

2020-06-03 10:11:29 857

原创 sketch(三)--插件

sketch插件1. kitchen特色功能Iconfont 图标库搜索改变icon大小颜色图表库数据填充图片（自定义图片）文字色板管理图表生成编辑安装下载地址：https://kitchen.alipay.com/2. 蓝湖高效的产品设计协作工具，支持共享 Symbol、同步 Sketch Prototyping 及共享、自动标注与多倍切图、设计图在线评论、设计图历史版本管理、快速制作原型等功能安装下载地址：https

2020-06-03 09:59:42 2815

原创 sketch(二)--组件和嵌套组件

sketch快捷键整理快捷键作用r矩形（按住shift可画出正方形）o圆形（按住shift可画出正圆）u圆角矩形（按住shift可画出正圆角矩形）l直线b增加或删除边框a新建一个画板cmd+g编组或解除编组cmd+1让画布以最舒适的大小和位置展现在我们眼前cmd+2让画布中的某个图层以最舒适的大小和位置展现在我们眼前cmd+⬆️⬇️⬅️➡️改变大小默认是按一次改变1像素如果按住shift则每次改变10像素

2020-06-03 09:55:57 3222

原创 sketch(一)--安装和介绍

Sketch(一)——介绍、安装简介Sketch 是一款适用于所有设计师的矢量绘图应用。Sketch VS PhotoshopSketchPhotoshop接近网页渲染效果几乎没有网页样式渲染缺少快捷键大把大把的快捷键轻量级软件，运行起来非常快文重量级软件，其实挺慢的一个文档，多个画板一个文档，一个画板总结:Setch是一个为网页设计和UI设计而打造的软件，但是无去完全替代PS,PS是一个优秀的图片处理软件，但是在UI设计和网页设计上并不

2020-06-03 09:52:14 2847

原创 node(二)--内置模块

node中url的使用一. parse方法来将一个URL字符串转换为URL对象：url.parse('http://user:pass@host.com:8080/p/a/t/h?query=string#hash');/* =>{ protocol: 'http:', auth: 'user:pass', host: 'host.com:8080', port: '8080', hostname: 'host.com', hash: '#hash', search:

2020-06-03 09:50:08 114

原创 node(一)--初识

什么是node.js?node.js是基于v8引擎的javascript运行环境node.js使用了一个事件驱动、非阻塞I/O的模型、使其轻量又高效node.js的包管理器是npm，是全球最大的开源库生态系统我对node.js的理解让javascript可以做后端的开发，即一门语言搞定前后端，即全栈。mac 上node.js环境的安装与测试一：安装第一步:打开终端,输入以下命令安装Homebrew第二步:安装node,在终端输入以下命令brew install node

2020-06-03 09:48:43 142

原创 mongoDB--初识

1. MongoDB简介MongoDB 是一个介于关系型数据库与非关系型数据库之间的一个数据库 ;MongoDB 的数据是存放在磁盘上的 , 以类似于json格式(bson)进行存储 ;2. MongoDB体系结构3. MongoDB数据类型docker安装mongodb查找 MongDB 镜像命令：docker search mongodb拉取镜像docker pull mongo运行容器docker run -itd --name mongo -p 27017:2701

2020-06-03 09:41:14 193

原创 Chrome开发者模式及debug mode的使用

Chrome开发者模式及debug mode的使用Chrome 开发者工具Chrome开发者工具是Web开发的调试工具，可用来对网站进行调试和分析。打开方式菜单中选择更多工具>开发者工具在页面中右键,点击选择检查使用快捷键Command+Option+I或F12+Fn面板元素面板可以自由的操作DOM和CSS来迭代布局和设计页面。控制台面板这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascrip

2020-06-03 09:38:34 904

原创 Git Flow

GitFlow 工作流GitFlow是什么？GitFlow是一套基于git的工作流程，这个工作流程围绕着项目发布定义了一个严格的如何建立分支的模型。GitFlow规定了如何建立、合并分支，如何发布，如何维护历史版本等工作流程。简单说就是每一个功能特性的开发是在分支上开发，而不是在主干开发，分支开发完毕后再合并到主干上。GitFlow的优势还处于半成品状态的feature不会影响到主干各个开发人员之间做自己的分支，互不干扰主干永远处于可编译、可运行的状态GitFlow分支简

2020-06-03 09:37:16 137

原创 Linux下Nginx的安装与配置

Linux下Nginx的安装与配置一、Nginx相关概念1.1 Nginx简介Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器Nginx特点：占有内存少并发能力强百度、京东、新浪、腾讯等都在使用Nginx。1.2 Nginx的优点（1）高并发：在连接高并发的情况下，它能够支持高达 50,000 个并发连接数的响应，并且cpu、内存等资源消耗却非常低，运行非常稳定。（2）Nginx作为负载均衡服务：Nginx 既可以在内部直接支持

2020-06-03 09:36:00 1257

原创 Linux编辑器的使用

vi ——— 终端中的编辑器参考文档vi的概念vi是visual interface的简称，是Linux中最经典的文本编辑器vi的特点没有图形界面但功能强大的编辑器只能是编辑文本内容，不能对字体、段落进行排版不支持鼠标操作没有菜单只有命令vi的三种模式命令模式末行模式编辑模式常用命令命令作用vi+文件名文件存在直接打开/不存在创建一个新文件vi+文件名+行数打开文件并且定位行/不写行数直接定位到文件末尾u撤销上

2020-06-03 09:34:27 144 1

原创 Mac os手势及快捷键

macOS手势及快捷键的使用触摸板手势效果单指轻点相当于鼠标左键双指轻点相当于点击鼠标右键双指滑动相当于点滚轮双指左滑和右滑在浏览器上相当于前进和后退轮四指向上轻扫打开调度中心四指向下轻扫关闭调度中心捏拢一指和其他三指打开启动台张开一指和其他三指关闭启动台常见快捷键拷贝 cmd+c粘贴 cmd+v剪切文本 cmd+x （对于文本，文字）剪切文件首先cmd+c然后cmd+opt+v就可以剪走文件 (对于文

2020-06-03 09:32:12 580

原创 Oddo的基本使用

Odoo的基本使用1、EPR系统ERP：企业资源计划管理系统，是指建立在信息技术的基础上，为企业提供决策手段的管理平台，优化企业的运行模式,核心思想是供应链管理。2、什么是odoo？Odoo 是一个开源框架，针对 ERP 的需求发展而来，以客户为中心，适合定制出符合客户各种需求的 ERP 系统和电子商务系统。所有模块都可以根据需要进行安装和御载，所以客户能像搭积木一样建构自己期望的系统。Odoo 的主要模块包括：销售、采购、库存、财务、生产、项目管理、CRM(客户管理)、POS(销售终端

2020-06-03 09:31:14 3299

原创 docker的安装和使用

docker的安装Mac下安装docker使用 Homebrew 安装macOS 我们可以使用 Homebrew 来安装 Docker。Homebrew 的 Cask 已经支持 Docker for Mac，因此可以很方便的使用 Homebrew Cask 来进行安装：brew cask install docker镜像加速鉴于国内网络问题，后续拉取 Docker 镜像十分缓慢，我们可以需要配置加速器来解决，我使用的是阿里云的镜像地址：https://af650.

2020-06-03 09:28:26 152

原创 git概念和常见命令

git概念和常见命令一:什么是git?在这里官方给出的定义是：git是版本控制工具。这里的版本其实是每一次发布的代码，git会把每一次提交的代码都保存下来，并给它一个叫做“版本号”的编号。这类似于期刊出版的过程，每一次出版都有它的期号。二：为什么使用git?git具有备份文件的功能，允许我们找到修改前的文件，可以“反悔”git具有分支机制，像写小说，可以分出几条支线。允许我们在开发主程序的同时，开发额外的功能。这样同样使多人开发变得简便，只有每个人开发自己的功能（支线），最后合并（连

2020-06-02 15:57:57 135

原创 postman安装和使用

postman安装postman官网postman说明Postman是一种网页调试与发送网页http请求的chrome插件。我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口。为什么要用postman测试人员进行接口测试模拟客户端与服务端的交互。有问题提前抛出来。保证接口调用是没问题的。其次，接口测试完成之后在进行系统测试，会轻松很多。明白了各个接口在做什么，各个参数的模拟实际上就是业务场景的模拟。系统测试出现一些问题更快速的定位是客户端还是服务端出问题。使.

2020-06-02 15:17:10 584

原创 export default 和 export 的使用方式

在.vue中定义date msg1.导出一个对象解析export default 是什么东西呢？（向外暴露对象）注意有两种方式导入和暴露，统一使用比较好第一种：第二种：注意使用这种方式，引入时候可以用任意变量来接收只能这么接收...

2020-05-26 11:14:14 193

原创使用vue实例的render方法渲染组件

使用vue实例的render方法渲染组件render渲染和注册component的区别在于，component只替换当前对应的模块，不会清空之前的内容，而render把之前的内容清空只放自己。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc

2020-05-26 09:51:22 596

原创 webpack初识

webpack是什么？webpack是前端的一个项目构建工具，他是基于node.js开发出来的前端工具webpack能做什么？可以完美实现资源的合并，打包，压缩，等诸多功能webpack的安装方式全局安装npm install webpack -g局部安装(安装到项目中)npm install webpack --save-dev自动打包工具(webpack-dev-server)可以帮助我们打包编译并且自动刷新浏览器cnpm install webpack-de

2020-05-26 09:26:58 134

原创 vue中watch函数的使用

watch监听data里面的数据的变化<body><div id="app"> <input type="text" v-model="num"></div><script src="vue.js"></script><script> new Vue({ el: '#app', data: { num: '' },

2020-05-22 16:16:51 4214

原创 MongoDB聚合

MongoDB聚合是什么？MongoDB中的聚合操作将多个文档中的值组合在一起，并可对分组数据执行各种操作，以返回单个结果。个人理解：聚合操作中主要使用到了“管道”的概念。管道的入口是一个集合，管道的出口是你所需要的数据。这个管道中间是有一个个功能节点组成的，可以类比实际生活中一节一节的管道，每个功能节点都会对上一个节点的结果进行一定的操作，如过滤掉某些文档、对文档进行排序等等。相当于把对某个集合的一系列操作使用一个指令完成，比一个指令一个指令操作的优势在于Mongo会在上一个操作结束之后将结果保

2020-05-22 14:20:43 198

空空如也

空空如也