清秋挽风
清秋挽风

用JS原生实现锚点定位功能/动态目录高亮

用JS原生实现锚点定位功能/动态目录高亮_第1张图片

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
			}

			.container {
				width: 100%;
				display: flex;
				padding: 20px 50px;
				box-sizing: border-box;
			}

			.directory {
				width: 200px;
			}

			.content {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.content h2 {
				margin: 0;
			}

			.districtName {
				width: 100%;
			}

			.container .directory ul,
			.container .directory li {
				list-style: none;
			}

			#category {
				position: sticky;
				top: 16px;
				right: 0;
			}

			#category a {
				padding: 0 16px;
				color: #2d2e2f;
				outline: none;
				text-decoration: none;
				line-height: 30px;
			}

			#category a:hover {
				background: #efefef;
			}

			#category a.active {
				background: #efefef;
				color: #1890ff;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="content">
				<div data-tab="districtName1" class="districtName">
					<h2 class="data-tab">页面一</h2>
					<section class="markdown">
						<p>按钮用于开始一个即时操作。</p>
						</h2>
						<p>标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。</p>
						<ul>
							<li>
								<p>主按钮：用于主行动点，一个操作区域只能有一个主按钮。</p>
							</li>
							<li>
								<p>默认按钮：用于没有主次之分的一组行动点。</p>
							</li>
							<li>
								<p>虚线按钮：常用于添加操作。</p>
							</li>
							<li>
								<p>文本按钮：用于最次级的行动点。</p>
							</li>
							<li>
								<p>链接按钮：一般用于链接，即导航至某位置。</p>
							</li>
						</ul>
						<p>以及四种状态属性与上面配合使用。</p>
						<ul>
							<li>
								<p>危险：删除/移动/修改权限等危险操作，一般需要二次确认。</p>
							</li>
							<li>
								<p>幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。</p>
							</li>
							<li>
								<p>禁用：行动点不可用的时候，一般需要文案解释。</p>
							</li>
							<li>
								<p>加载中：用于异步操作等待反馈的时候，也可以避免多次提交。</p>
							</li>
						</ul>
					</section>
				</div>
				<div data-tab="districtName2" class="districtName">
					<h2 class="data-tab">页面二</h2>
					<section class="markdown api-container">
						<ul>
							<li>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
								<p>页面二</p>
							</li>
						</ul>
					</section>
				</div>
				<div data-tab="districtName3" class=" districtName">
					<h2 class="data-tab">页面三</h2>
					<div>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
						<p>页面三</p>
					</div>
				</div>
				<div data-tab="districtName4" class="districtName">
					<h2 class="data-tab">页面四</h2>
					<div>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
						<p>页面四</p>
					</div>
				</div>
				<div data-tab="districtName5" class="districtName">
					<h2 class="data-tab">页面五</h2>
					<div>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
						<p>页面五</p>
					</div>
				</div>
			</div>
			<div class="directory">
				<div id="category">
					<ul>
					</ul>
				</div>
			</div>
		</div>
		<div style="height: 500px; background: #eee;">

		</div>
	</body>
	<script>
		class dataScroll {
			// 声明获取名字的节点
			districtName = document.querySelectorAll('.container .districtName')
			constructor() {
				this.init()
			}
			init() {
				this.initDom() //初始化dom
				this.initScroll() //初始化监听滚动
			}
			initDom() {
				var districtName = this.districtName
				var directoryDom = document.querySelector('.directory #category ul')
				let Listdom = "";
				districtName.forEach(item => {
					let linkClass = item.querySelector(".data-tab")
					Listdom += `
  • ${item.getAttribute('data-tab')}>${linkClass.innerHTML}
    • `    
				})
				directoryDom.innerHTML = Listdom
				var Alist = directoryDom.querySelectorAll("li a")
				Alist.forEach(el => {
					el.addEventListener('click', function(e) {
						let aClick = e.target.getAttribute("data-tab")
						districtName.forEach(targetNode => {
							if (targetNode.getAttribute('data-tab') === e.target.getAttribute(
									"data-tab")) {
								//页面直接滚动不过度 A标签高亮
								// document.documentElement.scrollTop = targetNode.offsetTop
								// 页面动画滚动过度 A标签高亮
								targetNode.scrollIntoView({
									behavior: "smooth",
									block: "start",
									inline: "start",
								});
							}
						})
					})
				})
			}
			initScroll() {
				window.addEventListener("scroll", (e) => {
					var scroll = document.documentElement.scrollTop || document.body.scrollTop;
					var sections = this.districtName
					for (var i = sections.length - 1; i >= 0; i--) {
						if (parseInt(scroll) >= Math.ceil(sections[i].offsetTop) - 20) {
							this.activeLoadScroll(sections[i].getAttribute('data-tab'))
							return
						}
					}
				})
			}
			activeLoadScroll(sections) {
				var categoryDomA = document.querySelectorAll('.directory #category ul li a')
				categoryDomA.forEach(item => {
					if (item.getAttribute('data-tab') == sections) {
						item.className = "active"
					} else {
						item.className = ""
					}
				})
			}
		}
		new dataScroll() //初始化节点和监听滚动
	</script>

