- 博客(41)
- 收藏
- 关注
RSS订阅原创 graphql(四)
mutation－获取数据后还有写操作的请求使用Mutations修改数据查询使用query，修改数据使用Mutation。这里要注意的是：写mutation的话必须写query，否则就会报错。链接数据库// 构建Schema，定义查询的语句和类型//input用来定义输入类型//Account查询类型const schema = buildSchema(` input AccountInput{ name:String age:Int sex:String
2021-02-09 15:50:27
295
1
原创 GraphQL(三)
使用Mutations修改数据查询使用query，修改数据使用Mutation。这里要注意的是：写mutation的话必须写query，否则就会报错。链接数据库// 构建Schema，定义查询的语句和类型//input用来定义输入类型//Account查询类型const schema = buildSchema(` input AccountInput{ name:String age:Int sex:String department:String
2021-02-06 22:29:19
369
1
原创 GraphQL(二)
参数传递和js传递参数一样，小括号内定义形参，但是注意：参数需要定义类型。 同时也需要注意：哪些参数是必须要传递的。// 构建Schema，定义查询的语句和类型const schema = buildSchema(` type Account { name:String age:Int sex:String department:String salary(city:String):Int } type Query { getClassMat
2021-02-02 08:41:10
639
原创 GraphQL(一)
一、简介什么是GraphQL？GraphQL 是一种面向数据的 API 查询风格。传统的 API 拿到的是前后端约定好的数据格式，GraphQL 对 API 中的数据提供了一套易于理解的完整描述，客户端能够准确地获得它需要的数据，没有任何冗余。特点请求需要的数据，不多不少例如：account中有name、age、sex等字段。我们只取得需要的字段即可。获取多个资源，只用一个请求描述所有可能类型的系统。便于维护，根据需求添加或者隐藏字段。GraphQL和restful对比rest
2021-01-31 13:37:41
365
1
原创 D3(四)
可视化图形可视化的图形主要有两种：层级结构的可视化层级结构：树， 最直接、最直观的可视化方案。数据格式为JSON格式，节点可以包含“属性”网络结构的可视化网络结构：图绘制树状图树状图用于表示层级、上下级、包含与被包含关系。绘制一个树状图主要分为四步：选中页面设置的svg绘制区域的宽高 添加g元素 设置位置生成树状布局，设置尺寸对角线生成器请求数据，渲染数据获取节点数组和连线数组绘制连线绘制节点给节点添加圆圈设置半径给节点添加文本 设置文本样式 位置
2021-01-17 20:34:52
1518
原创 D3(二)
使用D3.js实现数据可视化1、柱状图制作步骤：使用html创建一个容器用来存放图表 : <div id="chart"></div>使用css的样式调整最后生成的柱形图的样式#chart div { display: inline-block; background: #4285F4; width: 30px; margin-right: 20px;}使用js生成每个柱形图 d3.select('#chart') .s
2021-01-17 00:08:32
293
原创 D3(一)
一、简介D3是什么？D3 的全称是Data-Driven Documents，它是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实它就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。由于JavaScript 文件的后缀名通常为 .js，因此 D3 也被称为 D3.js 。D3 提供了各种简单易用的函数，大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ，所以用 JavaScript 也是可以实现所有功能的，但它在数据可视化方面能大
2021-01-16 14:31:50
621
原创 Material Design(四)
四、动画material design重视动画效果，它反复强调一点：动画不只是装饰，它有含义，能表达元素、界面之间的关系，具备功能上的作用。easing : 动画要贴近真实世界，就要重视easing。物理世界中的运动和变化都是有加速和减速过程的，忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing，要先考虑它在现实世界中的运动规律。水波反馈 : 所有可点击的元素，都应该有这样的反馈效果。通过这个动画，将点击的位置与所操作的元素关联起来，体现了material design动画的功能
2021-01-12 20:04:22
232
原创 Material Design(三)
组件组件是 Material Design 区别于 iOS 等其他设计的重要标识，当我们看到 FAB 时我们就知道这是 Material Design；当我们看到底部栏的独特设计时我们也能知道这是 Material Design。悬浮球 FAB悬浮球可能是 Material Design 中最明显的标志了。一个圆圆的小球固定在屏幕的某个位置，它特别显眼，让你无法忽视它。同时它也是当前页面最重要的主线操作，比如在邮箱的页面中，FAB 很可能是发邮件的按钮。并且一个页面中只有一个 FAB，这让这个小球更
2021-01-12 19:28:21
844
原创 Material Design(二)
一、图标1、系统图标系统图标是我们在构建界面时负责表意功能和信息的图标。通常系统图标尺寸不如产品图标那样大，但是需要让用户第一时间理解它所表达的内容却不简单。系统图标设计简单，现代，友好，每个图标都尽可能简化以表达最基本的特征。字体图标我们也可以把图标变成字体格式来节省空间。同时这么做对于放大缩小都是非常方便的。图标的分类Material Design把图标分为填充图标（Filled）、线性图标（Outlined）、圆角图标（Rounded）、双调图标（Two-Tone）、尖角图标（S
2021-01-10 14:31:20
519
原创 Material Design(一)
Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。目 的为不同平台”提供更一致、更广泛的“外观和感觉”适用平台手机、平板电脑、台式机等重要功能系统字体Roboto的升级版本等...
2021-01-10 13:15:51
6785
原创 Sketch(四)
自定义数据填充sketch 素材库提供内部数据库的内容，如花纹、头像等图片素材，以及人物名称、世界各地名称等素材，方便我们在页面设计时进行模拟数据的填充，但是有时系统所提供的数据不是我们所需要的，我们想要使用自定义的数据(文字，图片等)，我们该如何操作？1、自定义文本内容的填充使用Mac自带的文本编辑功能，设置文本为纯文本格式，控制台 -> 其他 -> 文本编辑设置完成后，将我们想要填充的自定义内容写入，注意，此时一个回车相当于一个文本内容的截取文本写入完成后，保存至自己方便查找的地方
2021-01-06 13:44:46
375
原创 Sketch(三)
一、图层蒙版的使用Sketch里的蒙版可以让你有选择性的显示出图层的一部分。比如说在一个图片上圆形蒙版，那么这张图片就只会显示出圆形内部的内容。1. 轮廓蒙版只借用形状或路径的轮廓对你想处理的图形进行“裁切”处理。在页面中导入需要的图像绘制出想要让那个图像显示的图形将图像置于图形的上方，给图形加入蒙版里面的图像只会在圆的内部显示，超出的部分就会被隐藏掉2. 透明度蒙版不仅借用形状或路径的轮廓对你想处理的图形进行“裁切”处理，还可以操作形状的“渐变属性”和“透明属性”。首先
2021-01-04 15:05:26
296
原创 Sketch(二)
一、Sketch中布尔运算联集 ：合并的结果是会得到两个矢量区域的总和减去顶层：这一项的结果是顶层矢量的区域会从下一层的图形上移去。交集：与形状区域相交的结果是会保留原图形重叠的部分。差集：排除重叠形状的结果是只保留原图形不重叠的部分，它是“与形状区域相交”这一运算的反向二、布尔运算的实际应用效果图：制作过程：根据效果图分析图框，先建立外面的正方形：置入->形状->矩形，画出矩形选框调节矩形框的颜色，样式->填充，有多个填充方式可以选择，在这里我使用的是渲
2021-01-03 22:43:47
486
原创 Sketch
一、Sketch的简介Sketch是什么？Sketch是一款轻量、高效的矢量设计工具，它在矢量编辑基础上，提供了基本的位图样式支持（例如模糊和颜色调节），支持矩形工具、文字工具、布尔运算等功能。你可以把它看做是简化版的Photoshop。但需要注意的是，Sketch不是一款位图编辑器。这就是说，你如果想做的是照片修正、画笔绘图，这款软件就不合适。Sketch的优缺点优点：小清新颜值高 ：界面简洁美好，功能清晰。无悬浮面板，选择一个对象/图层（objects）就会展示对应检查器（inspector
2020-12-31 17:01:18
468
原创 Linux下的Nginx安装与配置
一、Nginx简介什么是Nginx？Nginx是一个http服务器。是一款使用c语言开发高性能的http 服务器/反向代理服务器及电子邮件代理服务器。官方测试nginx能够支撑5万并发链接，并且cpu、内存等资源消耗却非常低，运行非常稳定。它的特点是占有内存少，并发能力强。Nginx的应用场景http服务器。Nginx是一个http服务可以独立提供http服务。可以做网页静态服务器。虚拟主机。可以实现在一台服务器虚拟出多个网站。例如个人网站使用的虚拟主机。反向代理，负载均衡。当网站的访问量达到
2020-12-31 14:05:48
688
原创 Docker的安装及使用
一、Docker的简介Docker是什么？Docker是一个开源的应用容器引擎,可以轻松的为任何应用创建一个轻量级的、可移植的、自给自足的容器。Docker支持将软件编译成一个镜像；然后在镜像中配置好各种软件，将镜像发布出去，其他使用者可以直接使用这个镜像。运行中的这个镜像称为容器，容器启动是非常快速的。Docker的基本组成docker主机(Host)：安装了Docker程序的机器docker客户端(Client)：连接docker主机进行操作docker仓库(Registry)：用来保存
2020-12-29 14:09:15
185
1
原创 Git flow 概念
一、简介Git主要优点有分布式存储 , 本地仓库包含了远程仓库的所有内容 ，安全性高优秀的分支模型 , 创建/合并分支非常的方便方便快速 , 由于代码本地都有存储 , 所以从远程拉取和分支合并时都非常快捷但是当分支过多时 , 又要如何管理这些分支呢 ? 我们团队采用了Git Flow的模式。GitFlow工作流定义了一个围绕项目发布的严格分支模型，它为不同的分支分配了明确的角色，并定义分支之间何时以及如何进行交互。二、分支介绍在Git Flow 中，共有 master 、develop
2020-12-28 13:19:00
114
原创 git的基本概念及命令使用
一、git基本概念Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。1、什么是版本控制？版本控制就是管理更新的历史记录，它给我们提供了一些在软件开发过程中必不可少的功能，例如：记录一款软件添加或更改源代码的过程回滚到特定阶段，恢复误删除的文件合并多人协作的文件等多人协同，文件传输2、版本控制分类集中式分布式SVNGit集中式版本管理 : 将所有的数据集中存放在服务器中，这是有便于统一管理的优点。但是一旦开发者所处的环境不能
2020-12-25 16:49:10
146
原创 macOS手势及快捷键的使用
一、mac系统与window系统的区别macwindowfinder（访达）我的电脑系统偏好设置控制面板废纸篓回收站程序坞任务栏启动台（程序集合）调度中心（多个桌面）iCloud Drive（云盘）AirDrop（隔空投送，互传文件）二、常用快捷键1、文本、文件操作拷贝 command + C粘贴 command + V全选 command + A剪切 command + X剪切文件夹 : 首先 cmd
2020-12-24 13:10:50
321
原创 Linux编辑工具使用
一、编辑工具所有的 Unix系统都会内建 vi 文书编辑器，其他的文书编辑器则不一定会存在。但是目前我们使用比较多的是 vim 编辑器。vim 具有程序编辑的能力，可以主动的以字体颜色辨别语法的正确性，方便程序设计。Vi编辑器是Linux系统下标准的编辑器，它是一种交互类型的正文编辑器，它可以用来创建和修改正文文件。Vim是从 vi 发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富。vi/vim 共分为三种模式：命令模式（Command mode)控制屏幕光标的移动，
2020-12-23 15:43:19
150
原创 Linux基本概念与指令
一 、什么是linuxLinux 本身只是操作系统的内核。内核是使其它程序能够运行的基础。它具有良好的用户界面，Linux的传统界面是基于文本的命令行界面，即shell。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。二、linux的特点开源 免费 稳定支持多个平台具有设备独立性，丰富的网络功能三、linux和windows比较目前国内Linux更多的是应用于服务器上，而桌面操作系统更多使用的是 Windows。主要区别如下：比较wi
2020-12-22 15:42:32
275
原创 使用express连接mongodb数据库
前提：电脑中安装了node和mongodb一、准备工作1、要在全局环境下安装express以及它的生成器npm install express -gnpm install -g express-generator2、创建项目npm init -yexpress -e project（e表示模板引擎 是ejs project代表项目的名称）3、安装依赖包以及mongoosenpm installnpm install mongoose --save4、在启动项目之前可以修改两
2020-10-30 10:30:06
4216
2
原创 移动端遇到的兼容问题或者不好的默认行为
html5在低版本浏览器如何兼容（ie8）?解决：引入html5shiv.js只要做移动端的项目，必须要加入meta强制让文档与设备的宽度保持1：1,对页面设置不能进行缩放： <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 移动端中的图片会出现模糊的现象由于手机分辨率小，如果按照..
2020-10-28 13:30:08
352
1
原创 Postman
一、Postman简介Postman是用于API测试的工具。在我们平时开发中，特别是需要与接口打交道时，无论是写接口还是用接口，拿到接口后肯定都得提前测试一下。Postman是一种网页调试与发送网页http请求的chrome插件。我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口。在Postman中，请求可以保存，也就类似于文件。二、Postman安装...
2020-10-26 16:26:04
257
原创 NodeJs(三)
一、module.exports 和 exports的区别对于希望被其他成员访问的成员，我们需要把这些公开的成员都挂载到exports借口对象中就可以导出多个成员导出多个成员，必须在对象中：
2020-10-12 16:03:21
97
原创 NodeJs(二)
一、包管理工具1、npmnpm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）。在向node添加任何包之前，需要创建一个文件: package.json。它包含了应用或程序最基本的信息，比如名字、版本、作者、反馈的地址、依赖关系等等。所有node都应有这个json文件。使用npm init来初始化。npm init2、为什么我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScrip
2020-09-28 10:10:34
99
原创 省市区三级联动
这是一个省市区三级联动的案例。重点：var option = new Option(json.name,json.code,false,false);new Option(“文本”,“值”,true,true).后面两个true分别表示默认被选中和有效!或者jq中使用：$("#areaId").val(areaId);以上两种情况为select加默认值，第一种new Option 第二种直接value赋值<!DOCTYPE html><html lang="en">
2020-09-25 14:53:18
1562
原创 移动端头部导航栏
实现样式简述：书写移动端头部样式的时候，可以将头部包裹在一个大盒子里面。不要给大盒子设置padding。给左右盒子分别设置，左边的盒子设置宽度，左右的padding。右边的盒子设置宽高，如果是占满剩余盒子的话，可以设置为flex:1。用大盒子的高度，减去右边盒子的高度除以2就是margin，设置margin把盒子挤到中间。中间的文本可以设置line-height让他们处于居中。代码如下：这里的rem根据的html的font-size大小是37.5px<div class="top">
2020-09-24 19:28:35
1471
原创 Chrome浏览器的开发者工具（一）
Chrome浏览器的开发者工具面板介绍一、 Chrome浏览器开发者工具的打开方式：<1>、双指轻点（鼠标右键）----> 检查<2>、打开浏览器右上角用户设置下拉菜单 ----> 更多工具 ----> 开发者工具<3>、快捷键：[Mac]. command+option+I / fn+f12 [Windows]. ctrl+shift+I二、开发者工具的工具栏中常用面板介绍先来看这张图最上头的一行是一
2020-09-11 14:53:43
2210
原创 NodeJs (一)
一、Node是什么1、 Node是一个基于Chrome V8引擎的JavaScript代码运行环境，V8引擎执行Javascript的速度非常快，性能非常好。 运行环境： 1. 浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境 2. Node（软件）能够运行JavaScript代码，Node就是JavaScript代码的运行环境2、 浏览器端JS和Node端JS的区别相同点：都使用了Javascript这门语言来开发。不同点：
2020-09-10 22:29:15
120
原创 chrome 断点调试（二）
断点调试断点调试代码行断点当我们知道需要调试的代码的确切位置的时候，使用代码行断点DevTools 设置代码行断点：点击 Sources 选项卡。打开包含您想要调试的代码行的文件。找到该代码行。点击左边的行号，这样一个蓝色图标就显示在行号上，表明该代码行设置好断点了。当然你也可以在代码中使用 debugger 来设置代码行断点，效果和在 DevTools 中设置是一样的：console.log(‘a’);console.log(‘b’);debugger;console.log(‘
2020-08-31 13:55:12
1674
原创 mongoDB的增删改查(二)
mongoDB一、mongoDB的介绍>MongoDB是一个NoSQL的数据库，是一款文档型数据库。 **数据库**指的就是一个存储数据的仓库 数据库可以使我们完成对数据的持久化的操作>MongoDB数据库中存储的数据的基本单位就是文档， MongoDB中存储的就是文档，所谓文档其实就是一个“JSON”>MongoDB数据库使用的是JavaScript进行操作的，在MongoDB含有一个对ES标准实现的引擎>在MongoDB中所有ES中的语法中都可以使用二、
2020-07-30 12:34:15
103
原创 window版本MongoDB的安装（一）
mongoDB的安装一、windows安装MongoDB> 下载安装包并且安装> 配置环境变量（bin目录下） --C:\Program Files\MongoDB\Server\3.2\bin> 在c盘根目录 -- 创建一个文件夹 data -- 在data中创建一个文件夹db（如果不在c盘创建db时，启动时输入：mongod --dbpath 数据库路径 --port 端口号 ） 端口号默认：27017，尽量不要随意更改。
2020-07-30 08:40:55
190
原创 原生js实现小米中的轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { .
2020-06-23 15:44:15
309
原创 使用js实现二级菜单栏切换
js实现二级菜单栏切换一、一级菜单栏和二级菜单在同一个盒子内。当鼠标经过水果盒子时，让下面的内容显示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
2020-06-23 14:48:19
5770
原创 css设置背景半透明，文字不透明效果
设置背景半透明，文字不透明效果一、常见的错误做法最常见的做法就是：1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的，严重影响视觉效果。2.设置background-color:rgba(),这种方式只能设置背景颜色的透明度。二、正确做法有两种方法，原理相同：都是要增加一个新盒子，定位到它的上面去。1.利用伪元素::before,我们通过给伪元素添加透明背景并且定位到元素中。 .demo { width: 300px;
2020-06-21 21:39:38
4654
原创 什么是正则表达式
什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在 JS中，正则表达式也 是对象。作用：1.用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字 母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。2.常用于过滤掉页面内容中的一 些敏感词(替换)3.从字符串中获取我们想要的特定部分(提取)等 。...
2020-04-28 20:50:08
795
原创 JS高级实现Tab栏切换，自定义内容与增加tab项
项目实现图一，功能需求：点击 tab栏,可以切换效果.点击 + 号, 可以添加 tab 项和内容项.点击 x 号, 可以删除当前的tab项和内容项.双击tab项文字或者内容项文字可以修改里面的文字内容二，案例准备获取到标题元素获取到内容元素获取到删除的小按钮 x号新建js文件,定义类,添加需要的属性方法(切换,删除,增加,修改)时刻注意this的指向问题三，代码实...
2020-04-20 10:24:29
1585
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人