CookChopper-CSDN博客

原创 Vue中的权限管理和Mixin混入

Vue中的权限管理和Mixin混入权限管理1. Vuex中Permission2. 在store/index.js注册Permission3.更新Vuex中的routes权限列表4. 静态路由动态路由解除合并5. 配置导出routes6.退出路由重置Mixin混入1.新建一个Mixin对象2.在main.js注册mixin3.在组件中调用权限管理1. Vuex中Permission新增store/modules/permission.js/* * @Author: CookChopper *

2021-09-06 23:34:03 348 1

原创 Vue项目优化技巧和项目上线

Vue项目优化技巧和项目上线1 配置loading效果1.1 nprogress进度条2 项目优化2.1 生产环境移除console.log信息2.2 为开发模式与发布模式指定不同的打包入口2.3 externals加载外部cdn资源1 配置loading效果1.1 nprogress进度条$ npm i nprogress -S// 修改main.js入口文件// 导入进度条效果import NProgress from 'nprogress'import 'nprogress/npr

2021-06-28 00:18:25 201

原创 Vue基础

Vue基础基础指令内容渲染指令属性渲染指令绑定事件指令事件修饰符双向数据绑定指令条件渲染指令列表渲染指令过滤器基础指令内容渲染指令<h5 v-text='xxx'>内容</h5><h5 v-html='xxx'>内容</h5><!-- 内容渲染指令 {{插

2021-06-22 10:56:14 186

原创 ES6模块化、Promise解决回调地狱、EventLoop、webpack打包工具

ES6模块化ES6模块化默认导入与默认导出按需导入与按需导出直接导入并执行模块PromisePromiset.then使用Promise.then 和 Promise.catch链式调用Promise.all()方法Promise.race()方法自定义封装一个thenFs.readFile函数async和awaitEventLoop执行过程经典面试题宏任务和微任务宏任务和微任务执行顺序经典面试题1经典面试题2ES6模块化//Node.js 要求 ES6 模块采用.mjs后缀文件名。也就是说，只要脚本文

2021-06-01 16:45:07 231 1

原创 express框架基础

express框架基础安装与使用托管静态资源路由定义路由匹配机制模块化路由中间件express中间件调用流程express中间件格式注册全局中间件注册局部中间件中间件分类自定义解析数据中间件nodemon工具安装与使用// 导入express模块const express = require('express');// 注册express模块const app = express();//挂载路由app.get('/',(req,res)=>{ res.send(`<h1

2021-05-30 16:17:55 210

原创 Nodejs基础和NPM包管理

NodejsNodejsfs模块读取功能fs.readFile()写入功能fs.wirteFile()path模块path.join() 动态拼接路径path.basename() 获取文件名path.extname() 获取文件格式http模块创建一个简单的Web服务器模块化Nodejsfs模块读取功能fs.readFile()写入功能fs.wirteFile()//先导入模块const fs = require('fs');// 参数1：文件路径// 参数2：编码格式// 参数3：回

2021-05-21 09:28:41 101

原创 Git和Github

Git和GithubGit安装配置Git中的三个区域Git中的三种状态检查配置信息将尚未进行版本控制的本地目录转换为 Git 仓库工作区中的四种状态查看状态常用命令行Git仓库控制流程忽略文件.gitignore例子查看提交历史回退历史版本GithubGit安装官网：https://git-scm.com/配置配置用户名命令行git config -global user.name “remo”配置邮箱命令行git config -global user.email “xxxx@x

2021-05-10 23:45:10 460

原创 HTTP协议

HTTP协议通信通信三要素HTTP协议什么是HTTP协议HTTP交互模型HTTP请求消息/请求报文请求消息的组成部分请求行请求头部空行请求体HTTP响应消息HTTP响应消息的组成部分响应头部响应体HTTP请求方法HTTP响应状态码2** 成功相关的响应状态码3** 重定向相关的响应状态码4** 客户端错误相关的响应状态码5** 服务端错误相关的响应状态码通信通信，就是信息的传递和交换通信三要素通信的主体通信的内容通信的方式HTTP协议关于更多请求头字段的描述，可以查看 MDN 官方

2021-05-09 23:08:06 264

原创 JavaScript 同源策略跨域 JSONP CORS 防抖和节流

同源策略与跨域同源策略定义比较通俗理解跨域定义浏览器对跨域请求的拦截实现跨域的两种方法自定义JSONPjQuery的JSONP同源策略定义同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能两个页面的协议、域名、端口都相同时，则具有相同的源比较下表给出了相对于 http://www.test.com/index.html 页面的同源检测通俗理解浏览器规定A网站的javascript不能与非同源的C网站进行资源交互无法读取非同源网页的cookie、

2021-05-08 22:28:24 154

原创 JavaScript 前后端交互XMLHttpRequest对象、ajax、axios

前后端交互Ajax前后端交互$.get请求方法$.post请求方法$.ajax请求方法前后端交互$.get请求方法常用于查询数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co

2021-05-07 13:26:19 341

原创 JavaScript ES6let、const语法、Array、String内置对象拓展、Set数据结构

JavaScript ES6语法ES6新增语法letlet语法let经典面试题小结constvar、let、const区别解构赋值箭头函数箭头函数经典面试题剩余函数ES6的内置对象拓展Array的拓展方法拓展运算符Array.from()实例方法find()实例方法findIndex()实例方法includes()string的拓展方法模板字符串实例方法 startsWith()和endsWith()实例方法 repeat()set数据结构实例方法遍历ES6新增语法letlet语法let声明的变量

2021-05-03 15:39:30 147

原创 JavaScript 正则表达式

JavaScript 正则表达式什么是正则表达式正则表达式在js中的使用test()方法match()方法正则表达式中的特殊字符边界符字符类方括号[ ]量词符小括号预定义类正则替换什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。主要是利用JavaScript 正则表达式完成表单验证正则表达式在js中的使用test()方法 <script> //1.调用regExp对象的构造函

2021-05-02 22:57:10 110

原创 JavaScript函数进阶、严格模式、闭包、递归

JavaScript函数进阶、严格模式、闭包、递归1. 函数的定义和调用2. this指向、改变this指向函数内部的this指向改变函数内部的this指向call()方法apply()方法bind()方法3. 严格模式1. 函数的定义和调用 <script> //定义函数三种方法 //1 函数声明方式 function 关键字 function fn(){} //2 函数表达式(匿名函数) var fn1 = function(){} //3 new关键字 ne

2021-04-30 14:17:27 89

原创 JavaScript面向对象编程

这里写目录标题面向对象编程思想面向过程与面向对象区别对象与类创建类继承类本节新get知识点面向对象编程思想面向过程与面向对象区别面向对象面向过程易维护、易复用、易扩展性能比面向对象高，适合跟硬件联系紧密性能比面向过程低不易维护对象与类在ES6中增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，通过类实例化一个具体的对象创建类语法规范：通过class 关键

2021-04-28 21:52:27 125

原创 JavaScript-jQuery事件处理、事件对象、对象拷贝、多库共存、jQuery插件

jQuery事件jQuery事件注册jQuery事件注册jQuery事件处理自动触发事件 trigger() triggerHandler()jQuery事件对象event事件对象对象拷贝多库共存jQuery事件注册jQuery事件注册 <script> /*****************************************************************/ //单个事件注册 element.click(function(){ //事件处理程

