Louis_lan
Louis_lan

react-router 4.x 常见用法示例

常用组件及方法全部整合进一个demo中。
主要涉及的概念有：

  • HashRouter 与 BrowserRouter
  • Route
  • children 和 render 创建地址与组件的关系
  • Link 与 NavLink
  • Switch
  • 页面传参
  • 路由嵌套
  • Redirect

目录如下：
react-router 4.x 常见用法示例_第1张图片
主要的文件有 index.html, index.css, index.js，主要呈现下以下三个文件，以便大家快速上手。

index.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">div>
body>
html>

index.css

.selected{
     
    color: red;
    background-color: #ccc;
}

.box{
     
    border: #ccc solid 1px;
    margin: 5px;
}

index.js

import React,{
     Component} from 'react'
import ReactDOM from 'react-dom'
// import {BrowserRouter as Router,Route,Link,Redirect,Switch} from 'react-router-dom'
import {
     HashRouter as Router,Route,Link,Redirect,Switch, NavLink,withRouter} from 'react-router-dom'

import './index.css'

class Home extends Component{
     
    render(){
     
        // 此三个属性：history，location，match 一般在跳转页面时生成的，初始页面则没有。可通过 withRouter 方法实现。
        console.log(this.props)
        return (
            <div>
                <h1>Home</h1>

                {
     /* Link 用于跳转页面 */}
                <li><Link to='/About/1'>About</Link></li>
                <li><Link to='/Info'>Info</Link></li>
                <li><Link to='/Children'>Children</Link></li>
                <li><Link to='/Render'>Render</Link></li>

                {
     /* 可通过 NavLink 来改变激活目录的样式 */}
                {
     /* 
  • About
    • 
                
  • Info
    •   */    }
            </div>
        )
    }
}

function About(props){
     
    // 使用路由后，会传递三个属性：history，location，match
    console.log(props)
    return <h1 className='box'>About</h1>
}

class UserDetail extends Component{
     
    to = (path)=>{
     
        console.log(this.props)
        // 第二个参数可用于传参，在跳转页面中 props 的 Location 对象的 state 属性中
        // 此方法两种模式都可以用，但是传参只有在 Browser 模式下有效
        // this.props.history.push(path,{a:1})
        
        // 另一种跳转页面方式，只对 hash 模式有效，利于 hash 模式的页面传参
        location.hash = '/About/1'
        // console.log(location.hash)
    }
    render(){
     
        
        return (
            <div className='box'>
                <h1>user detail</h1>
                <li>ID: {
     this.props.match.params.id}</li>
                <li>name: {
     this.props.match.params.name}</li>
                <button onClick={
     ()=>this.to('/About')}>跳转至About页面</button>
            </div>
        )
    }
}

class Info extends Component{
     
    render(){
     
        // 使用路由后，会传递三个属性：history，location，match
        // console.log(this.props) 
        return (
            <div className='box'>
                <h1>Info</h1>
                <li><Link to='/Info/detail/1/xiaoming'>小明</Link></li>
                <li><Link to='/Info/detail/2/xiaohua'>小华</Link></li>
                {
     /* 传递多个参数 */}
                <Route path='/Info/detail/:id/:name' component={
     UserDetail}></Route>
            </div>
            
        )
    }
}

// 使用 withRouter 
let WithRouterAPP = withRouter(Home)

