我的个人博客

记录我的学习心路历程

0%

发表于 分类于 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      crossorigin="anonymous"
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2 class="page-header">基本使用</h2>
      <button class="btn btn-primary">发送GET请求</button>
      <button class="btn btn-warning">发送POST请求</button>
      <button class="btn btn-success">发送PUT请求</button>
      <button class="btn btn-danger">发送DELETE请求</button>
    </div>
    <script>
      //获取按钮
      const btns = document.querySelectorAll('button');

      //设置默认配置
      axios.defaults.method = 'GET';
      axios.defaults.baseURL = 'http://localhost:3000';
      axios.defaults.params = { id: 100 };
      //第一个
      btns[0].onclick = function () {
        //发送ajax请求
        axios({
          url: 'posts',
        }).then(v => {
          console.log(v);
        });
      };
    </script>
  </body>
</html>

发表于 分类于 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      crossorigin="anonymous"
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2 class="page-header">基本使用</h2>
      <button class="btn btn-primary">发送GET请求</button>
      <button class="btn btn-warning">发送POST请求</button>
      <button class="btn btn-success">发送PUT请求</button>
      <button class="btn btn-danger">发送DELETE请求</button>
    </div>
    <script>
      //获取按钮
      const btns = document.querySelectorAll('button');

      //发送GET请求
      btns[0].onclick = function () {
        //axios()
        axios
          .request({
            method: 'GET',
            url: 'http://localhost:3000/comments',
          })
          .then(v => {
            console.log(v);
          });
      };

      //发送POST请求
      btns[1].onclick = function () {
        //axios()
        axios
          .post('http://localhost:3000/comments', {
            body: '喜大普奔',
            postId: 2,
          })
          .then(v => {
            console.log(v);
          });
      };
    </script>
  </body>
</html>

发表于 分类于 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      crossorigin="anonymous"
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2 class="page-header">基本使用</h2>
      <button class="btn btn-primary">发送GET请求</button>
      <button class="btn btn-warning">发送POST请求</button>
      <button class="btn btn-success">发送PUT请求</button>
      <button class="btn btn-danger">发送DELETE请求</button>
    </div>
    <script>
      //获取按钮
      const btns = document.querySelectorAll('button');

      //第一个
      btns[0].onclick = function () {
        //发送ajax请求
        axios({
          //请求类型
          method: 'GET',
          //url
          url: 'http://localhost:3000/posts/1',
        }).then(v => {
          console.log(v);
        });
      };

      //添加一篇新的文章
      btns[1].onclick = function () {
        //发送ajax请求
        axios({
          //请求类型
          method: 'POST',
          //url
          url: 'http://localhost:3000/posts',
          //设置请求体
          data: {
            titie: '今天天气不错',
            author: '张三',
          },
        }).then(v => {
          console.log(v);
        });
      };

      //更新
      btns[2].onclick = function () {
        //发送ajax请求
        axios({
          //请求类型
          method: 'PUT',
          //url
          url: 'http://localhost:3000/posts/2',
          //设置请求体
          data: {
            titie: '今天天气不错',
            author: '李四',
          },
        }).then(v => {
          console.log(v);
        });
      };

      //删除
      btns[3].onclick = function () {
        //发送ajax请求
        axios({
          //请求类型
          method: 'DELETE',
          //url
          url: 'http://localhost:3000/posts/3',
        }).then(v => {
          console.log(v);
        });
      };
    </script>
  </body>
</html>

发表于 分类于 
<script type="text/babel">
      //生命周期回调函数 <=> 生命周期钩子函数
      class Life extends React.Component {
        state = { opacity: 1 };
        death = () => {
          //卸载组件
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };

        //组件卸载之前清除定时器
        componentWillUnmount() {
          clearInterval(this.timer);
        }

        //组件挂载完毕后调用
        componentDidMount() {
          this.timer = setInterval(() => {
            //获取原来的状态
            let { opacity } = this.state;
            //减小0.1
            opacity -= 0.1;
            if (opacity <= 0) opacity = 1;
            //设置新的透明度
            this.setState({ opacity: opacity });
          }, 200);
        }

        //初次渲染和页面更新时调用
        render() {
          return (
            <div>
              <h2 style={{ opacity: this.state.opacity }}>React学不会怎么办</h2>
              <button onClick={this.death}>不活了</button>
            </div>
          );
        }
      }
      //2、渲染虚拟DOM到页面
      ReactDOM.render(<Life />, document.querySelector("#test"));
    </script>

发表于 分类于 
<script type="text/babel">
      //高阶函数：接收的参数是一个函数或者返回的是一个函数
      //函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
      //非受控组件：现用现取
      class Login extends React.Component {
        //初始化状态
        state = {
          username: "", //用户名
          password: "", //密码
        };
        saveFormdata = (dataType) => {
          console.log(this);
          return () => {
            //从state状态里面取值，当输入用户名时[dataType]相当于username,当输入密码时[dataType]相当于password
            this.setState({ [dataType]: event.target.value });
          };
        };

        handleSubmit = (e) => {
          e.preventDefault(); //阻止表单提交
          const { username, password } = this.state;
          alert(`用户名是${username},密码是${password}`);
        };
        render() {
          return (
            //相当于Vue里面的双向数据绑定，把数据维护在状态state里面，要用的时候直接从state里面拿
            <form onSubmit={this.handleSubmit}>
              用户名：
              <input type="text" onChange={this.saveFormdata("username")} />
              密码：
              <input type="password" onChange={this.saveFormdata("password")} />
              <button>登录</button>
            </form>
          );
        }
      }

      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>

