临风而眠

react入门学习:井字棋游戏（官方文档教程）

react入门学习:井字棋游戏

学习教程来自官方文档：https://react.docschina.org/tutorial/tutorial.html#what-are-we-building

文章目录

react入门学习:井字棋游戏
- 一.创建项目
- - - 遇到的问题
    - npx create-react-app my-app 太慢
- 二.概览
- - 1.初始代码
  - 2.render方法
  - 3.Props传递数据
  - - 修改代码，将数据从Board组件传递到Square组件
  - 4.给组件添加交互
  - - 给Square组件实现“记忆”功能
- 三.游戏完善
- - 1.状态提升
  - 2.函数式组件
  - 3.轮流落子
  - 4.判断胜出者
  - 5.目前代码
- 四.历史记录功能
- - 1.提升状态
  - 2.展现历史步骤记录
  - 3.最终代码

一.创建项目

1st:
```
npx creact-react-app my-app
```
小tips：npm与npx的区别
把源代码删掉
```
cd src
del *
```
windows命令行使用del *
在src目录下新建文件
```
touch index.css
touch index.js
```

在 index.js写入:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

运行网页
```
cd my-app
npm start
```
此时应该能看到空白网页

遇到的问题

npx create-react-app my-app 太慢

npm查看源地址以及更换源地址
解决npx create-react-app速度过慢的问题

二.概览

1.初始代码

html文件就是自动生成的public路径下的index.html

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React Apptitle>
  head>
  <body>
    <noscript>You need to enable JavaScript to run this app.noscript>
    <div id="root">div>
    
  body>
html>

CSS文件 src路径下的index.css

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

js文件 src路径下的index.js

import React form 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Square extends React.Component {
    render() {
        return (
        	
		);
        //return后面的内容加括号,防止VScode等编辑器自动在return后面加分号
    }
}

class Board extends React.Component {
    
    renderSquare(i){
        return ;
    }
    
    render() {
        const status = 'Next player:X';
        
        return (
        	
            	
                	{status}
                
                
                
                	{this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                
                
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                
                
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                
            
            
        
        )
    }
    
}

class Game extends React.Component {
    render() {
        return (
        	
            	
                	
                
                
                
                	{ }
                    { }
                
            
        )
    }
}

ReactDOM.render(
	,
    document.getElementById('root')
)

初始代码中有三个React组件
- Square
  - 渲染了单独的
- Board
  - 渲染了9个方块
- Game
  - 渲染了含有默认值的一个棋盘

2.render方法

React根据描述把结果展示出来
render方法的返回了一个React元素
上面的代码使用了JSX语法糖

3.Props传递数据

修改代码，将数据从Board组件传递到Square组件

在Board组件的renderSquare方法中,改写代码,将名为value的prop传递到Square中
```
renderSquare(i) {
	return <Square value={i} />;
}
```

然后,修改Square组件的render方法，在button中加入内容

class Square extends React.Component {
	render() {
		return(
			
		);
	}
}

修改后,在my-app路径下打开终端使用npm start启动项目

在渲染结果中,可以看到每个方格中都有数字
刚刚修改代码的过程中，把一个prop从父组件Board传递给了子组件Square
- 在 React 应用中，数据通过 props 的传递，从父组件流向子组件

4.给组件添加交互

这一步的目标是让棋盘的在点击之后每个格子能落下”X"作为棋子
首先修改Square组件的render()方法的返回值中的button标签

增加onClick属性
```
class Square extends React.Component {
    render() {
        return (
            
        );
    }   
}
```
箭头函数也可以写为

onClick={function(){alert('click'); }}

但是箭头函数可以减少代码量
效果

给Square组件实现“记忆”功能

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

通过state来实现“记忆”功能
在React组件的构造函数中设置this.state初始化state

this.state应被视为一个组件的私有属性。在 this.state 中存储当前每个方格（Square）的值，并且在每次方格被点击的时候改变这个值。

首先,在Square中用构造函数来初始化state

class Square extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			value : null.
		};
	}
	
	render() {
		return (
			
		);
	}
}

