import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    clickAlertInfo: '发生了鼠标单击事件',
    linkPreventInfo: '即将访问百度官网',
    baiduWebsiteInfo: 'http://www.baidu.com',
    gotoBaiduWebsiteInfo: '访问百度官网',
    buttonToAlertInfo: '类事件处理正常',
    buttonToValue: '类的事件',
    callbackAlertInfo: '使用了箭头函数',
    callbackValue: '回调操作',
    eventWithPropsAlertInfo: '传递的参数为:name=',
    eventWithPropsValue: '带参数的事件处理',
    onOffStateAlertInfo: '现有的状态为',
    onOffButtonValue1: '开关按钮(初始为开)',
    onOffButtonValue2: '开关按钮(初始为关)',
    titleInfo: '事件处理的简单示例',
    buttonInfo: '鼠标单击事件示例：',
    buttonValue: '单击鼠标事件',
    linkExInfo: '超链接访问示例：',
    buttonToInfo: '类的事件处理示例：',
    callbackInfo: '回调操作示例：',
    eventWithPropsInfo: '带参数的事件处理示例：',
    onOffStateInfo: '状态的变化示例：',
    preventDefaultInfo: '使用preventDefault阻止默认行为：',
    actionLinkInfo: '单击Link'

}

/*鼠标单价事件处理 */
function onBtnClick(){
    alert(infoMap.clickAlertInfo);
}

/*阻止事件默认行为 */
function PreventLink(){
    function handleClick(){
        alert(infoMap.linkPreventInfo);
    }
    return (
        <a href={infoMap.baiduWebsiteInfo} onClick={handleClick}>{infoMap.gotoBaiduWebsiteInfo}</a>
    );
}

class BtnClickComp extends React.Component {
    constructor(props){
        super(props);
    }
    handleClick2(){
        alert(infoMap.buttonToAlertInfo);
    }
    render() {
        return (
            <button onClick={this.handleClick2}>
                {infoMap.buttonToValue}
            </button>
        );
    }
}

/*使用了箭头函数回调 */
class CallBackBtnClickComp extends React.Component {
    constructor(props){
        super(props);
    }
    handleClick = () => {
        alert(infoMap.callbackAlertInfo);
    }
    render() {
        // 此语法确保 handleClick（）方法内的 `this` 已被绑定
        return (
            <button onClick={(e) => this.handleClick(e)}>
                {infoMap.callbackValue}
            </button>
        );
    }
}

/*在事件处理方法中传递参数 */
class ParamsEventComp extends React.Component {
    constructor(props){
        super(props);
        this.name = props.name;
    }
    passParamsClick(name, e){
        e.preventDefault();
        alert(infoMap.eventWithPropsAlertInfo + " " +name);
    }
    render() {
        return (
            <div>
                {/* 通过箭头?方法传递参数 */}
                <button onClick={(e) => this.passParamsClick(this.name, e)}>
                    {infoMap.eventWithPropsValue}
                </button>
            </div>
        );
    }
}

class ToggleBtnComp extends React.Component {
    constructor(props){
        super(props);
        this.isToggleOn = props.isToggleOn;
        // 为了在回调中使用this，这里的绑定比不可少。
        this.handleClick = this.toggleBtnClick.bind(this);
    }
    toggleBtnClick(isToggleOn, e){
        e.preventDefault();
        alert(infoMap.onOffStateAlertInfo + " " + this.isToggleOn);
        this.isToggleOn = !this.isToggleOn;
        
    }
    render() {
        return (
            <button onClick={(e) => this.toggleBtnClick(this.isToggleOn, e)}>
                {this.isToggleOn ? infoMap.onOffButtonValue1 : infoMap.onOffButtonValue2}
            </button>
        )
    }
}

function ActionLink(){
    // e是合成事件，React根据W3C规范来定义合成事件，开发时无须考虑跨浏览器兼容性问题
    function handleClick(e){
        e.preventDefault();
        alert(infoMap.actionLinkInfo);
    }
    return (
        <a href="#" onClick={handleClick}>
            {infoMap.actionLinkInfo}
        </a>
    )
}

