Вы когда-нибудь использовали WP-REST-API?

Несколько недель назад я пытался использовать WP-REST-API. в то время я сделал этот образец приложения.

До сих пор меня это очень интересовало. но у меня не было возможности этим воспользоваться. на самом деле, я сделал этот образец после того, как решил использовать WP-REST-API.

Поскольку у меня действительно хороший опыт, реализовать нашу среду очень просто.

Сегодня я опишу, как внедрить WP-REST-API в нашу среду с помощью React.js.

В предварительной подготовке

в первую очередь необходимо скачать плагин wp-rest-api. после загрузки вы должны активировать этот плагин.

после активации вы можете получить json данные вашего веб-сайта. на этом все готово к предварительной подготовке! Далее я описываю отображение данных json для нашей веб-страницы.

Как реализовать в нашей среде?

Во-первых, вы должны выбрать асинхронную библиотеку или собственный XMLHttpRequest. Я рекомендую использовать superagent, axios или fetch API.

на этот раз я использовал суперагент. это действительно легко понять, чтобы использовать.

import React, {Component} from 'react';
import request from 'superagent';
export default class Main extends Component {  
  constructor(props) {
    super(props);
    this.state = {
      loader: false,
      body: [
        {
          title: { 
            rendered: ''
          },
          date: '',
          excerpt: {
            rendered: ''
          }
        }
      ]
    }
    this.receive = this.receive.bind(this);
    ...
  }
  ...
receive() {
  request
    .get(url.req)
    .end((err, res) => {
      if(err) {
        console.log(err)
      } else {
        this.setState({
          body: res.body,
          loader: false
        })
      }
    });
  }
...
}

пример кода здесь.

Есть два момента. во-первых, если вы используете React.js, вы должны установить состояние по умолчанию. во-вторых, отправить запрос после, мы должны установить для данных ответа. если вы разрешили асинхронную связь, вы используете setState. и вы устанавливаете данные ответа в свое состояние.

наконец, после установки данных ответа в состояние, вы пишете component.

//example
const title = this.state.body.map((body) => {
  return (
    <Card style={this.window()} key={uuid.v4()}>
      <CardTitle
        title={body.title.rendered}
        titleStyle={styles.listTitle}
        subtitle={moment(body.date).format('YYYY/MM/DD')} /> 
      <CardText
        dangerouslySetInnerHTML={
          {__html: body.excerpt.rendered.replace(
            '[&hellip;]', '…')}
        }
        style={styles.listText} />
      <CardActions>
      <RaisedButton 
        label="続きを見る" 
        secondary={true}
        fullWidth={true}
        onClick={() => this.location('/' + body.id)}
        style={styles.raiseBtn} />
      </CardActions>
    </Card>
  )
})

это все!! если вы хотите реализовать авторизацию и многое другое, вы проверяете документ wp-rest-api.

Наконец, у меня сложилось впечатление, что это было действительно легко реализовано в моей среде. если вы заинтересованы в WP-REST-API, вы должны попробовать сделать свой пример проекта на github!

Спасибо за чтение! и увидимся в следующий раз!