在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头

其次,修改Square组件的render方法，实现每当方格被点击时显示当前state值

方法是在Square组件的render方法中的onClick事件监听函数中调用this.setState
```
class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      
    );
  }
}
```
这样子就能实现：在每次

三.游戏完善

井字棋游戏要放置 "X"和"O"两种棋

1.状态提升

为Board组件添加构造函数，将Board组件的初始状态设置为长度为9的空数组值

constructor(props) {
        super(props);
        this.state = {
            squares: Array(9).fill(null),
        };
    }

其次

考虑到填充棋盘后,每个格子上可能的形式是null,O,X三种

这些我们打算存储到squares数组里面,那么就要修改Board的renderSquare方法来读取这些值
```
    renderSquare(i) {
        return ;
    }
```
这样，每个Square就都能接收到一个 value prop 了，这个 prop 的值可以是 'X'、 'O'、或 null（null 代表空方格）。

接着，要修改Square的事件监听函数

 renderSquare(i) {
        return ( this.handleClick(i)}
        />);
    }

再其次,从Board组件向Square组件中传递value和onClick两个props参数

需要修改Square的代码

class Square extends React.Component {
	render(){
		return (
			
		);
	}
}

当每一个Square被点击时,Board提供的onClick函数就会触发,这是如何实现的呢？

于是,添加handleClick方法


    handleClick(i) {
        const squares = this.state.squares.slice();
        squares[i] = 'X';
        this.setState({squares: squares});
    }

2.函数式组件

定义一个函数，接收props参数，然后返回需要渲染的元素
把Square组件重写为一个函数组件
```
function(props)
{
	return(
	
	
	);
}
```
可以注意到this.props被换成了props

箭头函数也变成了onClick={props.onClick}

3.轮流落子

将"X"默认设置为先手棋，设置一个布尔值来表示下一步轮到哪个玩家

棋子每移动一步，xIsNext都会反转，该值确定下一步轮到哪个玩家，并且游戏的状态会被保存下来

在构造函数中添加xIsNext

修改handleClick函数

constructor(props) {
        super(props);
        this.state = {
            squares: Array(9).fill(null),
            xIsNext: true,

        };
    }

    handleClick(i) {
        const squares = this.state.squares.slice();
        squares[i] = this.state.xIsNext? 'X':'O';
        this.setState({
            squares: squares,
            xIsNext:!this.state.xIsNext,
        });
    }

效果

这样子就实现了轮流落子了

CSS修改了一下

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol,
ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 5px solid rgb(7, 130, 168);
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 50px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 50px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

显示轮到哪个玩家

在Board组件的render方法中修改status的值

    render() {
        const status = 'Next player:'+(this.state.xIsNext?'X':'O');

        return (
            
                
                    {status}
                
                
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                
                
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                
                
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                
            
        )
    }

效果：

4.判断胜出者

定义一个函数

function calculateWinner(squares) {
	const lines = [
		[0,1,2],
		[3,4,5],
		[6,7,8],
		[0,3,6],
		[1,4,7],
		[2,5,8],
		[0,4,8],
		[2,4,6],
	
	];
	for(let i = 0 ; i < lines.length ; i++) {
		const[a,b,c] = lines[i];
		if(squares[a]&&squares[a]===squares[b]&&squares[a]===squares[c]){
		return squares[a];
		}
	}
    
    return null;
}

代码中const[a,b,c]=lines[i]

相当于
const a = lines[i][0];
const b = lines[i][1];
const c = lines[i][2];
参考

JavaScript——编程风格

ES6 解构赋值

接着，在Board组件的render方法中调用刚刚那个函数检查是否有玩家胜出，有人胜出就把玩家信息显示出来