const EventExample = () => {
    return (
        <span>
            <h2>{infoMap.titleInfo} </h2>
            <span>{infoMap.buttonInfo}</span>
            <button onClick={onBtnClick}>{infoMap.buttonValue}</button>
            <hr/>
            <span>{infoMap.linkExInfo}<PreventLink/></span>
            <hr/>
            <span>{infoMap.buttonToInfo}<BtnClickComp/></span>
            <hr/>
            <span>{infoMap.callbackInfo}<CallBackBtnClickComp/></span>
            <hr/>
            <span>{infoMap.eventWithPropsInfo}<ParamsEventComp name={'ls'}/></span>
            <hr/>
            <span>{infoMap.onOffStateInfo}<ToggleBtnComp isToggleOn={true}/></span>
            <hr/>
            <span>{infoMap.preventDefaultInfo}<ActionLink/></span>
        </span>
    );
}
                            
export default EventExample;

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    url: 'src/chapterOne/Assets/liupiaopiao.png',
    loadingInfo: '加载中...',
    nickName: 'liupiaopiao_666',
    userName: '柳飘飘',
    age: 18,
    nickNameInfo: '昵称：',
    userNameInfo: '用户名：',
    ageInfo: '年龄：',
    partTitle: '组件的切分与组合的简单示例',
    dateNameInfo: '时间：',
};

// 格式化时间
function formatDate(date) {
    return date.toLocaleDateString();
}

// 封装图片信息
const avatar = {
    url: infoMap.url,
    alt: infoMap.loadingInfo,
    nickName: infoMap.nickName
};

// 封装用户信息
const userInfo = {
    name: infoMap.userName,
    age: infoMap.age,
};

// 封装时间信息
const date = {
    date: formatDate(new Date()),
};

// 图片信息组件
function Avatar(props) {
    return (
        <span>
            <img src={props.avatar.url} alt={props.avatar.alt} />
            <p>{infoMap.nickNameInfo} {props.avatar.nickName}</p>
        </span>
    );
}

// 用户信息组件
function UserInfo(props) {
    return (
        <span>
            <p>{infoMap.userNameInfo} {props.userInfo.name}</p>
            <p>{infoMap.ageInfo} {props.userInfo.age}</p>
        </span>
    );
}

// 用户详细信息组件
function UserDetailInfo(props) {
    return (
        <div>
            <Avatar avatar={props.avatar} />
            <hr/>
            <UserInfo userInfo={props.userInfo} />
            <hr/>
            <span>
                <p>{infoMap.dateNameInfo} {props.curdate.date}</p>
            </span>
        </div>
    );
}

// 用户详细信息组件，展示用户信息中的细节数据
const userDeatil = <UserDetailInfo avatar={avatar} userInfo={userInfo} curdate={date}/>;  

const ComponentDispart= () => {
    return(
        <span>
            <h3>{infoMap.partTitle}</h3>
            {userDeatil}
        </span>
    );
}

export default ComponentDispart;

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';


const infoMap = {
    msgInit: '通过键盘在文本框输入字符后在浏览器Console中显示对应的ASCII码',
    alertInfo: '按回车键，msg值为：',
}

class KeyBind extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: infoMap.msgInit,
        }
    }
    keyUp = (e) => {
        console.log(e.keyCode);
        if (e.keyCode === 13) {
            alert(infoMap.alertInfo + e.target.value);
        }
    }
    render() {
        return (
            <div>
                <h2>{infoMap.msgInit}</h2>
                <input type="text" onKeyUp={this.keyUp} />
            </div>
        )
    }
}

const KeyboardEventExample = () => {
    return (
        <span>
            <KeyBind/>
        </span>
    )
}

export default KeyboardEventExample;

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    loggedInInfo: '欢迎登录此系统。',
    loggedOutInfo: '请先登录系统。',
    loginButtonInfo: '登录',
    logoutButtonInfo: '退出登录',
    stateInfo: '当前状态为：',
    scoreInfo: '得分',
    passInfo: '分，通过考试。',
    notPassInfo: '分，未通过考试。',
    passScore: 60,
    btnInfo: '按钮的使用2：',
    cool: '今天真冷。',
    warm: '今天气温舒适。',
    hot: '今天有点热。',
    veryHot: '今天真的很热。',
    how: '今天气温如何？',
    coolStandard: 0,
    warmStandard: 25,
    hotStandard: 39,
    title1Info: 'if条件简单示例',
    trueInfo: '初始条件为true的结果：',
    falseInfo: '初始条件为false的结果：',
    title2Info: '按钮的使用1：',
    title3Info: '与(&&)运算和或(||)运算的简单示例',
    title4Info: '三目运算简单示例',
    temperature: 25,
    temperatureUnit: '度，',
}

