weixin_45846303-CSDN博客

原创 Vuex基本使用之总结

使用在 Vue 的单页面应用中使用，需要使用Vue.use(Vuex)调用插件。使用非常简单，只需要将其注入到Vue根实例中。import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 },getter: { doneTodos: (state, getters) => { return state.todos.filter(todo =>

2020-08-08 11:14:22 331

原创 vueRouter--路由导航守卫

导航守卫可以理解为切换路由时进行的一系列钩子调用，在这些钩子中我们可以决定是否触发下一个钩子，是否需要重定向路由，以及处理一些必要的数据等等，这些决定了路由是否可以切换。导航守卫可分为全局守卫，路由守卫，和组件内守卫。守卫是异步执行的，一个路由导航（或者说路由切换）在所有守卫执行完之前一直处于等待中。总结：1、导航守卫那些？全局 afterEach、beforeEach 、beforeResolve路由beforeEnter组件内：beforeRouteLeave 、beforeRouteUpda

2020-08-08 10:18:48 288

原创 vue.js组件之自定义事件

简介组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树功能组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些

2020-08-01 15:32:12 196

原创 vue.js组件的使用

组件使用的细节点全局组件Vue.component('row',{ data: function(){ return { content:'this is content' } } template: '<tr><td>this is a row </td></tr>'})tbody>后面只能跟tr>,所以不能直接写row>标签，写成tr is=“row

2020-08-01 15:16:37 104

原创玩转Redis缓存

五种数据结构简介Redis是使用C编写的，内部实现了一个struct结构体redisObject对象，通过结构体来模仿面向对象编程的“多态”，动态支持不同类型的value。作为一个底层的数据支持，redisObject结构体代码如下定义：#define LRU_BITS 24#define LRU_CLOCK_MAX ((1<<LRU_BITS)-1) /* Max value of obj->lru */#define LRU_CLOCK_RESOLUTION 1000 /* L

2020-07-26 21:10:39 61

原创使用node.js连接mysql数据库

安装PS C:\Users\mingm\Desktop\test> npm install mysql --savenpm WARN saveError ENOENT: no such file or directory, open 'C:\Users\mingm\Desktop\test\package.json'npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\mingm\Desktop\test\packag

2020-07-24 16:57:24 143

原创 node.js连接MongoDB

1.引入依赖包：npm install mongodb --save-dev2.建立一个简单的服务，引入mongodb：var express = require('express');var app = express();var MongoClient = require('mongodb').MongoClient;var dbURL = 'mongodb://localhost:27017';app.listen(process.env.POST || 8080);3.写

2020-07-19 16:33:16 91

原创 node.js框架之express的安装及使用

什么是Express？官网介绍：Express是基于Node.js平台，快速、开放、极简的Web开发框架。个人理解：我们都知道node.js是后端版本的js语言实现，自然Express更加注重的是后端的处理，它的页面是通过数据与模版渲染而成，注重的是逻辑的交互。与其它常见的前端框架不同，像Vue、React等基本思想都是数据驱动视图，我们不必去关注后台是怎么实现的，只注重数据的操作。而Express恰恰相反。使用express框架搭建一个服务器下载： npm install express 或者 n

2020-07-19 16:07:39 161

原创 node.js搭建静态服务器

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。首先，在搭建一个简单的静态服务器之前，我们先来了解下node.js应用应该由哪几个部分组成：1、引入 required 模块：我们可以使用 require 指令来载入 Node.js 模块。2、创建服务器：服务器可以监听客户端的请求，类似于 Apache 、Nginx 等

2020-07-12 13:35:04 256

原创 Node.js 中的Stream(流)

1.为什么使用流之前写过如下代码，有问题！消耗大量的内存为用户在接收到任何的内容之前首先需要等待程序将文件内容完全读入到内存中var http = require('http');var fs = require('fs');var server = http.createServer(function (req, res) { fs.readFile(__dirname + '/data.txt', function (err, data) { res.end(dat

2020-07-11 14:05:26 132

原创 es6 promise常见语法和用法

promise是什么？1、主要用于异步计算2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果3、可以在对象之间传递和操作promise，帮助我们处理队列为什么会有promise？为了避免界面冻结（任务）同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单，这么小的动作，服务员却要你等到别人的一个大动作完成之后，才能再来招呼你，这个便是同步的问题：也就是“顺序交付的工作1

2020-07-04 10:24:24 303

原创 map集合的理解

Map 是一个含有数据的键的集合，跟普通的 Object一样。但是它们最大的差别是Map允许键是任何类型。关于Map的方法和属性如下：new Map() 创建一个空集合map.set(key, value) 存储含有值的键map.get(key) 根据键来返回值，如果 key 不在 map 里将会返回 undefinedmap.has(key) 如果key存在则返回 true，否则返回 falsemap.delete(key) 根据键来删除值map.clear 清空集合map.size 返回

2020-07-04 09:43:59 173

原创 es6数组和箭头函数

aa

2020-06-27 21:57:25 848

原创 es6变量定义和赋值

ES6ECMAScript 第六个版本一、let 命令在ES6之前，都是用 var声明，但是它会变量提升成为全局变量。function a() { if (bool) { var b = 'Hello ES6' } else { console.log(b) } }其实是这样的 function a() { var b if (bool) {

2020-06-27 21:43:09 310

原创 flex弹性盒子属性

父元素属性1.display:flex（定义了一个flex容器）2. flex-direction（决定主轴的方向）row（默认值，水平从左到右）colunm（垂直从上到下）row-reverse（水平从右到左）column-reverse（垂直从下到上）flex-wrap（定义如何换行）nowrap（默认值，不换行）wrap（换行）wrap-reverse（换行，且颠倒行顺序，第一行在下方）4.flex-flow（flex-flow属性是 flex-direction 属性和 f

2020-06-21 22:20:21 413

原创 TypeScript基础了解

TS 介绍TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。TS编译运行将 TS 编译成 JS后运行1、使用tsccnpm install -g typescripttsc hello.ts2、ts-loader// webpack.config.prod//... test

2020-06-21 11:38:32 135

原创瀑布流布局

图片懒加载图片都是一个loading的加载状态举例：瞬间，互联网要获取20张网络图片的请求，稍等片刻之后，并不是一开始就展示所有的图片，滚动哪里就加载几张图片图片懒加载的作用作用：缓解网络压力，使得用户体验更好img缓存机制图片懒加载如何展现的呢，img指向一个图片，其它的img也只是加载加载这个图片，其它的图片片加载的时候，直接从缓存里面进行加载图片的懒加载的问题如何判断图片是否出现在我们的视野当中如何加载这个图片如何加载这个图片在img标签中把data-src里面的值放到src这

2020-06-14 10:34:25 160

原创 ajax的基本使用

一、使用方法使用 AJAX 的过程可以类比平常我们访问网页过程var xhr = new XMLHttpRequest(); //打开浏览器xhr.open('请求方式','URL地址','异步同步模式'); //地址栏输入网址xhr.send(); //回车or点击访问xhr.onreadystatechange = function(){ //处理网页呈现后操作 if(this.

2020-06-14 10:33:49 136

原创 php变量的基本实现

PHP作为“世界上最好的语言”，我们都知道php是弱类型语言，即在使用过程中，可以任意改变变量的类型。这对于代码中的灵活性有极大的方便。php底层是由c语言去实现的，那么c语言作为强类型语言，是怎么实现php的这些特性？变量的定义我们先从变量的定义开始。在百度百科上，变量来源于数学，是计算机语言中能储存计算结果或能表示值抽象概念。变量可以通过变量名访问。意思就是说，变量是来存储值的。那么我们来看看在php中，变量的定义。//php//定义了变量名为a 变量值为整数 1$a=1;//输出$a的值

2020-06-07 20:41:32 150

原创 PHP基础语法之常量、字符串及运算符等

1.变量变量名的命名规范需要“$”进行标识变量名必须以字母或下划线 “”开头变量名只能由字母、数字、以及“”组成，还能包含汉字变量名不允许包含空格变量名是区分大小写的变量的数据类型在PHP中，支持8种原始类型，其中包括四种标量类型、两种复合类型和两种特殊类型。布尔类型(boolean)只有2个值。ture和false。不区分大小写。需要注意的是，当我们用”echo”指令输出布尔类型时，如果是“true”则输出的是“1”，“false”则什么也不输出。我们可以使用“var_dump”函数

2020-06-07 18:21:50 203

原创 jQuery 滑动效果的实现

jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。fullpage.js的主要功能fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。主要功能有：支持鼠标滚动。支持前后退和键盘控制。多个回调函数。支持手机，平板触摸事件。支持css3动画。支持窗口缩放。窗

2020-05-29 22:33:20 374

原创 fullpage的api和方法

APIsectionsColor:[‘green’,‘orange’,‘red’,‘lime’];//设置背景颜色可以为每一个section设置background-color属性controlArrows:定义是否通过箭头来控制slide幻灯片，默认为true，当我们设置为false，则幻灯片左右的箭头消失，在移动端上我们可以通过滑动来控制幻灯片verticalCentered:每一页的内容是否垂直居中，默认为trueresize:字体是否随着窗口缩放而缩放，默认为falsescrol

2020-05-27 10:29:13 500

原创 jquery的淡入淡出的动画

通过 jQuery，您可以实现元素的淡入淡出效果。jQuery fadeIn() 用于淡入已隐藏的元素。1.先获取按钮，并写一个点击事件，此处jQuery只需要写chlik就可以。2.下面的三个div元素分别写一个“fadeIn”方法，“slow”是慢的意思，可以达到一个延迟的效果，也可以在括号内写毫秒数或是“fast”。jQuery fadeOut() 方法1.和前面一样，隐藏已显示的元素,它可以取以下值：“slow”、“fast” 或毫秒。jQuery fadeToggle() 方法1.

2020-05-21 16:10:55 111

原创 jquery动画之toggle()方法

toggle方法特别实用，很多时候在页面中都会用到，例如：点击切换位置、显示隐藏元素其实就是无限的来回切换0和1两种状态，使用起来比if好用太多了！例如：点击切换标签的背景颜色 //记得载入jQuery库 <script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script> <p>点我切换</p>

2020-05-21 15:34:41 598

原创 Jquery事件操作

简单方式注册/移除事件注册：jq对象 .on（‘事件名例如click’，‘事件处理程序’）移除：jq对象.off（‘事件名’，‘事件处理程序’）事件处理程序在如果需要移除就要单独写出来然后调用就可以个人感觉还是写外面吧。。万一我想移除了呢= =另外如果给一个元素多次注册事件也不会被叠加因为他的底层本质是事件监听事件委托方式注册/移除事件在写之前还是先回顾一下事件委托吧。。。什么是事件委托呢事件委托就是为了优化程序提升程序的性能在事件类型一样的时候可以把子孙元素委托给上

2020-05-15 22:10:22 68

原创 jQuery选择器（基本选择器、层级选择器、过滤选择器和表单选择器）

jQuery选择器支持CSS1、CSS2的全部和部分CSS3选择器，同时也拥有少量独有的选择器。jQueryt选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。为了练习先写一个html页面。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jQuery selector</title> <script type="text/javascri

2020-05-15 21:53:21 204

原创 bootstrap之 breadcrumb----面包屑导航

Bootstrap 面包屑导航（Breadcrumbs）面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。 Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。官网的面包屑navbar导航都是左右两边都是靠边的，下面展示改进之后导航居中，大屏幕是.container效果，移动端是.container-fluid效果：这

2020-05-10 21:41:28 612

原创理解Bootstrap模态框

Bootstrap 模态框是一个轻量级的多用途JavaScript弹出窗口，可自定义和响应式。可以使用它在网站中显示警告窗口、视频和图片。使用Bootstrap构建的网站可以使用模态框来显示条款和条件（作为注册过程的一部分），视频，甚至社交媒体小部件。为了可以更好地理解它，我们来看一下Bootstrap模态框的各个组成部分。Bootstrap 模态框主要分为三个部分：头部（header），正文（body）和页脚（footer）。每个部分都有自己的意义，因此我们应该正确的使用它们。我们稍后将讨论这些。Bo

2020-05-10 21:31:17 273

空空如也

空空如也