修改Board组件的render方法

    render() {
        const winner = calculateWinner(this.state.squares);
        let status;
        if (winner) {
            status = 'Winner:' + winner;

        } else {
            status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
        }
        
        return (
            
                
                    {status}
                
                
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                
                
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                
                
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                
            
        )
    }

效果

此时还有个问题

已经有人胜出了，但是棋盘还能落子

还有个bug，当某个Square落子之后，还能覆盖继续落子

修改handleClick，使得当有玩家胜出时,或者某个Square被填充时,该函数不做任何处理直接返回

   handleClick(i) {
        const squares = this.state.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext? 'X':'O';
        this.setState({
            squares: squares,
            xIsNext:!this.state.xIsNext,
        });
    }

5.目前代码

此时已经实现了井字棋游戏的功能

目前的index.js代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// class Square extends React.Component {
// 	render(){
// 		return (
// 			
// 		);
// 	}
// }
function Square(props) {

    return (
        
    );
}
class Board extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            squares: Array(9).fill(null),
            xIsNext: true,

        };
    }

    handleClick(i) {
        const squares = this.state.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext? 'X':'O';
        this.setState({
            squares: squares,
            xIsNext:!this.state.xIsNext,
        });
    }
    renderSquare(i) {
        return ( this.handleClick(i)}
        />);
    }

    render() {
        const winner = calculateWinner(this.state.squares);
        let status;
        if (winner) {
            status = 'Winner:' + winner;

        } else {
            status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
        }
        
        return (
            
                
                    {status}
                
                
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                
                
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                
                
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                
            
        )
    }
}

class Game extends React.Component {
    render() {
        return (
            
                
                    
                
                
                    { }
                    { }
                
            
        )
    }
}

ReactDOM.render(
    ,
    document.getElementById('root')
)

function calculateWinner(squares) {
    const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ];

    for (let i = 0; i < lines.length; i++){
        const [a, b, c] = lines[i];
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }

    }
    return null;

}

四.历史记录功能

1.提升状态

目标是实现顶层Game组件展示出一个历史步骤的列表

这个功能需要访问history的数据

故把history这个state放在顶层Game组件中

首先，在Game组件的构造函数中初始化state

constructor(props) {
	super(props);
	this.state = {
		history:[{
			squares: Array(9).fill(null),
		}],
		xIsNext: true,
	};
}

接着

修改后的Board组件的代码：

class Board extends React.Component {

    handleClick(i) {
        const squares = this.state.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext? 'X':'O';
        this.setState({
            squares: squares,
            xIsNext:!this.state.xIsNext,
        });
    }
    renderSquare(i) {
        return ( this.props.onClick(i)}
        />);
    }

    render() {
        const winner = calculateWinner(this.state.squares);
        let status;
        if (winner) {
            status = 'Winner:' + winner;

        } else {
            status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
        }
        
        return (
            
                
                    {status}
                
                
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                
                
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                
                
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                
            
        )
    }
}

接着，修改Game组件的render函数,用最新的一次历史记录来确定并展示游戏的状态

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            history: [{
                squares: Array(9).fill(null),
            }],
            xIsNext: true,
        };
    }
    render() {
        const history = this.state.history;
        const current = history[history.length - 1];
        const winner = calculateWinner(current.squares);
        let status;
        if (winner) {
            status = 'Winner: ' + winner;

        } else {
            status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
        }
        return (
            
                
                    this.handleClick(i)}
                    />
                
                
                    {status}
                    { }
                
            
        )
    }
}

因为Game组件渲染了游戏状态，所以可以把Board组件的render方法中的对应代码移除，修改Board组件如下

class Board extends React.Component {
  renderSquare(i) {
    return (
       this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      
        
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        
        
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        
        
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        
      
    );
  }
}

还要把Board组件的handleClick方法移动到Game组件中

    handleClick(i) {
        const history = this.state.history
        const current = history[history.length - 1];
        const squares = current.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            history: history.concat([{
                squares:squares,
            }]),
            xIsNext:!this.state.xIsNext,
        })
    }

