- 博客(74)
- 收藏
- 关注
RSS订阅原创 CSS3 滤镜属性(filter)
滤镜属性 定义元素(通常为图片)的可视效果 img{filter:...;}属性：none 默认值,没有属性blur 设置图片的模糊度,单位px,不接受百分比,默认为0 filter:blur(10px);brightnesscontrastdrop-shadowgrayscale 将图片转换为灰度图片,属性值为百分比,默认为0 filter:grayscale(100%);hue-rotateinvertopacitysaturatesepiaurl...
2020-12-16 10:01:58
523
原创 React-7- react-redux
react-redux下载 npm install react-redux使用 1.创建store文件夹 2.新建index.js文件,引入redux,创建仓库,导入reducer.js 新建reducer.js文件,创建纯函数并导出store/index.js import {createStore,combineReducers} from 'redux' import data from './reducer' export default createStore(comb
2020-07-21 11:38:50
200
原创 React-6-Redux
Redux Redux 是一个独立的JavaScript 状态管理库， 非React内容之一安装 npm i redux核心概念 store 为了对 state,reducer, action,进行统一的管理和维护,我们需要创建一个Store对象(仓库)创建仓库import {createStore} from 'reduxlet store = createStore()console.log(store)// store对象提供的函数/* dispatch: func
2020-07-20 11:34:16
192
原创 React-5-路由
1.路由 当应用变得复杂的时候，就需要分块的进行处理和展示 传统模式下，我们是把整个应用分成了多个页面，然后通过 URL 进行连接。 但是这种方式也有一些问题，每次切换页面都需要重新发送所有请求和渲染整个页面，不止性能上会有影响，同时也会导致整个JS重新执行,丢失状态2.SPA 单页面应用，整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容 优点: 1.减少请求和渲染和页面跳转产生的等待与空白,用户体验更好,页面切换更快 2.重
2020-07-14 11:58:06
260
原创 React-4-函数式组件
函数式组件 函数式组件中，没有 state 和 生命周期，所以又被称为 无状态组件 在react16.7(beta测试)版本中，函数组件一直当作纯渲染组件来使用 1.组件的第0个参数,是props,接收父级传递过来的信息 2.组件中的 return(必须写) 定义该组件要渲染的内容 3.没有生命周期(只在类式组件中),没有this,没有stateimport React from 'react';function App(){ return <Child info='hhh'/
2020-07-09 20:15:24
242
原创 React-3-类式组件
组件 对具有一定独立功能的数据和方法的封装,对外暴露接口,有利于代码功能的复用1.组件的定义和渲染函数组件function assembly(){ return <div>组件</div>}const assembly = <Assembly/>;ReactDOM.render( assembly, document.getElementById('root')); 1.组件类必须继承 React.Component 2.组件类必须有ren
2020-07-03 18:20:18
3404
原创 React-2-项目的创建
Create React App Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目1.安装 npm安装 : npm i -g create-react-app yarn安装 : yarn global add create-react-app2.创建项目 安装完成以后，即可使用 create-react-app 项目名称(英文小写) 命令 npx创建项目：npx create-react-app 项目名称3.启
2020-06-30 17:29:26
4636
原创 React-1-入门
React1.React是什么 React是一个用于构建用户界面的JavaScript库2.React的使用2-1React的引入<!-- 加载React --> <!--React.js提供了核心代码--> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <!-- ReactDom提供与浏览器交互的Dom功能,
2020-06-29 17:28:18
191
原创 微信小程序5-获取用户信息
获取用户信息1.button button的open-type属性有一个getUserInfo属性 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 bindgetuserinfo属性绑定一个自定义函数,用户信息作为参数传入html<button open-type="getUserInfo" bindgetuserinfo="getuserinfo"></button><!-- 只有当open-type设置为getUserInfo时有效 -
2020-06-26 16:52:57
438
原创 微信小程序4-mpvue中获取用户地址
获取地址1.获取当前的地理位置、速度wx.getLocation({ //wgs84用于获取GPS坐标 //gcj02用于获取wx.openLocation坐标 //默认wgs84 type:'wgs84/gcj02', //开启高精度定位,默认false isHighAccuracy:true, //成功后执行的回调函数 success:res=>{ console.log(res) //参数res //latitude 纬度 //longitude 经度
2020-06-17 17:36:07
320
原创 微信小程序3-云开发
云开发 开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力 云开发提供的几大基础能力: 1.云函数：无需自建服务器 2.数据库：无需自建数据库 3.储存：无需自建存储和 CDN 4.云调用：原生微信服务集成1.数据库1-1增删改查1-1-1初始化 在开始使用数据库 API 进行增删改查操作之前，需要先获取数据库的引用 const db = wx.cloud.database() 获取其它环境的数据库引入：const testDB = wx.clou
2020-06-15 21:11:09
261
原创 微信小程序2
1.页面1-1data data是页面第一次渲染使用的的初始数据,wxml中使用时{{数据名}}data: { },1-2onLoad 只会调用一次,onLoad: function (options) {//options是打开当前页面路径中的参数 },1-3onReady 页面初次完成渲染时触发,只会调用一次onReady: function () { },1-4onShow 页面显示/切入前台时触发onShow: function () { },
2020-06-11 11:34:02
608
原创 微信小程序
微信小程序 小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。申请账号 登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID(很多地方需要用到,还有服务号或订阅号的 AppID)安装开发者工具 下载微信开发者工具,登录后界面 添加新的项目打开创建好的小程序小程序代码构成 .json 后缀的 JSON 配置文件，是一种数据格式，json文件中无法使用注释 .wxml 后缀的 HTML 模板文件,有些标签
2020-06-05 21:04:26
705
原创 Github
Github一、提交到远程 打开github官网,登录,点击右上角图中选项 创建一个新的项目,红色框中写项目名称,黄色框中写项目描述,蓝色框为是否公开,绿色框为是否需要文件说明,黑色框为忽略文件和鉴权 创建成功后git remote add origin https://github.com/onlinecg/xxxzzz.git 建立连接git push -u origin master 提交,会弹出输入框,需要输入用户名和密码然后点击页面最后的按钮二、克隆
2020-06-04 21:58:08
1040
原创 版本控制工具
Git区域 git 提供了三个不同的工作区,用来存放不同的内容 工作目录；暂存区域；git仓库状态记录状态：1.已修改（modified） 2.已暂存（staged） 3.已提交（committed） 4.特殊状态 未追踪（Untracked）指令1.git init 创建一个init仓库,一个名为.git的隐藏文件夹2.ls -all 查看目录3.git config user.name "你的姓名" 设置用户名 git config user.
2020-06-03 18:21:46
251
原创 Webpack--Plugins
Plugins(插件) 扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等 插件是 webpack 的支柱功能。插件目的在于解决 loader 无法实现的其他事。1.HtmlWebpackPlugin 作用：在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中 安装：npm install --save-dev html-webpack-plugin 使用：1.在webpack.conf
2020-06-01 18:41:58
235
原创 Webpack
webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle安装 webpack 是一个使用 Node.js 实现的一个模块化代码打包工具。所以，我们需要先安装 webpack，安装之前需要搭建好 Node.js 环境 安装:npm instal
2020-05-28 18:27:18
190
原创 模块化
模块化 模块化已经是现代前端开发中不可或缺的一部分了 模块化：把复杂的问题分解成相对独立的模块 模块化的作用：降低程序复杂性，提高代码的重用，也有利于团队协作开发与后期的维护和扩展 模块化的核心：1.独立的作用域( 2.如何导出模块内部数据 3.如何导入外部模块数据模块化的向下兼容一、ESM 从 ECMAScript2015/ECMAScript6 开始JavaScript 原生引入了模块的概念，我们称为：ECMAScript Module，简称：ESM，现在
2020-05-27 21:21:18
769
原创 Vuex
通信组件的类型父子通信跨级通信兄弟通信路由视图级别通信通信解决方案1.props/$emit(父子通信)2.$refs/ref(父子通信)父级Home.vue子级Hello.vue3.$ children /$parent (父子通信)父 Home.vue子 Hello.vue4.$attrs/ $listeners(父子通信,跨级通信)父 Home.vue子 Hello.vue 未使用props接收父级传递的数据,且通过v-bind:="$attrs"向W
2020-05-24 16:32:24
143
原创 vue-router
路由 路由: 把url与 应用中的对应的组件进行关联，通过不同的url访问不同的组件 路由的应用: 当应用变的复杂以后,我们就需要通过一种便捷、高效的方式来管理应用,最常见的就是通过路由 前端路由: 切换页面,用户交互 后端路由: 分发网络资源,图片/数据 访问不同的路径调配不同的资源vue-router使用步骤 1.安装 npm i vue-router或者yarn add vue-router 2.引入 在src文件夹下的main.js文件内import VueR
2020-05-16 16:01:09
191
原创 Vue过渡&动画
过渡Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果工具：1.在CSS过渡和动画中自动应用class2.可以配合使用第三方CSS动画库,如Animate.css3.在过渡钩子函数中使用JavaScript直接操作DOM4.可以配合使用第三方JavaScript动画库,如Velocity.js一、单元素/组件的过渡 动画触发的场景/给元素和组件添加进入/离开过渡： 1.条件渲染(使用v-if,创建和销毁) 2.条件展示(使用v-show,显示和隐藏) 3.动
2020-05-09 19:00:09
240
原创 Vue插件
插件 插件通常用是来给vue提供拓展功能的一种方式 作用：1.给vue添加属性和方法 2.给vue实例添加属性和方法 3.添加全局资源:指令,过滤器,组件等 4.添加配置选项 引入：src文件加中的main.js文件中import引入 使用：Vue.use(插件) 它需要在调用new Vue()启动应用之完成 插件要求：1.如果插件是一个对象,必须提供install方法2.如果插件是一个函数,那么这个函数会被当作install方法 install方法在被调用时,
2020-05-09 14:09:03
107
原创 动态组件
动态组件 当多个不同的组件之间进行频繁切换时,使用v-if处理会比较麻烦,vue提供了一个更简便的方法来处理 component：vue的一个内置组件,它会提供一个is属性来动态渲染不同组件 使用场景：选项卡单独使用component时,会频繁的触发组件的创建和销毁,性能不好,且会丢失组件状态keep-alive一个内置容器组件,使用后,内部包含的组件将增加激活和冻结状态作用：保持组...
2020-05-07 23:14:26
850
原创 Vue cli
vue cli一、 vue cli是vue提供的一个用于自动化构建和开发项目的工具,也称为脚手架,它是一系列工具的集合二、主要功能: 1.根据配置选项自动构建服务项目,并安装所需要的依赖 2.启动一个本地开发服务器,通过这个服务器可以基于服务器环境访问本地项目,同时提供了跨域代 理服务 3.项目的自动编译,打包 4.项目测试(单元测试,e2e测试)三、安装 npm instal...
2020-05-02 18:27:06
154
原创 Vue 组件
组件 在 vue 中，我们可以通过 new Vue 来创建一个组件，不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式来注册一个更为通用的组件组件可分为根组件和可复用性组件根组件：通过new Vue()创建,通常应用中只有一个 不建议适用多个根组件可复用性组件：通过Vue.component('组件名称',{组件选项})来创建 组件名称遵循自定义组...
2020-04-27 18:48:36
172
原创 Vue
Vue.jsvue.js前端主流框架，一套用于构建用户界面的渐进式框架，研发者尤雨溪vue.js的引入构建用户界面：ui html css 静态页面渐进式框架：延伸出来有五部分 1.模板引擎 类似于pug nunjucks 2.组件(核心功能之一),增加页面的复用性 3.路由 4.状态管理器(统筹管理属性-可伸缩性) 5.自动化构建渐进式的原理：一步一步执...
2020-04-15 19:25:02
518
原创 鉴权
jwt 鉴权json web token是为了在⽹络应⽤环境间传递声明⽽执⾏的⼀种基于JSON的开放标准 一、输入用户名密码登录,将用户名和密码传给后端验证,验证成功后根据密钥生成 token(两处明文和一处密文)将token返还给前端生成token需要用到jsonwebtoken模块,该模块不需要app.use()引入：const jwt = require("jsonwebtoken...
2020-04-14 19:13:26
329
原创 前后端交互
Ajaxajax是Ajax即"Asynchronous Javascript And XML"(异步 Javascript 和 XML)XML是和JSON一样是目前主流的两种返还格式ajax前端交互方式之一，最流行ajax的特点：无刷，局部更新ajax的基本使用1.新建XMLHttpRequest对象,实例化ajax对象 let xhr = new XMLHttpRequest()...
2020-04-06 11:27:20
244
原创 客户端存储
cookie cookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式koa中cookie的使用 储存cookie的值：ctx.cookies.set(name,value,[option]) 获取cookie的值：ctx.cookies.get(name,[option])option常用设置 1.maxAge 一个数字表示从Data.new()得到的毫秒数...
2020-03-29 19:28:33
119
原创 socket
单工通信 所谓单工通信，是指消息只能单方向传输的工作方式 单工通信信道是单向信道，发送端和接收端的身份是固定的，发送端只能发送信息，不能接收信息；接收端只能接收信息，不能发送信息，数据信号仅从一端传送到另一端，即信息流是单方向的前端轮循前端以ajax的方式来循环定时的获取数据前端轮循环，获取数据 循环ajax请求 ，获取数据 消耗性能，消耗资源，不推荐jquery同源策略：...
2020-03-29 19:28:20
185
原创 mysql数据库
数据持久化保存服务端数据库：mysql、mongodb、redis、oracle⽂件存储 ：fs客户端本地缓存 locastorage 、 sessionStorage、cookie…数据库数据库（Database）是按照数据结构来组织、存储和管理数据的仓库。进入mysql命令环境mysql -u 用户名 -pEnter Password 输入密码数据库操作命令都...
2020-03-29 19:27:41
322
原创 koa
koakoa介绍 koa是express原班⼈⻢打造的轻量、健壮、富有表现⼒的nodejs框架。⽬前koa有koa1和koa2两个版本；koa2依赖Node.js 7.6.0或者更⾼版本；koa不在内核⽅法中绑定任何中间件，它仅仅是⼀个轻量级的函数库，⼏乎所有功能都必须通过第三⽅插件来实现koa使用安装：npm install koa简单的搭建一个koa服务器Application...
2020-03-29 19:27:26
184
原创 模板引擎
模板引擎模板引擎是web应用中动态生成html的工具，负责将数据和模板结合；常见模板引擎有：ejs、jade（现更名为pug）、Handlebars、Nunjucks、Swig等；优点：使用模板引擎可以是项目结构更加清晰，结构更加合理，让项目维护变得更简单；node常用框架又express、koapug模板引擎安装：npm install pug -gpug语法通过缩进关系，代替以...
2020-03-29 19:27:10
176
原创 Buffer
Bufferbuffer是数据的缓冲区，是内置的一个类，不是模块buffer的创建node6.0之前的方法： new Buffer()现在的方法：Buffer.alloc(参数) 参数为内容大小，单位为bbuffer会把数据(不限) 转换成二进制， 然后以十六进制的方式展示出来from() 每个字转换为三组十六进制的数据代码：输出结果：如果要将这些十六进制的数据转换回去...
2020-03-29 19:26:47
149
原创 node模块
fs模块fs是文件操作内置模块文件操作所有文件操作都有同步异步之分，特点是同步操作会带有Sync1.writeFile(参1,参2)/writeFileSync() 作用：写入文件 参数1：文件名称,包括文件格式 参数2：文件中，需要写入的内容 参数3：配置对象{ }中的flag属性，a(追加写入)，w(正常写入，默认)写入文件存在时会覆盖 参数4：回调函数，执行完成后，如果执...
2020-03-29 19:26:20
136
原创 node.js
node.jsnode介绍 Node.js 诞生于2009年，Node.js采用C++语言编写而成，是 一个Javascript的运行环境。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境 ，让JavaScript的运行脱离浏览器端，可以使用JavaScript语言 书写服务器端代码。node安装 Node.js官网下载稳定版本,node偶数版本为...
2020-03-20 10:40:10
181
原创 面向对象
面向对象是一种编程思路，不会改变预期效果优点：使用面向对象，会提高代码的复用性，便于迭代创建1.字面量let obj={ }2.构造函数let obj = new Object()函数名的首字母大写，一次来和普通的函数区分new运算符，也叫构造器，配合使用的函数，被称为构造函数作用：1.执行该函数 2.隐式创建一个对象 3.把该对象和函数的this指向互相绑定 ...
2020-02-07 14:07:19
156
原创 ECMAScript6
letlet 写法与var一致，同用于声明变量区别var1.可以重复声明2.作用域：全局作用域，函数作用域(局部作用域)3.可以预解析(变量提升）let1.不可以重复声明 会报错代码：显示效果：2.作用域：全局作用域，块级作用域({}花括号包裹的区域)3.不可以预解析(变量提升)严格遵守先声明，后使用代码：显示效果：const用于声明常量1.let...
2020-02-07 14:07:07
149
原创 移动端
为什么使用移动端适配？1.随着时代的发展，在移动端上访问pc端的页面，逐渐常态化2.手机的设备尺寸，碎片化(种类繁多，五花八门)越来越严重视口三种视口：布局视口，视觉视口和理想视口布局视口布局视口一般都是浏览器厂商给的一个固定值，布局视口是看不见的，浏览器厂商设置的一个固定值，如980px，并将980px的内容缩放到手机屏内。视觉视口浏览器可视区域的大小，也就是用户可以通...
2020-02-06 14:39:37
161
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人