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)
【前端网络深潜行者】信息化人员必备知识&面试宝典:TCP连接中断,客户端突然“玩失踪”怎么办?
DTcode7
IT信息技术相关 # 信息化技能面试宝典 HTML5 前端 javascript 前端三大核心 JS
【前端网络深潜行者】信息化人员必备知识&面试宝典:TCP连接中断,客户端突然“玩失踪”怎么办?TCP的忠诚卫士:保活与重传保活机制(Keepalive)超时重传与超时前端策略:优雅的应对与重连案例一:心跳检测案例二:断线重连逻辑安全与性能考量实战经验之谈排错思路结语与探讨在网络通信的迷宫中,TCP/IP协议犹如稳固的桥梁,承载着数据的往来。然而,当客户端这个“信使”突然玩起了失踪”,我们如何确保这
智能护栏报警系统提升高速公路安全
德克西尔DrKsir
智慧护栏 安全
在车流如织的高速公路上,金属护栏如同沉默的守护者,时刻准备着在危急时刻力挽狂澜。传统养护人员用脚步丈量护栏安全的日子,正在被一场技术革命悄然改写。一种基于物联网的智能监测系统,正以毫米级感知能力重塑高速公路安全防线。这套智能报警系统的核心,是遍布护栏的"神经元网络"。每隔30米安装的MEMS传感器,能够捕捉到微小的变化。当车辆与护栏发生碰撞,传感器会迅速完成碰撞定位。在浙江某高速路段,这套系统刚投
物联网为什么用MQTT不用 HTTP 或 UDP?
工程师焱记
物联网 http udp 硬件架构 嵌入式硬件 开源协议 网络
先来两个代码对比,上传温度数据给服务器。MQTT代码示例//MQTT客户端连接到MQTT服务器mqttClient.connect("mqtt://broker.server.com:8883",clientId)//订阅特定主题mqttClient.subscribe("sensor/data",qos=1)//发布消息到主题mqttClient.publish("sensor/data","t
Kafka集群部署实战
Gold Steps.
技术博文分享 kafka 分布式
服务背景ApacheKafka作为分布式流处理平台,在金融交易系统、物联网数据处理、实时日志分析等场景中发挥关键作用。某电商平台日均处理订单消息1.2亿条,峰值QPS达5万,采用Kafka集群实现订单状态流转、用户行为追踪和库存同步等功能。以下是经过生产验证的集群部署方案及典型故障处理经验。集群运维最佳实践1.容量规划建议指标推荐值监控阈值分区数量/Broker≤4000≥3500告警副本同步延迟
自己搭建react + antd + less + ts项目
可缺不可滥
react框架逻辑 前端项目框架 react antd less ts
文章目录第一步通过官方的create-react-app,找个喜欢的目录,执行:第二步暴露配置的文件,执行:第三步支持less第四步创建路由第五步解决跨域问题第六步实现mockjs分离式开发第七步axios请求后台接口或mock接口第八步(可选):配置antd,及其按需加载第九步将项目改造为typescript第一步通过官方的create-react-app,找个喜欢的目录,执行:/**最后面是项
Promise 原理与实战:从基础到高级的完整教程
D.eL
前端工程化从无 - 通 前端 javascript
一、前言:为什么会出现Promise?Promise的重要性我认为没有必要多说,概括起来就是五个字:必!须!得!掌!握!。而且还要掌握透彻,在实际的使用中,有非常多的应用场景我们不能立即知道应该如何继续往下执行。最常见的一个场景就是ajax请求,通俗来说,由于网速的不同,可能你得到返回值的时间也是不同的,这个时候我们就需要等待,结果出来了之后才知道怎么样继续下去。letxhr=newXMLHttp
微前端 qiankun vite vue3
可缺不可滥
前端项目框架 前端
文章目录简介主应用qiankun-mainvue3vite子应用qiankun-app-vue2webpack5子应用qiankun-reactwebpack5子应用quankun-vue3vite遇到的问题简介主要介绍以qiankun框架为基础,vite搭建vue3项目为主应用,wepackvue2和webpackreact搭建的子应用,形成的一个微前端框架。主应用qiankun-mainvue
java中如何根据已有word文件快速生成目录和页码?
bug菌¹
全栈Bug调优(实战版) java word python 生成目录 生成页码 文件操作
本文收录于《全栈Bug调优(实战版)》专栏,主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!!全文目录:问题描述解决方案优化基于Docx4j的TOC生成性能问题及日志警告解决方案**1.性能优化****1.1避免使用FOP渲染获取页码****1.2使用更高效的文档
VS项目批量编译,Bat脚本实现
紫火桑葚
VS VS批量编译 Bat脚本
很多时候,我们需要编译各种各样的工程,特别是每次都要编译一堆的工程,比如Debug/Releasex64/win32,每次都要在vs设置中来回选择切换,影响食欲;偷懒的方法当然是用bat批量编译,其实本质上还是用VS的sln项目方案文件。以下是bat内容,请珍惜。-----------------------------------------------------------------@ec
【C++篇】排队的艺术:用生活场景讲解优先级队列的实现
far away4002
C++ c++ stl 优先级队列 向下(向上)调整算法
文章目录须知欢迎讨论:如果你在学习过程中有任何问题或想法,欢迎在评论区留言,我们一起交流学习。你的支持是我继续创作的动力!点赞、收藏与分享:觉得这篇文章对你有帮助吗?别忘了点赞、收藏并分享给更多的小伙伴哦!你们的支持是我不断进步的动力!分享给更多人:如果你觉得这篇文章对你有帮助,欢迎分享给更多对C++感兴趣的朋友,让我们一起进步!深入理解与实现:C++优先级队列的模拟实现1.引言在算法和数据结构中
实战LLM强化学习——使用GRPO(DeepSeek R1出圈算法)
大富大贵7
程序员知识储备1 程序员知识储备2 程序员知识储备3 经验分享
引言近年来,深度强化学习(DRL)已经成为解决复杂决策问题的一个强有力工具,尤其是在自然语言处理(NLP)领域的广泛应用。通过不断优化决策策略,DRL能在大量数据中学习最佳行为,尤其是大型语言模型(LLM)在任务中展现出的巨大潜力。然而,随着模型规模的扩大和任务复杂性的增加,传统的强化学习算法开始暴露出训练效率低、收敛速度慢等问题。为了解决这些挑战,DeepSeek公司提出了一个新的强化学习算法—
C#实战:使用ZXing.NET库轻松生成二维码与条形码
墨瑾轩
一起学学C#【一】 c# .net 开发语言
下面我将详细介绍C#中用于生成二维码和条形码的库——ZXing.NET,并附带一份详细的代码示例,其中每行代码均配有注释以解释其功能。ZXing.NET是基于开源项目ZXing(ZebraCrossing)的.NET移植版,它提供了生成和解析多种一维条形码和二维二维码的功能。准备工作首先,确保您已通过NuGet包管理器在项目中安装了ZXing.NET库。在VisualStudio中,可以通过以下步
Redis 使用入门与进阶指南
ohn.yu
技术杂谈 redis 数据库 缓存
Redis(RemoteDictionaryServer)是一个高性能的开源内存数据存储系统,常被用作数据库、缓存和消息队列。它以速度快、支持多种数据结构和简单易用而著称。本文将带你从Redis的基础用法开始,逐步深入到适合中级技术人员的实际应用场景。如果你是一个初学者或有一定经验的技术人员,这篇博客会帮助你更好地掌握Redis。什么是Redis?Redis是一个键值对存储系统,但它不仅仅是简单的
【Vue+TypeScript实战指南:提高代码质量和开发效率】
小怪兽9699
typescript vue.js 前端
前言在现代前端开发中,Vue.js是一个非常流行且强大的框架,而TypeScript则是增强代码类型安全性和可维护性的利器。本文将详细介绍如何结合Vue和TypeScript来构建高质量的应用程序。无论你是有一定基础的开发者还是希望进一步提升技能的高手,本文都将为你提供详细的步骤和代码示例。1.环境搭建首先,确保你已经安装了Node.js和npm。然后,全局安装VueCLI:npminstall-
Node.js 中使用 RabbitMQ
海上彼尚
node.js node.js rabbitmq 分布式
目录一、RabbitMQ简介二、核心概念解析三、环境搭建(以Ubuntu为例)四、Node.js实战:生产者与消费者1.安装依赖2.生产者代码(发送消息)3.消费者代码(处理消息)五、高级配置与最佳实践六、常见问题与解决方案七、总结一、RabbitMQ简介RabbitMQ是一个基于AMQP协议的开源消息代理工具,专为分布式系统设计。它通过解耦生产者和消费者实现异步通信,支持流量削峰、任务队列、服务
若依框架入门指南:快速上手SpringBoot+前后端分离版
小小鸭程序员
spring java spring boot 后端 intellij-idea
若依(RuoYi)是一款基于SpringBoot的快速开发平台,集成了权限管理、代码生成、监控管理等功能。本文将以SpringBoot+Vue前后端分离版本为例,带你快速上手若依框架。一、环境准备基础环境:JDK1.8+MySQL5.7+Redis5.0+Maven3.6+Node.js14+(前端)下载项目:#后端项目gitclonehttps://gitee.com/y_project/Ruo
Vue.js的watch监听
阿珊和她的猫
vue.js 前端 javascript
前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录引言`watch`选项的基本概念`watch`选项的基本语法`watch
基于Puppeteer与Selenium的跨浏览器自动化测试全攻略——从环境搭建到实战优化,万字详解自动化测试落地
追寻向上
selenium 测试工具
自动化测试的价值与工具选型为什么需要自动化测试?效率提升:减少重复人工操作,回归测试耗时降低80%精准覆盖:支持高频次、多场景、多设备验证质量保障:避免人为疏忽导致的漏测问题Puppeteer与Selenium的互补性Puppeteer:专精Chrome生态,适用于高性能截图、动态渲染、复杂交互场景Selenium:支持多浏览器(Firefox/Safari/Edge),适合跨平台兼容性测试协同方
基于图像比对的跨平台UI一致性校验工具开发全流程指南——Android/iOS/Web三端自动化测试实战
追寻向上
ui android ios
一、需求背景与方案概述1.1为什么需要跨平台UI校验?在移动互联网时代,同一产品需覆盖Android、iOS和Web三端。由于不同平台的开发框架(如Android的MaterialDesign与iOS的Cupertino风格)及渲染引擎差异,UI界面易出现以下问题:布局错位:按钮位置偏移、文本换行不一致视觉差异:颜色色差、字体粗细不同交互逻辑冲突:滑动方向、弹窗动画不一致传统人工测试效率低且易遗漏
大厂裁员不断,这个高薪岗位却找不到人?
大家好,我是陈哥。当下,裁员潮席卷全球:微软裁撤万人级游戏部门,谷歌AI伦理团队被优化,亚马逊用机器人取代数万仓储岗位。然而,DevOps工程师的招聘却逆势而上。据美国在线求职平台FlexJobs数据显示:2024年第一季度,资深DevOps工程师位列全美远程高薪岗位第六位,单季度新增空缺约为1500-2000个。在中国,各企业对DevOps工程师的需求同样旺盛,仅2024年9月单月就新增约120
QR二维码开发实战:生成、管理与扫描的最佳实践
34号树洞
javascript 二维码开发 Python Javascript URL QRCode
目录一、QR二维码是什么?1.QR二维码的基础知识2.QR二维码的生成3.QR二维码的应用场景4.QR二维码的管理二、开发QR二维码1.生成二维码(支持移动端+网页)2.生成“活码”(可修改目标URL的二维码)3.扫描二维码4.嵌入二维码功能到App5.高级功能6.推荐技术栈7.开发注意事项一、QR二维码是什么?1.QR二维码的基础知识QR码结构:了解QR码的组成部分,如定位图案、校正图案、数据区
【初学者】用Python语言来解释指针的用例与应用场景
lisw05
python python 开发语言
李升伟整理Python本身并不直接支持指针的概念,因为Python是一种高级语言,内存管理由解释器自动处理。不过,Python提供了一些机制(如引用、可变对象等)来实现类似指针的功能。以下是Python中“指针”的用例和应用场景。1.引用机制(类似指针)在Python中,变量是对对象的引用,而不是直接存储对象的值。这种引用机制类似于指针的概念。示例:a=10#a是对整数对象10的引用b=a#b也引
Rust为Node.js开发者设计:入门到实战
平依佩Ula
Rust为Node.js开发者设计:入门到实战rust-for-node-developersAnintroductiontotheRustprogramminglanguageforNodedevelopers.项目地址:https://gitcode.com/gh_mirrors/ru/rust-for-node-developers项目介绍欢迎来到《Rust为Node.js开发者设计》的实践
21.7 ChatGLM3-6B私有化部署实战:2小时快速搭建200 QPS高可用模型服务
少林码僧
AI大模型应用实战专栏 人工智能 gpt 语言模型
ChatGLM3-6B私有化部署实战:2小时快速搭建200QPS高可用模型服务ChatGLM3-6B私有化部署实战指南关键词:ChatGLM3-6B部署,私有化模型服务,性能优化,容器化部署,API服务封装1.部署环境准备与硬件规划ChatGLM3-6B私有化部署需要充分考虑算力资源与软件生态的适配性,以下是推荐配置方案:
bitsandbytes 报错
HuggingMe
pytorch
把bitsandbytes更新到最新版本。用nvidia-smi查看CUDA版本,我的是12.2。在~/.bashrc中添加了以下几行:exportPATH="/usr/local/cuda-12.2/bin:$PATH"exportBNB_CUDA_VERSION=122exportLD_LIBRARY_PATH="/usr/local/cuda-12.2/lib64:$LD_LIBRARY_P
通过LoRA(Low-Rank Adaptation)低秩矩阵分解来高效微调权重变化
背太阳的牧羊人
模型微调 矩阵 线性代数 深度学习 人工智能 自然语言处理 LoRA
LoRA的原理LoRA的核心思想是用低秩矩阵分解来建模参数的变化,而不是直接调整整个权重矩阵。这种方法通过减少微调的参数数量来提高训练效率。基本公式假设预训练模型的某一层权重为(W\in\mathbb{R}^{d\timesk}),LoRA的调整方式是:[W’=W+\DeltaW]其中(\DeltaW)是调整后的权重变化。LoRA假设权重变化(\DeltaW)的秩较低,可以表示为两个低秩矩阵的乘积
HPC综合-心得与笔记【19】
sakura_sea
HPC and 3D Graphics Engine 线性规划
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进行前后端分离的项目开发示例实战
皮皮冰燃
python3 python vue.js flask
文章目录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
glm-4v-9b 踩坑(4-bit量化,bitsandbytes 异常)
phynikesi
pytorch glm-4v-9b踩坑 bitsandbytes异常
前言本文只分享了自己在体验glm-4v-9b过程中遇到的问题,没有涉及对模型本身以及更多问题的分析,大家可先看问题描述,再决定是否看下去。实验平台:linux系统,RTXA4000。嫌麻烦的可以直接到文未看结论。问题描述16g显卡难以加载模型bitsandbytes异常,模型无法运行加载问题本人设备有限,引用一下别人完整加载模型的数据,大约18.9g。用16g显卡直接报OOM,用8-bit加载还是
C++20 新特性全面解析:从概念到协程的编程革命
小乌龟登顶记
java 算法 数据结构
一、引言:C++20的里程碑意义2020年发布的C++20标准被公认为继C++11之后最重要的版本更新,带来了4大核心特性和20+项重大改进。这些变革不仅提升了代码表达力,更从根本上改变了C++的编程范式。本文将深入解析C++20的关键特性,并通过实战代码示例演示其应用场景。二、四大核心特性详解2.1概念(Concepts):模板编程的革命基本概念类型约束:通过requires子句限制模板参数类型
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的配置