babulongbo
babulongbo

VUE“粘性”阅读进度条

这个进度条是网上一个实例，原实例使用jQuery实现的查看，最近在用vue-cli，所以就用vue实现该组件查看。
这个进度条有有意思的地方是：用户的一系列操作都和导航息息相关。一般来说，普通的导航，只是通过点击显示不同的内容或滚动到其他指定位置，至于用户在页面上的其他操作(滚动等)是和导航很少有关系，但是这个导航不一样，用户在页面上的一切操作都和导航相关。
废话不多说了，我们来分析一下这个导航是如何实现的以及这里面有哪些玄机？
样式我们就不多说了，这个基本都会。
首先我们分析一下页面的动画效果：
①当页面滚动超过导航所在位置时，导航固定到顶部，否则导航按顺序排列在页面中。
②当页面滚动到每个指定的文本段落时，对应的导航节点处于激活状态。
③随着页面在指定文本节点之间滚动时，导航条的长度是跟着增加的。
④导航节点悬浮时的节点圆圈颜色和导航条的颜色一致，并且文字会上移。
⑤当页面宽度小于700px，导航条消失。
现在我们总结上面的结果，并设置合理的流程。我们不难发现上面的动画和页面的滚动事件有关系，所以我们需要在页面dom渲染完毕时，监听页面滚动。对于上面效果，我们可以用以下实现：
①获取导航距离页面顶部的距离，通过滚动事件及时检测页面滚动距离是否大于等导航距离页面顶部的距离，如果是则固定导航，否则取消固定。
②获取每个文本段落到页面顶部距离，当滚动距离超过节点距离就激活对应的导航节点，否则取消激活状态
③当滚动距离小于第一个文本段落到顶部的距离时，导航激活条的长度为0；当滚动距离小于最后一个文本段落到顶部的距离时，导航激活条的长度为100%；否则计算页面滚动距离和对应的导航激活条的长度
④通过检测页面已经滚动超过的文本段落，可以给对应的导航节点圆圈添加激活状态；文字上移就是transform: translateY();
⑤通过适配就可以完成
注意，这里的难点：
①导航固定时，要给一个占位元素代替导航的高度否则页面会闪现，并对页面滚动的计算也不利。
②计算导航激活条的长度：
/**
* 计算活动线的长度
* 如果当前页面滚动的距离没有达到计算的起始距离，活动线的宽度重置为0，且不进行任何操作
* 如果当前距离超出页面的结束距离，则活动线的宽度等于最大宽度
* 否则根据页面滚动的距离计算活动线的长度
* 计算规则：
* 首先你要明白页面的滚动的距离所占百分比和活动线每段的百分比不相同：例如：
* 活动线长100，有6个文本节点和导航节点，导航节点平分为5段，每段长度为16.67%；
* 但是文本的长度并不平均分配，假设第一节点和第二节点之间的总长度也为100，但是5段距离为12 18 26 24 20；
* 这时候页面滚动的距离和超出第一节点25，这时候要计算活动线的长度？
* 首先我们先看文本节点的间距中的1个长度分别表示多少活动线的长度
* 第一段：1 / 12 * 16.67%;
* 第二段：1 / 18 * 16.67%;
* …
* 所以文本的每一段长度代表的活动线的长度并不一致。
* ①已知长度与第一段的距离相比，是否大于此段长度
* ②如果是则现在导航长度加上16.67%，已知长度减去此段文本长度
* ③否则将(已知长度/此段文本长度)*导航平均长度
* ④重复上面几个步骤，知道已知长度小于文本长度
* 所以根据上面的规则：
* let width = 0;
* 25 > 12; width += 16.67%; 25 - 12 = 13;
* 13 < 18; width += 13 / 18 * 16.67%;
*/
最后给出js源码：

