- 博客(39)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 JS运动开发框架
一、为什么要学习运动框架在我们进行web页面开发的过程中，如何与用户进行友好、有趣的交互，是我们必须考虑的问题。 比如：导航条中滑动的动画特效、点击加入购物车按钮通过抛物线加入右侧购物车的动画特效，当然还有一些网页游戏的开发：微信打飞机、打砖块等。 那么我们要实现这些好玩又有趣的动画，就需要我们对动画的基础【运动】炉火纯青，那么这个部分的学习，我们会对运动展开学习，并且通过大量的实例来帮助大家完成这个阶段的学习。二、运动原理Js运动，本质来说，就是让 web 上 DOM 元素动起来。而想要 DOM 动
2020-07-17 20:17:15
799
原创 跨浏览器事件兼容性问题
浏览器兼容性问题Event浏览器ie8和其他浏览器eventfirefoxwindow.eventie9及以上/chrome/opera/safarievent全部浏览器even || window.event获取滚动条滚动的距离TYPEASCIIHTMLchrome认为浏览器的滚动条是body的document.body.scrollTopfirefox/ie认为浏览器的滚动条是html的document.doc
2020-05-26 13:15:07
354
1
原创 MongoDB字段创建验证
前期准备const mongoose = require('mongoose')//创建集合结构（规则） options集合的结构（规则）const Schema = mongoose.Schema//modalName集合名称schema集合结构//const Model = mongoose.model(modelName, schema) //连接数据库mongoose.connect('mongodb://localhost/test', { useNewUrlParser:
2020-08-26 18:43:46
420
原创 Nodejs用户头像上传接口及组件开发
官网multer官网安装multer安装npm install --save multer配置中用到的模块安装const fs = require(‘fs’)const path = require(‘path’)配置multerlet upload = multer({ storage: multer.diskStorage({ // 设置文件存储位置 destination: function(req, file, cb) { let date
2020-08-17 21:21:17
712
原创 Nodejs中token的jwt加密与加密校验
Token什么是tokenToken是服务端⽣成的⼀串字符串，作为客户端进⾏请求的⼀个令牌。当⽤户登录后，服务器⽣成⼀个Token返回给客户端，之后客户端只需带上这个Token来请求数据即可，⽆需每次都输⼊⽤户名和密码来鉴权。token的组成Header{type:“jwt”,alg:“HS256”}Playloadiss (issuer)：签发⼈exp (expiration time)：过期时间sub (subject)：主题aud (audience)：受众n
2020-08-17 15:05:43
954
原创 Nodejs的md5加密简单实现
constant.jsmodule.exports = { PWD_SALT:'xd_node',}index.jsconst crypto = require('crypto')function md5(s){ //注意参数需要为string类型，否则会报错 return crypto.createHash('md5').update(String(s)).digest('hex');}调用const PWD_SALT = require('../util
2020-08-17 10:46:07
988
原创 Nodejs框架express常用中间件
登陆拦截//登录拦截app.use((req, res, next) => { let isLogin = true if (isLogin) { next() } else { res.send('你需要登录后才可访问') }})网站维护app.use((req, res, next) => { res.send('⽹站正在维护中')})自定义404页面app.use((req, res) =>
2020-08-09 18:24:35
400
原创 MongoDB常用数据库操作之查询、更新、删除⽂档
查询文档查询所有//查询全部Model.find().then(res=>{ console.log(res)})条件查询Model.find(条件) //根据条件查询⽂档，条件为空则查询所有⽂档， 返回数组Model.findOne(条件) //默认返回当前集合中的第⼀条⽂档 返回对象Model.find({name:'6'}).then(res => { console.log(res)})Model.findOne({name:'2'}).then(res =&
2020-08-07 23:22:59
245
原创 MongoDB常用数据库操作之创建集合、文档与导入文件数据
创建集合//创建集合结构const userSchema = new Schema({ name:String, city:String, sex:Number})//创建集合const Model = mongoose.model('user',userSchema)创建文档//方法1创建文档const doc=new Model({ name:'1', city:'1', sex:'1'})讲文档插入数据库中doc.save()//方法2(推荐)Mode
2020-08-07 23:15:13
363
原创 Nodejs连接Mysql实现增删改查接口demo
Demo目录query ./dbconfig.jsconst mysql = require('mysql')const dbconfig = require('./dbconfig')const pool = mysql.createPool(dbconfig);//数据库连接池function query(sql,params) { return new Promise((resolve, reject) => { pool.getConnection((
2020-08-07 11:04:22
888
原创 前端最新面试题网络基础知识篇（持续更新中）
1.http工作原理2.http请求方法3.http状态码下面是常见的HTTP状态码：200 - 请求成功301 - 资源（网页等）被永久转移到其它URL404 - 请求的资源（网页等）不存在500 - 内部服务器错误详细状态码解读4.跨域的几种方式原理跨域最完整实现原理5.http2新特性http2新特性...
2020-08-04 17:48:39
222
原创 前端最新面试题css篇（持续更新中）
1.css盒模型Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。2.实现三栏布局的六种方式六种布局方式：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局转载三栏布局六种方式3.BFC是什么，作用？BFC(Block formatting context)直译为"块级格式化上下文"
2020-08-04 17:33:44
187
原创 Node利用Cors解决跨域问题
Node利用Cors解决跨域问题什么是跨域浏览器同源策略：协议+域名+端⼝三者相同就是同源。 http://www.baidu.com/a.jshttp://www.baidu.com/b.js https://www.baidu.com/a.jshttp://www.baidu.com/a.js 协议不同 https://www.baidu.com:8080/a.jshttps://www.baidu.com/a.js 端⼝不同 https://www.baidu.com:8080/a.js
2020-08-04 13:18:08
596
原创 NodeJs+ES6实现增删改查路由与接口
NodeJs实现增删改查路由与接口处理数据的module.exports={ getUserList(){ return[ { id:1, name:'a同学', city:'a城市' }, { id:2, name:'b同学', city:'b城市' }, { id:3, name:'c同学', city:'c城市' }] }, addUser(userObj){ console.log(userObj);
2020-08-04 12:30:03
316
转载 2019秋招｜已拿百度、头条等5家offer的前端大佬秋招总结
作者：一个offer就好啦链接：https://www.nowcoder.com/discuss/122092来源：牛客网写这篇面经之前，先 % 一下我们的叶神，没有他可能我想要拿这些offer也是天方夜谭了…感谢牛客网和各位牛友给到我的面经和建议话不多说，开始正题，内容可能更偏大方向一点…具体面试内容会少一点个人情况四川大学软件工程本科。实习经历：从2月到现在一直在实习…工作参与度非常高…有写出完整上线且收益可观的产品技术栈：vue-cli搭建的全家桶目前拿到的offer：百度、头条、
2020-08-02 23:19:24
369
原创 箭头函数省略语法
箭头函数省略语法省略规则1.如果只有一个参数，()可以省略2.如果只有一个return,{}可以省略实例无参数省略前window.onload=function(){alert("666")}省略后window.onload=()=>{alert("666")}两个参数省略前window.onload=function(a,b){alert(a+b)}省略后window.onload=(a,b)=>{alert("666")}省略前let
2020-08-02 16:49:49
894
原创 git常用命令及其图解
Git常用命令及图解本地操作命令git add命令git add 文件名将工作区的某个文件添加到暂存区git add -u添加所有被tracked文件中被修改或删除的文件信息到暂存区，不处理untracked的文件git add -A添加所有被tracked文件中被修改或删除的文件信息到暂存区，包括untracked的文件git add *将当前工作区的所有文件都加入暂存区git add -i进入交互界面模式，按需添加文件到缓存区git s
2020-07-24 13:37:49
548
原创 gulp的安装使用与实例
gulp安装与使用简介gulp是一个基于Node.js的前端自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的。官网：https://gulpjs.com/中文官网：https://www.gulpjs.com.cn/docs/安装安装前先在控制台输入node -v确认已经安装Node.jsNode.js版本可能会和guip版本不兼容，此时最好的办法就是用nvmnvm官方网址全局安装：目前gulp的最新版本是4.1.0，3.9.1是目前比
2020-07-21 17:45:35
385
原创 Postcss的常用插件介绍以及安装使用
Postcss的常用插件配置以及安装使用AutoprefixerAutoprefixer可以解析css文件并且添加浏览器前缀到CSS规则里安装cnpm i autoprefixer 配置const autoprefixer = require('autoprefixer');module.exports = { plugins: [ autoprefixer({ //设置百分之100的浏览器都适配 browsers: [">
2020-07-20 20:38:22
1047
原创 css预处理器------less笔记
less笔记变量、插值编译前：@number: 100px;@key :margin;@i: 2;.box@{i} { width: @number; height: @number; @{key}: auto;}编译后：.box2 { width: 100px; height: 100px; margin: auto}作用域编译前：@number: 100px;.box3 { height: @number;
2020-07-20 01:30:54
118
原创 css预处理器------Sass笔记
Sass笔记变量、插值编译前：$number:100px;$key:margin;$i:2;.box#{$i} { width: $number; height: $number; #{$key}: auto;}编译后：.box2 { width: 100px; height: 100px; margin: auto;}作用域tips:作用域是有顺序的编译前：$number:100px;.box3 { height
2020-07-20 00:52:17
136
原创 运动与游戏开发12------banner图案例
banner图完美框架实现banner图缓冲效果<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0px; padding: 0px} #ul1 li{list-style: none; width: 200px; height: 20
2020-07-19 16:07:04
148
原创 运动与游戏开发11------九宫格放大图案例
九宫格放大图<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0px; padding: 0px} #ul1 li{list-style: none; width: 100px; height: 100px; border: 1px so
2020-07-19 16:02:26
272
原创 运动与游戏开发10------完美运动框架
完美运动框架<!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
2020-07-18 17:37:44
169
原创 运动与游戏开发9------圆周运动案例
圆周运动案例<!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" /> &
2020-07-18 17:06:47
228
原创 运动与游戏开发8------链式运动案例
链式运动案例<!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"
2020-07-18 15:13:00
167
原创 运动与游戏开发7------多物体多样式案例
多物体多样式案例<!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=edg
2020-07-17 23:04:38
211
原创 运动与游戏开发6------多物体淡入淡出案例
多物体淡入淡出案例中间变量:多个物体在进行透明度变化的时候，公用的是一个中间变量。任何的变量在多物体运动中，都不能共用同一个中间变量。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
2020-07-17 21:45:40
150
原创 运动与游戏开发5------多物体运动案例
多物体运动案例与单物体运动不同的是，多物体运动要让每一个运动的物体，独立拥有自己的定时器。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-e
2020-07-17 21:43:08
206
原创 运动与游戏开发4------缓冲菜单案例
缓冲菜单案例<!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"
2020-07-17 21:03:48
126
原创 运动与游戏开发3------缓冲运动案例
变速运动（缓冲运动）案例<!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
2020-07-17 20:15:57
166
原创 运动与游戏开发2------图片淡入淡出案例
淡入淡出案例<!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"
2020-07-17 20:11:13
156
原创 运动与游戏开发1------分享到菜单案例
分享到菜单<!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"/
2020-07-17 20:05:13
149
原创 继承与多态笔记
继承与多态继承和多态同一件事情的两种完全不同的侧重：它们只会在子一级生效，并不会影响父一级构造函数的方法。继承：侧重是从父一级构造函数，继承到的属性和方法。多态：侧重于子一级，自己重写和新增的属性和方法。继承<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="widt
2020-07-15 17:32:04
164
原创 JS数组遍历的常用方式
JS数组遍历的常用方式<!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=
2020-07-11 16:11:19
105
原创 跨浏览器样式兼容性问题
跨浏览器样式兼容性问题设置透明度浏览器类型除IE外的浏览器opacity: 0.5IEfilter:alpha(opacity=50)
2020-07-08 15:31:13
111
原创 鼠标拖拽实现
<!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"/>
2020-07-08 14:22:29
271
原创 实现鼠标提示框
实现鼠标提示框<!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
2020-07-08 13:41:42
268
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人