格式化小拓
格式化小拓

day42-Live User Filter（实时用户过滤器）

50 天学习 50 个项目 - HTMLCSS and JavaScript

day42-Live User Filter（实时用户过滤器）

效果

index.html

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Live User Filtertitle>
    <link rel="stylesheet" href="style.css" />
head>

<body>
    
    <div class="container">
        <header class="header">
            <h4 class="title">实时用户筛选h4>
            <small class="subtitle">按名称和/或位置搜索small>
            <input type="text" id="filter" placeholder="Search">
        header>
        
        <ul id="result" class="user-list">
            <li>
                <h3>Loading...h3>
            li>
        ul>
    div>
    <script src="script.js">script>
body>

html>

style.css

/* 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

body {
    background: url('https://source.unsplash.com/random') no-repeat top center/cover;
    font-family: 'Roboto', sans-serif;
    /* 子元素居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 容器 */
.container {
    border-radius: 5px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: 300px;
}

/* 标题 */
.title {
    margin: 0;
}

/* 副标题 */
.subtitle {
    display: inline-block;
    margin: 5px 0 20px;
    opacity: 0.8;
}

/* 头部 */
.header {
    background-color: #3e57db;
    color: #fff;
    padding: 30px 20px;
}

/* 搜索框 */
.header input {
    background-color: rgba(0, 0, 0, 0.3);
    border: 0;
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    padding: 10px 15px;
    width: 100%;
    /* 去除聚焦时的边框效果 */
    outline: none;
}

/* 结果 */
.user-list {
    background-color: #fff;
    /* 去除li的小圆点 */
    list-style-type: none;
    margin: 0;
    padding: 0;
    max-height: 400px;
    /* 当内容高度超过元素定义的高度时，就会出现垂直滚动条，允许用户滚动查看超出部分的内容 */
    overflow-y: auto;
}

.user-list li {
    display: flex;
    padding: 20px;
}

.user-list img {
    border-radius: 50%;
    /* 图片覆盖 */
    object-fit: cover;
    height: 50px;
    width: 50px;
}

.user-list .user-info {
    margin-left: 10px;
}

.user-list .user-info h4 {
    margin: 0 0 10px;
}

.user-list .user-info p {
    font-size: 12px;
}

/* 不是最后一个li，都需要添加底部边框 */
.user-list li:not(:last-of-type) {
    border-bottom: 1px solid #eee;
}

/* 隐藏li，用于js */
.user-list li.hide {
    display: none;
}

script.js

// 重点 flex async await fetch input事件类型 https://randomuser.me/api?results=50 字符串的includes方法
// 1.获取元素节点
const result = document.getElementById('result')//结果
const filter = document.getElementById('filter')//搜索框
const listItems = []//展示的结果
// 初始化，获取所有列表信息
getData()
// 2.给搜索框绑定输入事件，实时进行筛选
filter.addEventListener('input', (e) => filterData(e.target.value))
// 异步获取所有列表信息
async function getData() {
    const res = await fetch('https://randomuser.me/api?results=50')

    const { results } = await res.json()
    // console.log(results);
    // 清除原来的列表信息防止影响本次的展示
    result.innerHTML = ''
    // 遍历，创建li用于展示
    results.forEach(user => {
        const li = document.createElement('li')

        listItems.push(li)

        li.innerHTML = `
            ${user.picture.large}" alt="${user.name.first}">
            
        `

        result.appendChild(li)
    })
}
// 函数过滤出
function filterData(searchTerm) {
    listItems.forEach(item => {
        if (item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
            item.classList.remove('hide')
        } else {
            // 不包含，即不显示
            item.classList.add('hide')
        }
    })
}