function UserLoggedInComp(props) {
    return <span>{infoMap.loggedInInfo}</span>
}

function UserLoggedOutComp(props) {
    return <span>{infoMap.loggedOutInfo}</span>
}

// 用if语句进行条件渲染
function UserLoggedComp(props) {
    const isLogged = props.isLogged;
    if (isLogged) {
        return <UserLoggedInComp />;
    } else {
        return <UserLoggedOutComp />;
    }
}

// 登录按钮组件
function LoginButton(props){
    return (
        <button className="btn btn-mt-3 btn-primary btn-block my-2" onClick={props.onClick}>
            {infoMap.loginButtonInfo}
        </button>
    );
}

// 退出登录按钮组件
function LogoutButton(props){
    return (
        <button className="btn btn-mt-3 btn-primary btn-block my-2" onClick={props.onClick}>
            {infoMap.logoutButtonInfo}
        </button>
    );
}

// 条件登录控件组件
class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.isLoggedIn = props.isLoggedIn;
    }

    handleLoginClick() {
        this.isLoggedIn = !this.isLoggedIn;
        alert(infoMap.stateInfo + this.isLoggedIn);
    }

    handleLogoutClick(){
        this.isLoggedIn = !this.isLoggedIn;
        alert(infoMap.stateInfo + this.isLoggedIn)
    }

    render() {
        let button;
        if (this.isLoggedIn){
            button = <LogoutButton onClick={this.handleLogoutClick} />;
        } else {
            button = <LoginButton onClick={this.handleLoginClick} />;
        }
        return (
            <div>
                <UserLoggedComp isLogged={this.isLoggedIn} />
                {button}
            </div>
        );
    }
}

const score = [90, 60, 50];
function PassTestComp(props) {
    return (
        <p>
            {infoMap.scoreInfo}<b>{props.score}</b>{infoMap.passInfo}
        </p>
    )
}
function NotPassTestComp(props) {
    return(
        <p>
            {infoMap.scoreInfo}<b>{props.score}</b>{infoMap.notPassInfo}
        </p>
    );
}

// 使用&&和||
function TestPass(props){
    const score = props.score;
    return (
        <div>
            {
                (score >= infoMap.passScore && <PassTestComp score={score} />) || (score < infoMap.passScore && <NotPassTestComp score={score} />)
            }
        </div>
    );
}

// 运用三目运算
function TestPass2(props) {
    const score = props.score;
    return (
        <div>
            {
                (score >= infoMap.passScore ? <PassTestComp score={score} /> : <NotPassTestComp score={score} />)
            }
        </div>
    );
}

function Banner(props) {
    if (!props.isBanner){
        return null;
    }
    return (
        <div className="banner">
            {infoMap.btnInfo}
        </div>
    );
}

class BannerComp extends React.Component {
    constructor(props) {
        super(props);
        this.showBanner = props.showBanner;
        this.handleToggleClick = this.handleToggleClick.bind(this);
    }

    handleToggleClick() {
        alert(this.showBanner)
    }

    render() {
        return (
            <div>
                <Banner isBanner={this.showBanner} />
                <button className="btn btn-mt-3 btn-primary btn-block my-2" onClick={this.handleToggleClick}>
                    {this.showBanner ? '隐藏' : '显示'}
                </button>
            </div>
        );
    }
}

function TempLevel(props){
    if (props.wLevel <= infoMap.coolStandard){
        return <p>{infoMap.cool}</p>;
    } else if ((props.wLevel > infoMap.coolStandard) && (props.wLevel <= infoMap.warmStandard)){
        return <p>{infoMap.warm}</p>;
    } else if ((props.wLevel > infoMap.warmStandard) && (props.wLevel <= infoMap.hotStandard)){
        return <p>{infoMap.hot}</p>;
    } else if (props.wLevel > infoMap.hotStandard) {
        return <p>{infoMap.veryHot}</p>
    } else {
        return <p>{infoMap.how}</p>
    }
}

class WaterTempComp extends React.Component {
    constructor(props) {
        super(props);
        this.temperature = props.temperature;
    }
    render() {
        const temperature = this.temperature;
        return (
            <TempLevel wLevel={parseFloat(temperature)}/>
        );
    }

}