ReactDOM.render(<Router>
    {
     /*  */}
    
    <Home></Home>
    {
     /* Switch 只显示最先符合地址匹配的页面 */}
    <Switch>
        <Route path='/About/:id' component={
     About}></Route>
        <Route path='/Info' component={
     Info}></Route>

        <Route path='/Render' render={
     (props)=>{
     
            // console.log(props)
            return (<div className='box'><h1>Render</h1>只有符合当前URL符合匹配时才会跳转</div>)
        }}></Route>
        
        <Route path='/Children' children={
     (props)=>{
     
            // console.log(props)
            return (<div className='box'><h1>Children</h1>每次页面跳转都会触发此组件，可以通过传入的props参数中的match属性来查看当前地址是否符合匹配</div>)
        }}></Route>
        
        <Route path='/' render={
     (props)=>{
     return <h1>首页</h1>}}></Route>
        
        {
     /* 重定向 */}
        <Redirect to='/'></Redirect>
    </Switch>
</Router>,document.getElementById('app')
)

    你可能感兴趣的:(前端web,reactjs)

    • 论文分享系列（二）——论微服务架构及其应用 马斯洛金字塔下的小灵猴儿 #软考高项架构师论微服务架构及其应用论文
      论微服务架构及其应用摘要2023年5月，我司启动了精彩购电商系统的开发工作，该项目组中我担任系统架构师岗位，主要负责整体架构设计与中间件选型。本文以该电商平台为例，将介绍微服务架构的特点、应用场景以及实现方法。系统以SpringCloud微服务框架开发，分为前端Web服务、平台保障服务、业务服务三部分。前端Web服务由负载均衡与服务器集群结合，实现高并发的前台界面；平台保障服务以Eureka为中心
    • 【微前端】ReactJS实现微前端的代码架构 小涵 前端框架前端react.js架构前端框架javascriptmicroservices微前端
      【微前端】ReactJS实现微前端的代码架构目录【微前端】ReactJS实现微前端的代码架构通用步骤基于微前端的应用典型树结构：示例代码Webpack设置：Babel设置：配置Webpack别名：依赖管理：推荐超级课程：Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战微前端是一种构建Web应用程序的架构方法，涉及将单块前端拆分为更小、更易管理的组件。这些更小的
    • Apache + Tomcat + ajp 协议配置 Eagsen CEO apachetomcatjava
      前端web服务器使用apache的好处就不在赘述，这里重点讲一下如何使用ajp协议和http协议与后端tomcat服务器通信的区别。apache作为代理服务器可以使用http协议与后端tomcat服务器进行通信，也可以使用ajp协议与tomcat通信。两者的主要区别如下：ajp：使用二进制进行通信，拥有极高的效率，同时也会耗费更多的系统资源；http：使用超文本与tomcat通信，效率略差，但是灵
    • 利用electron和electron-builder把前端web项目生成桌面程序 shufan209 vueexe
      这里写自定义目录标题设置淘宝镜像建立electron工程文件1main.js2package.json3index.html安装依赖安装electron安装electron-builder预览electron项目打包electron项目关于electron，有兴趣的可以百度了解一下。为什么要写这篇文章呢？因为百度到的相关教程几乎也是作者摸索出来，只知道怎么做，却没具体说为什么这样，而且没有总结，还
    • 音频采集spring_ws_webrtc (html采集麦克风转gb711并发送广播播放)完整案例 java之书 Java技术栈综合Java知识点汇总与案例音视频springwebrtcgb711pcm
      下载地址：http://www.gxcode.top/code项目说明springboot+webscoekt+webrtc项目通过前端webrtc采集麦克风声音，通过websocket发送后台，然后处理成g711-alaw字节数据发生给广播UDP并播放。后台处理项目使用线程池(5个线程)接受webrtc数据并处理g711-alaw字节数组放到Map容器中，在开一个线程实时获取Map容器中数据通过
    • React JSX: A Deep Dive into the JavaScript XML lly202406 开发语言
      ReactJSX:ADeepDiveintotheJavaScriptXMLIntroductionReactJSX,oftenreferredtoassimplyJSX,isasyntaxextensionforJavaScriptthatisusedextensivelyintheReactlibraryforbuildinguserinterfaces.Itallowsdeveloperst
    • day53（reactJS） 李中豪前端大佬 react.js前端前端框架scss
      reactJS框架的介绍1.React框架的建造原因2.该框架解决了什么问题3.该框架有哪些特点4.该框架如何解决问题5.该框架和传统MVC的关系6.该框架的使用步骤7.React项目的主要部分8.类组件相关9.sass的使用1.React框架的建造原因起源于FaceBook公司的内部项目，在架构公司内部项目时，FaceBook对当时市面上所有的JavaScriptMVC框架都不满意，认为MVC模
    • day56（reactJS）受控组件以及高阶组件 李中豪前端大佬 react.js前端javascript
      一.受控组件如何理解受控组件？（什么是受控组件？+什么情况下是非受控组件？+如何将组件变成受控组件？）1.受控组件是指value值受到React组件状态控制的表单元素2.非受控组件：HTML中的表单元素是可输入的，也就是有自己的可变状态,但是默认表单元素的值不受所在组件state控制,也就是表单元素所在组件无法实时获取最新的表单元素值，表单元素值不受所在组件状态的控制,我们将这样的表单元素称作:非
    • 蓝桥杯前端Web赛道-寻找小狼人 明天一定早睡_ 蓝桥杯蓝桥杯前端职场和发展
      蓝桥杯前端Web赛道-寻找小狼人题目链接：0寻找小狼人-蓝桥云课(lanqiao.cn)题目要求：其实通过题目要求以及题目中提供的gif可知，该题就是需要我们手动写出能够代替filter函数的函数我们先分析题目给出的代码：letnewcardList=cardList.myarray((item)=>item.category=="werewolf");在84行左右提供了这样一段代码回忆一下原先f
    • react起源 lemmo
      简介React（有时叫React.js或ReactJS），是一个为数据提供渲染为HTML视图的开源JavaScript库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件（"dataflowsdown"）的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。它由Facebook、Instagra
    • IT技术学习之开发(五) opcc
      先声个明：我陆续写技术文章的目的可能是因为有点上瘾，而且最近几个月都在钻研技术。既然花费了大量精力来搞技术，那么把这个过程记录下来也很重要。技术大牛估计看不上眼，初学者可能也摸不着头脑，就是个个人学习成长血泪史，兴许可以替同路人铺个把个坑儿。下面继续挖坑儿......在搞后端的时候我就开始琢磨，如何把后端的数据传给前端web，按理说方法很多，起码传过去不应该算难事，但我一直没搞明白怎么让py文件和
    • OFD文件WEB前端展示-easyofd(1.0.6) 火柴盒zhang 前端
      该文是我国版式文档格式OFD前端WEB展示之EasyOFD的版本升级。一、升级内容(1)增加了图元的支持opentype(2)优化了CTM问题(3)增加了备注单元的支持，包括内部的图片和文字展示二、使用方法2.1HTML使用functionload(){letyourElement=document.getElementById("yourElementId");leteasyOfd=newEas
    • 速速报名，30万奖金不容错过！OpenTiny 挑战赛开发指南来咯~ 前端开源组件库低代码
      OpenTiny正在参加开放原子开源基金会的开源大赛，目前大赛活动正在火热进行中，报名截止时间是2024-03-15，还没上车的朋友们抓紧时间，报名参赛即有机会获得丰厚奖金，一等奖10万，总共30万。OpenTiny前端Web应用开发挑战赛报名链接：https://competition.atomgit.com/competitionInfo?id=341b80d53f...点击报名按钮即可报名参
    • Web前端开发的框架可以应用到哪些地方 一只有头发的程序猿 工作学习web前端JavaScript编程程序员前端开发
      随着时间的推移，网页设计越来越具有创新性。web前端开发将成为2020年技术领域最热门的学科之一。以前，前端空间的开发人员只要了解一些HTML，CSS，也许还有jQuery来创建交互式网站，就足够了。但是今天，他们面临着广泛且不断变化的开发技能生态系统；最近几年，我们使用JavaScript为主要的Web应用程序提供了强大的新库和框架，例如ReactJS，VueJS和angularJS。这3个可以
    • 当下最热的前端Web组态软件（可视化）
      随着5G、物联网、大数据等技术的高速发展，各领域逐步向数字化、可视化的人工智能（AI）的方向不断迈进。全球进入工业4.0时代，标志着先进的信息技术于制造业紧密结合，将从单纯的生产要素向数据驱动、智能化、高度自动化的方向转型。2023即将结束，紧跟行业发展，小编整理了2023年几款最热门的前端Web组态软件工具，以供参考！FUXAFUXA是一款基于Web的过程可视化（SCADA/HMI/Dashbo
    • React：高阶组件|ref转发 是席木木啊 Reactreact.js前端javascript
      高阶组件参考文档：高阶组件–React(reactjs.org)高阶组件（Higher-OrderComponents，简称HOC）是React中用于复用组件逻辑的一种高级技巧。具体而言：高阶组件是参数为组件，返回值为新组件的函数。组件是将props转换为UI，而高阶组件是将组件转换为另一个组件。HOC在React的第三方库中很常见，例如Redux的connect和Relay的createFrag
    • 学习前端的开始 fly in the sky ! 学习笔记前端学习前端java学习方法程序人生
      什么是前端Web前端，用来直接给用户呈现一个一个的网页一个软件通常情况下是由后端+前端完成。后端通常情况下通过Java,C++这样一个编程语言来完成一个相关的逻辑处理，将数据返回给前端。前端的工作把后端返回给自己的数据进行一系列拼装/组装之后，达到一个完美的页面呈现给用户。生活中会遇到哪些前端页面web页面PC端应用程序页面移动端APP页面除此之外,还有公众号,小程序……什么是HTML页面HTML
    • 【前端web入门第六天】01 CSS浮动 小徐要考研 前端web开发前端csshtml5
      ⭐️第六天目标解决布局问题如多个div标签在同一行的问题简单来说,就是可以两个标签,一个在左边,另一个在右边.相关知识标准流浮动flex布局❗️❗️❗️标准流是先导,浮动和flex布局都可以解决问题,但是浮动在目标开发领域较为落后,主流的解决办法是flex布局文章目录:CSS浮动1.标准流2.浮动2.1基本使用与布局2.2清除浮动CSS浮动1.标准流标准流也叫文档流，指的是标签在页面中默认的排布规
    • You Probably Dont Need Derived State 阿里王成文
      今天在segmentfault上写了一篇有关React16.3的文章，大家感兴趣的话可以去看看，以后我几乎都会在segmentfault上面写文章了，大家感兴趣的话的话保持联系，经常交流，共同进步，主攻前端。本文是一片翻译，原本来自https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html。
    • 【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】 小徐要考研 前端web开发前端html5css
      文章目录:1.清除默认样式1.1清除内外边距1.2清除列表圆点(项目符号)3.外边距问题-合并现象4.外边距问题–塌陷问题5.行内元素垂直内外边距6.圆角与盒子阴影6.1圆角6.2盒子模型-阴影(拓展)综合案例一产品卡片综合案例二新闻列表1.清除默认样式在实际设计开发中,要清除默认的样式,默认的内外边距1.1清除内外边距box-sizing可以加到这里面写,控制盒子大小*{bnmargin:0;p
    • 【前端web入门第五天】02 盒子模型基础 小徐要考研 前端web开发前端csshtml5
      文章目录:1.盒子模型的组成1.1盒子模型重要组成部分1.2盒子模型-边框线1.3盒子模型–内边距1.3.1盒子模型–内边距-多值写法1.4盒子模型–尺寸计算1.5盒子模型-版心居中1.盒子模型的组成不同组件之间的空白就是盒子模型的功劳作用:布局网页，摆放盒子和内容。1.1盒子模型重要组成部分内容区域–width&height内边距–padding(出现在内容与盒子边缘之间)边框线–border外
    • ReactJS+antd+select标签组件（可单选，多选，可将输入项作为选项） 流砂飞雪 reactantdreactjs
      MySelectTag代码块如下：importReact,{useState}from'react';import{Select}from'antd';/***@paraminitialValue默认值*@paramonChange值改变时调用方法*@paramisSingle是否单选*@paramdata选项初始值*@returns{*}*@constructor*/constMySelectT
    • 【前端web入门第五天】01 结构伪类选择器与伪元素选择器 小徐要考研 前端web开发前端csshtml5
      文章目录:1.结构伪类选择器1.1nth-child(公式)2.伪元素选择器1.结构伪类选择器作用:根据元素的结构关系查找元素。选择器说明E:first-child查找第一个E元素E:last-child查找最后一个E元素E:nth-child(N)查找第N个E元素（第一个元素N值为1)一个列表结构使用结构伪类选择器的例子li:first-child{background-color:green;
    • 【前端web入门第四天】03 显示模式+综合案例热词与banner效果 小徐要考研 前端web开发前端html5css
      文章目录:1.显示模式1.1块级元素,行内元素,行内块元素1.2转换显示模式综合案例综合案例一热词综合案例二banner效果1.显示模式什么是显示模式标签(元素)的显示方式标签的作用是什么?布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。显示模式分为几种,分别是什么?3种,块级元素,行内元素,行内块元素1.1块级元素,行内元素,行内块元素块级元素独占一行宽度默认是父级的100%添加宽高属
    • Redux-003-使用 react-redux 空乱木
      本文视频地址：https://www.qiuzhi99.com/movies/react-redux/150.html参考链接https://github.com/reactjs/react-reduxhttps://github.com/reactjs/react-redux/blob/master/docs/api.md目录结构image.pngactions定义action事件constan
    • react做一个轮播图（比对reactjs-swiper、swiper方式） sasaraku. 前端
      1、使用插件：reactjs-swiperhttps://www.cnblogs.com/cbp-jltx/p/9681838.htmlreact插入图片：https://www.cnblogs.com/cheeseCatMiao/p/9797136.html在public下建文件夹imgs这个方法的示意图（虽然它动的又慢又卡，但真的只是视频转gif不灵活的锅，原本还是很流畅的。这个方法不能点底下
    • react框架知识点 zmw1502 react.jsjavascript前端
      react框架知识点1、React入门：React简介。官网：英文官网:https://reactjs.org/。中文官网:https://react.docschina.org。介绍描述：用于动态构建用户界面的JavaScript库(只关注于视图)。由Facebook开源。React的特点：声明式编码，组件化编码。ReactNative编写原生应用。高效（优秀的Diffing算法）。React高
    • 前端web入门-CSS-day07-定位和css高级技巧 小周不摆烂 #前端web入门css前端css3html5html
      (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）目录定位相对定位绝对定位定位居中固定定位堆叠层级z-index定位-总结高级技巧CSS精灵字体图标字体图标–下载字体字体图标–使用字体CSS修饰属性垂直对齐方式vertical-align过渡transition透明度opacity光标类型cursor定位作用：灵活的改变盒子在网页中的位置实现：1.定位模式：
    • 【前端web入门第四天】02 CSS三大特性+背景图 小徐要考研 前端web开发前端csshtml5
      文章目录:1.CSS三大特性1.1继承性1.2层叠性1.3优先级1.3.1优先级1.3.2优先级-叠加计算规则2.背景图2.1背景属性2.2背景图2.3背景图的平铺方式2.4背景图位置2.5背景图缩放2.6背景图固定2.7背景复合属性1.CSS三大特性1.1继承性什么是继承性?子级默认继承父级的文字控制属性。什么叫父类比如说body就是所有标签的父类div标签里,有一个p标签,那么div标签就是p
    • 【前端web入门第四天】01 复合选择器与伪类选择器 小徐要考研 前端web开发前端html5css
      文章目录:1.复合选择器1.1后代选择器1.2子代选择器1.3并集选择器1.4交集选择器(了解)2.伪类选择器2.1伪类-文本2.2伪类-超链接（拓展)1.复合选择器什么叫复合选择器?由两个或多个基础选择器，通过不同的方式组合而成。复合选择器的作用是什么?更准确、更高效的选择目标元素（标签)一个复合选择器的代码案例?span标签文字颜色是绿色如何准确的找到复合选择器中某一个选择器的位置,并给他们添
    • 继之前的线程循环加到窗口中运行 3213213333332132 javathreadJFrameJPanel
      之前写了有关java线程的循环执行和结束，因为想制作成exe文件，想把执行的效果加到窗口上，所以就结合了JFrame和JPanel写了这个程序，这里直接贴出代码，在窗口上运行的效果下面有附图。 package thread; import java.awt.Graphics; import java.text.SimpleDateFormat; import java.util
    • linux 常用命令 BlueSkator linux命令
      1.grep 相信这个命令可以说是大家最常用的命令之一了。尤其是查询生产环境的日志，这个命令绝对是必不可少的。 但之前总是习惯于使用 （grep -n 关键字 文件名 ）查出关键字以及该关键字所在的行数，然后再用 （sed -n  '100,200p' 文件名），去查出该关键字之后的日志内容。 但其实还有更简便的办法，就是用（grep  -B n、-A n、-C n 关键
    • php heredoc原文档和nowdoc语法 dcj3sjt126com PHPheredocnowdoc
      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body> <?
    • overflow的属性 周华华 JavaScript
      <!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/1999/xhtml&q
    • 《我所了解的Java》——总体目录 g21121 java
              准备用一年左右时间写一个系列的文章《我所了解的Java》，目录及内容会不断完善及调整。         在编写相关内容时难免出现笔误、代码无法执行、名词理解错误等，请大家及时指出，我会第一时间更正。    &n
    • [简单]docx4j常用方法小结 53873039oycg docx
              本代码基于docx4j-3.2.0，在office word 2007上测试通过。代码如下:         import java.io.File; import java.io.FileInputStream; import ja
    • Spring配置学习 云端月影 spring配置
      首先来看一个标准的Spring配置文件 applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=&q
    • Java新手入门的30个基本概念三 aijuans java新手java 入门
      17.Java中的每一个类都是从Object类扩展而来的。　　18.object类中的equal和toString方法。　　equal用于测试一个对象是否同另一个对象相等。　　toString返回一个代表该对象的字符串,几乎每一个类都会重载该方法,以便返回当前状态的正确表示.(toString 方法是一个很重要的方法)　　 19.通用编程:任何类类型的所有值都可以同object类性的变量来代替。　
    • 《2008 IBM Rational 软件开发高峰论坛会议》小记 antonyup_2006 软件测试敏捷开发项目管理IBM活动
      我一直想写些总结,用于交流和备忘,然都没提笔,今以一篇参加活动的感受小记开个头,呵呵! 其实参加《2008 IBM Rational 软件开发高峰论坛会议》是9月4号,那天刚好调休.但接着项目颇为忙,所以今天在中秋佳节的假期里整理了下. 参加这次活动是一个朋友给的一个邀请书,才知道有这样的一个活动,虽然现在项目暂时没用到IBM的解决方案,但觉的参与这样一个活动可以拓宽下视野和相关知识.
    • PL/SQL的过程编程,异常,声明变量,PL/SQL块 百合不是茶 PL/SQL的过程编程异常PL/SQL块声明变量
      PL/SQL;    过程; 符号; 变量; PL/SQL块; 输出; 异常;     PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言PL/SQL 是对 SQL 的扩展,sql的执行时每次都要写操作
    • Mockito(三)--完整功能介绍 bijian1013 持续集成mockito单元测试
              mockito官网：http://code.google.com/p/mockito/，打开documentation可以看到官方最新的文档资料。 一.使用mockito验证行为 //首先要import Mockito import static org.mockito.Mockito.*; //mo
    • 精通Oracle10编程SQL(8)使用复合数据类型 bijian1013 oracle数据库plsql
      /* *使用复合数据类型 */ --PL/SQL记录 --定义PL/SQL记录 --自定义PL/SQL记录 DECLARE TYPE emp_record_type IS RECORD( name emp.ename%TYPE, salary emp.sal%TYPE, dno emp.deptno%TYPE ); emp_
    • 【Linux常用命令一】grep命令 bit1129 Linux常用命令
      grep命令格式   grep [option] pattern [file-list]     grep命令用于在指定的文件(一个或者多个,file-list)中查找包含模式串(pattern)的行,[option]用于控制grep命令的查找方式。   pattern可以是普通字符串，也可以是正则表达式，当查找的字符串包含正则表达式字符或者特
    • mybatis3入门学习笔记 白糖_ sqlibatisqqjdbc配置管理
      MyBatis 的前身就是iBatis，是一个数据持久层(ORM)框架。  MyBatis 是支持普通 SQL 查询，存储过程和高级映射的优秀持久层框架。MyBatis对JDBC进行了一次很浅的封装。   以前也学过iBatis，因为MyBatis是iBatis的升级版本，最初以为改动应该不大，实际结果是MyBatis对配置文件进行了一些大的改动，使整个框架更加方便人性化。
    • Linux 命令神器：lsof 入门 ronin47 lsof
             lsof是系统管理/安全的尤伯工具。我大多数时候用它来从系统获得与网络连接相关的信息，但那只是这个强大而又鲜为人知的应用的第一步。将这个工具称之为lsof真实名副其实，因为它是指“列出打开文件（lists openfiles）”。而有一点要切记，在Unix中一切（包括网络套接口）都是文件。 有趣的是，lsof也是有着最多
    • java实现两个大数相加，可能存在溢出。 bylijinnan java实现
      import java.math.BigInteger; import java.util.regex.Matcher; import java.util.regex.Pattern; public class BigIntegerAddition { /** * 题目：java实现两个大数相加，可能存在溢出。 * 如123456789 + 987654321
    • Kettle学习资料分享，附大神用Kettle的一套流程完成对整个数据库迁移方法 Kai_Ge Kettle
      Kettle学习资料分享   Kettle 3.2 使用说明书 目录 概述..........................................................................................................................................7 1.Kettle 资源库管
    • [货币与金融]钢之炼金术士 comsci 金融
             自古以来,都有一些人在从事炼金术的工作.........但是很少有成功的        那么随着人类在理论物理和工程物理上面取得的一些突破性进展......        炼金术这个古老
    • Toast原来也可以多样化 dai_lm androidtoast
      Style 1： 默认 Toast def = Toast.makeText(this, "default", Toast.LENGTH_SHORT); def.show(); Style 2： 顶部显示 Toast top = Toast.makeText(this, "top", Toast.LENGTH_SHORT); t
    • java数据计算的几种解决方法3 datamachine javahadoopibatisr-languer
      4、iBatis     简单敏捷因此强大的数据计算层。和Hibernate不同，它鼓励写SQL，所以学习成本最低。同时它用最小的代价实现了计算脚本和JAVA代码的解耦，只用20%的代价就实现了hibernate 80%的功能,没实现的20%是计算脚本和数据库的解耦。     复杂计算环境是它的弱项，比如：分布式计算、复杂计算、非数据
    • 向网页中插入透明Flash的方法和技巧 dcj3sjt126com htmlWebFlash
      将 Flash 作品插入网页的时候，我们有时候会需要将它设为透明，有时候我们需要在Flash的背面插入一些漂亮的图片，搭配出漂亮的效果……下面我们介绍一些将Flash插入网页中的一些透明的设置技巧。 　　一、Swf透明、无坐标控制　　首先教大家最简单的插入Flash的代码，透明，无坐标控制： 　　注意wmode="transparent"是控制Flash是否透明
    • ios UICollectionView的使用 dcj3sjt126com
      UICollectionView的使用有两种方法，一种是继承UICollectionViewController，这个Controller会自带一个UICollectionView；另外一种是作为一个视图放在普通的UIViewController里面。 个人更喜欢第二种。下面采用第二种方式简单介绍一下UICollectionView的使用。 1.UIViewController实现委托，代码如
    • Eos平台java公共逻辑 蕃薯耀 Eos平台java公共逻辑Eos平台java公共逻辑
       Eos平台java公共逻辑 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:20:4
    • SpringMVC4零配置--Web上下文配置【MvcConfig】 hanqunfeng springmvc4
      与SpringSecurity的配置类似，spring同样为我们提供了一个实现类WebMvcConfigurationSupport和一个注解@EnableWebMvc以帮助我们减少bean的声明。   applicationContext-MvcConfig.xml <!-- 启用注解，并定义组件查找规则 ，mvc层只负责扫描@Controller --> <
    • 解决ie和其他浏览器poi下载excel文件名乱码 jackyrong Excel
         使用poi,做传统的excel导出，然后想在浏览器中，让用户选择另存为，保存用户下载的xls文件，这个时候，可能的是在ie下出现乱码（ie,9,10,11),但在firefox,chrome下没乱码， 因此必须综合判断，编写一个工具类：      /** * * @Title: pro
    • 挥洒泪水的青春 lampcy 编程生活程序员
      2015年2月28日，我辞职了，离开了相处一年的触控，转过身--挥洒掉泪水，毅然来到了兄弟连，背负着许多的不解、质疑——”你一个零基础、脑子又不聪明的人，还敢跨行业，选择Unity3D？“，”真是不自量力••••••“，”真是初生牛犊不怕虎•••••“，••••••我只是淡淡一笑，拎着行李----坐上了通向挥洒泪水的青春之地——兄弟连！ 这就是我青春的分割线，不后悔，只会去用泪水浇灌——已经来到
    • 稳增长之中国股市两点意见-----严控做空，建立涨跌停版停牌重组机制 nannan408
         对于股市，我们国家的监管还是有点拼的，但始终拼不过飞流直下的恐慌，为什么呢？    笔者首先支持股市的监管。对于股市越管越荡的现象，笔者认为首先是做空力量超过了股市自身的升力，并且对于跌停停牌重组的快速反应还没建立好，上市公司对于股价下跌没有很好的利好支撑。    我们来看美国和香港是怎么应对股灾的。美国是靠禁止重要股票做空，在
    • 动态设置iframe高度(iframe高度自适应) Rainbow702 JavaScriptiframecontentDocument高度自适应局部刷新
      如果需要对画面中的部分区域作局部刷新，大家可能都会想到使用ajax。 但有些情况下，须使用在页面中嵌入一个iframe来作局部刷新。 对于使用iframe的情况，发现有一个问题，就是iframe中的页面的高度可能会很高，但是外面页面并不会被iframe内部页面给撑开，如下面的结构： <div id="content"> <div id=&quo
    • 用Rapael做图表 tntxia rap
      function drawReport(paper,attr,data){          var width = attr.width;     var height = attr.height;          var max = 0;   &nbs
    • HTML5 bootstrap2网页兼容（支持IE10以下） xiaoluode html5bootstrap
      <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他