2021-04-21 14:18:42 83

原创 JavaScript-jQuery样式操作、动画、属性操作、尺寸、位置操作

jQuery的使用jQuery基础jQuery入口函数jQuery操作DOMjQuery选择器jQuery筛选选择器jQuery筛选方法隐式迭代样式操作css样式操作classList类名操作jQuery动画效果方法demojQuery基础jQuery 的顶级对象 $ $(“div”) === jQuery(“div”)用原生 JS 获取来的对象就是 DOM 对象jQuery 方法获取的元素就是 jQuery 对象jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组

2021-04-20 11:50:49 62

原创 JavaScript-WebAPI基础④移动端触摸事件、轮播图案例、常见插件、本地存储

JavaScript基础移动端网页特效触屏事件触摸事件触摸事件对象触摸事件demo案例classList属性添加、删除类移动端轮播图案例click 延时解决方案移动端网页特效触屏事件触摸事件触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指移动一个DOM元素时触发touchend手指移动DOM元素时触发触摸事件对象触屏事件对象说明touches正在触摸屏幕的所有手指的列表target

2021-04-15 15:48:22 131

原创 JavaScript-WebAPI基础③offset、client、scroll元素、缓慢动画原理、节流阀

JavaScript基础元素偏移量offset常见offset属性offset与style的区别常见offset系列属性的作用获取鼠标在盒子的坐标-案例拖拽框-案例电商产品图片放大镜-案例元素可视区 client 系列元素滚动 scroll 系列常见scroll系列属性的作用固定侧边栏-案例立即执行函数重新加载页面触发事件元素偏移量offset1.可以动态获取元素的位置、大小2.获得元素距离带有定位的父元素的位置3.获得自身元素的宽度、高度注意：返回值不带px单位常见offset属性

