React 16.8发布后带来了一项新的玩意,React发生了大改变!!!解决了很多类组件的固有缺陷,这篇文章让大家快速熟悉并掌握最常用的两个Hook:userState 和 useEffect 了解使用的过程中,还能掌握一些背后的原理,顺便实现一个豆瓣电影吧榜单应用。
准备工作
阅读之前,希望同学已经做了一些准备
掌握了react基础知识
会使用react来写代码
开始
Hook是什么?
Hook 是什么? Hook 是一个特殊的函数,它可以让你“钩入” React 的特性。例如,useState 是允许你在 React 函数组件中添加 state 的 Hook。稍后我们将学习其他 Hook。
为什么需要hooks?
1.hooks出现之前, 类组件提供了完整的状态管理和声明周期控制,通常用来承载复杂的业务逻辑。 2.函数组件则是纯粹的从数据到数据映射,对状态无感知。
hooks解决了什么问题?
1.令人头痛的this绑定 2.声明周期的不合理 3.数据共享的困局(需要借助复杂的状态管理器redux)
我们先看看官方介绍 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
userState官方示例
import React, { useState } from 'react';
function Example() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState(0);
return (
You clicked {count} times
setCount(count + 1)}>
Click me
);
}
官方讲解的比较分散,链接:https://react.docschina.org/docs/hooks-intro.html,我会从实现一个简单项目来介绍使用
等价的 class示范
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
You clicked {this.state.count} times
this.setState({ count: this.state.count + 1 })}>
Click me
);
}
}
tip: 是不是觉得hooks代码清晰简单了很多
来看一个经典的计数器
function Counter() {
const [count, setCount] = useState(0);
function handleAlertClick() {
setTimeout(() => {
alert('You clicked on: ' + count);
}, 3000);
}
return (
You clicked {count} times
setCount(count + 1)}>
Click me
Show alert
);
}
这里问大家一个问题?
点击 Click me 按钮,count增加到 3, 点击 Show alert 按钮,在setTimeout 结束之前,继续点击 Click me 按钮,count增加到 5, 这个时候 alert 是多少?
答案:alter 是 3 你答对了么? 简单解释一下:
每次渲染相互独立,状态,时间函数都是独立的
我们再count为3的时候 触发handleAlertClick方法,这个函数记住的就是count = 3
setTimeout 三秒后结束 alter 自然是3
userEffect浅析
官方文档介绍 useEffect(effectFn, deps) 使用 useEffect 我们需要忘记以前写class的时候 使用到的生命周期,函数组件跟类组件时不同的世界
React会在每次渲染完后运行Effect,而依赖数组就是用来控制是否触发Effect,从而减少不必要的计算,从而优化性能 1.1.简单说明:只要依赖数组中的每一项与上一次渲染相比没有改变,此次Effect就不会被执行 1.2.类比:以前我们写class的时候 会使用 componentDidUpdate 来控制是否重新计算
useEffect 跟class的生命周期相比,有哪些不同? 2.1.将初次渲染(componentDidMount)、重渲染(componentDidUpdate)和销毁(componentDidUnmount)三个阶段的逻辑用一个统一的 API 去解决 2.2.简单举例:只需要渲染一次的 我们可以直接指定 deps 为空数组 [ ]
实战小应用
1.通过Creat React App 初始化项目:npx create-react-app my-app-with-hooks 2.样式使用到了 Ant Design: yarn add antd 3.App.js源码:
import React, { useState, useEffect } from "react";
import "./App.css";
import 'antd/dist/antd.css';
import { Button, Spin, Input, Select, Table, Rate } from 'antd';
const { Option } = Select;
const columns = [
{
title: '电影名',
dataIndex: 'title',
render: (text, record) => (
go(record.url)}>{record.title}
),
},
{
title: '海报',
dataIndex: 'url',
render: (text, record) => (
),
},
{
title: '星级',
dataIndex: 'rate',
render: (text, record) => {
return
}
},
];
const BASE_URL = "https://movie.douban.com/j";
function getFetchUrl(key) {
return `${BASE_URL}/search_subjects?type=${key}&tag=热门&page_limit=50&page_start=0`
}
function go(url) {
window.open(url)
}
function App() {
const [countries, setCountries] = useState([]);
const [key, setKey] = useState("movie");
const [inputText, setInput] = useState("");
useEffect(() => {
const fetchCountries = async () => {
const response = await fetch(getFetchUrl(key));
const data = await response.json();
setCountries(data.subjects);
};
fetchCountries();
}, [key]); // deps 加入了 key监听, 所以每次key改变 都会调用这个 useEffect
function handleChange(value) {
setKey(value)
}
return (
本周热门排行
setInput(e.target.value)} />
setKey(inputText)}>搜索
电视
电影
广播
`complete${record.id}${index}`} style={{ marginTop: 20}}/>;
{
countries.length === 0 ? :
}
);
}
export default App;
效果图:
相信大家看见代码应该都明白了,我这边还是简单说明一下 1.这里我创建了两个状态 key(用来筛选 tv 跟 movie)跟 countries (列表数据填充) 2.通过 useEffect 钩子进行数据获取,但是第二个参数 deps 这里依赖了 key, 只要当 key 改变,useEffect钩子就会重新触发 3.最后将数据 setCountries 赋值给 countries
注意事项
1.不要在循环,条件或嵌套函数中调用Hook,必须始终在React函数的顶层使用Hook。这是因为React需要利用调用顺序来正确更新相应的状态,以及调用相应的钩子函数。一旦在循环或条件分支语句中调用Hook,就容易导致调用顺序的不一致性,从而产生难以预料到的后果。 2.只能在React函数式组件或自定义Hook中使用Hook。 3.借助eslint-plugin-react-hooks的 ESLint 插件来强制执行这两条规则,违反hooks规则,会有eslint提示 4.npm install eslint-plugin-react-hooks --save-dev 5.eslint配置
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
"react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
}
}
useMemo简单实例理解:
父组件
import React, { useState, useEffect } from "react";
import "./App.css";
import Child from './components/Child'
const BASE_URL = "https://movie.douban.com/j";
function App() {
const [price, setPrice] = useState('价格');
const [content,setContent] = useState('内容');
return (
setPrice(price + 1)}>price
setContent(content + 2)}>content
);
}
export default App;
子组件
mport React, { useState, useEffect, useMemo } from "react";
function Child({ price, content }) {
function changePrice(price) {
console.log('price: ', price);
return price + '元'
}
// const otherPrice = useMemo(() => changePrice(price), [price])
const otherPrice = changePrice(price)
return (
<>
{otherPrice}
{content}
>
)
}
export default Child;
从上述代码可以看到,子组件的price 跟 content ,触发setPrice 或者 setContent 都会触发 changePrice方法,这意味着性能损耗,做了无用功, 当我们触发 setContent 的时候 希望不会触发 changePrice方法, 这个时候 使用 useMemo 就可以完美解决了。
你可能感兴趣的:(用实战带你走进react hooks:userState、 useEffect、useMemo)
Apollo部署及整合SpringBoot实战
It_BeeCoder
SpringBoot
前言:最近在完成毕业设计,题目是《基于微服务的B2C网上商城系统的设计与实现》,整个项目最早是我在看黑马的培训视频时学习JavaWeb做的一个项目,第一次做完大约在去年过年的时候,这个项目前前后后自己改了差不多5、6次了,使用技术不断更新(还有一些小细节的修改比如最早购物车用Session后来用Redis存储),从最早的Servlet+Filter到SSM+Redis到SpringBoot+Thy
携程开源的分布式apollo技术,整合springboot集成实现动态刷新配置
2401_84584854
程序员 java 面试 学习
最后这份文档从构建一个键值数据库的关键架构入手,不仅带你建立起全局观,还帮你迅速抓住核心主线。除此之外,还会具体讲解数据结构、线程模型、网络框架、持久化、主从同步和切片集群等,帮你搞懂底层原理。相信这对于所有层次的Redis使用者都是一份非常完美的教程了。整理不易,觉得有帮助的朋友可以帮忙点赞分享支持一下小编~你的支持,我的动力;祝各位前程似锦,offer不断!!!本文已被CODING开源项目:【
Spring Boot 整合 Apollo 配置中心实战
m0_51274464
面试 学习路线 阿里巴巴 spring boot 后端 java
SpringBoot整合Apollo配置中心实战一、Apollo简介二、环境准备三、项目整合步骤四、配置使用示例五、常见问题及解决在分布式系统开发中,配置管理至关重要。Apollo作为携程开源的一款可靠的配置中心,能高效地集中管理应用配置,实现实时更新推送,助力开发者轻松应对复杂多变的配置场景。本文将带你一步步完成SpringBoot项目与Apollo配置中心的整合,让你的应用配置管理如鱼得水。一
Fedora41安装MySQL8.4.4
kfepiza
Database数据库 sql 关系型 非关系型 nosql linux mysql
Fedora41安装MySQL8.4.4Fedora41用yum仓库安装MySQL8.4.4笔记250310下载安装启动`mysqld`服务查看生成的初始密码,用初始密码登录登录后,必须修改初始密码才能执行其它操作可选设置降低密码强度要求,使用简单密码降低validate_password组件对密码强度的要求用`SETGLOBAL`命令来设置可选:卸载validate_password组件,可将密
对开源VLA sota π0的微调——如何基于各种开源数据集、以及你自己的私有数据集微调π0(含我司的微调实践)
v_JULY_v
通用机械臂之路: π0等VLA sota模型 开源VLA的sota模型 微调π0 微调VLA模型 基于私有数据集微调π0 基于开源数据集微调π0
前言25年2.4日,几个月前推出π0的公司PhysicalIntelligence(π)宣布正式开源π0及π0-FAST,如之前所介绍的,他们对用超过10,000小时的机器人数据进行了预训练该GitHub代码仓库「π0及π0-FAST的GitHub地址:github.com/Physical-Intelligence/openpi」包括4个方面:简言之,就是π0本身的代码和权重、特定平台上特定任务
Python 爬虫实战:从大众点评爬取餐厅评价,探寻美食打卡地
西攻城狮北
python 爬虫 美食 实战案例
目录引言一、项目背景与需求分析1.1大众点评平台的特点1.2数据爬取目标二、技术选型与工具准备2.1技术选型2.2工具准备三、爬取餐厅信息3.1获取餐厅列表3.2获取餐厅详情四、数据存储五、数据处理与分析5.1数据清洗5.2数据分析六、可视化展示七、总结与展望引言大众点评作为国内知名的本地生活服务平台,提供了丰富的餐厅信息和用户评价。通过爬取大众点评上的餐厅评价数据,我们可以分析餐厅的受欢迎程度、
LIST_VIEW_和LVITEM用法
Qsir
Windows MFC windows MFC CListCtrl
ListCtrl在工作中,常常用到,也常常看到大家发帖问怎么用这个控件,故总结了一下自己的使用经验,以供参考使用。先注明一下,这里,我们用m_listctrl来表示一个CListCtrl的类对象,然后这里我们的ListCtrl都是report形式,至于其他的如什么大图标,小图标的暂时不讲,毕竟report是大众话的使用。其次,我们这里用条款一,条款二来描述第一点,第二点,这个是参照《Effecti
Python爬虫实战010:反爬取机制学习
若北辰
Python爬虫教程 python 爬虫 开发语言
#-*-coding:utf-8-*-"""@ModuleName:demo_001@Function:@Author:@Time:2020/12/28上午11:21"""fromlxmlimportetreeimportpandasaspdimportreimportrandomimporturllibimportrequestsimporttimeimportosimportjson
WIN32汇编: 31.列表视图控件
GodDragon
win32汇编 汇编 buffer listview null report string
第三十一课列表视图控件本课中我们将学习如何创建和使用列表视图控件。理论:列表视图控件和树型视图、丰富文本编辑控件一样是通用控件的一种。可能您都已经知道了列表视图控件,只不过是不知道它的确切名字而已。列表视图控件可以用来很好地显示项目。在这方面它和列表框相同,只不过它的性能更强。有两种方法创建一个列表视图控件。第一种也是最简单的方法是:用资源编辑器来创建它。用该种方法只是不要忘记在您的代码(的任何位
2024年大数据技术4:Lambda和Kappa架构区别_lambda架构和kappa架构区别,2024年最新你花了多久弄明白架构设计
2401_84182146
程序员 大数据 面试 学习
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新需要这份系统化资料的朋友,可以戳这里获取虽然Lambda架构使用起来十分灵活,并且可以适用于很多的应用场景,但在实际应用的时候,Lambda架构也
SQL注入从入门到入狱:万字长文带你领略手工注入的魅力
vortex5
sql 数据库 网络安全 渗透测试 安全
在SQL注入的世界中,灵活而直观的手工注入展现出独特的魅力。相比自动化工具,手工注入不仅能帮助我们深入理解漏洞原理,还能在特定场景下突破工具的局限。本文将从基础SQL函数入手,逐步探讨报错注入、联合注入、布尔盲注和时间盲注等多种手工注入技术。希望通过这篇文章,能让你感受到SQL注入的精妙之处,并在实战中游刃有余。本文以MySQL为例,介绍手工注入原理与实现。一、SQL注入必备函数速览在开始手工注入
Spring Boot 整合 Redis 步骤详解
m0_74823094
面试 学习路线 阿里巴巴 spring boot redis bootstrap
文章目录1.引言2.添加依赖3.配置Redis连接信息4.创建Redis操作服务类5.使用RedisTemplate或ReactiveRedisTemplate6.测试Redis功能7.注意事项8.总结Redis是一个高性能的键值存储系统,常用于缓存、消息队列等多种场景。将Redis与SpringBoot结合使用可以极大提升应用的性能和响应速度。本文将详细介绍如何在SpringBoot应用中整合R
熬夜一星期!我把WPS的功能用Qt重写了
十年编程老舅
QT开发 qt开发 qt项目 qt项目实战 qt编程 计算机毕设项目 c++项目
我收到大量粉丝提问:"学完C++/Qt技术栈后,如何通过实战串联知识点?作为深耕C++/Qt领域的技术人,我始终认为通过真实项目实践是掌握技术栈的最佳方式。今天我将以自研的"智汇协同Office"项目为例,深度剖析如何用Qt构建企业级桌面应用。无论你是刚学完Qt基础的新手,还是想进阶提升的开发者,这个支持多文档处理、富文本编辑、打印预览的实战案例都将让你对Qt开发有全新认知。一、项目技术全景图本项
Spring setter注入和构造器注入引用数据类型和基本数据类型包括,集合类型的注入
ZZZZJava
spring java 后端
setter简单类型注入用valueproperty标签:设置注入属性name属性:设置注入的属性名,实际是set方法对应的名称value属性:设置注入简单类型数据值setter引用类型注入用refproperty标签:设置注入属性name属性:设置注入的属性名,实际是set方法对应的名称ref属性:设置注入引用类型bean的id或name构造器简单类型注入用valueconstructor-ar
JavaScript 性能优化实战案例与解决方案
Real Man★
javascript 性能优化 开发语言
JavaScript性能优化是提升Web应用流畅度和用户体验的核心环节。以下是针对常见性能问题的实战案例与优化方案,涵盖代码优化、渲染优化、内存管理等多个方面:一、高频事件处理优化案例1:滚动事件卡顿问题:页面监听scroll事件实现动态效果,但频繁触发导致卡顿。优化方案:javascript复制//1.节流(Throttle):固定时间间隔执行functionthrottle(fn,delay)
《自然语言处理实战入门》深度学习 ---- 预训练模型初探
shiter
AI重制版】 预训练 NLP 自然语言处理
文章大纲前言预训练模型简介语言表示学习神经上下文编码器为何需要预训练模型发展历史主流预训练模型预训练模型与分类将PTMs应用至下游任务微调策略未来研究方向参考文献前言随着深度学习的发展,各种神经网络被广泛用于解决自然语言处理(NLP)任务,如卷积神经网络(convolutionalneuralnetworks,CNNs)、递归神经网络(neuralnetworks,RNNs)、基于图的神经网络(g
TCP/IP四层模型
ashane1314
网络 tcp/ip分层
TCP/IP网络分层模型还是先从TCP/IP协议开始讲起,一是因为它非常经典,二是因为它是目前事实上的网络通信标准,研究它的实用价值最大。TCP/IP当初的设计者真的是非常聪明,创造性地提出了“分层”的概念,把复杂的网络通信划分出多个层次,再给每一个层次分配不同的职责,层次内只专心做自己的事情就好,用“分而治之”的思想把一个“大麻烦”拆分成了数个“小麻烦”,从而解决了网络通信的难题。你应该对TCP
无人机仿真XTDrone学习四:XTDrone键盘控制无人机程序分析(MAVRos)一
狮城乐哥
XTDrone 学习 硬件工程
在XTDrone安装完成后,运行一个键盘控制无人机程序测试XTDrone安装是否存在问题。通过分析该例程,理解ROS对无人机的控制方法与控制过程。XTDrone键盘控制无人机例程仿真XTDrone键盘控制无人机例程CSDN学习与转载仿真用键盘控制无人机飞行在一个终端运行(启动gazebo,出现了场景和飞机)cd~/PX4_Firmwareroslaunchpx4indoor1.launchGaze
HarmonyOS NEXT开发实战:轮播Banner组件封装
太空人_喜之郎
鸿蒙 HarmonyOS OpenHarmony harmonyos 华为 前端 鸿蒙 移动开发 android 开发语言
前言轮播图在每个项目中都很常见,鸿蒙中在容器组件中也提供了Swiper组件,用于子组件滑动轮播显示,和前端的使用起来也是异曲同工,我们先看下基本的用法。Swiper(){ForEach(["1","2","3","4","5","6"],(item:string)=>{Text(item.toString()).width('90%').height(160).backgroundColor(0x
《高效迁移学习:Keras与EfficientNet花卉分类项目全解析》
机器学习司猫白
深度学习 迁移学习 keras 分类 tensorflow efficientnet 性能优化
从零到精通的迁移学习实战指南:以Keras和EfficientNet为例一、为什么我们需要迁移学习?1.1人类的学习智慧想象一下:如果一个已经会弹钢琴的人学习吉他,会比完全不懂音乐的人快得多。因为TA已经掌握了乐理知识、节奏感和手指灵活性,这些都可以迁移到新乐器的学习中。这正是迁移学习(TransferLearning)的核心思想——将已掌握的知识迁移到新任务中。1.2深度学习的困境与破局传统深度
多模态大模型:技术原理与实战 模型压缩实战
AGI大模型与大数据研究院
DeepSeek R1 & 大数据AI人工智能 计算科学 神经计算 深度学习 神经网络 大数据 人工智能 大型语言模型 AI AGI LLM Java Python 架构设计 Agent RPA
多模态大模型:技术原理与实战模型压缩实战作者:禅与计算机程序设计艺术/ZenandtheArtofComputerProgramming关键词:多模态大模型,技术原理,模型压缩,实战,TensorFlow,PyTorch,模型压缩方法,应用场景1.背景介绍1.1问题的由来随着人工智能技术的飞速发展,多模态大模型在图像识别、语音识别、自然语言处理等领域的应用越来越广泛。然而,多模态大模型通常具有庞大
重生之我在学Vue--第8天 Vue 3 UI 框架(Element Plus)
野生的程序媛
Vue 前端成仙之路 vue.js ui 前端
重生之我在学Vue–第8天Vue3UI框架(ElementPlus)文章目录重生之我在学Vue--第8天Vue3UI框架(ElementPlus)前言一、ElementPlus基础:从安装到组件革命1.1安装与两种引入模式全量引入(适合快速原型)按需引入(推荐生产环境)二、核心组件实战:重构任务管理系统2.1表格组件:专业数据展示2.2表单组件:优雅数据录入2.3反馈组件:增强交互体验三、主题定制
【设计模式】如何通过桥接模式解决系统扩展难题?
后端java设计模式
概述现在有一个需求,需要创建不同的图形,并且每个图形都有可能会有不同的颜色。我们可以利用继承的方式来设计类的关系:我们可以发现有很多的类,假如我们再增加一个形状或再增加一种颜色,就需要创建更多的类。试想,在一个有多种可能会变化的维度的系统中,用继承方式会造成类爆炸,扩展起来不灵活。每次在一个维度上新增一个具体实现都要增加多个子类。为了更加灵活的设计系统,我们此时可以考虑使用桥接模式。定义:将抽象与
Python 安装入门指南
2501_90435375
Python python 开发语言
Python是一种广泛使用的高级编程语言,以其简洁的语法和强大的功能而受到开发者的喜爱。以下是Python的安装步骤和入门指南,带你快速上手Python编程。一、Python的介绍Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。它具有以下特点:语法简洁:Python的语法设计注重代码的可读性和简洁性,使得编写代码更加简单直观。跨平台:Python可以在多种操作系统上运行,如Wi
学习Java的一些技术心得
袖风染云
学习 java
简介作为一名Java学习之旅的同行者,我在这里分享我的学习心得和实战经验。无论您是初学者还是希望提高技能的开发者,我都希望这些内容能为您带来价值。如有任何疑问或建议,请随时留言交流介绍Java我们在学习Java的时候,肯定是先来认识一下什么叫Java,它是干什么用的Java,自1995年由SunMicrosystems推出以来,已成为全球最受欢迎的编程语言之一。其’一次编写,到处运行’的理念,使得
怎么定义世界模型,Sora/Genie/JEPA 谁是世界模型呢?(1)
周博洋K
分布式 人工智能 深度学习 自然语言处理 机器学习
说这个问题之前先看一下什么是世界模型,它的定义是什么?首先世界模型的起源是咋回事呢?其实世界模型在ML领域不是什么新概念,远远早于Transfomer这些东西被提出来,因为它最早是强化学习RL领域的,在20世纪90年代由JuergenSchmiduber实验室给提出来的。2018年被Ha和Schmiduber发表了用RNN来做世界模型的论文,相当于给他重新做了一次定义。然后就是最近跟着Sora,G
用python设计一个表白灯牌
噔噔噔噔@
python pygame
表白灯牌可以通过控制LED灯的颜色和亮度来实现。你可以使用树莓派或者Arduino这样的硬件平台,结合Python编程语言来控制LED灯的状态。下面是一个简单的示例代码,可以实现一个表白灯牌效果:importRPi.GPIOasGPIOimporttime#设置GPIO引脚编号模式GPIO.setmode(GPIO.BCM)#设置LED引脚编号red_pin=17green_pin=18#设置GP
【pta】1062 最简分数(涉及求最大公约数)
Liu_Meihao
算法
题目1062最简分数思路分数比较大小用十字相乘比大小,先找到大于第一个分数的,再限制小于第二个分数。代码#includeusingnamespacestd;intgys(intx,inty){while(y){intt=x%y;x=y;y=t;}returnx;}intmain(){intn1,m1,n2,m2,k;scanf("%d/%d%d/%d%d",&n1,&m1,&n2,&m2,&k);
PyQt有哪些主要组件?
2301_78316786
python pyqt
这是一个非常强大的跨平台GUI库,可以让你用Python语言创建美观且功能强大的桌面应用程序。让我们先来了解一下它的主要组件。首先,我们要介绍的是窗口。窗口是PyQt应用程序的基本元素,所有的GUI元素都放置在窗口中。你可以创建主窗口、模态对话框、无模式对话框和自定义窗口。下面是一个创建主窗口的例子:fromPyQt5.QtWidgetsimportQApplication,QMainWindow
【时间序列聚类】从数据中发现隐藏的模式
T-I-M
机器学习 人工智能 时间序列
在大数据时代,时间序列数据无处不在。无论是股票市场的价格波动、天气的变化趋势,还是用户的点击行为,这些数据都随着时间推移而产生。然而,面对海量的时间序列数据,我们如何从中提取有价值的信息?答案之一就是时间序列聚类。本文将以通俗易懂的方式,带你了解时间序列聚类的基本概念、应用场景以及实现思路,并希望能为你提供一些启发。什么是时间序列聚类?简单来说,时间序列聚类是一种将相似的时间序列归为一类的技术。它
jquery实现的jsonp掉java后台
知了ing
java jsonp jquery
什么是JSONP?
先说说JSONP是怎么产生的:
其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。
1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
2、
Struts2学习笔记
caoyong
struts2
SSH : Spring + Struts2 + Hibernate
三层架构(表示层,业务逻辑层,数据访问层) MVC模式 (Model View Controller)
分层原则:单向依赖,接口耦合
1、Struts2 = Struts + Webwork
2、搭建struts2开发环境
a>、到www.apac
SpringMVC学习之后台往前台传值方法
满城风雨近重阳
springMVC
springMVC控制器往前台传值的方法有以下几种:
1.ModelAndView
通过往ModelAndView中存放viewName:目标地址和attribute参数来实现传参:
ModelAndView mv=new ModelAndView();
mv.setViewName="success
WebService存在的必要性?
一炮送你回车库
webservice
做Java的经常在选择Webservice框架上徘徊很久,Axis Xfire Axis2 CXF ,他们只有一个功能,发布HTTP服务然后用XML做数据传输。
是的,他们就做了两个功能,发布一个http服务让客户端或者浏览器连接,接收xml参数并发送xml结果。
当在不同的平台间传输数据时,就需要一个都能解析的数据格式。
但是为什么要使用xml呢?不能使json或者其他通用数据
js年份下拉框
3213213333332132
java web ee
<div id="divValue">test...</div>测试
//年份
<select id="year"></select>
<script type="text/javascript">
window.onload =
简单链式调用的实现技术
归来朝歌
方法调用 链式反应 编程思想
在编程中,我们可以经常遇到这样一种场景:一个实例不断调用它自身的方法,像一条链条一样进行调用
这样的调用你可能在Ajax中,在页面中添加标签:
$("<p>").append($("<span>").text(list[i].name)).appendTo("#result");
也可能在HQ
JAVA调用.net 发布的webservice 接口
darkranger
webservice
/**
* @Title: callInvoke
* @Description: TODO(调用接口公共方法)
* @param @param url 地址
* @param @param method 方法
* @param @param pama 参数
* @param @return
* @param @throws BusinessException
Javascript模糊查找 | 第一章 循环不能不重视。
aijuans
Way
最近受我的朋友委托用js+HTML做一个像手册一样的程序,里面要有可展开的大纲,模糊查找等功能。我这个人说实在的懒,本来是不愿意的,但想起了父亲以前教我要给朋友搞好关系,再加上这也可以巩固自己的js技术,于是就开始开发这个程序,没想到却出了点小问题,我做的查找只能绝对查找。具体的js代码如下:
function search(){
var arr=new Array("my
狼和羊,该怎么抉择
atongyeye
工作
狼和羊,该怎么抉择
在做一个链家的小项目,只有我和另外一个同事两个人负责,各负责一部分接口,我的接口写完,并全部测联调试通过。所以工作就剩下一下细枝末节的,工作就轻松很多。每天会帮另一个同事测试一些功能点,协助他完成一些业务型不强的工作。
今天早上到公司没多久,领导就在QQ上给我发信息,让我多协助同事测试,让我积极主动些,有点责任心等等,我听了这话,心里面立马凉半截,首先一个领导轻易说
读取android系统的联系人拨号
百合不是茶
android sqlite数据库 内容提供者 系统服务的使用
联系人的姓名和号码是保存在不同的表中,不要一下子把号码查询来,我开始就是把姓名和电话同时查询出来的,导致系统非常的慢
关键代码:
1, 使用javabean操作存储读取到的数据
package com.example.bean;
/**
*
* @author Admini
ORACLE自定义异常
bijian1013
数据库 自定义异常
实例:
CREATE OR REPLACE PROCEDURE test_Exception
(
ParameterA IN varchar2,
ParameterB IN varchar2,
ErrorCode OUT varchar2 --返回值,错误编码
)
AS
/*以下是一些变量的定义*/
V1 NUMBER;
V2 nvarc
查看端号使用情况
征客丶
windows
一、查看端口
在windows命令行窗口下执行:
>netstat -aon|findstr "8080"
显示结果:
TCP 127.0.0.1:80 0.0.0.0:0 &
【Spark二十】运行Spark Streaming的NetworkWordCount实例
bit1129
wordcount
Spark Streaming简介
NetworkWordCount代码
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
Struts2 与 SpringMVC的比较
BlueSkator
struts2 spring mvc
1. 机制:spring mvc的入口是servlet,而struts2是filter,这样就导致了二者的机制不同。 2. 性能:spring会稍微比struts快。spring mvc是基于方法的设计,而sturts是基于类,每次发一次请求都会实例一个action,每个action都会被注入属性,而spring基于方法,粒度更细,但要小心把握像在servlet控制数据一样。spring
Hibernate在更新时,是可以不用session的update方法的(转帖)
BreakingBad
Hibernate update
地址:http://blog.csdn.net/plpblue/article/details/9304459
public void synDevNameWithItil()
{Session session = null;Transaction tr = null;try{session = HibernateUtil.getSession();tr = session.beginTran
读《研磨设计模式》-代码笔记-观察者模式
bylijinnan
java 设计模式
声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.util.ArrayList;
import java.util.List;
import java.util.Observable;
import java.util.Observer;
/**
* “观
重置MySQL密码
chenhbc
mysql 重置密码 忘记密码
如果你也像我这么健忘,把MySQL的密码搞忘记了,经过下面几个步骤就可以重置了(以Windows为例,Linux/Unix类似):
1、关闭MySQL服务
2、打开CMD,进入MySQL安装目录的bin目录下,以跳过权限检查的方式启动MySQL
mysqld --skip-grant-tables
3、新开一个CMD窗口,进入MySQL
mysql -uroot
 
再谈系统论,控制论和信息论
comsci
设计模式 生物 能源 企业应用 领域模型
再谈系统论,控制论和信息论
偶然看
oracle moving window size与 AWR retention period关系
daizj
oracle
转自: http://tomszrp.itpub.net/post/11835/494147
晚上在做11gR1的一个awrrpt报告时,顺便想调整一下AWR snapshot的保留时间,结果遇到了ORA-13541这样的错误.下面是这个问题的发生和解决过程.
SQL> select * from v$version;
BANNER
-------------------
Python版B树
dieslrae
python
话说以前的树都用java写的,最近发现python有点生疏了,于是用python写了个B树实现,B树在索引领域用得还是蛮多了,如果没记错mysql的默认索引好像就是B树...
首先是数据实体对象,很简单,只存放key,value
class Entity(object):
'''数据实体'''
def __init__(self,key,value)
C语言冒泡排序
dcj3sjt126com
算法
代码示例:
# include <stdio.h>
//冒泡排序
void sort(int * a, int len)
{
int i, j, t;
for (i=0; i<len-1; i++)
{
for (j=0; j<len-1-i; j++)
{
if (a[j] > a[j+1]) // >表示升序
自定义导航栏样式
dcj3sjt126com
自定义
-(void)setupAppAppearance
{
[[UILabel appearance] setFont:[UIFont fontWithName:@"FZLTHK—GBK1-0" size:20]];
[UIButton appearance].titleLabel.font =[UIFont fontWithName:@"FZLTH
11.性能优化-优化-JVM参数总结
frank1234
jvm参数 性能优化
1.堆
-Xms --初始堆大小
-Xmx --最大堆大小
-Xmn --新生代大小
-Xss --线程栈大小
-XX:PermSize --永久代初始大小
-XX:MaxPermSize --永久代最大值
-XX:SurvivorRatio --新生代和suvivor比例,默认为8
-XX:TargetSurvivorRatio --survivor可使用
nginx日志分割 for linux
HarborChung
nginx linux 脚本
nginx日志分割 for linux 默认情况下,nginx是不分割访问日志的,久而久之,网站的日志文件将会越来越大,占用空间不说,如果有问题要查看网站的日志的话,庞大的文件也将很难打开,于是便有了下面的脚本 使用方法,先将以下脚本保存为 cutlog.sh,放在/root 目录下,然后给予此脚本执行的权限
复制代码代码如下:
chmo
Spring4新特性——泛型限定式依赖注入
jinnianshilongnian
spring spring4 泛型式依赖注入
Spring4新特性——泛型限定式依赖注入
Spring4新特性——核心容器的其他改进
Spring4新特性——Web开发的增强
Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC
Spring4新特性——Groovy Bean定义DSL
Spring4新特性——更好的Java泛型操作API
Spring4新
centOS安装GCC和G++
liuxihope
centos gcc
Centos支持yum安装,安装软件一般格式为yum install .......,注意安装时要先成为root用户。
按照这个思路,我想安装过程如下:
安装gcc:yum install gcc
安装g++: yum install g++
实际操作过程发现,只能有gcc安装成功,而g++安装失败,提示g++ command not found。上网查了一下,正确安装应该
第13章 Ajax进阶(上)
onestopweb
Ajax
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
How to determine BusinessObjects service pack and fix pack
blueoxygen
BO
http://bukhantsov.org/2011/08/how-to-determine-businessobjects-service-pack-and-fix-pack/
The table below is helpful. Reference
BOE XI 3.x
12.0.0.
y BOE XI 3.0 12.0.
x.
y BO
Oracle里的自增字段设置
tomcat_oracle
oracle
大家都知道吧,这很坑,尤其是用惯了mysql里的自增字段设置,结果oracle里面没有的。oh,no 我用的是12c版本的,它有一个新特性,可以这样设置自增序列,在创建表是,把id设置为自增序列
create table t
(
id number generated by default as identity (start with 1 increment b
Spring Security(01)——初体验
yang_winnie
spring Security
Spring Security(01)——初体验
博客分类: spring Security
Spring Security入门安全认证
首先我们为Spring Security专门建立一个Spring的配置文件,该文件就专门用来作为Spring Security的配置