2.展现历史步骤记录

可以把历史记录以历史步骤列表的形式展现给玩家
可以通过map方法，把历史步骤映射为代表按钮的React元素
- 然后展示出一个按钮的列表
- 点击这些按钮，可以跳转到对应的历史步骤

在Game组件的render方法中调用history的map方法

          const moves = history.map((step, move) => {
              const desc = move ?
                  'Go to move #' + move :
                  'Go to game start';
              return (
                  
                      
                  
              )
    })

对于井字棋历史记录的每一步，都创建出了一个包含按钮

在Game的构造函数中添加stepNumber这个值来表示我们当前正在查看哪一项历史记录

constructor(props) {
        super(props);
        this.state = {
            history: [{
                squares: Array(9).fill(null),
            }],
            stepNumber: 0,
            xIsNext: true,
        };
    }

添加jumpTo方法


    jumpTo(step) {
        this.setState({
            stepNumber: step,
            xIsNext:(step%2)===0,
        })
    }

修改Game组件的handleClick方法

    handleClick(i) {
        const history = this.state.history.slice(0, this.state.stepNumber + 1);

        const current = history[history.length - 1];
        const squares = current.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            history: history.concat([{
                squares:squares,
            }]),
            stepNumber: history.length,
            xIsNext:!this.state.xIsNext,
        })
    }

再修改Game组件的render方法,将代码改为根据当前stepNumber渲染

const current = history[this.state.stepNumber];

3.最终代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// class Square extends React.Component {
// 	render(){
// 		return (
// 			
// 		);
// 	}
// }
function Square(props) {

    return (
        
    );
}
class Board extends React.Component {
  renderSquare(i) {
    return (
       this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      
        
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        
        
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        
        
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        
      
    );
  }
}

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            history: [{
                squares: Array(9).fill(null),
            }],
            stepNumber: 0,
            xIsNext: true,
        };
    }
    handleClick(i) {
        const history = this.state.history.slice(0, this.state.stepNumber + 1);

        const current = history[history.length - 1];
        const squares = current.squares.slice();
        if (calculateWinner(squares) || squares[i]) {
            return;
        }
        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            history: history.concat([{
                squares:squares,
            }]),
            stepNumber: history.length,
            xIsNext:!this.state.xIsNext,
        })
    }

    jumpTo(step) {
        this.setState({
            stepNumber: step,
            xIsNext:(step%2)===0,
        })
    }

      render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);
    
          const moves = history.map((step, move) => {
              const desc = move ?
                  'Go to move #' + move :
                  'Go to game start';
              return (
                  
                      
                  
              )
    })      
    let status;
    if (winner) {
      status = 'Winner: ' + winner;
    } else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      
        
           this.handleClick(i)}
          />
        
        
          {status}
          {moves}
        
      
    );
  }
}

ReactDOM.render(
    ,
    document.getElementById('root')
)

function calculateWinner(squares) {
    const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
    ];

    for (let i = 0; i < lines.length; i++){
        const [a, b, c] = lines[i];
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }

    }
    return null;

}

效果

你可能感兴趣的:(前端,react.js,游戏,javascript)