你可能感兴趣的:(程序员笔记,web开发笔记,导航条,vue,黏性,滚动)

  • 438. 找到字符串中所有字母异位词 Zannnne leetcode
    438.找到字符串中所有字母异位词题号：力扣438知识点：字符串，滚动窗口目标完成度：59/150总结题干：思路：1.如果s的长度小于p，则s中必然找不到与p是异位词的子串。2.异位词的特点是每个字母出现的次数一直，但是出现的顺序不一定相同。因此我们建立两个容器，来记录p中和滚动窗口中每个字母出现的次数，由于字母一共只有26个，所以容易大小为26。3.第一个for循环相当于是对scount进行初始
  • Uniapp当中的scroll-view滚动条不出现或者触底刷新事件不触发 堕落年代 uniappuni-app
    一、未正确设置容器高度问题描述scroll-view未设置明确高度或高度值无效，导致无法形成有效滚动区域。解决方案•使用行内样式直接设置height（如style="height:500rpx;"），避免类名样式被覆盖。•动态计算高度（例如通过uni.getSystemInfoSync()获取屏幕剩余高度）。二、滚动条样式被覆盖或隐藏问题描述•默认滚动条被全局CSS样式（如::-webkit-sc
  • uniapp vue3项目用原生h5 audioContext实现语音文件倍速播放，可适应h5和安卓app 努力做大神 uni-appandroid音频倍速播放
    前言uniapp项目要做类似微信的聊天语音播放功能，可以切换语音，可以点击切换播放/停止播放状态，还可以倍速播放。开始用了uniapp的音频组件uni.createInnerAudioContext()，很好用但就是倍速播放playbackRate属性不起作用，经过研究，决定用原生h5的audioContext。AudioContext是WebAudioAPI的一部分，它代表了一个音频处理图，允许
  • vue中el-tree的懒加载 zhz5214 vuevue.jselementuijavascript前端
    el-tree是ElementUI中的一种树形控件，它可以在页面中显示树形数据结构，同时支持懒加载。懒加载是指在Vue组件渲染的过程中，只加载当前可见的部分数据，而不是一次性加载整个数据。这种方法可以显著提高页面的加载速度和响应性能，特别是在大型数据集上。要使用el-tree的懒加载功能，需要在树形控件组件中提供一个load方法。load方法会在展开一个父节点时触发，它的参数包含了父节点的数据和一
  • Vue.js的内联样式绑定：style的多种用法 阿珊和她的猫 vue.js前端javascript
    前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录引言`style`属性的基本概念`style`属性的用法1.绑定对象2.
  • Vue动态组件完全指南：原理、使用场景与最佳实践 北辰alk 前端vuevue.jsjavascript前端
    文章目录一、什么是动态组件？核心特性：二、基本使用方式1.基础语法2.组件注册方式3.动态组件生命周期三、六大典型应用场景1.标签页切换系统2.多步骤表单流程3.动态仪表盘4.权限驱动视图5.插件系统集成6.服务端驱动界面四、高级使用技巧1.状态保持方案2.动态Props传递3.异步组件加载4.过渡动画支持五、性能优化策略1.缓存策略对比2.代码分割配置3.内存管理示例六、常见问题解决方案1.组件
  • jwt的token自动续约_关于JWT Token 自动续期的解决方案 weixin_39608301 jwt的token自动续约
    前言在前后端分离的开发模式下，前端用户登录成功后后端服务会给用户颁发一个jwttoken。前端(如vue)在接收到jwttoken后会将token存储到LocalStorage中。后续每次请求都会将此token放在请求头中传递到后端服务，后端服务会有一个过滤器对token进行拦截校验，校验token是否过期，如果token过期则会让前端跳转到登录页面重新登录。因为jwttoken中一般会包含用户的
  • 用 Pinia 点燃 Vue 3 应用：状态管理革新之旅 心中的灯塔 vue.js前端javascript
    用Pinia点燃Vue3应用：状态管理革新之旅用Pinia点燃Vue3应用：状态管理革新之旅什么是Pinia？安装与基础配置创建和使用Store定义Store在组件中使用Store高级用法组合多个Store持久化状态总结用Pinia点燃Vue3应用：状态管理革新之旅在构建现代前端应用时，如何高效管理状态一直是开发者关注的焦点。随着Vue3的普及，官方推荐的状态管理方案Pinia因其轻量、灵活和易于
  • 玩转 Vue 3：自定义指令让页面魔法随心而动 心中的灯塔 vue.jsjavascript前端
    玩转Vue3：自定义指令让页面魔法随心而动玩转Vue3：自定义指令让页面魔法随心而动什么是自定义指令？全局注册示例：高亮效果指令注册自定义指令在组件中使用局部注册与高级用法局部注册示例小结玩转Vue3：自定义指令让页面魔法随心而动在Vue3中，自定义指令为我们提供了在模板中直接操作DOM的能力，不仅可以让我们的页面效果更炫酷，还能将一些通用逻辑抽离出来，做到代码复用。本文将带你了解Vue3自定义指
  • Vue秘籍：如何动态修改页面 Title（浏览器页签名称）？ QQ828929QQ vue.js前端javascript
    Vue秘籍：如何动态修改页面Title（浏览器页签名称）？在开发Vue项目时，我们经常需要根据不同的页面动态修改浏览器的页签标题（title），比如：在电商网站中，展示商品详情时，标题应该是商品名称-商城名称。在后台管理系统中，切换不同的页面时，页签名称应随之变化。在聊天应用中，当有新消息时，页签标题可以变成**（1）新消息-ChatApp**，吸引用户注意。那么，如何在Vue项目中实现动态修改d
  • 前端流式输出实现详解：从原理到实践 代码剑客588 前端
    前端流式输出实现详解：从原理到实践前言一、流式输出核心原理1.1什么是流式输出？1.2技术优势对比1.3关键技术支撑二、原生JavaScript实现方案2.1使用FetchAPI流式处理关键点解析：2.2处理SSE（Server-SentEvents）三、主流框架实现示例3.1React实现方案3.2Vue实现方案四、高级优化策略4.1性能优化4.2用户体验增强4.3安全注意事项五、实际应用案例5
  • java解析el-upload上传的文件,vue+elementui 使用el-upload组件实现单个文件手动上传 神经脱臼
    ref='upload'style="width:100%":action="uploadUrl":on-remove="handleRemove":on-change="handleChange":data="uploadData":file-list="filelist":before-upload="handleBeforeUpload":auto-upload="false">选取文件仅支
  • Threejs 实现 VR 看房完结 多喜乐 长安宁 threejsvuevrvue.jsthree
    效果：threejs3dVr看房gitee地址：threejs-3d-map:1、threejs实现3d地图效果链接：https://blog.csdn.net/qq_57952018/article/details/1430539902、threejs实现vr看房主要代码：src/views/PanoramicView/index.vueimport{computed,onMounted,onU
  • vue使用el-upload实现文件上传功能 小来码呀码 vue.jselementuijavascript
    因为是vue+springboot前后分离，要跨域，就不能用默认的action写请求地址，我用axios时最困扰的就是怎么拿到那个真实的文件，然后给传给后台。其实可以通过自带的onchanne触发方法获得文件列表，文件信息中那个raw就是真实的文件。写的时候，刚开始我是直接把el-upload里面的button中加了点击事件，但是每次文件还没选，就已经向后台发出请求了，当然传不过去，于是外面套了个
  • 【vue2+elementui】记录el-upload文件上传时调接口传参的几种情况 湛海不过深蓝 elementUIvue2elementui前端javascript
    文件上传的接口请求头headers:{"Content-Type":"multipart/form-data"},自动上传el-upload上传文件调接口的时候默认会带有一个入参file:原生的file对象无额外入参action属性指定了文件上传的接口地址auto-upload属性：是否在选取文件后立即上传，默认值true所以只要设置了这两属性，文件在选择后（或拖拽到上传区域后）会自动上传到act
  • Vue Markdown 编辑器全攻略：轻松集成 MD 编辑器到前端项目 算法探险家 前端vue.js编辑器
    VueMarkdown编辑器全攻略：轻松集成MD编辑器到前端项目1.为什么选择Markdown编辑器？2.安装v-md-editor3.全局配置与集成4.在组件中使用Markdown编辑器5.高级配置与自定义功能6.总结在现代前端开发中，Markdown编辑器被广泛应用于博客、内容管理系统、在线文档等场景。本文将以Vue3为例，详细介绍如何使用v-md-editor库在项目中集成Markdown编
  • (vue)elementUi中el-upload上传附件之后 点击附件可下载 nyf_unknown VUEvue.jselementuijavascript
    (vue)elementUi中el-upload上传附件之后点击附件可下载handlePreview(file){console.log(file)constfileUrl='https://.../zzy/'+file.urlconsta=document.createElement('a')a.href=fileUrla.download=file.namea.style.display='n
  • vue3+elementuiplus的table表格动态高度 多喜乐 长安宁 vueelementuiplusvue.jsjavascript前端
    table表格流体高度1、前提了解自定义指令、hooks2、核心思路通过自定义指令（newResizeObserver）监听表格变化，然后通过hooks去更新表格高度。3、核心代码src/directives/resize.ts//import{debounce}from'@/utils';import{typeDirective}from"vue";constresizeDirective:Di
  • 蓝易云 - kubernetes介绍,什么是k8s,kubernetes概念,组件介绍 蓝易云 kubernetes容器云原生驱动开发开发语言
    Kubernetes（常简称为K8s）是一个开源的容器编排和管理平台，用于自动化部署、扩展和管理容器化应用程序。Kubernetes的概念和组件包括：Pod：最小的可部署单位，可以包含一个或多个容器，共享网络和存储空间。ReplicaSet：用于维护指定数量的Pod副本，确保应用的可用性和弹性。Deployment：用于管理Pod的版本和更新，实现滚动升级和回滚等。Service：定义一组Pod的
  • 微信小程序点餐系统的设计与实现（开题报告+源码+论文）_在线点餐外卖系统设计与实现文献 2301_82243979 程序员微信小程序小程序
    二.技术环境jdk版本：1.8及以上ide工具：Eclipse或者IDEA，微信小程序开发工具数据库:mysql5.7（必须5.7）编程语言:Javajava框架：ssmmaven:3.6.1详细技术：HTML+CSS+JAVA+SSM+MYSQL+VUE+MAVEN+微信开发工具三.功能设计本基于微信小程序的外卖点餐系统的设计与实现有管理员，外卖员，餐厅，用户共四个角色。管理员功能有个人中心，外
  • 项目报错 SyntaxError: Unexpected token ‘??=‘ 和node-sass报python错误；nuxt、vue项目 院人冲冲冲 前端javascript开发语言
    前提：node14.21.3项目报错SyntaxError:Unexpectedtoken'??='1.仔细看错误代码位置，发现是在node_modules文件中（找来源）2.node_modules文件报错Unexpectedtoken'??='15:59:58constlist=obj[list]??=[];^^^SyntaxError:Unexpectedtoken'??='atnewScr
  • element表格滚动错位问题，使用uniapp写的项目 院人冲冲冲 uni-app
    element表格设置滚动条滚动到底错位_element表格滚动条无法滚动到最后-CSDN博客参考上面的博主写的::v-deep::-webkit-scrollbar{display:block!important;width:8px!important;height:8px!important;background:rgb(241,241,241)!important;-webkit-appea
  • uniapp(全端兼容) - 最新详细实现可拖动悬浮按钮功能，支持手指拖曳放到页面任意位置，uniapp可拖动的悬浮球，悬浮图标支持拖动效果（详细示例源码及注释，复制粘贴快速植入） 街尾杂货店& 前端组件与功能(开箱即用)uni-app悬浮球uniapp悬浮在屏幕上的组件uniapp悬浮功能uniapp可拖曳拖动的悬浮球
    效果图百度搜的代码都太难用了而且有bug。。。在uniapp小程序/h5网页网站/安卓苹果app/nvue等（全平台完美兼容）开发中，详细实现在uniapp中实现一个可拖动的悬浮按钮，uniapp全平台兼容的悬浮球功能，可挂载各种小卡片、客服等，自由拖动。支持一次全局引入，无需每个页面都引用。你可以直接复制源码，复制到你的项目中，附带全局组件注册的方法（要不每个页面都需要引一次），uniappVu
  • React 和 Vue _使用区别 开心小老虎 react知识点+组件vue3知识点+组件前端知识点vue.jsreact.js前端
    目录一、框架介绍1.Vue2.React二、框架结构1.创建应用2.框架结构三、使用区别1.单页面组成2.样式3.显示响应式数据4.响应式html标签属性5.控制元素显隐6.条件渲染7.渲染列表react和vue是目前前端比较流行的两大框架，前端程序员应该将两种框架都掌握，本文总结一些基本知识点的使用区别。一、框架介绍1.VueVue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。
  • Vue3 + TypeScript 实战经验：2025年高效开发指南 ctrl_cv工程师￥ typescriptjavascript前端
    在2024年的前端工程化浪潮中，Vue3与TypeScript已成为企业级应用的黄金组合。本文将基于多个真实项目经验，从工程规范、类型安全、性能优化三个维度，分享实战技巧与避坑指南。一、工程配置：构建坚如磐石的基础1.脚手架选择与优化1.1推荐方案：使用Vite+create-vue初始化项目（2024年默认模板已集成TypeScript）关键配置：//vite.config.tsexportde
  • react和vue 基础使用对比 圣京都 reactreact.jsjavascriptvue.js
    1.实现功能（ts）0.基础属性使用1.组件直接的通信2.useState动态修改值3.循环遍历功能4.实现类型vue的watch，filter，computed属性功能5.实现类似vue2的生命周期5.类型vuev-if功能的实现2.文件结构图3.具体代码interface.tsimport"./index.less";import{message}from"antd";import{useSt
  • 页面刷新时如何实现vuex数据缓存 拉米医生 缓存json前端javascript开发语言
    在Vuex中，您可以使用本地存储(例如localStorage)来缓存状态数据，并在页面刷新时将其加载回状态中。首先，您需要在Vuex的store实例中定义一个方法，用于在页面刷新时从本地存储中加载数据：conststore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count++}},actions:{loa
  • vuex-persistedstate缓存vuex状态数据 abytecoder 经验分享
    `vuex-persistedstate`是一个用于在Vuex中实现数据持久化的插件，可以将Vuexstore中的状态持久化到本地存储中（如localStorage或sessionStorage）。以下是一个简单的示例，演示如何使用`vuex-persistedstate`插件：首先，安装`vuex-persistedstate`：```bashnpminstallvuex-persistedst
  • echarts实现3d饼图 qq_45600165 echarts前端javascript
    import*asechartsfrom'echarts'import'echarts-gl'//import{ref}from'vue';import{onMounted,onUnmounted,toRefs,ref,reactive,watch}from'vue'exportdefault{props:{//定义prop的名称和类型data:Object},setup(props){letst
  • vuex持久化处理 孟孟_mengmeng 前端vue.js前端javascript
    在使用vuex时有一个弊端就是，就是一旦页面刷新，所有之前存储的状态就全部没了，这是因为js代码运行在内存中，代码运行时所有的变量和函数都是保存在内存中的，刷新的时候以前申请的内存将会被释放，并且js脚本会被重新加载，变量重新赋值。所以在我们使用vuex的时候只要一刷新数据就没了。如果我们想要持久化保存数据可以使用localStorage或者sessionStorage存储在本地，保证刷新后数据不
  • java封装继承多态等 麦田的设计者 javaeclipsejvmcencapsulatopn
           最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。     1、final关键字       译为：最终的        &
  • F5与集群的区别 bijian1013 weblogic集群F5
            http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。         F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似
  • LeetCode[Math] - #7 Reverse Integer Cwind java题解MathLeetCodeAlgorithm
    原题链接：#7 Reverse Integer   要求： 按位反转输入的数字 例1： 输入 x = 123, 返回 321 例2： 输入 x = -123, 返回 -321   难度：简单   分析： 对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但
  • BufferedOutputStream 周凡杨
         首先说一下这个大批量，是指有上千万的数据量。      例子：      有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！      select t.msisd
  • linux下模拟按键输入和鼠标 被触发 linux
    查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键 模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 linux/in
  • ContentProvider初体验 肆无忌惮_ ContentProvider
    ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。 在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。 如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte
  • 关于Spring MVC项目（maven）中通过fileupload上传文件 843977358 mybatisspring mvc修改头像上传文件upload
    Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。   1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定） <!-- 文件上传 start by zhangyd-c --&g
  • 使用svnkit api，纯java操作svn，实现svn提交，更新等操作 aigo svnkit
     原文：http://blog.csdn.net/hardwin/article/details/7963318   import java.io.File; import org.apache.log4j.Logger; import org.tmatesoft.svn.core.SVNCommitInfo; import org.tmateso
  • 对比浏览器，casperjs，httpclient的Header信息 alleni123 爬虫crawlerheader
    @Override protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { String type=req.getParameter("type"); Enumeration es=re
  • java.io操作 DataInputStream和DataOutputStream基本数据流 百合不是茶 java流
    1，java中如果不保存整个对象，只保存类中的属性，那么我们可以使用本篇文章中的方法，如果要保存整个对象  先将类实例化  后面的文章将详细写到     2，DataInputStream 是java.io包中一个数据输入流允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型。应用程序可以使用数据输出流写入稍后由数据输入流读取的数据。
  • 车辆保险理赔案例 bijian1013 车险
    理赔案例： 一货运车，运输公司为车辆购买了机动车商业险和交强险，也买了安全生产责任险，运输一车烟花爆竹，在行驶途中发生爆炸，出现车毁、货损、司机亡、炸死一路人、炸毁一间民宅等惨剧，针对这几种情况，该如何赔付。 赔付建议和方案： 客户所买交强险在这里不起作用，因为交强险的赔付前提是：“机动车发生道路交通意外事故”； 如果是交通意外事故引发的爆炸，则优先适用交强险条款进行赔付，不足的部分由商业
  • 学习Spring必学的Java基础知识(5)—注解 bijian1013 javaspring
            文章来源：http://www.iteye.com/topic/1123823，整理在我的博客有两个目的：一个是原文确实很不错，通俗易懂，督促自已将博主的这一系列关于Spring文章都学完；另一个原因是为免原文被博主删除，在此记录，方便以后查找阅读。           有必要对
  • 【Struts2一】Struts2 Hello World bit1129 Hello world
    Struts2 Hello World应用的基本步骤 创建Struts2的Hello World应用，包括如下几步： 1.配置web.xml 2.创建Action 3.创建struts.xml，配置Action 4.启动web server，通过浏览器访问   配置web.xml <?xml version="1.0" encoding="
  • 【Avro二】Avro RPC框架 bit1129 rpc
    1. Avro RPC简介 1.1. RPC RPC逻辑上分为二层，一是传输层，负责网络通信；二是协议层，将数据按照一定协议格式打包和解包 从序列化方式来看，Apache Thrift 和Google的Protocol Buffers和Avro应该是属于同一个级别的框架，都能跨语言，性能优秀，数据精简，但是Avro的动态模式（不用生成代码，而且性能很好）这个特点让人非常喜欢，比较适合R
  • lua　set get cookie ronin47 lua cookie
    lua: local access_token = ngx.var.cookie_SGAccessToken if access_token then ngx.header["Set-Cookie"] = "SGAccessToken="..access_token.."; path=/;Max-Age=3000" end
  • java-打印不大于N的质数 bylijinnan java
    public class PrimeNumber { /** * 寻找不大于N的质数 */ public static void main(String[] args) { int n=100; PrimeNumber pn=new PrimeNumber(); pn.printPrimeNumber(n); System.out.print
  • Spring源码学习-PropertyPlaceholderHelper bylijinnan javaspring
    今天在看Spring 3.0.0.RELEASE的源码，发现PropertyPlaceholderHelper的一个bug 当时觉得奇怪，上网一搜，果然是个bug，不过早就有人发现了，且已经修复： 详见： http://forum.spring.io/forum/spring-projects/container/88107-propertyplaceholderhelper-bug
  • [逻辑与拓扑]布尔逻辑与拓扑结构的结合会产生什么? comsci 拓扑
       如果我们已经在一个工作流的节点中嵌入了可以进行逻辑推理的代码,那么成百上千个这样的节点如果组成一个拓扑网络,而这个网络是可以自动遍历的,非线性的拓扑计算模型和节点内部的布尔逻辑处理的结合,会产生什么样的结果呢?    是否可以形成一种新的模糊语言识别和处理模型呢?  大家有兴趣可以试试,用软件搞这些有个好处,就是花钱比较少,就算不成
  • ITEYE 都换百度推广了 cuisuqiang GoogleAdSense百度推广广告外快
    以前ITEYE的广告都是谷歌的Google AdSense，现在都换成百度推广了。   为什么个人博客设置里面还是Google AdSense呢？   都知道Google AdSense不好申请，这在ITEYE上也不是讨论了一两天了，强烈建议ITEYE换掉Google AdSense。至少，用一个好申请的吧。   什么时候能从ITEYE上来点外快，哪怕少点
  • 新浪微博技术架构分析 dalan_123 新浪微博架构
    新浪微博在短短一年时间内从零发展到五千万用户，我们的基层架构也发展了几个版本。第一版就是是非常快的，我们可以非常快的实现我们的模块。我们看一下技术特点，微博这个产品从架构上来分析，它需要解决的是发表和订阅的问题。我们第一版采用的是推的消息模式，假如说我们一个明星用户他有10万个粉丝，那就是说用户发表一条微博的时候，我们把这个微博消息攒成10万份，这样就是很简单了，第一版的架构实际上就是这两行字。第
  • 玩转ARP攻击 dcj3sjt126com r
    我写这片文章只是想让你明白深刻理解某一协议的好处。高手免看。如果有人利用这片文章所做的一切事情，盖不负责。 网上关于ARP的资料已经很多了，就不用我都说了。 用某一位高手的话来说，“我们能做的事情很多，唯一受限制的是我们的创造力和想象力”。 ARP也是如此。 以下讨论的机子有 一个要攻击的机子：10.5.4.178 硬件地址：52:54:4C:98
  • PHP编码规范 dcj3sjt126com 编码规范
    一、文件格式 1. 对于只含有 php 代码的文件，我们将在文件结尾处忽略掉 "?>" 。这是为了防止多余的空格或者其它字符影响到代码。例如：<?php$foo = 'foo';2. 缩进应该能够反映出代码的逻辑结果，尽量使用四个空格，禁止使用制表符TAB，因为这样能够保证有跨客户端编程器软件的灵活性。例
  • linux 脱机管理（nohup） eksliang linux nohupnohup
    脱机管理 nohup 转载请出自出处：http://eksliang.iteye.com/blog/2166699 nohup可以让你在脱机或者注销系统后，还能够让工作继续进行。他的语法如下 nohup [命令与参数] --在终端机前台工作 nohup [命令与参数] & --在终端机后台工作   但是这个命令需要注意的是，nohup并不支持bash的内置命令，所
  • BusinessObjects Enterprise Java SDK greemranqq javaBOSAPCrystal Reports
    最近项目用到oracle_ADF  从SAP/BO 上调用 水晶报表，资料比较少，我做一个简单的分享，给和我一样的新手 提供更多的便利。   首先，我是尝试用JAVA JSP 去访问的。   官方API：http://devlibrary.businessobjects.com/BusinessObjectsxi/en/en/BOE_SDK/boesdk_ja
  • 系统负载剧变下的管控策略 iamzhongyong 高并发
    假如目前的系统有100台机器，能够支撑每天1亿的点击量（这个就简单比喻一下），然后系统流量剧变了要，我如何应对，系统有那些策略可以处理，这里总结了一下之前的一些做法。 1、水平扩展 这个最容易理解，加机器，这样的话对于系统刚刚开始的伸缩性设计要求比较高，能够非常灵活的添加机器，来应对流量的变化。 2、系统分组 假如系统服务的业务不同，有优先级高的，有优先级低的，那就让不同的业务调用提前分组
  • BitTorrent DHT 协议中文翻译 justjavac bit
    前言 做了一个磁力链接和BT种子的搜索引擎 {Magnet & Torrent}，因此把 DHT 协议重新看了一遍。 BEP: 5Title: DHT ProtocolVersion: 3dec52cb3ae103ce22358e3894b31cad47a6f22bLast-Modified: Tue Apr 2 16:51:45 2013 -070
  • Ubuntu下Java环境的搭建 macroli java工作ubuntu
    配置命令： 　　$sudo apt-get install ubuntu-restricted-extras 　　再运行如下命令： 　　$sudo apt-get install sun-java6-jdk 　　待安装完毕后选择默认Java. 　　$sudo update- alternatives --config java 　　安装过程提示选择，输入“2”即可，然后按回车键确定。
  • js字符串转日期（兼容IE所有版本） qiaolevip TODateStringIE
    /** * 字符串转时间（yyyy-MM-dd HH:mm:ss） * result （分钟） */ stringToDate : function(fDate){ var fullDate = fDate.split(" ")[0].split("-"); var fullTime = fDate.split("
  • 【数据挖掘学习】关联规则算法Apriori的学习与SQL简单实现购物篮分析 superlxw1234 sql数据挖掘关联规则
    关联规则挖掘用于寻找给定数据集中项之间的有趣的关联或相关关系。 关联规则揭示了数据项间的未知的依赖关系，根据所挖掘的关联关系，可以从一个数据对象的信息来推断另一个数据对象的信息。 例如购物篮分析。牛奶 ⇒ 面包 [支持度：3%，置信度：40%] 支持度3%：意味3%顾客同时购买牛奶和面包。 置信度40%：意味购买牛奶的顾客40%也购买面包。 规则的支持度和置信度是两个规则兴
  • Spring 5.0 的系统需求，期待你的反馈 wiselyman spring
                   Spring 5.0将在2016年发布。Spring5.0将支持JDK 9。          Spring 5.0的特性计划还在工作中，请保持关注，所以作者希望从使用者得到关于Spring 5.0系统需求方面的反馈。