const IfExample = () => {
    return (
    <span>
        <h3>{infoMap.title1Info}</h3>
        {infoMap.trueInfo}<UserLoggedComp isLogged={true}/>
        <br/>
        {infoMap.falseInfo}<UserLoggedComp isLogged={false}/>
        <hr/>
        {infoMap.title2Info}<LoginControl isLoggedIn={true}/>
        <LoginControl isLoggedIn={false}/>
        <hr/>
        <h3>{infoMap.title3Info}</h3>
        <TestPass score={score[0]} />
        <TestPass score={score[1]} />
        <TestPass score={score[2]} />
        <hr/>
        <h3>{infoMap.title4Info}</h3>
        <TestPass2 score={score[0]} />
        <TestPass2 score={score[1]} />
        <TestPass2 score={score[2]} />
        <hr/>
        <BannerComp showBanner={true} />
        <hr/>
        {infoMap.temperature}{infoMap.temperatureUnit}<WaterTempComp temperature={infoMap.temperature} />
    </span>
    )
    
}

export default IfExample;

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    imgPath: 'src/chapterOne/Assets/',
    imgEx: '.jpg',
    file1Name: 'car1-1',
    file2Name: 'car2-2',
    file3Name: 'car3-3',
    file4Name: 'car4-4',
    alertInfo: '加载图像',
}

/**
 * 图像onLoad事件处理函数
 */
function loadPic(){
    alert(infoMap.alertInfo);
}

class Img extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            listImg: [
                'src/chapterOne/Assets/car1-1.jpg',
                'src/chapterOne/Assets/car2-2.jpg',
                'src/chapterOne/Assets/car3-3.jpg',
                'src/chapterOne/Assets/car4-4.jpg',
            ],
            index: 0
        }
    }

    // 计时器执行
    indexChange(){
        if (this.state.index == this.state.listImg.length-1){
            this.setState({
                index: 0
            })
        } else {
            this.setState({
                index: this.state.index + 1
            })
            // 在浏览器Console中输出图片序号
            console.log(this.state.index);
        }
    }

    componentDidMount() {
        setInterval(() => {
            this.indexChange();
        }, 2000);
    }

    render() { 
        let {listImg, index} = this.state;
        let imgList = listImg.map((item, imgIndex) => {
            return <img src={item} key={imgIndex} style={{'display':index == imgIndex ? 'block' : 'none'}} className="img" onLoad={loadPic} />
        });
        let liList = listImg.map((item2, imgIndex2) => {
            return <li key={imgIndex2} style={{'listStyleType':index == imgIndex2?'initial':'circle'}}></li>
        });
        return (
            <div>
                {imgList}
                <div>
                    <ul>
                        {liList}
                    </ul>
                </div>
            </div>
        );
    }
}

const ImageEventExample = () => {
    return (
        <span>
            <Img />
        </span>
    );
}

export default ImageEventExample;

简介

XXL-JOB是一个轻量级分布式任务调度平台，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。

v2.2.0 Release Notes

• 1、RESTful API：调度中心与执行器提供语言无关的 RESTful API 服务，第三方任意语言可据此对接调度中心或者实现执行器。

MySQL覆盖索引覆盖索引是指查询使用了索引且返回需要的列，在该索引列中已经全部能够找到。

在查询时，尽量使用覆盖索引，减少select *。

表中存在联合索引 idx_user_pro_age_sta (关联了三个字段profession, age, status)，该索引也是一个二级索引，该叶子节点下面的是这一行的主键id。

当查询返回的数据在id, profession, age, status 中，则直接走二级索引返回数据，

为什么程序和数据库之间的“默认”选择会产生不同呢？

作者 | Evan Jones

译者 | 弯月，责编 | 屠敏

以下为译文：

我可以肯定地说，哈希表远比有序数据结构更常见，Go中的map、Python中的dict、Java中的HashMap等都是哈希表，而树结构只在保存有序数据结构时才使用。有一次，在谈到Google优化C++的哈希表时，有人指出在整个Google的服务器中，有1%的CPU和4%的内存都被哈希表使用了。然而，数据库默认总是会使用有序索引，通常是B树。为什么程序和数据库之间的“默认”选择会产生不同呢？说到底两者都是为了同一个目标：访问数据。一年前，我曾就这个问题在Twitter上发表了推文，并得到了许多有趣的答案。下面就来总结一下我得到的答案。

当我们在日常工作时，经常能会遇到多个工作表一起操作的情况，那么这个时候如何快速查看所有工作表呢？小渔老师今天就教大家使用超链接的方法，制作成目录快速查询，记得点赞加关注哦！

1、首先我们打开表格较多的数据表，新建一个空白的表格作为目录；