web前端
关注
分享
扫一扫
web前端
kleinBlue.
当天空下坠一切变成克莱因蓝。
展开
-
前端鉴权的 5 个兄弟：cookie、session、token、jwt、单点登录
本文你将看到： 基于 HTTP 的前端鉴权背景 cookie 为什么是最方便的存储方案，有哪些操作 cookie 的方式 session 方案是如何实现的，存在哪些问题 token 方案是如何实现的，如何进行编码和防篡改？jwt 是做什么的？refresh token 的实现和意义 session 和 token 有什么异同和优缺点 单点登录是什么？实现思路和在浏览器下的处理 从状态说起「HTTP 无状态」我们知道，HTTP 是无状态的。也就是原创 2022-01-05 09:58:10 · 831 阅读 · 6 评论 -
前端常用开发单位
px1px===1个像素点，相对单位长度单位，相对的是设备的物理像素；试用于固定长度单位的场景中；各浏览器兼容性良好；pt单位名称为点（Point），绝对长度单位。1pt＝1/72英寸，常用于印刷当中，在AI、PS等设计软件当中字体大小所用的单位就是pt；em参考物是父元素的font-size，具有继承的特点。em会继承父级元素的字体大小1em=1倍父元素font-size的值，2em=2倍父元素font-size的值，以此类推……rem大小是相对于HTML的根元素设置的；rem..原创 2021-12-13 18:17:15 · 601 阅读 · 6 评论 -
前端页面的几种常用布局
一 、静态页面布局传统页面布局，网页上的所有元素的尺寸一律使用px作为单位。静态页面布局通常有几下几种：1、表格布局2、层布局3、div+css样式表布局表格布局：表格布局容易把握，是最简单的一种总局方式，适用于初学者。设计网页的第一步是设计版面布局。所谓布局，就是以最适合浏览的方式将图片、文字以及表单等元素排放在页面的不同位置。网页设计常用布局方法是表格布局。另外一种方便的工具，就是使用框架。框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。案例：①在原创 2021-12-13 16:37:02 · 2679 阅读 · 2 评论 -
HTTP与HTTPS的区别
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。 为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通原创 2021-12-13 11:03:05 · 248 阅读 · 0 评论 -
常用正则表达式大全
一、校验数字的表达式1. 数字：^[0-9]*$2. n位的数字：^\d{n}$3. 至少n位的数字：^\d{n,}$4. m-n位的数字：^\d{m,n}$5. 零和非零开头的数字：^(0|[1-9][0-9]*)$6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$7. 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$8. 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$9. 有两位小原创 2021-10-19 08:25:41 · 391 阅读 · 0 评论 -
Vue生命周期
一 vue的生命周期如下图所示(很清晰)二 vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"><.原创 2021-10-11 16:13:40 · 158 阅读 · 2 评论 -
vue滚动条事件（获取滚动条距离底部距离）
网上大部分vue的滚动条操作是监听dom实现，我是用@scroll实现首先有滚动条的div一定要设固定高度，然后overflow:auto;出现滚动条passive是使滚动更加流畅，减少卡顿<div @scroll.passive="getScroll($event)" style="height:100px;overflow:auto;"> <ul> <li>内容</li> </ul> </di原创 2021-10-11 16:09:04 · 5793 阅读 · 3 评论 -
vue div滚动条滚动到指定位置_vue 始终让滚动条在底部
<template> <div class="box"> <div>123</div> <div>123</div> <div>123</div> <div>123</div> <div>123</div> <div>123</div> <div.原创 2021-10-11 16:06:46 · 1331 阅读 · 1 评论 -
vue路由跳转的四种方式（带参数）
1. router-link1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 <router-link :to="{name:'home', params: {id...原创 2021-10-11 15:58:15 · 202 阅读 · 2 评论 -
在vue中用localstorage将数据存到本地
什么是localStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。localStorage的优势1、localStorage拓展了cookie的4K限制2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一原创 2021-10-11 15:24:11 · 3542 阅读 · 2 评论 -
vue实现横向滚动列表
预览效果<template> <div class="mainmX"> <!-- <div class="minxshi"></div> <div class="minxshi"></div> --> <div class="swiper-container"> <div class="swiper-wrapper" @c原创 2021-09-28 16:26:01 · 3254 阅读 · 1 评论 -
解决display:flex属性 justify-content: space-between换行后的排版问题
<style>.wrap { width: 400px; display:flex; /*弹性盒子*/ justify-content: space-between; /*两端对齐，子元素之间有间隙*/ flex-flow: row wrap;/*子元素溢出父容器时换行*/}span {width: 100px;background-color: green;color:#fff;border-radius: 5px;margin-top: 10px;.原创 2021-09-28 11:43:31 · 8193 阅读 · 6 评论 -
CSS阴影效果(Box-shadow)用法趣味讲解
分享：使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。基本用法 box-shadow:2px 2px 5px #000; ...原创 2021-09-28 09:32:47 · 802 阅读 · 1 评论 -
vue子路由跳转实现tab选项卡
现在很多的后台管理系统都采用tab选项卡的布局，左边是导航栏固定，右边是对应的页面，每次点击左边的导航标题，只有右面的对应页面再切换，而vue要做tab选项卡，推荐使用<router-link></router-link>实现a标签的效果，然后使用<router-view></router-view>实现插槽的效果，把对应的页面 "塞" 进去，具体实现看下面的案例：1、这是tab选项卡的页面，布局就不说了，主要是<router-link :to="a原创 2021-09-27 18:03:31 · 1316 阅读 · 1 评论 -
Vue中获取input输入框值的两种方式
在使用Vue开发中，我们会常常获取input框的值，在这跟大家总结一下我常用的两种方式。使用ref获取input框的值<template> <div> <div class="logininfor"> <input type="text" placeholder="手机号码" ref="userphone"> <input type="text" placeholder="密码"原创 2021-09-27 11:23:27 · 14307 阅读 · 1 评论 -
Vue点击图片预览放大（支持旋转、翻转、缩放、上下切换、键盘操作）
说句实话，它的功能还是很多很强大的，大家可以自己去看看。主要使用的旋转、翻转、缩放、上下切换、键盘操作等功能都有。这里主要使用旋转1.首先是安装npm install v-viewer --save2.配置在main.js中引入记得引用它的CSS样式import Vue from 'Vue'import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'进行Vue注册调用Vue.use(Vi.原创 2021-09-26 19:09:14 · 3213 阅读 · 3 评论 -
图片放大缩小拖拽
这里注意如果自己的页面有滚动条，一定阻止滚动事件的默认行为，否则缩放图片的时候，页面会跟着滚动@mousewheel.prevent 阻止默认行为<div span="8" class="left" @mousewheel.prevent="rollImg"> <img :src="imgUrl" alt="" class="img" ref="imgDiv" @mousedown="move"></div>JavaScript代码// 拖动图原创 2021-09-26 16:48:26 · 350 阅读 · 1 评论 -
一个很好看的vue loading动画代码
在https://www.cnblogs.com/imgss/p/7354396.html看到了这篇文章,稍稍微优化了一下,过程原博已经有了,欢迎在原博和本地址讨论????写一个Vue loading 插件 - 饭特稠 - 博客园Loading.vue<template> <div class="wrapper"> <div class="loading"> <span :style="{ wi原创 2021-09-26 15:07:02 · 744 阅读 · 2 评论 -
VUE 视频加载完跳转
<template> <div class="cont" v-title data-title="XXXX科技服务平台"> <div class="header"><p>{{title}}</p></div> <div class="cent" @click="shouye"> <img @click="changePlay" v-show="isShow" src="../...原创 2021-09-26 14:31:03 · 600 阅读 · 1 评论 -
antV G2在vue中的使用
以双折线图为例记录，最终效果图安装npm install @antv/g2 --save在需要的vue文件中引入import G2 from '@antv/g2'; //引入G2import { Chart } from "@antv/g2"; //或者只引入需要用到的G2组件，我要用Chartconst DataSet = require('@antv/data-set'); //antV中用DataSet作为数据集，可以对原始数据进行操作，比如格.原创 2021-09-26 13:51:30 · 1600 阅读 · 1 评论 -
webpack面试题总结
本文主要是对webpack面试会常被问到的问题做一些总结，且文章会不断持续更新1.webpack打包原理把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。2.webpack的优势（1） webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。（2）能被模块化的不仅仅是 JS 了。（3） 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。（4原创 2021-09-26 13:43:12 · 133 阅读 · 1 评论 -
百度地图的驾车路线规划
属性属性名 类型 默认值 描述 location String, Point, None location表示检索区域，其类型可为空、坐标点或城市名称的字符串。当参数为空时，检索位置由当前地图中心点确定，且搜索结果的标注将自动加载到地图上，并支持调整地图视野层级；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。 start String, Point, LocalResultPoi 起点，参数可以是关原创 2021-09-26 13:37:40 · 1160 阅读 · 1 评论 -
Vue使用Antv F2
F2是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex）。在Vue中使用F2移动端图表，详细步骤如下：npm安装npm install @antv/f2 --save在main.js中引用impor F2 from '@antv/f2'; Vue.prototype.F2 = F2;在页面中使用，首先创建一个容器，给定宽高，然后在js中渲染数据<canvas id="boxCanvas" style="wid.原创 2021-09-26 08:59:13 · 1693 阅读 · 1 评论 -
在Vue中使用echarts的两种方式
方式一、直接引入echarts先npm安装echartsnpm install echarts --save代码：main.jsimport myCharts from './comm/js/myCharts.js'Vue.use(myCharts)myCharts.js/** * 各种画echarts图表的方法都封装在这里 * 注意：这里echarts没有采用按需引入的方式，只是为了方便学习 */import echarts from 'echarts.原创 2021-09-24 08:57:04 · 2746 阅读 · 3 评论 -
vue的带有左右箭头的elment轮播图
<template><div class="contmindd"> <!-- 轮播图 --> <el-carousel :interval="4000" arrow="always"> <el-carousel-item v-for="(item, index) in tupian" :key="index"> <img :s..原创 2021-09-23 17:40:08 · 492 阅读 · 1 评论 -
微信小程序 数组（增，删，改，查）
微信小程序 数组（增，删，改，查）最近在做一个小程序的demo里。由于不向后台请求数据，所以就涉及到本地数据的操作，本文以数据的增删改查为例 globalData:{ userInfo:null, notes:[ { 'title':'第一次笔记', 'detail':'这是笔记详情，仅限测试' }， { 'title':'第二次笔记', 'detail':'可原创 2021-09-20 11:07:17 · 3409 阅读 · 1 评论 -
网站右侧的客服
html与js代码块<div class="main-im"> <div id="open_im" onclick="open_im()" class="open-im"> </div> <div class="im_main" id="im_main"> <div id="close_im" onclick="close_im()" class="close-im"><a href="javascript:void(0原创 2021-09-20 11:05:18 · 486 阅读 · 1 评论 -
微信小程序笔记
小程序APPID每个小程序的唯一标示每个账号只有一个APPID个人账号与企业账号的区别个人账号不能发布小程序企业账号能发布小程序注意：在公司开发时一定要用企业账号的APPID进行开发账号申请登陆后：小程序控制平台：管理：管理小程序管理开发成员统计：统计小程序的使用情况功能：官方提供的功能开发：开发工程中所需要的APPID所在地址推广：推广小程序文件结构app.js逻辑代码编写javascript代码文件app.json 小程序公共配置app.wxss 小程序公共样式表原创 2021-09-20 11:03:32 · 192 阅读 · 0 评论 -
前后端交互相关细节功能
前端表单提交ajax相关代码片段引入jqurey <script type="text/javascript" src="js/jquery-3.4.0.min.js"></script> <script type="text/javascript" src="js/openip.js"></script>//封装的ajax的urlopenip.js代码function openip($str){ var myip = "http://192.1原创 2021-09-20 10:59:07 · 204 阅读 · 0 评论 -
二级导航栏
css 样式为了工作和平时项目的需要，在自己工作空余时间自己写的一个 css 样式同时也是为了巩固 css 和 sass 的知识目的是为了：适应每一个项目自己重置样式,创造属于自己的 style虽然目前已有很多流行和成熟的 css 框架，如 bootstrap,Semantic UI,Pure…都有各的优点但还是决定做更加适合前端工作的 css 样式，我并没说是 css 框架，因为还需要不断更新自己在空余时间也会不断的去优化，学习和进步 @charset "UTF-8";* { mar原创 2021-09-20 10:52:52 · 268 阅读 · 0 评论 -
微信小程序购物
链接地址下载：点击下载demo原创 2021-09-19 10:09:00 · 106 阅读 · 1 评论 -
看完这玩意，前端开发不迷路《web开发1篇》
Web开发基本概念1、万维网是一个由许多相互链接的超文本组成的系统，通过互联网访问。2、web：worldwideweb，万维网，简称web，www，通常称为网页。3、web开发：进行网页页面制作及其阁下你给功能开发。4、浏览器：显示网页内容，并让用户与这些文件交互 一种软件。（常用：IE、谷歌、火狐）5、web服务器：提供web服务的计算机。6、URL（统一资源定位符）：互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。 组成：协议、服务器地址、资源路径。..原创 2021-09-18 12:01:08 · 332 阅读 · 1 评论 -
微信小程序答题功能
view<view class="topnav"> <image src="../../image/top.jpg"></image> <view class="back" bindtap="back"><image src="../../image/left.png"></image></view> <view class="sousuo"> 科普答题 </view>..原创 2021-09-18 11:41:48 · 2152 阅读 · 0 评论