美易官方：盘前道指期货涨0.5%，游戏驿站跌逾15% 美股投资财经人工智能大数据新浪微博微信微信公众平台百度金融
在股市开盘前的交易时段，道指期货上涨了0.5%，而游戏驿站（GameStop）的股价却出现了大幅下跌，跌幅超过15%。这一市场动态引发了投资者的广泛关注，也反映了当前股市的复杂性和不确定性。美股股指期货周三盘前走强，交易员为季度末的再平衡做准备。本周因假期而缩短，美国将公布关键通胀数据。道指期货涨0.5%，标普500指数期货涨0.6%，纳指期货涨0.5%。德国DAX指数涨0.4%，英国富时100指
中原焦点团队38期王芳芳坚持分享第236天，20230630总约练134次，来访113次，咨8次，观察员13次芳芳王
学习焦点的初心是想拯救孩子，孩子由于沉迷游戏，成绩下滑，在学习的过程中发现是自己的教育方式出了状况。经过半年的学习，一些焦点的基本技巧，如接纳、欣赏、倾听、同理心、尊重等都有了一定的了解。但在实际应用时仍然存在很多问题，感觉自己仍然没有放下对孩子成绩的期望，仍然把握不住对孩子管理的度。我该如何去陪伴好孩子？多用心去听课，并加强反思，多约练。去思考如何让自己快乐起来？
大前端-postcss安装使用指南黑夜照亮前行的路 postcss
PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Python python chrome drivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
虚拟 DOM 的优缺点有哪些咕噜签名分发前端 javascript 开发语言
虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb 前端 ajax elementui java 前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
倒贴服传奇在什么平台下载 2024最火的倒贴服传奇平台排行榜诸葛村夫一游戏频道
2024游戏盒子网站排行榜大全随着数位科技的发展，2024年手游市场持续火爆，各种新开手游持续涌现。本文为广大手游爱好者带来巅峰推荐，总结五个最具实力的手游新服发布网站，为您提供最全面的游戏资讯以及专业的游戏攻略。▶2024最火的倒贴服传奇平台排行榜TOP1：游戏豹官网特点：内部特权游戏类型：多类型推荐日活跃人数：15万网址链接：www.ystt88.cn游戏介绍：游戏豹官网以快速获取新开手游的特
剧本杀【幕后玩家】复盘解析+凶手是谁+剧透结局+测评+怎么玩？ VX搜_彤彤速递
每天持续更新复盘有15000＋：线下剧本杀·百变大侦探·我是谜·谁是凶手·玩吧·剧本杀线上·戏精大侦探·魔王杀·儿童剧本杀...所有谜题在等着你去揭开。为了你获得更好的游戏体验，本文仅显示《幕后玩家》剧本杀部分真相复盘，获取完整真相复盘只需两步①【微信关注公众号：云云复盘】②回复【幕后玩家】即可查看获取哦贾友仁利用自己保险公司的职务，在杨光审车时，隐瞒了车子存在刹车不灵的问题。想让杜若出车祸死亡，
Python dict字符串转json对象，小数精度丢失问题朝如青丝暮成雪 json python
一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
java实体中返回前端的double类型四舍五入（格式化）婲落ヽ紅顏誶 java
根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
Django forms组件在飞行-米龙 Django django python 后端
【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
C语言演示多线程编程条件下自旋锁和屏障的使用嫦娥妹妹等等我开发语言 c语言开源
主线故事:有4个人玩游戏输了,惩罚:1分别使用4台不同的ATM机给我存钱2必须一块一块的存3存完还得在ATM上看一下我的余额设计模式:1每个人使用一条单独的线程,再准备一个计时线程用来输出时间2存钱涉及到对共享资源的读写,是原子操作需要用锁保护这里使用自旋锁3都存完钱后需要等待在各自的ATM上回显余额这里使用屏障技术4如果在主线程中回显对应他们给我打电话告诉我存完了我自己看一下则不需要使用屏障因为
西安专业nft开发NFT寄售-NFT抢购-NFT盲盒-NFT空投电报dapp119 区块链软件开发区块链
在数字化时代的今天，非同质化代币（NFT）正成为数字资产领域的新宠。作为区块链技术的一种应用，NFT赋予数字资产独一无二的身份和价值，从而在艺术、游戏、音乐、收藏品等领域掀起了一股热潮。西安，这座千年古城，也融入了这股数字化潮流，拥有专业的NFT开发公司，为个人和企业提供多种NFT相关服务，其中包括NFT寄售、NFT抢购、NFT盲盒和NFT空投。NFT寄售NFT寄售是一种常见的NFT交易方式，通过
《红太阳幼儿园》剧本杀复盘/凶手/剧透/真相/答案/攻略 VX搜_小燕子复盘
为了你获得更好的游戏体验，本文仅显示《红太阳幼儿园》剧本杀部分真相复盘，获取完整真相复盘只需两步①【微信关注公众号：集美复盘】②回复【红太阳幼儿园】即可查看获取哦﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎1、剧本杀《红太阳幼儿园》角色介绍【宋晓晓】女，28岁，上市公司的董事长，独立果敢，执着认真，有着新时代女性独有的风采。【林缘】女，27岁，温柔秀气的女孩，十
找好定位，坚持下去 LZ冷颜
最近在看有关写作方面的书籍时看到，一个优秀的创造者，是写自己很熟悉的东西。我是一个00后，你要问我什么我最熟悉，我肯定说游戏，没错游戏基本伴随了我们00后一代。网上前段时间有人不是说禁止游戏吗？网上那些网友不是讨论十分激烈吗？在我看来游戏也是以后的大方向，你们有没有想过未来的游戏可以用于医疗，帮助那些不会走路的走路等等。一个东西不能急于给他评论，慢慢观察，就比如QQ和支付宝，当年有谁看好他们，现在
Web前端Html的表单任家伟前端 html
表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
Unity3D 制作MMORPG 3D地图编辑器详解 Thomas_YXQ 3d 编辑器 Unity3D 游戏开发 unity 开发语言
前言在MMORPG游戏中，地图编辑器是一个非常重要的工具，可以帮助开发者快速创建复杂的游戏地图。本文将详细介绍如何使用Unity3D制作一个简单的MMORPG3D地图编辑器。对惹，这里有一个游戏开发交流小组，希望大家可以点击进来一起交流一下开发经验呀！创建地图编辑器界面首先，我们需要创建一个新的Unity项目，并在场景中创建一个空的GameObject作为地图编辑器的主要控制器。然后，我们可以使用
Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）王佳斌 +Thinkphp mysql 前端数据库
前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
javascript 日期转换为时间戳，时间戳转换为日期的函数 cdcdhj javascript学习日记 javascript 开发语言 ecmascript
日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-
COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript 开发语言 ecmascript
Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform
JSON与AJAX：网页交互的利器入冉心 json ajax 前端
在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
程序员开发技术整理 laizhixue 学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
【前端学习——js篇】7.函数缓存笔下无竹墨下有鱼前端学习前端学习 javascript
具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
javascript的数据类型及转换田小田txt
一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa
unity -- GC 想做后端的前端 Unity unity
GC简介在游戏运行的时候，数据主要存储在内存中，当游戏的数据在不需要的时候，存储当前数据的内存就可以被回收以再次使用。内存垃圾是指当前废弃数据所占用的内存，垃圾回收（GC）是指将废弃的内存重新回收再次使用的过程。1.Unity内部有两个内存管理池：堆内存和栈内存堆内存(heap)主要用来存储较大的和存储时间较长的数据，主要是负责程序中的对象和数据。栈内存(stack)主要用来存储较小的和短暂的数据
2018.1.2晴风中的玫瑰花
下班回家，见到儿子时，儿子正和小外甥有说有笑的玩着游戏，两个小家伙和睦相处时挺惹人爱得。吃完饭，接儿子回家的路上，儿子突然问我，一个人怎样就可以活的时间长一点。孩子的问题有时候就是这样不着边际，我告诉儿子，每天保持一颗快乐的心，比什么都重要。到达车库后，儿子背上自己书包，又从前座取下我的东西一起拿着，小家伙在前面一蹦一跳的精神十足，我跟在后面，看着眼前的儿子，有时让我很是感动。时间是块磨刀石，磨练
Websocket服务监听收发消息 beiback Java 服务器问题 websocket 网络协议网络
目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题 Java 服务器运维 netty
目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
基于SSM+Vue企业销售培训系统企业人才培训系统企业课程培训管理系统企业文化培训班系统Java 计算机程序老哥
作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
小木块，大乐趣—中2班户外游戏观察记录 jkklmyt
观察时间:2019.6.1210:20-10:45观察对象：张俊楠、戴烨坤观察地点：内操场观察目的：观察幼儿的搭建能力、合作能力以及交往能力。观察实录：户外活动时，张俊楠和戴烨坤运来了一些长方形的小木块，他们准备搭建一座宝塔，张俊楠对戴烨坤说：“来吧，木块够了，我们开始搭吧，”于是，两个人合作，戴烨坤拿给张俊楠搭，张俊楠把木块横着一层一层往上搭，到了塔顶上，先放了一个圆的，再放了一个三角形，最后在
github中多个平台共存 jackyrong github
在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1）设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
ip地址与整数的相互转换(javascript) alxw4616 JavaScript
//IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
读书笔记-jquey+数据库+css chengxuyuancsdn html jquery oracle
1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
javaSE javaEE javaME == API下载 Array_06 java
oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
shiro入门学习 cugfy java Web 框架
声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。首先配置我们的web.xml代码如下，固定格式，记死就成 <filter> <filter-name>shiroFilter</filter-name> &nbs
Array添加删除方法 357029540 js
刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除 Array.prototype.del = function(n){
navigation bar 更改颜色张亚雄 IO
今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下
unicode转换成中文 adminjun unicode 编码转换
在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成中文
一站式 Java Web 框架 firefly aijuans Java Web
Firefly是一个高性能一站式Web框架。涵盖了web开发的主要技术栈。包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。更新日志：增加自定义系统错误页面功能
设计模式——单例模式 ayaoxinchao 设计模式
定义 Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。” 分析从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。 &nb
Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。一、document.formName.item(”itemName”) 问题问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11 单元测试
下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：
[Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)： #!/bin/bash #!!!Change the name!!! #The zookeepe
【Spark八十】Spark RDD API二 bit1129 spark
coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
在modules目录中只有httpd.exp，那些so文件呢？我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
Java基础-克隆 BrokenDreams java基础
Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为克隆。 Java提供了java.lang.
读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
HDR图像PS教程集锦&心得 cherishLC PS
HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。软件有photomatix和nik hdr efex。一、教程叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。二、心得 1、去除阴影部分的
maven-3.3.3 mvn archetype 列表 crabdave ArcheType
maven-3.3.3 mvn archetype 列表可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml [INFO] Scanning for projects... [INFO]
linux shell 中文件编码查看及转换方法 daizj shell 中文乱码 vim 文件编码
一、查看文件编码。在打开文件的时候输入:set fileencoding 即可显示文件编码格式。二、文件编码转换 1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式 &
MySQL--binlog日志恢复数据 dcj3sjt126com binlog
恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002
数据库中数据表数据迁移方法 dcj3sjt126com sql
刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用下面看看如何使用语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍有三张表a、b、c，现在需要从表b
Java反转字符串 dyy_gusi java 反转字符串
前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
UI设计中我们为什么需要设计动效 gcq511120594 UI linux
随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。一、加强体验舒适度嗯，就是让用户更加爽更加爽的用
JBOSS服务部署端口冲突问题 HogwartsRow java 应用服务器 jboss server EJB3
服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。 1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml 2、./server/default/deploy/jbossweb.sar/server.xml 3、.
第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdb reids twemproxy
目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
ZooKeeper原理及使用 liyonghui160com
ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
程序员解决问题的60个策略 pda158 框架工作单元测试
根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。良好的单元测试强制数据库约束使用输入验证框架避免未实现的“else”条件在应用到主程序之前知道如何在孤立的情况下使用日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
Create the Google Play Account sillycat Google
Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
JSP三大指令 vikingwei jsp
JSP三大指令一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%> * pageEncoding和contentType： > pageEncoding：它