- 博客(32)
- 收藏
- 关注
原创 css之伪类和伪元素
CSS 为什么要引入伪类和伪元素css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。伪类: 用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。例如 a 标签的 :hover 用来描述用户鼠标悬停时的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于 dom 树无法描述的状态下才能为元素添加样式,所以将其称为伪类。伪元素: 用于创建一
2020-12-04 11:12:28
197
原创 Vue组件之name属性
我们在注册Vue组件时会遇到给组件命名,但好像我又没怎么使用过这个属性。export default { name:'xxx'}看了下官网给 name 属性做出的解释这里总结了几个在注册组件时 name 属性的用法:1、当项目使用 keep-alive 时,可搭配组件 name 进行缓存过滤。export default { name:'Demo'},mounted(){ this.getInfo()},methods:{ getInfo(){ con.
2020-12-03 11:33:37
6785
原创 如何使用 Eslint 规范前端代码
为什么需要 EslintJavaScript 的动态语言类型带来了一些问题,比如:运行时常见的 undefined、null 报错,代码随意的加减分号、换行、空格引起的视觉混乱。在团队开发中,就需要加以约束。核心插件: Eslint + standradEslint 是什么ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。与它类似的项目有 JSLint、JSHint。Eslint 的安装与配置
2020-11-19 10:09:15
440
原创 JS 手撕 bind
先说说 bind 的作用bind() 方法可以改变函数的 this 指向,但它并不会像 call 或者 apply 方法那样立即执行这个函数,而是返回一个新的函数,外部调用这个函数才会执行。bind 方法返回的函数不仅仅可以作为普通函数调用也可以作为一个构造函数被使用。// obj 就是函数的执行作用域 是一个 Object 类型 Function.prototype._bind = function (obj) { // 判断调用 _bind 方法的是否为函数 if(ty
2020-09-12 20:15:04
178
原创 JS 纯函数探索
什么是纯函数?纯函数是指不依赖于,且不改变它作用域之外的变量。纯函数同样的输入,一定会得到同样的输出。作为纯函数需要遵守的规则1、不得修改传入引用类型2、不可以调用 Data.now() 或者 Math.random() 等不纯的方法3、不能调用系统 I/O 的 API4、不能依赖外部变量纯函数的作用1、利用纯函数可以进行单元测试,因为纯函数不需要考虑上下文,只需要考虑输入输出2、纯函数可以避免不小心修改全局变量而造成的 Bug3、改变纯函数的执行次序不会对系统造成影响,纯函数的操作
2020-09-12 16:18:07
91
原创 函数节流与函数防抖
概念函数节流:指定时间间隔只会执行一次任务函数防抖:任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行函数节流这里以判断页面是否滚动到底部为例,普通的做法就是监听 window 对象的 scroll 事件,然后在函数体中写入判断是否滚动到底部的逻辑:$(window).on('scroll', function () { // 判断是否滚动到底部的逻辑 let pageHeight = $('body').height(), scrollTop = $
2020-08-29 14:11:52
148
原创 MongoDB 之文档间的关系
一对一在 MongoDB 中可以通过内嵌模式来体现一对一的关系db.oneToOne.insert([ { name: "TOM", friend: { name: "Jack" } }])一对多 / 多对一 (使用最多)可以通过内嵌文档来映射一对多的关系db.users.insert([ { username: "swk" },
2020-08-27 15:20:51
146
原创 接口实战开发
教学管理学生模块接口开发使用 express创建服务// 引入 express 模块const express = require('express')// 创建 app 对象,通过 express() // 底层原理是 http 模块的 creteServerconst app = express()// 创建路由app.get('/', (req, res) => { res.send('hello')})// 启动服务监听端口app.listen(3000
2020-08-27 12:57:01
154
原创 接口相关知识
需求随着移动互联网的发展,客户端层出不穷,微信端、WEB 端、APP 等,但后端业务逻辑基本上是一致的,所以就有了接口。什么是接口接口就是一个文件(js/json/php 等),**主要响应 JSON 数据(操作方便,体积小)**或 XML 数据。// 只要响应 json 数据,所有语言都可以操作,例如 iOS/Android 等{ meta: { status: 状态码(200/201/301/404), msg: '提示信息' } da
2020-08-25 18:05:33
196
原创 进军 mongoose
mongoose 简介在实战中肯定不会像刚开始学习 MongoDB 一样在 DOS 中敲命令,所以我们需要借助mongoose 来操作数据库。mongoose 是 node 中提供操作 MongoDB 的模块,可以通过 node 语法实现 MongoDB 数据库的增删改查。下载 mongoosenpm i mongoosemongoose 中的两个重要概念schema作用:用来约束 MongoDB 文档数据(哪些字段必须,哪些字段可选)链接: mongoose 中文文档model一
2020-08-23 23:29:19
129
原创 MongoDB 学习笔记
数据库简介什么是数据库?数据库是存放数据的仓库。它的存储空间很大,可以存放百万条、千万条、上亿条数据。但是数据库并不是随意地将数据进行存放,是有一定规律的,否则查询的效率会很低。数据库的种类:关系型:Oracle、MySQL、SQlite、SQL Server 等非关系型(Not Only SQL):MongoDB(文档)、Redis/Memcache(内存)关系型数据库和非关系型数据库软件的区别:相同点:都是数据库软件,用来存放项目数据不同点:关系型:1、遵守 SQL 标准。2
2020-08-23 18:32:59
422
原创 如何上传一个项目文件到Git
github是一个基于git的代码托管平台,其中不乏 Linux 发明者 Torvalds 这样的顶级黑客。所以会熟练运用 github 是一个程序员基本的技能。那么如何使用 Git 上传一个项目文件呢?这个教程的前提是已经注册好了 github 账号,并且已经在电脑上下载好了 github 工具。1、首先进入 github 官网,新建一个仓库用来存放项目。2、复制仓库链接比如我创建了一个 chatApp 仓库 (https://github.com/chenxiaozi/chatApp.git
2020-08-17 23:33:12
490
原创 React-Redux 的用法
React-Redux 是一个为 React 封装的专用的库。UI 组件React-Redux 将所有组件分成两大类:UI 组件(presentational component)和容器组件(container component)。UI 组件的特征:只负责 UI 的呈现,不带有任何业务逻辑没有状态(即不使用this.state这个变量)所有数据都由参数(this.props)提供不使用任何 Redux 的 APIconst Title = value => <h1>
2020-08-11 19:27:06
154
原创 Redux 中间件与异步操作
Action 发出以后,Reducer 立即算出 State,这叫做同步;Action 发出以后,过一段时间再执行 Reducer,这就是异步。要想 Reducer 在异步操作结束后自动执行,就需要用到新的工具:中间件(middleware)。中间件的概念如果想要添加新的功能,那么在哪个环节添加最合适?Reducer:纯函数,只承担计算 State 的功能,不合适承担其他功能,也承担不了,因为理论上,纯函数不能进行读写操作。View:与 State 一一对应,可以看作 State 的视觉层,也.
2020-08-11 12:04:34
199
原创 Redux 基本用法
React 只是 DOM 的一个抽象层,不涉及代码结构和组件间的通信。所以无法用 React 写大型应用,为了解决这个问题,引出了 Redux 架构。有可能不需要 Redux不需要使用 Redux 的情况:用户的使用方式非常简单用户之间没有协作不需要与服务器大量交互,也没有使用 WebSocket视图层(View)只从单一来源获取数据Redux 的适用场景:多交互、多数据源用户的使用方式复杂不同身份的用户有不同的使用方式(比如普通用户和管理员)多个用户之间可以协作与服务器大量.
2020-08-09 16:45:13
655
原创 art-template 模板继承和子模板
安装:npm install --save art-template// 在浏览器中下载时不需要安装npm install --save express-art-template配置:// 第一个参数用来配置视图的后缀名,这里是 art ,则存储在 views 目录中的模板文件必须是 xxx.art// app.engine('art', require('express-art-template'))// 这里把 art 改为 htmlapp.engine('html', requir
2020-07-24 15:50:43
564
原创 Express 使用学习
原生的 http 在某些方面表现不足以应对我们的开发需求,所以我们就需要使用框架来加快我们的开发效率。框架的目的就是提高效率,让我们的代码高度统一。在 node 中有很多 Web 开发框架使用 Express0.安装:npm install express --save1.引包:var express = require('express')2. 创建你的服务器应用程序,也就是原来的 http.createServer()var app = express()// 在 Express 中.
2020-07-24 15:26:51
162
原创 NodeJS 知识总结
NodeJs 是什么?Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。NodeJs 特点在 node 中采用EcmaScript进行编码,没有 DOM 和 BOM在 node 中没有 windownode 中的模块化在node中,模块有三种具名的核心模块 例如:fs、http、os用户自己编写的
2020-07-21 22:00:18
501
原创 Ajax 学习笔记
什么是 Ajax?Ajax 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下使用 Ajax 发送 GET 请求的步骤// 1、创建一个异步对象var xmlhttp = new XMLHttpRequest()// 2、设置请求方式和请求地址// open(method, url, async)// method:请求的类型:GET 还是 POST// url:服务器(文件)位置// async:true(异步).
2020-07-19 15:55:22
220
原创 PHP 基础学习
PHP基础语法1、后端编写的代码必须放到服务器中对应的文件夹(D:\wamp64\www),通过服务器运行。2、通过 ip 地址找到服务器对应的文件夹,然后再找到对应的文件运行。3、文件命名不可以包含中文或者空格。PHP 基本结构:<?php?>PHP基本语法:<?php// 1、PHP 中的注释与 JS 中一样// 2、定义变量 $num = 10;// 3、PHP中打印内容// echo 不可以打印数组和对象 echo $n
2020-07-17 15:20:04
153
原创 React基础学习
React 构建用户界面的 JavaScript 库,主要用于构建 UI 界面。Instagram,2013 年开源。特点1、声明式的设计2、高效,采用虚拟 DOM 来实现 DOM 的渲染,最大限度的减少 DOM 的操作。3、灵活,跟其它库灵活搭配使用。4、JSX,俗称 JS 里面写 HTML, JaxaScript 语法的扩展。5、组件化,模块化。代码容易复用,大型项目非常喜欢 react。6、单向数据流,没有实现数据的双向绑定。数据 -> 视图 -> 事件 -> 数据.
2020-07-16 15:41:01
198
原创 CSS复习
CSS基础css:层叠样式表作用:给标签添加浏览器里的显示样式。根据CSS书写位置不同:行内式、内嵌式、外链式。内嵌式书写位置:写在head标签里面一对style标签。<style type="text/css"> 选择器 { k: v; k: v; }</style>样式有多个属性叠加而成:文字、文本属...
2020-05-09 17:08:08
189
原创 HTML复习
互联网原理:上网就是请求数据服务器:存储我们的数据。浏览器:发起和接收数据的客户端。http协议:超文本传输协议。请求和响应。HTML基础HTML:制作网页纯文本文件:只保存文字内容,不保存样式。HTML、css、js都是纯文本文件HTML基本骨架<html lang="en"><head> <meta charset="UTF...
2020-05-07 14:20:11
161
原创 浏览器兼容
当我们需要将HTML和CSS在不同的浏览器上渲染时,就会遇到兼容性问题。对于一些特殊的HTML和CSS,要根据浏览器的不同,编写不同的代码,以达到在不同浏览器上的显示效果一致。这就要用到hack技术。HTML的hack根据不同的浏览器写不同的HTML代码,需要用到一个辅助代码,即hack符号IE浏览器存在很多兼容问题,IE给我们留下了一个接口,规定的IE版本浏览器认识里面是HTML结构,其他...
2020-04-22 13:42:22
210
原创 css实现居中效果
标准流中的居中文字居中水平方向text-align: center;竖直方向单行文本居中:让文字的行高等于盒子高。width: 300pxheight: 40px;text-align: center;line-height: 40px;多行文本居中:高度自适应,用内容自动撑开高度,用内边距上下相等撑开空白区域。width: 300px;padding: 20...
2020-04-20 14:35:19
232
原创 使用react-markdown来解析markdown语法
什么是 react-markdown 组件?它是一个基于React的Markdown 编辑器组件。可以对代码进行高亮显示。链接: github网址.react-markdown的安装 yarn add react-markdown引入import ReactMarkdown from 'react-markdown'声明一个markdown变量 let markd...
2020-01-29 20:14:36
4608
原创 JS版剑指Offer
这篇是整理了一部分刷的算法题的大概解题思路,怕自己以后忘记,后续还会更新。其中解题思路也会在代码中的注释有体现二维数组中的查找在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。//因为每一行从左到右递增,从上到下递增,所以右上角的数是整个二维数组最大...
2020-01-15 13:47:31
123
原创 区分数据库中的 char、varchar、nchar、nvarchar
-在写数据库的时候字符串类型的数据该怎么定义?-了解了他们的区别就好办了!char、varchar、nchar、nvarchar的说明:char ( n ) :固定长度,非Unicode字符数据。n 用于定义字符串大小(以字节为单位),并且它必须为 1 到 8,000 之间的值 。varchar ( n | max ) :可变长度,非Unicode字符数据。 使用 n 定义字符串大小(...
2019-12-22 11:07:38
775
原创 js预解析 GO 和 AO 的创建赋值过程
js是一种解释性脚本语言,执行过程会先扫描一下整体语法语句,如果存在逻辑错误或者语法错误,那么直接报错,程序停止执行,没有错误的话,开始从上到下解释一行执行一行。预解析会通篇扫描跳过执行语句,查询关键字处理声明语句,同样也是按从上到下按顺序进行的。AO activation object (活跃对象,函数上下文)// 计算机执行到test()函数时,在执行的前一刻会创建一个ao对象funct...
2019-12-17 16:08:25
263
原创 圣杯双飞翼布局
圣杯双飞翼布局是什么???他们都是典型的三栏式布局,并且实现的效果都是一致的:两侧宽度固定,中间宽度自适应中间栏放在文档流前面三栏全部浮动但是他们在解决中间栏 div 的内容不被遮挡问题上是有所差异。在看布局之前我们还要了解一个内容就是盒子模型盒子模型有两种:W3C盒子模型padding和border不被包含在定义的width和height之内,Element width...
2019-11-28 21:47:05
145
原创 用HTML和CSS实现一个简单的登录界面
作为一个有审美的程序猿,我希望自己写的页面能够漂漂亮亮的。今天就分享一个简单又好看的登录界面,只需要一会会儿啦!先给大家看看成品的样子简单介绍一下这个登录页面的效果。当我们把鼠标聚焦到两个输入框时,输入框的长度会变大,并且边框的颜色会改变。当鼠标移动到提交按钮的范围内,按钮会给内部填充颜色。话不多说,我们现在就步入正题:首先搭建好HTML框架,在里面将自己要在页面上显示的模块都实现...
2019-11-20 22:20:14
16262
4
原创 TCP协议保证通信可靠性的手段
在看HTTP协议时了解到了TCP协议,当然与HTTP协议关系密切的协议还有IP、DNS协议。这里就重点说说TCP协议。确保可靠性的TCP协议TCP(传输控制协议)协议位于传输层(提供处于网络连接中的两台计算机之间的数据传输),它可以将大块数据分割成报文段为单位的数据包进行管理,并且提供可靠的传输服务。可靠的传输服务是指,能够把数据准确可靠地传给对方我们最熟悉的就是三次握手策略。我们来简单看...
2019-11-14 18:05:14
869
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人