</html>

    你可能感兴趣的:(前端,笔记,javascript,前端,开发语言)

    • UNI-APP+VUE3+VITE+VSCode开发经验及填坑记录（持续更新ING） 集成显卡 前端项目实践uni-appvscodeide
      uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。快速开发模板unibest：最好的uniapp开发框架，由uniapp+Vue3+Ts+Vite5+UnoCss+VSCode(可选webstorm)+uni插件+wot-ui（
    • Qt爬坑笔记 klzed_ qtc++后端ui
      1.自定义一个QWidget的派生类，将其作为子部件并设置样式表时，需要重写paintEvent事件，否则样式表可能无效，如下所示：voidCustomWidget::paintEvent(QPaintEvent*){QStyleOptionopt;opt.init(this);QPainterp(this);
    • LeetCode刷题笔记 小李李李李腊八 leetcode算法java
      leetcode_01两数之和斐波那契数列三个数最大乘积反转链表x的平方根环形列表LeetCode随笔两数之和给定一个整数数组nums和一个整数目标值target，请你在该数组中找出和为目标值target的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。暴力法记录下数组第一个数值，对数组进行循环，将之后的值
    • 【Spring AI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心交互函数及RAG知识库构建 un_fired spring人工智能java
      系列文章目录【SpringAI】基于专属知识库的RAG智能问答小程序开发——完整项目（含完整前端+后端代码）【SpringAI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心ChatClient对象相关构造函数【SpringAI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心交互函数及RAG知识库构建文章目录系列文章目录前言1.Service层知识库构建与检索函数详
    • numpy学习笔记2：ones = np.ones((2, 4)) 的详解 宁宁可可 #机器学习#Python基础与进阶numpypython开发语言
      numpy学习笔记2：ones=np.ones((2,4))的详解np.ones()是NumPy中用于创建全1数组的核心函数，其用法和参数与np.zeros()类似，但生成的数组元素值全部为1。以下是详细解释：1、语法numpy.ones(shape,dtype=float,order='C')作用：生成一个指定形状和数据类型的全1数组。参数：shape：数组的形状，以元组形式传递（如(2,4)表
    • 个人AI助手的未来：Yi AI开源系统助力快速搭建 耶耶Norsea 网络杂烩人工智能开源
      摘要YiAI推出了一站式个人AI助手平台解决方案，助力用户快速搭建专属AI助手。该平台采用全套开源系统，涵盖前端应用、后台管理及小程序功能，并基于MIT协议开放使用。同时，平台集成了本地RAG方案，利用Milvus与Weaviate向量数据库支持本地部署，为用户提供高效、灵活的数据处理能力。关键词个人AI助手,快速搭建,开源系统,本地RAG,向量数据库一、YiAI开源系统概述1.1个人AI助手的发
    • 软考 中级软件设计师 考点知识点笔记总结 day05 莫问alicia 软考中级软件设计师笔记算法
      文章目录4、栈和队列4.1、栈的定义4.2、队列定义5、串、数组、矩阵和广义表5.1、串5.2、数组5.3、稀疏矩阵5.4、广义表4、栈和队列4.1、栈的定义线性表是具有相同数据类型的n个数据元素的有限序列，n为表厂。n=0时线性表是一个空表L=（a1,a2,a3,…an）栈是只允许在一端进行插入或删除操作的线性表栈顶允许插入和删除的一端栈顶进栈顶出栈底不允许插入和删除的一端4.2、队列定义队列是
    • 2025React岗位前端面试题180道及其答案解析,看完稳了,万字长文,持续更新.... 祈澈菇凉 前端
      1.什么是React？它的主要特点是什么？答案解析：React是一个用于构建用户界面的JavaScript库，主要用于构建单页应用。其主要特点包括：组件化：React应用由多个可重用的组件组成，便于管理和维护。虚拟DOM：React使用虚拟DOM提高性能，通过最小化实际DOM操作来优化渲染过程。单向数据流：数据在组件之间以单向流动的方式传递，简化了数据管理和调试。声明式编程：React允许开发者以
    • numpy学习笔记10：arr *= 2向量化操作性能优化 宁宁可可 #机器学习#Python基础与进阶numpy学习笔记
      numpy学习笔记10：arr*=2向量化操作性能优化在NumPy中，直接对整个数组进行向量化操作（如arr*=2）的效率远高于显式循环（如foriinrange(len(arr)):arr[i]*=2）。以下是详细的解释：1.性能差异的原理(1)底层实现不同显式循环（错误示范）：Python的for循环是解释执行的，每次迭代需要动态解析变量类型、执行函数调用等操作。对每个元素的操作会触发多次Py
    • Python前端开发 PITSU 正则表达式htmlcss3mysql
      Python前端开发1.前端三剑客（HTML，CSS和JavaScript）1.1HTML1.1.1HTML简介HyperTextMark-upLanguage,指的是超文本标记语言；html是开发网页的语言；html中的标签大多数都是成对出现的,格式:1.1.2HTML结构第一行是文档声明部分HTML：分为页头，页身和页脚。标签大部分是成对出现1.1.3第一行文档声明部分HTML在vscode中
    • FastAPI测试策略：参数解析单元测试 qcidyu 文章归档异常传播验证依赖注入测试请求模拟技术测试覆盖率优化Pydantic验证测试单元测试策略参数解析测试
      扫描二维码关注或者微信搜一搜：编程智域前端至全栈交流与成长探索数千个预构建的AI应用，开启你的下一个伟大创意第一章：核心测试方法论1.1三层测试体系架构#第一层：模型级测试deftest_user_model_validation():withpytest.raises(ValidationError):User(age=-5)#第二层：依赖项测试deftest_auth_dependency()
    • 【前端网络深潜行者】信息化人员必备知识&面试宝典：TCP连接中断，客户端突然“玩失踪”怎么办？ DTcode7 IT信息技术相关#信息化技能面试宝典HTML5前端javascript前端三大核心JS
      【前端网络深潜行者】信息化人员必备知识&面试宝典：TCP连接中断，客户端突然“玩失踪”怎么办？TCP的忠诚卫士：保活与重传保活机制（Keepalive）超时重传与超时前端策略：优雅的应对与重连案例一：心跳检测案例二：断线重连逻辑安全与性能考量实战经验之谈排错思路结语与探讨在网络通信的迷宫中，TCP/IP协议犹如稳固的桥梁，承载着数据的往来。然而，当客户端这个“信使”突然玩起了失踪”，我们如何确保这
    • Python个人学习笔记（17）：模块（sys、pickle&json） NEET_LH 樵夫老师Python零基础课程个人学习笔记python学习笔记
      五、sys模块sys.exit()：退出while1:print(123)sys.exit(0)#程序退出，0是正常退出，1是非正常退出，记录在日志中sys.version：得到当前解释器的运行环境sys.platform：运行平台，win32=windows代码：print(sys.version)print(sys.platform)结果：3.13.0(tags/v3.13.0:60403a5
    • 【微信小程序变通实现DeepSeek支持语音】 技术与健康 微信小程序小程序
      微信小程序实现录音转文字，并调用后端服务（Node.js）进行语音识别和，然后调用DeepSeek处理的完整实现。整体架构前端（微信小程序）：实现录音功能。将录音文件上传到后端。接收后端返回的语音识别结果，并显示在可编辑的文本框中。调用DeepSeek处理文本。后端（Node.js）：接收小程序上传的录音文件。调用腾讯云语音识别（ASR）服务，将语音转换为文字。返回识别结果给小程序。提供DeepS
    • python学习笔记之异常（内置标准异常总结） Molly_DD Python学习笔记python软件测试
      python异常处理机制异常处理是python的一种高级工具，当异常发生时，程序会停止当前的所有工作，跳转到异常处理部分去执行。异常既可以是程序错误引发的，也可以由代码主动触发。异常处理基本结构try:可能引发异常的代码except异常类型名称：异常处理代码else：没有发生异常时执行的代码异常报错：try：classtest:defgetdata(self):returnself.datay=t
    • 微前端 qiankun vite vue3 可缺不可滥 前端项目框架前端
      文章目录简介主应用qiankun-mainvue3vite子应用qiankun-app-vue2webpack5子应用qiankun-reactwebpack5子应用quankun-vue3vite遇到的问题简介主要介绍以qiankun框架为基础，vite搭建vue3项目为主应用，wepackvue2和webpackreact搭建的子应用，形成的一个微前端框架。主应用qiankun-mainvue
    • 小黑笔记本，写的todolist效果，增删效果，显示隐藏，全部清除效果。 YangHuan3 html
      先说一下总的大致要去实现的效果：1.新增2.删除3.统计4.清除5.隐藏给大家看一下todoList的大致样式吧！第一个效果：新增1.生成列表结构（v-for数组）2.获取用户输入（v-model）3.回车获取数据（v-on，enter添加数据）第二个效果：删除1.点击删除指定的内容（v-onsplice索引）通过对应的下标删除指定的元素，并且v-for指定的内部是可以获取到当前循环元素下标的，这
    • 【Vue+TypeScript实战指南：提高代码质量和开发效率】 小怪兽9699 typescriptvue.js前端
      前言在现代前端开发中，Vue.js是一个非常流行且强大的框架，而TypeScript则是增强代码类型安全性和可维护性的利器。本文将详细介绍如何结合Vue和TypeScript来构建高质量的应用程序。无论你是有一定基础的开发者还是希望进一步提升技能的高手，本文都将为你提供详细的步骤和代码示例。1.环境搭建首先，确保你已经安装了Node.js和npm。然后，全局安装VueCLI：npminstall-
    • 若依框架入门指南：快速上手SpringBoot+前后端分离版 小小鸭程序员 springjavaspringboot后端intellij-idea
      若依（RuoYi）是一款基于SpringBoot的快速开发平台，集成了权限管理、代码生成、监控管理等功能。本文将以SpringBoot+Vue前后端分离版本为例，带你快速上手若依框架。一、环境准备基础环境：JDK1.8+MySQL5.7+Redis5.0+Maven3.6+Node.js14+（前端）下载项目：#后端项目gitclonehttps://gitee.com/y_project/Ruo
    • 在Ubuntu上安装MEAN Stack的4个步骤 ubuntu
      在Ubuntu上安装MEANStack的4个步骤为：1.安装MEAN；2.安装MongoDB；3.安装NodeJS，Git和NPM；4.安装剩余的依赖项。什么是MEANStack？平均堆栈一直在很大程度上升高为基于稳健的基于JavaScript的开发堆栈。名称的意思是指其组件;MongoDB，ExpressJS，Angularjs和NodeJS。第1步：安装MEAN对于此安装，我们将在本指南中使用
    • Vue.js的watch监听 阿珊和她的猫 vue.js前端javascript
      前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录引言`watch`选项的基本概念`watch`选项的基本语法`watch
    • 移动端IOS的H5页面被键盘顶起后，底部有一大片空白区域的解决方法 不怕麻烦的鹿丸 浏览器HTML5JavaScript前端html5javascript
      在移动端开发中，当使用HTML5(特别是在Vue.js框架下)构建应用时，经常会遇到键盘弹出导致页面内容被顶起的问题。当键盘收起后，页面未能自动恢复到原来的位置。当键盘弹出时，你可以通过JavaScript监听键盘的显示和隐藏事件，并相应地调整页面的滚动位置。exportdefault{mounted(){window.addEventListener('focusin',this.handleF
    • 【unity&Node.js篇】多人联机游戏开发代码规范 雅鸦 unitynode.js代码规范
      多人联机游戏前端（Unity）与后端（Node.js）代码规范说明书这份代码规范旨在帮助多人联机游戏的开发团队建立一致性和高质量的代码标准，涵盖前端（Unity）和后端（Node.js）开发部分。无论是游戏逻辑的实现、多人同步机制、网络通信还是错误处理，都需要清晰的规范来确保代码的可维护性、可扩展性与高效性。1.Unity前端代码规范1.1命名规范变量、函数命名：使用PascalCase（大驼峰）
    • python、JavaScript 、JAVA等实例代码演示教你如何免费获取股票数据（实时数据、历史数据、CDMA、KDJ等指标数据）配有股票数据API接口说明文档详解参数说明 蝶澈乐乐 pythonjavascriptjava股票数据接口api开发语言
      近一两年来，股票量化分析逐渐受到广泛关注。而作为这一领域的初学者，首先需要面对的挑战就是如何获取全面且准确的股票数据。因为无论是实时交易数据、历史交易记录、财务数据还是基本面信息，这些数据都是我们进行量化分析时不可或缺的宝贵资源。我们的核心任务是从这些数据中挖掘出有价值的信息，为我们的投资策略提供有力的支持。在寻找数据的过程中，我尝试了多种途径，包括自编网易股票页面爬虫、申万行业数据爬虫，以及同花
    • HPC综合-心得与笔记【19】 sakura_sea HPCand3DGraphicsEngine线性规划
      Dijkstra算法【2】基础距离数组dist，设置起点距离为0，其他节点距离为无穷大（∞）用最小堆创建优先队列，将起点放入队列。从队列中取出当前距离最小的节点u。遍历u的每个邻接节点v，计算从起点到v的路径长度：alt=dist[u]+weight(u,v)。如果altdist[u]:continue#遍历邻接节点forv,weightingraph[u].items():alt=dist[u]
    • python-56-基于Vue和Flask进行前后端分离的项目开发示例实战 皮皮冰燃 python3pythonvue.jsflask
      文章目录1创建Vue前端项目1.1运行demo1.2实现需求2flask部署上述dist(前后端未分离)2.1代码app.py2.2运行访问3nginx部署(前后端分离)3.1nginx前端服务3.3.1windows安装nginx3.3.2修改nginx.conf配置文件3.3.3启动nginx3.3.3停止nginx3.2启动后端服务3.2.1app.py(去除前端渲染)3.2.2启动flas
    • 什么是 XSS（跨站脚本攻击）？ Aishenyanying33 web漏洞owastop10xssxss漏洞
      XSS（Cross-SiteScripting）是黑客通过在网页中注入恶意JavaScript代码，让受害者的浏览器执行这些代码的攻击方式。常见攻击场景XSS攻击通常发生在网站允许用户提交内容的地方，例如：论坛、留言板（黑客发布恶意评论）博客文章（黑客在评论区插入恶意代码）搜索框（黑客让受害者访问特定链接）XSS实战演示1️⃣漏洞场景：不安全的留言板假设一个网站vulnerable.com允许用户
    • 《算法笔记》9.4小节——数据结构专题(2)-＞二叉查找树（BST） 问题 A: 二叉排序树 圣保罗的大教堂 《算法笔记》算法
      题目描述输入一系列整数，建立二叉排序数，并进行前序，中序，后序遍历。输入输入第一行包括一个整数n(1#include#include#include#include#include#include#include#include#include#include#include#include#include#defineINF0x3f3f3f3f#definedb1(x)coutleft);Fre
    • pipost 如何提升团队协作效率 [特殊字符] Kairo_01 postman
      开发团队中的沟通障碍在许多开发团队中，前端工程师、后端工程师和QA测试人员之间的同步往往会浪费大量时间。不断的会议和对齐会话减慢了整个过程，严重影响了生产力。以下是一些常见的痛点：前端和后端团队需要不断对API接口进行同步。测试人员必须反复确认API行为。产品经理必须确保每个人都对项目需求达成一致。这些沟通障碍导致开发周期延长、团队士气下降和项目发布推迟。通过Apipost提高协作效率1.精简的A
    • 小红书app复制链接转换为直接可访问链接，网页版链接，小红书短链转长链（最新版） 才华是浅浅的耐心 python爬虫开发语言
      简介：小红书手机app分享的链接需要点击才能获取完成链接，本文教大家如何通过代码的方式将xhs的短连接转化为长链接。1.正常我们分享的链接是这样的：44小猪吃宵夜发布了一篇小红书笔记，快来看吧！KeA1GIGiSMXGWy7http://xhslink.com/a/sT7omKb6ijX6，复制本条信息，打开【小红书】App查看精彩内容！转换后是这样的：https://www.xiaohongsh
    • 分享100个最新免费的高匿HTTP代理IP mcj8089 代理IP代理服务器匿名代理免费代理IP最新代理IP
        推荐两个代理IP网站：   1. 全网代理IP：http://proxy.goubanjia.com/   2. 敲代码免费IP：http://ip.qiaodm.com/     120.198.243.130:80,中国/广东省 58.251.78.71:8088,中国/广东省 183.207.228.22:83,中国/
    • mysql高级特性之数据分区 annan211 java数据结构mongodb分区mysql
      mysql高级特性 1 以存储引擎的角度分析，分区表和物理表没有区别。是按照一定的规则将数据分别存储的逻辑设计。器底层是由多个物理字表组成。 2 分区的原理 分区表由多个相关的底层表实现，这些底层表也是由句柄对象表示，所以我们可以直接访问各个分区。存储引擎管理分区的各个底层 表和管理普通表一样(所有底层表都必须使用相同的存储引擎)，分区表的索引只是
    • JS采用正则表达式简单获取URL地址栏参数 chiangfai js地址栏参数获取
      GetUrlParam:function GetUrlParam(param){ var reg = new RegExp("(^|&)"+ param +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null
    • 怎样将数据表拷贝到powerdesigner (本地数据库表) Array_06 powerDesigner
      ================================================== 1、打开PowerDesigner12，在菜单中按照如下方式进行操作 file->Reverse Engineer->DataBase 点击后，弹出 New Physical Data Model 的对话框 2、在General选项卡中 Model name:模板名字，自
    • logbackのhelloworld 飞翔的马甲 日志logback
      一、概述 1.日志是啥？ 当我是个逗比的时候我是这么理解的：log.debug()代替了system.out.print(); 当我项目工作时，以为是一堆得.log文件。 这两天项目发布新版本，比较轻松，决定好好地研究下日志以及logback。 传送门1：日志的作用与方法： http://www.infoq.com/cn/articles/why-and-how-log 上面的作
    • 新浪微博爬虫模拟登陆 随意而生 新浪微博
      转载自：http://hi.baidu.com/erliang20088/item/251db4b040b8ce58ba0e1235     近来由于毕设需要，重新修改了新浪微博爬虫废了不少劲，希望下边的总结能够帮助后来的同学们。      现行版的模拟登陆与以前相比，最大的改动在于cookie获取时候的模拟url的请求
    • synchronized 香水浓 javathread
          Java语言的关键字，可用来给对象和方法或者代码块加锁，当它锁定一个方法或者一个代码块的时候，同一时刻最多只有一个线程执行这段代码。当两个并发线程访问同一个对象object中的这个加锁同步代码块时，一个时间内只能有一个线程得到执行。另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块。然而，当一个线程访问object的一个加锁代码块时，另一个线程仍然
    • maven 简单实用教程 AdyZhang maven
      1. Maven介绍  1.1. 简介 java编写的用于构建系统的自动化工具。目前版本是2.0.9，注意maven2和maven1有很大区别，阅读第三方文档时需要区分版本。 1.2. Maven资源 见官方网站；The 5 minute test，官方简易入门文档；Getting Started Tutorial，官方入门文档；Build Coo
    • Android 通过 intent传值获得null aijuans android
      我在通过intent 获得传递兑现过的时候报错，空指针,我是getMap方法进行传值，代码如下 1 2 3 4 5 6 7 8 9 public void getMap(View view){            Intent i =
    • apache 做代理 报如下错误：The proxy server received an invalid response from an upstream baalwolf response
      网站配置是apache＋tomcat,tomcat没有报错，apache报错是： The proxy server received an invalid response from an upstream server. The proxy server could not handle the request GET /. Reason: Error reading fr
    • Tomcat6 内存和线程配置 BigBird2012 tomcat6
      1、修改启动时内存参数、并指定JVM时区 （在windows server 2008 下时间少了8个小时） 在Tomcat上运行j2ee项目代码时，经常会出现内存溢出的情况，解决办法是在系统参数中增加系统参数：  window下， 在catalina.bat最前面 set JAVA_OPTS=-XX:PermSize=64M -XX:MaxPermSize=128m -Xms5
    • Karam与TDD bijian1013 KaramTDD
      一.TDD         测试驱动开发（Test-Driven Development,TDD）是一种敏捷（AGILE）开发方法论，它把开发流程倒转了过来，在进行代码实现之前，首先保证编写测试用例，从而用测试来驱动开发（而不是把测试作为一项验证工具来使用）。         TDD的原则很简单： a.只有当某个
    • [Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States bit1129 zookeeper
      public enum States { CONNECTING, //Zookeeper服务器不可用，客户端处于尝试链接状态 ASSOCIATING, //？？？ CONNECTED, //链接建立，可以与Zookeeper服务器正常通信 CONNECTEDREADONLY, //处于只读状态的链接状态，只读模式可以在
    • 【Scala十四】Scala核心八：闭包 bit1129 scala
      Free variable A free variable of an expression is a variable that’s used inside the expression but not defined inside the expression. For instance, in the function literal expression (x: Int) => (x
    • android发送json并解析返回json ronin47 android
      package com.http.test; import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.HttpGet; import
    • 一份IT实习生的总结 brotherlamp PHPphp资料php教程php培训php视频
      今天突然发现在不知不觉中自己已经实习了 3 个月了，现在可能不算是真正意义上的实习吧，因为现在自己才大三，在这边撸代码的同时还要考虑到学校的功课跟期末考试。让我震惊的是，我完全想不到在这 3 个月里我到底学到了什么，这是一件多么悲催的事情啊。同时我对我应该 get 到什么新技能也很迷茫。所以今晚还是总结下把，让自己在接下来的实习生活有更加明确的方向。最后感谢工作室给我们几个人这个机会让我们提前出来
    • 据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。 将重物放到天平左侧，问在两边如何添加砝码 bylijinnan java
      public class ScalesBalance { /** * 题目： * 给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。 （假设N无限大，但一种重量的砝码只有一个） * 将重物放到天平左侧，问在两边如何添加砝码使两边平衡 * * 分析： * 三进制 * 我们约定括号表示里面的数是三进制，例如 47=(1202
    • dom4j最常用最简单的方法 chiangfai dom4j
      要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4j包下载地址:http://nchc.dl.sourceforge.net/sourceforge/dom4j/dom4j-1.6.1.zip 解开后有两个包,仅操作XML文档的话把dom4j-1.6.1.jar加入工程就可以了,如果需要使用XPath的话还需要
    • 简单HBase笔记 chenchao051 hbase
       一、Client-side write buffer 客户端缓存请求 描述：可以缓存客户端的请求，以此来减少RPC的次数，但是缓存只是被存在一个ArrayList中，所以多线程访问时不安全的。 可以使用getWriteBuffer()方法来取得客户端缓存中的数据。 默认关闭。 二、Scan的Caching 描述： next( )方法请求一行就要使用一次RPC,即使
    • mysqldump导出时出现when doing LOCK TABLES daizj mysqlmysqdump导数据
      　　执行　mysqldump -uxxx -pxxx -hxxx -Pxxxx database tablename > tablename.sql　 导出表时，会报 mysqldump: Got error: 1044: Access denied for user 'xxx'@'xxx' to database 'xxx' when doing LOCK TABLES 解决
    • CSS渲染原理 dcj3sjt126com Web
        从事Web前端开发的人都与CSS打交道很多，有的人也许不知道css是怎么去工作的，写出来的css浏览器是怎么样去解析的呢？当这个成为我们提高css水平的一个瓶颈时，是否应该多了解一下呢？          一、浏览器的发展与CSS           
    • 《阿甘正传》台词 dcj3sjt126com
      Part Ⅰ: 《阿甘正传》Forrest Gump经典中英文对白 Forrest: Hello! My names Forrest. Forrest Gump. You wanna Chocolate? I could eat about a million and a half othese. My momma always said life was like a box ochocol
    • Java处理JSON dyy_gusi json
      Json在数据传输中很好用，原因是JSON 比 XML 更小、更快，更易解析。 在Java程序中，如何使用处理JSON，现在有很多工具可以处理，比较流行常用的是google的gson和alibaba的fastjson，具体使用如下： 1、读取json然后处理 class ReadJSON { public static void main(String[] args)
    • win7下nginx和php的配置 geeksun nginx
      1.  安装包准备 nginx :  从nginx.org下载nginx-1.8.0.zip php： 从php.net下载php-5.6.10-Win32-VC11-x64.zip， php是免安装文件。 RunHiddenConsole: 用于隐藏命令行窗口   2. 配置 # java用8080端口做应用服务器，nginx反向代理到这个端口即可 p
    • 基于2.8版本redis配置文件中文解释 hongtoushizi redis
      转载自： http://wangwei007.blog.51cto.com/68019/1548167        在Redis中直接启动redis-server服务时, 采用的是默认的配置文件。采用redis-server   xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务。下面是Redis2.8.9的配置文
    • 第五章 常用Lua开发库3-模板渲染 jinnianshilongnian nginxlua
      动态web网页开发是Web开发中一个常见的场景，比如像京东商品详情页，其页面逻辑是非常复杂的，需要使用模板技术来实现。而Lua中也有许多模板引擎，如目前我在使用的lua-resty-template，可以渲染很复杂的页面，借助LuaJIT其性能也是可以接受的。   如果学习过JavaEE中的servlet和JSP的话，应该知道JSP模板最终会被翻译成Servlet来执行；而lua-r
    • JZSearch大数据搜索引擎 颠覆者 JavaScript
      系统简介： 大数据的特点有四个层面：第一，数据体量巨大。从TB级别，跃升到PB级别；第二，数据类型繁多。网络日志、视频、图片、地理位置信息等等。第三，价值密度低。以视频为例，连续不间断监控过程中，可能有用的数据仅仅有一两秒。第四，处理速度快。最后这一点也是和传统的数据挖掘技术有着本质的不同。业界将其归纳为4个“V”——Volume，Variety，Value，Velocity。大数据搜索引
    • 10招让你成为杰出的Java程序员 pda158 java编程框架
      如果你是一个热衷于技术的  Java 程序员， 那么下面的 10 个要点可以让你在众多 Java 开发人员中脱颖而出。 　　 1. 拥有扎实的基础和深刻理解 OO 原则 　　对于 Java 程序员，深刻理解 Object Oriented Programming（面向对象编程）这一概念是必须的。没有 OOPS 的坚实基础，就领会不了像 Java 这些面向对象编程语言
    • tomcat之oracle连接池配置 小网客 oracle
      tomcat版本7.0 配置oracle连接池方式： 修改tomcat的server.xml配置文件： <GlobalNamingResources> <Resource name="utermdatasource" auth="Container" type="javax.sql.DataSou
    • Oracle 分页算法汇总 vipbooks oraclesql算法.net
          这是我找到的一些关于Oracle分页的算法，大家那里还有没有其他好的算法没？我们大家一起分享一下！ -- Oracle 分页算法一 select * from ( select page.*,rownum rn from (select * from help) page -- 20 = (currentPag
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他