
漫漫前端路
筝非
博客已转至 xuezenghui.com,何不一探究竟?
展开
-
GraphQL
简介定义一种用于API的查询语言。△GraphQL在应用中所处的位置核心思想请求你想要的数据,不多不少传统API调用后获取的内容一般是由后端决定的,哪怕前端只需要一个字段的值也会返回一个完整的res.data.result。而GraphQL提供的数据查询方式可以只获取需要的数据。获取多个资源只用一个请求不仅可以获取资源的属性,还支持关系数据的查询。使用方法先推荐一个开放A...原创 2019-11-20 13:20:34 · 532 阅读 · 0 评论 -
JavaScript数组方法大全
操作数组最后一项push()添加元素到一个数组的末尾var arr = [1, 2, 3];arr.push(4, 5);console.log(arr); // [1, 2, 3, 4, 5]pop()删除数组最后一项var arr = [1, 2, 3];arr.pop();console.log(arr); // [1, 2]操作数组第一项shift()删除数...原创 2019-09-23 13:35:04 · 411 阅读 · 0 评论 -
MongoDB(四)——GridFS
GridFSMongoDB的一个重要子模块,可基于MongoDB来持久存储文件,并且支持分布式存储和读取。持久存储:对应瞬时数据如内存,指保存到数据库中,能持久保存。分布式存储:将数据分散地存储于多个位置。存在的意义MongoDB采用BSON格式存储数据,对数据的大小限制为16M,但是在实际的系统开发中,上传的图片或文件可能尺寸会很大,此时可以使用MongoDB中的GridFS解决,...原创 2019-09-18 15:53:58 · 5665 阅读 · 0 评论 -
MongoDB(三)——图片存储
图片存储的两种思路和方法方法一、 直接将图片的base64编码存在MongoDB数据库中Base64是一种用64个字符来表示任意二进制数据的方法,常用于在URL、Cookie、网页中传输少量二进制数据。前台绑定input的change事件<input @change="uploadPhoto($event)" type="file">利用H5中的fileRead...原创 2019-09-16 10:39:17 · 9085 阅读 · 0 评论 -
MongoDB(二)——Map Reduce(Node.js中实现实例)
Map ReduceMongoDB提供的一种计算模型,就是将大批量的数据进行分解,再将分解的数据合并成最终需要的结果。适合于处理数据量较大的场景,相较于group和aggtegate来说功能更强大,且更加灵活。基本语法...原创 2019-09-11 17:48:39 · 787 阅读 · 1 评论 -
MongoDB(一)——Mongoose
Mongoose简介MongoDB的一个对象模型工具,用于在Node.js中更加灵活简单地操作MongoDB,而且Mongoose封装了对MongoDB数据库文档的一些常用方法如增删改查等。其实,它也只是一个node模块而已。没有Mongoose是如何在Node.js中操作MongoDB的?1. 安装MongoDB依赖npm install mongodb2. 连接数据库var...原创 2019-09-06 15:41:11 · 401 阅读 · 0 评论 -
组件管理工具Bit
对比Git你就知道Bit是什么了‘Bit loves Git’对,这是官方文档的原话。Git大家再熟悉不过了,世界上最先进的分布式版本控制系统,没有之一,‘近朱者赤’,大概这就是Bit喜欢Git的原因了。开个玩笑,其实是因为Bit的工作流和Git很相似,也是一个分布式工具。Git是管理源文件、源代码的,Bit也是用来管理代码,但不同的是Git不管你代码的语义结构,而Bit是将代码分...原创 2019-09-05 19:30:35 · 3516 阅读 · 1 评论 -
Node.js(四)——回调地狱问题
回调地域????Node.js的核心特性?事件驱动、非阻塞I/O真实开发中异步回调函数我们用得很多,比如在用Node.js写接口时:router.get('/getAllWork',function(req,res){ WorkCenters.find({},function(err,data){ if(err){ console.log(err...原创 2019-09-04 20:46:17 · 455 阅读 · 0 评论 -
Node.js(三)——Express
Express一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。核心特性可以设置中间件来响应 HTTP 请求原生的 Node.js 使用一个 request 处理函数应对所有请求并做出响应,而Express将一系列简单的处理函数组合起来。每一个小的处理...原创 2019-09-01 23:25:40 · 746 阅读 · 0 评论 -
VUE中表单验证——vuelidate
第一步:安装,导入main.js中可以通过 npm 安装npm install vuelidate --save然后导入到 `main.js` 中import Vuelidate from 'vuelidate'Vue.use(Vuelidate)第二步:在组件中使用Vuetify:Forms数据需要用 v-model 绑定, this.$v.xxx.$touch() ...转载 2019-08-29 11:38:13 · 2151 阅读 · 0 评论 -
Node.js(二)——events
Node.js两个核心特性1. 事件驱动2. 非阻塞I/O客户端请求建立连接,提交数据等行为,会触发相应的事件。在一个时刻只能处理一个事件回调函数(单线程),处理过程中当有其它事件时,可以转而处理其它事件,然后再回来执行原事件的回调函数。例子:快餐店点餐。你到了柜台前,把你的点餐单给收银员或者给收银员直接点餐,然后等在那直到你要的食物准备好给你。收银员不能接待下一个人,除非你拿到食...原创 2019-08-28 23:47:53 · 259 阅读 · 0 评论 -
数组中对象去重方法
常常存在获取后台数据后,往页面渲染需要给获取到的数组去重,但数组中是对象,无法使用new set()等方法。这里记录两个简单易用的方法来去重:获取到的数据格式:var arr = [{ key: "01", value: "Zander" },{ key: "02", value: "John" },{ key: "03", ...原创 2019-08-28 11:27:59 · 1004 阅读 · 0 评论 -
Node.js(一)——概览及使用
真的是简介“一个基于 Chrome V8 引擎的 JavaScript 运行环境。”Node.js = 运行环境(浏览器➡️Node.js) + JavaScript库(I/O操作),阿里最先于使用其做线上大流量应用,以替代过去的PHP/Java Web。要它干啥做服务器:框架简介Express灵活的Web服务器开发框架Koa基础的企业级应用框架...原创 2019-08-24 17:19:20 · 210 阅读 · 0 评论 -
安装使用mongoose及nodeJS+mongoDB“增删改查”接口集锦
开始步骤:使用express搭建目录安装mongoose并在app.js中引入var mongoose = require('mongoose');mongoose.set('useFindAndModify', false)models文件夹下注册模块let mongoose = require('mongoose');var Schema = mongoose.Schema;...原创 2019-08-19 15:06:37 · 548 阅读 · 0 评论 -
Express Generator生成后台目录结构并安装热更新
生成目录结构安装目录生成器:npm install express-generator -g生成一个文件夹:express 文件夹名 --view=pug进入到文件夹下安装依赖:cd 文件夹名npm install⚠️此目录结构没有models文件夹,需要自己创建生成的目录结构:/eportal_server app.js /bi...原创 2019-08-16 17:18:19 · 721 阅读 · 0 评论 -
mongoDB中导出/导入数据
导出集合:```mongoexport --db 数据库名字 --collection 集合名 --out 文档名.json```导入集合:```mongoeimport --db 数据库名字 --collection 集合名 —file 文档绝对路径```⚠️上述命令需要在根目录下运行,而不是在mongoDB命令行中;导出的文档也位于根目录下。...原创 2019-08-15 20:27:30 · 221 阅读 · 0 评论 -
解决百星官网服务页小三角问题.md
解决百星官网服务页小三角问题最开始解决思路: svg 图片 canvas询问Aaron后尝试使用CSS绘制小三角,小三角实现代码:.arrow position: absolute top: 18px right: -47px width: 8px height: 8px border-top: ...原创 2019-08-13 10:41:34 · 208 阅读 · 0 评论 -
VUE引入本地字体图标步骤.md
在项目目录static中新建文件夹fonts。将本地的字体文件(一般为.ttf、.otf格式)粘贴到fonts目录中。在公共样式目录下(如src/assets/css目录)创建font.css文件在font.css文件中将字体汇总:@font-face { font-family: "SourceHanSansCN-Normal";&nbs...原创 2019-08-13 10:38:54 · 989 阅读 · 0 评论 -
Axios发送各种请求的格式
get请求格式:axios.get('url',{ params: { key: value } })demo:post请求格式:axios.post('url',{ key1: value1, key2: value2, ... } })demo:delete请求格式:axios.delete('url',{ d...原创 2019-07-30 16:14:35 · 3826 阅读 · 1 评论 -
导入本地JSON文件到mongoDB中
mongodb的可视化工具robo不能导入本地数据,只能使用命令行导入在根路径下(不是操作mongo的命令行)使用命令:mongoimport --db 数据库名 --collection 集合名 --file 文件路径如:mongoimport --db datas --collection workcenters --file ~/Desktop/proManagedat...原创 2019-07-26 10:55:48 · 2702 阅读 · 1 评论 -
vue中监听select下拉菜单的选中值
select部分:给select标签v-model="变量名" <v-select :items="place" placeholder="选择生产中心" v-model="chosen"></v-select>data部分:添加一个数据 变量名:""data: () => ({ allMachineInPro:[], a...原创 2019-07-25 17:12:39 · 6594 阅读 · 0 评论 -
vue根据条件实现动态样式绑定(改变状态)
vue做管理系统中经常会遇到这样的需求:根据获取数据中不同的值让页面显示不同的样式。如图中状态值的颜色,如果获取的status值为"0",则显示绿色;如果获取的status值为"1",则显示红色。步骤:给标签使用:绑定样式,如颜色:color="error"使用三元表达式判断获取的值然后给样式赋值,例如:<v-icon :color="props.item.status=...原创 2019-07-24 15:32:15 · 8022 阅读 · 0 评论 -
Docker的安装及使用
Docker简介一个开源的应用容器引擎,基于Go语言并遵从Apache2.0协议开源。相当于一个应用程序的搬运工、载具。应用场景Web 应用的自动化打包和发布。自动化测试和持续集成、发布。在服务型环境中部署和调整数据库或其他的后台应用从头编译或者扩展现有的 OpenShift 或 Cloud Foundry 平台来搭建自己的 PaaS 环境。安装Homebrew安...原创 2019-07-19 14:38:53 · 233 阅读 · 0 评论 -
Postman的安装与使用
Postman一款好用的API自动化测试工具。能够发送任何类型的HTTP 请求 (GET, POST, PUT, DELETE…),并且能附带任何数量的参数和 Headers。Postman安装Postman分为Postman Native App和Postman Chrome App两种。Postman Native App安装:Download Postman App(支持...原创 2019-07-18 15:12:45 · 755 阅读 · 0 评论 -
Odoo的基础使用
What is Odoo?最初的名字为TinyERP,08年5月之后称之为改名OpenERP之后又改为Odoo使用Python语言开发是一套全球开源的ERP/CRM系统是用于经营公司很好的开源管理软件Odoo的唯一价值主张:满足你需要的一切,以及一流的用户体验。What can Odoo do?Odoo是一系列开源商业应用套件,此套件可满足公司的大部分应用需求,例如,企...原创 2019-07-17 22:59:19 · 671 阅读 · 0 评论 -
Chrome开发者模式及debug mode的使用
Chrome devtoolsChrome开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。打开方式菜单中选择更多工具>开发者工具在页面中右键点击,选择检查使用快捷键Command+Option+I或F12+Fn面板元素面板可以自由的操作DOM和CSS来迭代布局和设计页面。控制台面板记录诊断信息,或者使用它...原创 2019-07-16 15:26:17 · 7614 阅读 · 1 评论 -
Linux下Nginx的安装与配置
Nginx简介一款自由的、开源的、高性能的HTTP服务器和反向代理服务器一个POP3、SMTP、IMAP代理服务器可作为一个HTTP服务器进行网站的发布处理可作为反向代理进行负载均衡的实现答疑解惑Time:POP3:Post Office Protocol 3,邮局协议的第三个版本,规定怎样将个人计算机连接到Internet的邮件服务器和下载电子邮件的电子协议。SMTP:...原创 2019-07-15 16:11:37 · 260 阅读 · 0 评论 -
Linux编辑工具的使用——nano
nano简介nano是Unix和类Unix系统(包括Linux)中的一个文本编辑器,是Pico的复制品。Pico是由华盛顿大学(University of Washington)计算与通讯研究所(Computing and Communications Group)编写并维护的文本编辑程序。nano特点小巧友好不需要安装提供许多额外特性交互式的查找和替换定位到制定行列自...原创 2019-07-15 00:02:57 · 1377 阅读 · 0 评论 -
Linux基本概念与指令
Linux?UNIX?Windows?Linux(Unix-like)UNIXWindows诞生时间20 世纪 90 年代初20 世纪 60 年代末20 世纪 80 年代中期开闭源开源闭源闭源适用类别中小型服务器端大型服务器端个人桌面端图形界面命令行命令行依赖图形环境驱动程序Linux开发小组发布,安装复杂收费,安装复杂...原创 2019-07-12 09:52:42 · 245 阅读 · 0 评论 -
Git flow的安装及使用
Git flow简而言之,git flow基于git,是一个git的扩展集,是按Vincent Driessen 的分支模型 提供的高层次的库操作。既然有git为什么还要用git flow?虽然git也可以完成版本管理、分支的创建及提交等操作,但为了不让开发者们在众多分支切换与合并中懵逼 迷失自我,git也需要有一套规则。各大公司也会规定自己项目的工作流程,比如先pull(获取最新版本并me...原创 2019-07-09 22:39:35 · 2069 阅读 · 0 评论 -
Git的基本概念与命令使用
什么是GitGit是目前世界上最先进的分布式版本控制系统,且没有之一。那么什么又是版本控制系统举个栗子:大家都经历过编写修改毕业论文,emmmm…回想起来就很痛苦。先建立名为毕业论文.doc的Word文档,然后毕业论文1.doc,然后论文初稿123.doc、论文终稿、终终稿、终终定稿打死都不修改版……只想保留最新的,又不敢删其他的。而且当指导老师帮你修改拷到U盘中的论文后如果没有批注你想...原创 2019-07-08 17:19:27 · 196 阅读 · 0 评论 -
使用brew在Mac OS下快捷安装配置MongoDB
使用brew安装MongoDB因安装包下载安装较为麻烦且费时,我采用Homebrew安装,简单快捷,省事方便。bingo!!!注:如未安装Homebrew请移步:Mac OS前端装机及环境搭建好了,有了brew后就开始MongoDB的详细安装吧:1. 终端输入:brew install mongodb然后就交给电脑,进入漫长的等待吧(大概5分钟左右)2. 使用cat命令查看系统文件内容...原创 2019-07-08 09:22:23 · 380 阅读 · 0 评论 -
Mac终端/Linux命令大全
Mac终端/Linux命令大全注:蓝色表示常用命令目录操作命令名功能描述使用举例mkdir创建一个目录mkdir dirnamermdir删除一个目录rmdir dirnamemvdir移动或重命名一个目录mvdir dir1 dir2cd改变当前目录cd dirnamepwd显示当前目录的路径名pwdls显示当前...原创 2019-07-03 16:02:46 · 1935 阅读 · 0 评论 -
vue.js——computed中get方法、set方法
众所周知,vue中computed为计算属性,计算属性是一种带有行为的属性,本质上是方法,但是不能调用。而需要重新渲染时使用methods中的方法会重复调用执行函数,若函数复杂,浏览器性能会降低。使用computed则会缓存计算结果,避免重复计算,从而提高效率。computed中的get方法可简单理解为取值时调用此方法,而set则为重新赋值时调用。当不设置get和set方法时可简写,如...原创 2019-03-13 23:02:36 · 5868 阅读 · 0 评论 -
Windows部署Apache服务器步骤
版本:Apache2.2.21,官方下载地址:httpd-2.2.21-win32-x86-no_ssl.msi开始安装:1.双击httpd-2.2.21-win32-x86-no_ssl.msi开始安装。出现安装欢迎界面。2.欢迎界面直接点“Next”继续,出现授权协议。3.授权协议选择“I accept the terms in the license agr...原创 2019-03-07 15:23:33 · 3997 阅读 · 0 评论 -
正则表达式验证密码强弱程度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style type="text/css&q原创 2019-03-02 14:07:39 · 1109 阅读 · 0 评论 -
原生JS——高清放大镜效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>zhengfei</title> <style> * { margin原创 2018-12-22 16:14:37 · 308 阅读 · 0 评论 -
原生JS——3D旋转木马轮播图
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="cs原创 2018-12-20 21:13:00 · 1783 阅读 · 0 评论 -
原生JS——缓动动画函数封装(任意个属性、层级、透明度及回调函数)
function animate(element, json, fn) { clearInterval(element.timeId); element.timeId = setInterval(function () { var flag = true;//假设全部到达目标 for (var attr in json) { ...原创 2018-11-20 22:40:15 · 543 阅读 · 0 评论 -
原生JS模拟百度搜索框关键字推荐
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width:原创 2018-11-12 00:01:20 · 759 阅读 · 0 评论