发表于 分类于 
<script type="text/babel">
      //非受控组件：现用现取
      class Demo extends React.Component {
        handleSubmit = (e) => {
          //阻止默认事件，阻止页面跳转
          e.preventDefault();
          //password和username直接被添加在实例化对象身上
          const { username, password } = this;
          alert(`用户名是${username.value},密码是${password.value}`);
        };
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              用户名：
              <input type="text" ref={(c) => (this.username = c)} />
              密码：
              <input type="password" ref={(c) => (this.password = c)} />
              <button>登录</button>
            </form>
          );
        }
      }

      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>

发表于 分类于 
<script type="text/babel">
      class Login extends React.Component {
        //初始化状态
        state = {
          username: "", //用户名
          password: "", //密码
        };
        saveUsername = (e) => {
          this.setState({ username: e.target.value });
        };
        savePassword = (e) => {
          this.setState({ password: e.target.value });
        };
        handleSubmit = (e) => {
          e.preventDefault(); //阻止表单提交
          const { username, password } = this.state;
          alert(`用户名是${username},密码是${password}`);
        };
        render() {
          return (
            //相当于Vue里面的双向数据绑定，把数据维护在状态state里面，要用的时候直接从state里面拿
            <form onSubmit={this.handleSubmit}>
              用户名：
              <input type="text" onChange={this.saveUsername} />
              密码：
              <input type="password" onChange={this.savePassword} />
              <button>登录</button>
            </form>
          );
        }
      }

      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>

发表于 分类于 
<script type="text/babel">
      //ref：相当于id,用于获取元素标签
      class Demo extends React.Component {
        //React.createRef()调用可以返回一个容器，该容器可以存储ref所标识的节点，属于专人专用的
        myRef = React.createRef();
        myRef2 = React.createRef();
        showData = () => {
          console.log(this);
          alert(this.myRef.current.value);
        };
        showData2 = () => {
          console.log(this);
          alert(this.myRef2.current.value);
        };
        render() {
          return (
            <div>
              <input
                ref={this.myRef}
                type="text"
                placeholder="点击按钮提示数据"
              />
              <button onClick={this.showData}>点击我提示左侧数据</button>
              <input
                onBlur={this.showData2}
                //这里的ref直接给实例化对象添加了input2，c的值就是input这个标签节点
                ref={this.myRef2}
                type="text"
                placeholder="失去焦点提示数据"
              />
            </div>
          );
        }
      }

      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>

发表于 分类于 
<script type="text/babel">
      //ref：相当于id,用于货物元素标签
      class Demo extends React.Component {
        state = { isHot: true };
        showData = () => {
          console.log(this);
          alert(this.input1.value);
        };
        showData2 = () => {
          console.log(this);
          alert(this.input2.value);
        };
        changeWeather = () => {
          this.setState({ isHot: !this.state.isHot });
        };
        render() {
          const { isHot } = this.state;
          return (
            <div>
              <h2 onClick={this.changeWeather}>
                今天天气很{isHot ? "炎热" : "凉爽"}
              </h2>
              {/*如果把函数写成这种内联形式的，第二次渲染更新页面的时候先会传递一个null清空，然后才会传递节点
                1、null
                2、<input点击按钮提示数据"/>*/}
              <input
                ref={(c) => {
                  this.input1 = c;
                  console.log(c);
                }}
                type="text"
                placeholder="点击按钮提示数据"
              />
              <button onClick={this.showData}>点击我提示左侧数据</button>

              {/*<input
                onBlur={this.showData2}
                //这里的ref直接给实例化对象添加了input2，c的值就是input这个标签节点
                ref={(c) => {
                  this.input2 = c;
                }}
                type="text"
                placeholder="失去焦点提示数据"
            />*/}
            </div>
          );
        }
      }

      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>

发表于 分类于 
<script type="text/babel">
      //ref：相当于id,用于货物元素标签
      class Demo extends React.Component {
        showData = () => {
          console.log(this);
          alert(this.input1.value);
        };
        showData2 = () => {
          console.log(this);
          alert(this.input2.value);
        };
        render() {
          return (
            <div>
              <input
                ref={(c) => {
                  this.input1 = c;
                }}
                type="text"
                placeholder="点击按钮提示数据"
              />
              <button onClick={this.showData}>点击我提示左侧数据</button>
              <input
                onBlur={this.showData2}
                //这里的ref直接给实例化对象添加了input2，c的值就是input这个标签节点
                ref={(c) => {
                  this.input2 = c;
                }}
                type="text"
                placeholder="失去焦点提示数据"
              />
            </div>
          );
        }
      }

      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>