再执-CSDN博客

原创 css 计数器 && counter-increment && counter-reset

1，counter-increment和counter-reset 加上伪元素::before 或者::after 中的content属性组合起来用于显示计数2，counter-increment属性用来递增一个或多个计数器，counter-increment属性通常是和counter-reset属性，content属性一起使用。

2022-10-11 15:39:50 323 1

原创 Graphql && vue-apollo 学习笔记

文章目录简介与RESTful区别优缺点Schema 类型对象类型和字段查询和变更类型系统标量列表和非空查询/变更语句参数[vue-apollo ](https://vue-apollo.netlify.app/zh-cn/guide/#%E4%BB%80%E4%B9%88%E6%98%AF-apollo)搭建使用vue-apollo简介一种用于 API 的查询语言GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解

2021-09-25 18:52:50 387

原创 vue3简介

文章目录与2.0相比新增vue3定义props定义computedprops解构contextwatch监听与2.0相比新增· 3.0比2.0 快2倍· 3.0去掉了filter, 么有beforeCreate created,用setup取代· reactivity是可以单独作为库使用的· 单独功能可以抽离取代了mixin 优于mixin 解决上下反复横跳· 支持多个子节点 fragment· setup里没有this· Proxy实现响应式不需要set delete 兼容性并不

2021-05-28 22:47:19 1626

原创 h5之webSocket

文章目录使用ws模块创建一个websocket客户端创建链接什么是WebSocket？WebSocket网络套接字，是一种全双工的通讯协议，属于TCP连接。主要用于客户端和服务器之间的通讯。通过WebSocket，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。什么是全双工和半双工？全双工允许数据在两个方向上同时传输，比如：手机半双工允许数据在两个方向上传输，但是同一时间数据只能在一个方向上传输，实际上是切换的单工。比如：对讲机七层网络协议？

2021-05-26 21:16:17 583

原创 ajax与fatch跨域携带cookie

服务器端//允许跨域发送cookieres.setHeader("Access-Control-Allow-Credentials", "true"); // 解决setCookit请求源为*的问题; res.setHeader("Access-Control-Allow-Origin", req.headers.origin)客户端在使用fatch,需要添加option配置fetch(`http://127.0.0.1:3000/register?user=${use}&psw=$

2021-05-26 20:51:18 171

原创 git与乌龟壳git

文章目录Git是什么？集中式vs分布式创建git版本库往仓库添加文件暂存区与工作区移出缓存区的文件修改文件版本回退撤销修改删除文件详情Git是什么？引用廖雪峰的话：Git是目前世界上最先进的分布式版本控制系统（没有之一）。Git有什么特点？简单来说就是：高端大气上档次！集中式vs分布式先说集中式版本控制系统，版本库是集中存放在中央服务器的，而干活的时候，用的都是自己的电脑，所以要先从中央服务器取得最新的版本，然后开始干活，干完活了，再把自己的活推送给中央服务器。中央服务器就好比是一个图书馆，你

2021-05-24 23:17:07 529

原创 vuex

文章目录actions 使用方法getters映射函数 mapGettersmodulesvuex 持久化存储在vue开发中，每个组件都有自己的独立的数据，整个项目中的所有组件可以通过总线进行传值，但是如果出现组件之间需要共用同一组数据时，数据管理就会非常麻烦。vuex是vue的状态(数据)管理工具，它采取了一种集中管理数据的思想，将整个项目中所有的公共数据放在一个统一的仓库中，然后任何组件都可以从这个仓库中读取数据，也可以通过仓库提供的方法修改数据。new Vuex.Store({}) 创建

2021-05-21 20:13:57 79

原创 vue-router

文章目录前端路由vue 前端路由匹配规则:this.$ router 和 this.$ route 区别动态路由使用props进行传值; 解耦路由嵌套编程式导航命名视图重定向和别名导航守卫三种类型守卫路由元信息虚拟dom异步懒加载路由前端路由前端路由时基于url中的哈希值进行响应跳转的一个前端浏览器技术,在h5之前,哈希值用于页面之间的锚点,但h5之后,单页面比较流行,就根据哈希值不会传递到服务器这种特点,在页面进行跳转时,就可以不用发送网络请求;一个完整的url 在#后面的路径所有的内容就是哈希

2021-05-21 20:07:07 98

原创微信小程序学习笔记

文章目录页面的生命周期函数组件的生命周期tabBer 配置配置组件是否样式隔离配置开启下拉刷新和触底加载更多的距离页面的生命周期函数onLoad 页面加载的时候执行onReady 页面初次渲染完成onShow 监听页面显示,onHide 监听页面隐藏onUnload 监听页面卸载下面是监听页面相关事件处理函数onPullDownRefresh 监听用户下拉动作onReachBottom 页面上拉触底事件的处理函数onShareAppMessa

2021-05-18 23:32:45 342

原创微信小程序实现相机和上传图片

我们可以使用wx为我们提供的api直接打开图片wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], //使用图片还是相机 success (res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths }})详情查看官方