2021-04-12 18:06:16 132

原创 JavaScript-WebAPI基础②BOM对象、window对象、定时器、this、JS执行机制、location对象、navigation对象、history对象

JavaScript基础BOM对象什么是BOMBOM的构成window对象的常见事件定时器定时器案例：倒计时BOM对象什么是BOMBOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 windowBOM的构成window 对象是浏览器的顶级对象，它具有双重角色。它是 JS 访问浏览器窗口的一个接口。它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。在调用的时候可以省略

2021-04-09 16:04:44 116

原创 JavaScript-WebAPI基础①事件基础、事件监听、事件对象、阻止事件冒泡、常见鼠标、键盘事件

JavaScript基础WebAPI基础MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API获取元素 1. document.getElementById('id名') 2. document.getElementsByTagName('标签名'); 3. document.getElementsByClassName('类名'); 4. document.querySelector('id选择器/标签选择器/cl

2021-04-08 15:20:18 151

原创 Javascript基础、对象、内置对象

Javascript基础Javascript冒泡排序原理Demofunction score(arr){ for(var i=0;i<arr.length-1;i++){ for(var j=0;j<arr.length-i-1;j++){ if(arr[j]>arr[j+1]){ var temp = arr[j];

2021-04-06 09:59:59 1152 7

原创移动web之响应式布局开发、BootstrapB前端开发框架

响应式布局响应式布局容器响应式需要一个父级作为布局容器原理，在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化平时响应式尺寸划分超小屏幕（手机小于768px）设置宽度100% 小屏幕（平板，大于等于768px）设置宽度为750px 中等屏幕（桌面显示器，大于等于992px）设置宽度为970px 大屏幕（大桌面显示器，大于等于1200px）设置宽度为1170px...

2021-03-30 20:46:45 122

原创移动Web开发之rem布局、Less入门、flexible.js入门

移动web开发之rem布局rem基础rem单位 rem是一个相对单位，类似em，em是相对于父元素的字体大小 rem是相对于html元素的字体大小媒体查询什么是媒体查询使用@media查询，可以针对不同类型的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询媒体查询语法规范 //最好是从小到大写 @media

2021-03-27 11:01:48 365

原创 FLEX伸缩布局资料

1.FLEX伸缩布局资料常见父元素flex-direction 设置主轴方向justify-content 设置主轴上的子元素排列方式flex-wrap 设置子元素是否换行align-items 设置侧轴子元素的排列方式（单行）align-content 设置侧轴子元素的排列方式（多行）flex-flow 复合属性，相当于设置了flex-direction和flex-wrapdiv{ width: 520px; h

2021-03-26 09:25:57 85

原创 HTML5/CSS3进阶知识点

HTML5语义化标签 <header>头部标签</header> <nav>导航标签</nav> <article>内容标签</article> <section>块级标签</section> <aside>侧边栏标签</aside> <footer>尾部标签</footer> //针对搜索引擎的语义化标签 //在IE9中，这些标签为行内标签 .

2021-03-20 16:31:34 115

原创高德地图Demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dem

2021-03-18 10:37:07 238

原创 Json和Ajax的注册、登录功能页面demo

HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit.

2021-02-26 13:57:14 1246

原创 Ajax知识点

Ajax与JSON //XMLHttpRequest对象，是一个异步调用对象，是Ajax的核心 //创建的步骤 //1.创建XMLHttpRequest对象 //2.创建一个新的HTTP请求，并指定HTTP请求的方法，URL， //3.设置响应HTTP请求状态变化的函数 //注意：如果是HTTP表单请求post数据的，需要添加HTTP头，使用setRequestHeader() //使用：xhr.setRequestHeader("Content-type","application..

2021-02-26 13:47:09 53

原创 jQuery知识点

jQuery选择器 — 基础选择器 $('#id') ID选择器 $('.id') 类选择器 $('div') 标签选择器 $('*') 通配符选择器jQuery选择器 — 层级选择器 $('all child') 祖先后代选择器，匹配all元素下所有的child子元素 $('all>child') 直接后代选择器,匹配all标签下一级的child子元素 $('prev+next') 匹配所有紧接prev元.

2021-02-03 10:15:09 81

原创 CSS知识点总结

浮动float小结与PhotoShop切片技巧1.浮动(float)小结2. 清除浮动2.1 为什么要清除浮动因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。总结：由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响准确地说，并不是清除浮动，而是清除浮动后造成的影响2.2 清除浮动本质清...

2020-03-15 15:08:08 163

hjc13348的博客