你可能感兴趣的:(50天50个小demo前端,html5,css3,javascript,前端,input,过滤器,实时)

  • HDFS的读写流程 熊與猫v 大数据hadoopbigdata
    一，HDFS的读写流程1.hdfs的写入流程文上传流程如下：创建文件：①HDFSclient向HDFS写入数据，先调用DistributedFileSystem.create()②RPC调用namenode的create()，会在HDFS目录树中指定的路径，添加新文件；并将操作记录在edits.log中namenode.create()方法执行完后，返回一个FSDataOutputStream，它
  • Window系统下开发Qt——在图片上绘制图形 十年编程老舅 QT开发qtc++qt5开发语言ui
    在图像处理程序中，经常需要在图片上绘制一些图像，用以提示用户或展示一些信息。例如，需要绘制一个矩形框，显示当前处理的图像是原图像的一部分。一般在Qt中，可以使用QLabel控件来显示图片。但是使用QLabel既显示图片又显示自己绘制的图形，会很不方便。可以自定义个类，继承自QLabel，并且重写QLabel的paintEvent方法，在此方法中，绘制自己的图形。QT文章推荐阅读：Qt开发必备技术栈
  • HDFS的读写流程步骤（附图文解析） m0_67265464 面试学习路线阿里巴巴hdfshadoop大数据面试intellij-idea
    1、HDFS的写入流程：详细步骤：client发起文件上传请求，通过RPC与NameNode建立通讯，NameNode检查目标文件是否已存在，父目录是否存在，返回是否可以上传；client请求第一个block该传输到哪些DataNode服务器上；NameNode根据配置文件中指定的备份数量及副本放置策略进行文件分配，返回可用的DataNode的地址，如：A，B，C；client请求3台DataNo
  • hdfs的读写流程 披星戴月的蝈蝈 hadoop面试题hdfshadoop大数据
    1.hdfs写数据面试回答方式1、客户端向NameNode发起上传请求2、NameNode进行权限检查，如果没有问题，返回可以上传通知3、客户端将文件切分多个block，并上传第一个block，NameNode返回主机列表4、客户端开始和对应的主机建立关联，开始上传第一个block及它的副本5、上传完第一个之后，接着上传剩余的block及副本，上传完成之后，由NameNode更新元数据2.hdfs
  • 基于 Spring 的本地事务管理 可儿·四系桜 java数据库
    1.什么是本地事务？本地事务是指在单一数据库系统内执行的一组操作，这些操作要么全部完成，要么全部不执行，是一个不可分割的工作单元。本地事务具有ACID特性：原子性（Atomicity）：事务中的所有操作都作为一个整体提交或回滚；如果事务的一部分失败，则整个事务都会被撤销。一致性（Consistency）：事务将数据库从一个一致状态转换到另一个一致状态，确保数据的完整性和规则得到遵守。隔离性（Iso
  • 红黑树封装map和set超详解 HuaJiahhh c++专栏c++数据结构
    前言这篇博客完全是根据上篇博客红黑树来扩展的,代码的修改也是在红黑树那篇,大家可以先看看那篇代码再过来看看这篇更好食用哦!目录1.红黑树迭代器代码2.红黑树的insert代码3.map和set的封装4.最后代码总和5.最终测试1.红黑树迭代器代码1.1RBTreeNod(红黑树结点)修改:模板参数只需要一个即可,enumColour{RED,BLACK};templatestructRBTreeN
  • Unity中Tilemap Layer详解 天天进步2015 编程技巧unity游戏引擎
    Unity中TilemapLayer详解在Unity中，Tilemap的Layer用于管理和组织Tilemap中的瓷砖（Tiles），允许你在同一个场景中创建多个重叠的Tilemap层，以便更灵活地处理不同的图层效果，如背景、前景和碰撞层等。以下是详细的说明和示例：什么是Tilemap的Layer在Unity中，TilemapLayer是指在同一个Grid组件下的不同Tilemap对象，每个Til
  • 用红黑树实现map和set RadiumYang 算法C++
    用红黑树实现map和set上一篇文章讲解了如何实现红黑树：https://blog.csdn.net/Radium_1209/article/details/104873813这里我们用已经实现的红黑树来写一个简单的map和set。因为map有两个参数，所以我们要先对原来的代码进行微调，将传入的参数调整为Key和Value。还有一些地方需要微调，详见https://github.com/Radiu
  • HDFS安全模式 哒啵Q297 hdfshadoop大数据
    当hdfs集群启动的时候，由于要做很多的事情，这期间集群进入了安全模式离开安全模式的条件：NameNode启动后会进入一个称为安全模式的特殊状态。处于安全模式的NameNode对于客户端来说是只读的。NameNode从所有的DataNode接收心跳信号和块状态报告（blockreport）每个数据块都有一个指定的最小副本数（dfs.replication.min），当NameNode检测确认某个数
  • 知识图谱与大语言模型：构建智能问答系统 AGI大模型与大数据研究院 大数据AI人工智能计算大数据人工智能语言模型AI大模型LLMJavaPython架构设计AgentRPA
    1.背景介绍在当今的信息时代，数据的获取和处理已经成为了我们生活中不可或缺的一部分。然而，随着数据量的爆炸性增长，如何从海量的数据中提取有用的信息，进而为用户提供精准的服务，已经成为了一个重要的研究课题。在这个背景下，知识图谱和大语言模型应运而生，它们通过对数据的深度挖掘和智能处理，为构建智能问答系统提供了可能。2.核心概念与联系2.1知识图谱知识图谱是一种新型的数据结构，它以图的形式表示实体之间
  • 前端el-table导出pdf 努力奋进的前端小菜鸟 javascript前端vue.js
    1、首先来看下效果图2、使用技术：html2Canvas、JsPDF插件，mode_modules下载两个插件npm i html2Canvas JsPDF其中，html2Canvas负责把html转为图片，JsPDF负责把图片转为pdf文件3、点击按钮触发打印事件//点击按钮触发打印事件button@click='htmlToPdf(节点ID',文件名')'>print//传入打印节点，文件名,
  • Vue3的el-table-column下拉输入实时查询API数据选择的实现方法 KrityCat vue.jsjavascriptecmascript
    由于本人对el-table-column有下拉输入选择的要求，根据网上搜索的资料及本人优化，推出我比较满意的方法，供各位读者参考使用。效果图el-table-column写法changeProduct写法选择货品编号，展示接口提供的信息清空选择的数据获取选择的数据字段读取并展示对应的数据//选择货品functionchangeProduct(index,row){form.value.detail
  • 最大值的期望 与 期望的最大值 cc一枝花 概率论
    期望的最大值与最大值的期望先上结论:maxiE[Xi]≠E[maxiXi]max_i\mathbb{E}[X_i]\neq\mathbb{E}[max_iX_i]maxiE[Xi]=E[maxiXi]情况一：最大值和数学期望都关于自变量iii在这种情况下，最大值与期望都依赖于同一个随机变量。设有一个随机变量XiX_iXi，其中iii是一个离散的索引集合，例如i=1,2,…,ni=1,2,\dot
  • 【React】React中将 Props 传递给组件 笨鸟程序员 react前端技术前端javascriptreact.js
    当使用React时，props是组件之间传递数据的主要方式。以下是针对您提到的五个问题的详细解答：1.如何向组件传递props在父组件中，你可以通过组件标签的属性（attributes）将props传递给子组件。这些属性在子组件内部可以通过props对象来访问。functionParentComponent(){constname='Alice';constage=30;return();}fun
  • vue项目html页面生成PDF预览、下载及生成页面水印 我是槑槑 Vuehtml5vue.jsjavascriptcanvas
    html2canvas官方文档jspdf官方文档目录概述原理过程中遇到的问题生成的PDF截图代码示例加水印版代码示例现存问题概述因为生成的PDF内还有富文本，后端不好生成PDF，故由前端完成。原理html2canva生成截图，jsPDF利用图片生成PDF。过程中遇到的问题1、生成大于30多页时，容易造成生成页面黑屏问题。原因：canvas生成图片时，对内容高度有一定的限制，超过这个高度，canva
  • 后端接口重定向_Java访问重定向接口 董振业 后端接口重定向
    背景：开发做了一个免登陆的接口，方便我后续给管理后台做一些小工具，问题来了，给的免登陆接口是个302如图的test_login，在重定向一个200的接口(eload_admin)，原本开始这样做：02这个免登陆接口时，获取登录的cookies，在把登录后的cookies给200的接口，就是正常登录成功如图：登录成功后获200页面显示的内容session就表示获取了登录态问题：但是在代码中实施遇到一
  • java 重定向后的接口得到两个cookie 小泉水 java开发语言
    HTTP相关视频讲解：零拷贝的原理Java重定向后的接口得到两个cookie在Web开发中，重定向是一种常见的操作，通过重定向可以实现页面跳转、处理表单提交等功能。在Java中，我们通常使用HttpURLConnection或者HttpClient等工具来发送HTTP请求和接收响应。本文将介绍如何在Java中发送HTTP请求并处理重定向后得到的两个cookie。HTTP请求和重定向HTTP协议是一
  • react学习 guhy fighting reactreact.js学习前端
    react框架的选择低代码、BI前瞻性bs架构，网页客户端去使用react就是用来代替DOM的，dom操作，构建前端界面的react-native直接开发ios，安卓，原生应用虚拟dom，操作react，影响dom，中间人现在的dom和当前的dom做比较看哪个发生了变化，做最小的修改1、虚拟dom2、兼容性3、性能好，避免做一些多余的操作声明式编程：结果为导向命令式编程：过程为导向基于组件开发，组
  • 批处理CMD使用CURL 自动上传/下载文件 vistaup linux服务器
    需求当前有个需求，在不借助第三方工具的情况下（当然curl其实也是三方），设备A每天运行完成的报表，传递到设备B的指定文件夹中备份。A运行结束的时间不固定，这两台设备因为权限原因，没有办法安装第三方软件，也没有公网IP且不在一个局域网，所以考虑用一个FTP服务器做中转。当然有更好的方案也可以同步下。目前的其他思路：frp（本地端口映射安全性相对低），zerotier（尽量不使用三方软件）目前未解决
  • react页面定时器调用一组多个接口，如果接口请求返回令牌失效，清除定时器不再触发这一组请求 每一天，每一步 antdesign-reactreact.jsjavascript前端
    为了实现一个React页面使用定时器调用一组多个接口，并在任意一个接口请求返回令牌失效时清除定时器且不再触发这一组请求，可以遵循以下步骤：1.定义API调用函数：创建一个函数来处理一组API调用。每个API调用都应该检查响应状态以确定令牌是否有效。2.设置定时器：使用useEffect钩子和setInterval来设置定时器，该定时器会定期调用上述API调用函数。3.错误处理：在API调用中加入错
  • Android车机DIY开发之硬件篇(三)—NXP开发板介绍 勿忘初心91 车机DIYandroid单片机mcu嵌入式硬件arm开发
    Android车机DIY开发之硬件篇(三)—NXP开发板介绍1.讯为iTOP-iMX8MMini开发板官网介绍MINIPCIE可外接miniPCIE接口的4G模块,具备PCIE2.0单通道WIFI/BT支持4G模块支持（选配）MIPI-DSI1个无HDMISpeaker2路MIC支持MIC输入PHONE支持耳机输出CAN1路Speaker2路SDIO/GPIO接口20PINAndroid9.0系统
  • 二、React进阶 谁诉离殇~ 框架(level1)#React系列(level2)#react(level3)react.jsjavascript
    一、代码分割为什么要使用代码分割：在用webpack进行打包的时候，每个模块被导入合并在一个文件，这个文件叫做bundle，这些bundle在一张页面上包括了整个APP。然而，当APP增长的时候，这些bundle尺寸开始变得越来越大，因此影响了页面加载时间使用antdesignpro的时候，打包出来的不是一个bundle文件，而是把每个模块打包成了一个async.js。如果用了代码拆分中的impo
  • 获取PPT中的MSO格式图片报错 ♢.＊ pptpython
    亲爱的小伙伴们，在求知的漫漫旅途中，若你对深度学习的奥秘、Java与Python的奇妙世界，亦或是读研论文的撰写攻略有所探寻，那不妨给我一个小小的关注吧。我会精心筹备，在未来的日子里不定期地为大家呈上这些领域的知识宝藏与实用经验分享。每一个点赞，都如同春日里的一缕阳光，给予我满满的动力与温暖，让我们在学习成长的道路上相伴而行，共同进步✨。期待你的关注与点赞哟！image.ext的报错ValueEr
  • 知识图谱技术剖析 ♢.＊ 人工智能知识图谱大数据
    亲爱的小伙伴们，在求知的漫漫旅途中，若你对深度学习的奥秘、Java与Python的奇妙世界，亦或是读研论文的撰写攻略有所探寻，那不妨给我一个小小的关注吧。我会精心筹备，在未来的日子里不定期地为大家呈上这些领域的知识宝藏与实用经验分享。每一个点赞，都如同春日里的一缕阳光，给予我满满的动力与温暖，让我们在学习成长的道路上相伴而行，共同进步✨。期待你的关注与点赞哟！一、引言在当今数字化信息爆炸的时代，如
  • 如何使用调试与测试技巧：使用JUnit和Mockito简化单元测试 默 语 junit单元测试
    摘要在现代软件开发中，调试和测试是确保代码质量和可靠性的重要环节。对于Java开发者来说，JUnit和Mockito是两个非常常用的工具，它们能够显著简化单元测试，减少调试和测试中的复杂性。JUnit帮助开发者自动化和管理单元测试，而Mockito则用于模拟和“伪造”外部依赖，使测试更加简单和高效。本文将详细介绍如何使用JUnit和Mockito进行调试和测试，帮助你轻松编写高质量的Java代码。
  • 剑指 Offer II 002. 二进制加法 常某某的好奇心 数据结构
    comments:trueedit_url:https://github.com/doocs/leetcode/edit/main/lcof2/%E5%89%91%E6%8C%87%20Offer%20II%20002.%20%E4%BA%8C%E8%BF%9B%E5%88%B6%E5%8A%A0%E6%B3%95/README.md剑指OfferII002.二进制加法题目描述给定两个01字符串a
  • Android知识点目录 迷路啦 Androidandroidjava知识点
    本人参考了一本书籍，但是那本书比较“坑”，没有很详细的介绍各个知识点，都还需要别人去单独搜索查询详细资料，那这本书实际就只是来了解个目录了。。。持续更新中...第1章Android触摸事件传递机制1.1触摸事件的类型1.2事件传递的三个阶段1.3View的事件传递机制1.4ViewGroup的事件传递机制触摸事件的分析与总结第2章AndroidView的绘制流程2.1绘制的整体流程2.2Measu
  • 从CV工程师到CtrlCV架构师：PromptCoder如何让前端搬砖变成乐高拼装 正宗咸豆花 前端人工智能AIGCai个人开发
    《从CV工程师到CtrlCV架构师：PromptCoder如何让前端搬砖变成乐高拼装》各位在座的代码艺术家、CSS炼金术师、React吟游诗人，今天我们要聊一个能让原型图自动「现出原形」的黑魔法——是的，我说的不是Figma切图插件，而是能让你的Ctrl+C/V进化成量子纠缠的PromptCoder。官网：PromptCoder当截图遇见AI：前端复刻的「降维打击」还记得那些年我们对着设计图手动敲
  • UE(UltraEdit) 配置简易C/C++编译运行环境 怜渠客 Windows开发技巧c++ACM
    该类型其他帖子EmEditor配置简易C/C++编译运行环境_emeditor代码运行-CSDN博客RJTextEd配置简易C/C++编译运行环境-CSDN博客这种配置适合ACM竞赛，即要求不使用现代IDE，又想用一个比较好用、至少支持代码高亮的编辑器。前提条件1.MingwGCC已经按照且配置环境变量2.UltraEdit已安装配置1、选择配置工具2、插入3、填写参数，如图4、配置运行我们一共要
  • 【Vue3】defineExpose 正宗咸豆花 vue.jsjavascript前端
    【Vue3】defineExposedefineExpose是Vue3.2引入的一个新API，它是的配套API之一。在中，所有定义的变量和函数默认是私有的，不能从组件外部访问。如果你想让外部组件访问到内定义的属性或方法，你需要使用defineExpose显式地暴露它们。这是defineExpose的基本用法：import{defineExpose}from'vue'//...定义响应式数据、函数等
  • html 周华华 html
    js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
  • 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
    Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
  • make:cc 命令未找到解决方法 daizj linux命令未知make cc
    安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
  • Oracle之Job应用 周凡杨 oracle job
    最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
  • 多线程机制 朱辉辉33 多线程
    转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
  • web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
    FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
  • mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
    Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
  • Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
    原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
  • javascript 中var提升的典型实例 alxw4616 JavaScript
    // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
  • 定时器和获取时间的使用 百合不是茶 时间的转换定时器
    定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
  • JDK1.5 Queue bijian1013 javathreadjava多线程Queue
    JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
  • http认证原理和https bijian1013 httphttps
    一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
  • 【Java范型五】范型继承 bit1129 java
    定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
  • 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
    1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
  • lua 遍历Header头部 ronin47 lua header 遍历　
    local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
  • java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
    import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
  • redis 开窍的石头 redis
    在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
  • [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
          无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
  • 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
    这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
  • SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
    SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
  • Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
    在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
  • php包管理工具推荐 dcj3sjt126com PHPComposer
    http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
  • Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
    转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
  • JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
    在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
  • 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
      归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
  • iOS UIWebView URL拦截 啸笑天 UIWebView
    本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
  • 索引的碎片整理SQL语句 macroli sql
    SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
  • Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
    // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
  • hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
    最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
  • struts2.xml wuai struts
    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他