2021-05-18 23:09:09 2061

原创 react高阶组件和Hooks语法

高阶组件：本质是一个函数，返回值是一个组件，函数的参数是原生组件，主要是对组件的代码的复用或者是逻辑上的复用，以及对原始组件上的props和state进行增删改查的操作，也可以对原生组件的进行增强和优化;高阶组件大致分为两种：1.主要操作的是props对象和组件的增强import React, { Component } from 'react';function MyHoc(OldCom) { return class NewCom extends Component {

2021-05-12 20:48:44 797

原创 react路由嵌套

在config.js 中添加配置项import Two from "../pages/Home/Two"import Recommend from "../pages/Recommend/Recemmend"; //导入组件let routers = [ { path: "/home", //路由地址 component: Home, //路由模板 routes: [ //路由嵌套配置路由嵌套不能使用精准匹配

2021-05-12 20:11:22 341

原创 react&&redux

文章目录什么是reactReact有哪些特点？安装react我们不需要一定使用 JSX，但它有以下优点：什么是React组件？组件更新组件传值双向绑定路由跳转动态路由过度动画redux 状态管理代理服务器的配置redux 持久化存储什么是reactReact 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年

2021-05-12 19:48:25 171

原创 vue基础

文章目录vue常用的指令;v-if 与 v-show过滤器指令修饰符组件的封装computed父组件向子组件传值ref生命周期函数事件发射.sync修饰符watch 字段如何进行深度监听数据对象混入异步组件动态组件兄弟组件之间传值过度动画关键帧动画js动画自定义指令自定义指令的钩子函数；插槽默认内容具名插槽vue 响应式数据原理v-model的工作原理导入于导出懒加载[vue 瀑布流布局](https://blog.csdn.net/weixin_46041654/article/details/114

2021-05-11 00:16:26 660

原创 typescript

文章目录typescript 是javascript 的超集，主要提供了类型系统和对 ES6 的支持，是一种规范，而不是一种语言;定义一个变量let num:number = 10; //声明一个number 类型的变量 , 不能在将num改变类型;…定义一个数组let arr:number[] = [1,2,3] let arr:array<number> //定义一个数字类型的数组;定义一个函数function f1(p:number):void{} vo

2021-05-11 00:05:34 100

原创构建工具 webpack grunt gulp使用简介

wabpack本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。需要模块 webpack webpack-cliwebpack.config.js是一个普通的模块包，使用npm run build这个指令来运行这个配置文件;可以配置快捷键为"build":"webpack" //打

2021-05-11 00:03:24 138

原创 mongodb数据库

文章目录什么是数据库mongodb数据库mongoose 模块Schema与Model什么是数据库数据库是“按照数据结构来组织、存储和管理数据的仓库”。是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合;mongodb数据库详情MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的;MongoDB 数据库的增删改查;show dbs //展示所有数据库;use 数据库名称 //创建|进入数据库 (有则进入，无

2021-05-11 00:01:06 130

原创 cookie&&session

文章目录cookiecookie 模块express-session 模块md5 模块cookiecookie是一种能让服务器在用户浏览器中存储数据的技术。服务器通过响应头中的Set-Cookie字段将cookie返回给客户端，客户端浏览器在收到响应时，会把cookie存储起来，以后每次向这个域发送请求时，都会把这个cookie附加在请求头中，发送给服务器。cookie是按照域分别存储的，从某个域获取的cookie也只会发给这个域。协议名、域名(IP)、端口号，三者有一个不同，就算是不同的域。

2021-05-10 23:56:07 77

原创跨域

文章目录什么是跨域？三种跨域解决办法;二使用jsonp 解决跨域;三使用代理服务器什么是跨域？跨域指的是浏览器不能访问其他浏览器的网站脚本，是由浏览器的同源策略造成的，是浏览器对javascript实施的安全限制;什么是同源策略，同源策略是一种约定，他也是浏览器最为核心也是最基本的安全功能，他能帮助切阻挡恶意文档的攻击协议，域名，端口号三者必须相同，称之为同源，如果有一个不相同，则就会收到同源策略的限制，就造成了跨域;三种跨域解决办法;一使用cors | 请求头解决跨域; cr

2021-05-10 23:50:02 130

原创 node.js

文章目录node安装模块化自定义一个模块加载模块内置模块fs模块http模块path模块url模块静态文件夹：express模块中间件模板引擎路由三种实现方法;buffer对象关于数据储存方式使用http模块发送请求，[cheerio 模块](https://www.jianshu.com/p/629a81b4e013)[phantomjs 模块 ](https://blog.csdn.net/xc_zhou/article/details/80673827)文件上传和下载服务器下载node安装win

2021-05-10 23:45:14 248

原创 echarts

echarts一个基于 JavaScript 的开源可视化图表库常用的配置项title: 标题组件，包含标题和副标题; text //主题标题支持使用/n换行; subtext /主题组件的副标题; textStyle //主题标题的样式; subtextStyle //副题标题的样式;legend:图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示 (包含了series中每个图表数

2021-05-10 23:33:31 275

原创 jquery-validata插件

文章目录[详情]( https://www.runoob.com/jquery/jquery-plugin-validate.html )默认校验规则详情jquery-validata 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。下面统计一些常用的操作方式以

2021-05-10 23:28:16 173

原创 jqueryApi

文章目录什么是jquery？jQuery的DOM操作添加或删除calss中的操作jquery中的事件jquery中的ajax遍历与选择常用的apijQuery 效果什么是jquery？jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程jquery插件里面提供一个全局的对象$和jQuery对象,本质是一个函数，$(document).ready(function(){ //预加载函数; //method})$(function()

2021-05-10 23:23:35 227

原创移动端&&自定义组件

文章目录媒体查询viewport移动端适配解决办法自定义组件 (适用于创建多个相同的标签和事件);移动端验证滑块插件;媒体查询@media screen and(max-width) and (...){ //定义一个媒体查询;(css板)} screen：指的是pc 自能手机 ipad等这些设备 link 方式定义媒体查询; 在css中添加这个字段，就可以在另一个页面完成媒体查询; media="screen and (min-width:1200px) and

2021-05-10 23:16:50 189

原创面向对象与this指向

面向对象的三大特性：封装，多态，继承;封装：为什么要封装？代码的重复性太严重变量,函数,对象对象:(变量和函数的复杂集合对象的变量叫做对象的属性对象的函数叫做对象的方法)函数的封装,建议大家在封装函数的时候把封装都写到单独的js文件中,如果你只在一个script标签中去封装，那么很难被其他的html文件或者是js文件访问到，效率比较低继承：为什么要继承?拟合现实中的继承关系，可以一定程度上提高代码的重用效率继承属于紧耦合，应用要谨慎两种继承方式：一，构造函数继承1.创建一个构造

2021-05-10 23:07:04 176

原创原生ajax

文章目录什么是AJAX？创建 XMLHttpRequest 对象；GET 还是 POST？配合ajax使用的事件;属性什么是AJAX？Asynchronous JavaScript and XML （异步的javascript与XML）;AJAX 不是新编城语言，而是一种现有的新方法;AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。创建 XMLHttpRequest 对象；if (window.XMLHttpRequest) //判断是否支持这个对象; l

2021-05-10 23:02:35 65

原创上传与下载

上传数据通过input标签type属性设置为file 创建一个上传框; 由于不美观且样式不能轻易更改，需要配合使用别的标签;multiple=“multiple” 属性可接受多个值的文件上传字段：enctype="" 文件上传的编码类型, enctype=“multipart/form-data” 使用formData格式上传数据;通过label标签的for属性链接input标签，a标签和botton标签需要使用js来达到上传框的效果;上传到服务器，请查看ajax,使用的对象

2021-05-10 18:25:01 98

原创 canvas&&SVG

文章目录h5新增 [画布canvas](https://www.w3school.com.cn/tags/html_ref_canvas.asp)Base64svgh5新增画布canvas用于绘制图像，通过javeScript来实现，不过元素本身并没有绘制图像的能力，他仅仅数绘制图像的容器常用API 不带（）属性带（）方法;getContext("2d") //返回一个CanvasRenderingContext2D对象，该对象提供了用于绘制图像的属性和方法;(下面的API都是

2021-05-09 18:20:45 211

原创 ES6新增&&ES5严格模式

箭头函数箭头函数是es6新增的特性，是匿名函数的另一种写法,简化了函数定义()=>{} 声明一个匿名函数，在参数只有一个的情况下，可以省略(),在函数体只有一句代码的时候，并需要return出来可以省略{}和return;箭头函数没有this,在箭头函数中this指向上下文this;由于箭头函数没有this,所以不能被call,apply,bind所改变this指向，他们的第一个参数会被忽略;箭头函数不能作为构造器，和new在一起会报错;箭头函数没有prototype 属性;异步

2021-05-09 18:09:30 261

原创 BOM&&正则

文章目录window对象获取浏览器的宽高;1，获取元素相关尺寸(只可读，不可写)2,获取元素的位置信息（只可读，不可写）3,获取滚动区域的宽高4 获取样式表里面的样式offsetclientscrolljs 实现平滑滚动弹窗layui弹窗History 对象LocationNavigator对象Cookie 是一些数据, 存储于你电脑上的文本文件中。screen对象;正则表达式创建正则的两种方式修饰符使用字符串方法配合正则正则API正则的量词元字符前瞻与后瞻贪婪与懒惰window对象window对象

2021-05-09 17:55:20 222

原创 DOM事件流

文章目录1. 什么是DOM事件流？专业解读：2. DOM事件流的分类？分别什么含义？顺序：3. DOM事件流的三个阶段？DOM2级事件规定的事件流包括三个阶段：4. 事件委托和事件代理？事件委托的优点：可以减少事件的注册，节省内存占用。也可以实现当新增对象时无需再次对其绑定事件。5. 阻止事件传播事件流参考:1. 什么是DOM事件流？事件流简单来说就是事件执行的顺序流。DOM树中有大量的元素，元素之间出现嵌套时，给父子元素同时设置了事件，父子元素的事件执行会按照某种顺序执行，这就是事件流。当然，嵌套层

2021-05-09 17:21:37 147

原创 DOM操作

文章目录什么是DOM？什么是节点？select相关的属性获取/查询DOM元素节点的遍历修改DOM元素节点的增删改class属性节点操作元素样式;其他属性节点的增删改查event对象事件模型鼠标事件表单事件拖拽事件键盘事件自定义事件定时器视频](https://www.runoob.com/jsref/dom-obj-audio.html)/[音频事件属性方法什么是DOM？DOM是文档对象模型，是W3c组织推荐的可处理可扩展编辑语言的标注编译接口;什么是节点？主要节点：元素节点、属性节点、文本节点元

2021-05-09 17:15:55 279

weixin_51207199的博客