m0_47480813的博客

原创 【无标题】

vue3 大屏模板

原创 单点登录实现原理CAS

1，什么是点点登录单点登录简称SSO，是目前比较流行的企业业务整合的解决方案之一，SS O的定义是在多个应用系统中，用户只需要登录一次就可以访问所有互相信任的应用系统。我们目前存在多诸多子系统，而且这些子系统是分别部署在不同的服务中，那么使用传统的session是无法解诀的，我们需要使用相关的单点登录技术来实现2，CASCAS主要包括俩部分 CAS Serve和 CAS Client，CAS serve需要单独部署，主要负责对用户的认证工作：CAS Client负责处理对客户端受保护的访问请求，重定

原创 JS语法 ES7、ES8、ES9、ES10、ES11、ES12新特性

后续慢慢迭代ES71.Array.prototype.includes()[1].includes(1); // true2.指数操作符2**10; // 1024ES81.Object.values()Object.values({a: 10, b: 20, c: 30}); // [10, 20, 30]2.Object.entries()Object.entries({a: 11, b: 21, c: 31}); // [["a", 11], ["b", 21], ["c",

原创 手写数组reduce方法

Array.prototype.myReduce = function (fn, prev) { for (let i = 0; i < this.length; i++) { if (typeof prev === 'undefined') { prev = fn(this[i], this[i + 1], i + 1, this) ++i } else { prev = fn(prev,

原创 后台表格组件

<template> <div class="tablebox"> <el-table :data="tableDataList" style="width: 100%" :height="height" border size="small" stripe highlight-current-row v-loading="loading" @selection-change="handleSelectionChange">

原创 git基础命令

git version //检查git版本信息；git config --global username //获取用户名；git config --global emial //获取邮箱mkdir 文件名。 //创建文件夹git init //初始化git仓库ls //查看文件目录cd //cd到文件目录cd ./ //返回上级目录git add .//添加到暂存区git diff //比较差异rm 本地文件名。//删除本地文件git branch dev //创建分支名git

原创 手写js排序（冒泡排序）（快速排序）（插入排序）

1冒泡排序// 冒泡排序function bubbling(arr) { for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j < arr.length - 1 - i; j++) { if (arr[j] >arr[j + 1]) { var swap = arr[j] arr[j] = arr[j + 1] arr[j + 1] = swap } } } retur

原创 手写数组方法foreach，myMap，myFilter，myFind，myEvery，mySome方法

1.myForeachlet arr = ['a', 'b', 'c', 'd', 'e', 'f', 100]Array.prototype.myForeach = function (fn) { // 如果不是函数 抛异常 if (!Object.prototype.toString.call(fn) == '[object Function]') { throw new Error(`${fn} is no a function`) } let

原创 localstorage 、sessionStorage 、cookie区别

1、localStorage生命周期永久，除非用户清除浏览器中的localStorage信息，否则永远存在；存放数据大小一般为5MB；仅在浏览器中保存，不参与服务器通信；API调用：localStorage.setItem(“key”,“value”);//以“key”为名称存储一个值“value”localStorage.getItem(“key”);//获取名称为“key”的值localStorage.removeItem(“key”);//删除名称为“key”的信息。localStor

原创 vue2 vs vue3双向绑定

vue2双向绑定v-modelv-model 是 v-bind 和 v-on 的语法糖。v-bind 即 model=>view，当model数据发生变化，在setter中，去触发对应组件重新生成Vnode，对比新旧虚拟树，更新差异。v-on 即 view=>model view操作后，触发事件，调用回调函数，在回调函数中更新modelModel 改变 View的过程： 依赖于ES5的object.defineProperty，通过 defineProperty 实现的数据劫持，Vie

原创 js基础总结

1.原型链2.newnew的时候，实际上是写了4 行代码：var obj = {}; obj.__proto__ = fn.prototype; fn.call(obj, 'x'); // 生成的临时对象作为 this 调用 fn return obj // 把 fn 的返回值作为 this，返回出去new 会重写 this，所以我们在 bind 中写不写this都一样function objectFactory(father, ...rest) { // let result

原创 css径向渐变radial-gradient和css正则选择器

效果图：radial-gradient()函数创建了一个图片，其由原点辐射开的在俩个或者多个点颜色之前的渐变组成写法：background:radial-gradient(#ccc,#9198e5)background:radial-gradient(closest，#ccc,#9198e5，#ff3040)background:radial-gradient(circle at 100%,#ccc,#ccc 50%,#9198e5,75%,#ff3040 75%)<!DOCTYPE h

原创 css属性clip-path裁剪和linear-gradient渐变

.circle { float: left; width: 200px; height: 200px; margin: 20px; background: linear-gradient(to left, red, blue);clip-path: circle(50% at 50% 50%); } .ellipse { float: left; width: 200px...

原创 HTML常用标签总汇

1.HTML4常用标签汇总基本文档：html，head，body…基本标签：h1-h6，p，br，hr文本格式化：strong，b，em，small，strong，del，sub，sup链接：a，link图片：img，map，area区块布局：div，span三大列表：ul li,ol li,dl dt dd表格：table，caption，th，tr ，td，thead，tbody，tfoot框架：iframe表单：form，input，select，option，textarea，b

原创 前端下载二进制流文件

平时在前端下载文件有三种方式，一种是后台提供一个 URL，然后用 window.open(URL) 下载，或者window.location.href（URL），另一种就是后台直接返回文件的二进制内容，然后前端转化一下再下载。由于前俩种种方式比较简单，后面一种实现方法：//Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据Blob、ajax(axios)后台返回数据为二进制文件：具体方法：axios({ method: 'po

原创 vue无缝轮播滚动

效果图：1.引入vue-baidu-map，对应的命令是npm install vue-seamless-scroll --save2.然后在main.js文件里面引入使用：import scroll from 'vue-seamless-scroll'Vue.use(scroll)3.页面应用 <vue-seamless-scroll :data="scrollingData" :class-option="opt

原创 vue-百度地图自定义主题框选区域设置模态框

效果图：1.首先，引入vue-baidu-map，对应的命令是npm install vue-baidu-map --save2.然后，在main.js中完成全局注册import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 ak: '您的ak密钥'})3.页面中应用template <div class="BMapbubblecontent" id="more" v-

原创 ES6的语法及用法

1.结构赋值解构赋值主要是针对于数组和对象的：真实项目中，一般常用于把从服务器获取的JSON数据进行快速解构，赋值给对应的变量，帮助我们快速拿到对应的结果let arr = [100, 200, 300, 400,500];let [a, b, c, d] = arr；console.log(a, b, c, d); // 100 200 300 400 500...

原创 JS的数据类型及检查数据类型

基本数据类型（值类型） number string boolean null undefined引用数据类型object：{} [] /^$/ 日期对象 Math 实例对象... function ES6中新增 Symbol 唯一值检查数据类型1.typeof console.log(typeof "");//string console.log(typeof 1);//number console.log(typeof true);//bo

转载 js数组去重的多种方法

1: 思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。function unique(arr) { let newArr = [arr[0]]; for (let i = 1; i < arr.length; i++) { let repeat = false; for (let j = 0; j < newArr.leng

原创 JavaScript的常用简写方法

12种JavaScript的常用简写方法1.三元操作符 const x = 20; let answer; if (x > 10) { answer = 'is greater'; } else { answer = 'is lesser'; }简写：const answer=x>10?'is greater':'is lesser'2.短路求值简写方法当给定一个变量

原创 深入js原型和原型链