React и Flask-Restful - как сделать шаблон Jinja - PullRequest
Новая
       26

React и Flask-Restful - как сделать шаблон Jinja

0 голосов
/ 27 мая 2019

Я создаю RESTful Flask API с React на внешнем интерфейсе.

Я хочу иметь возможность использовать React для получения и загрузки данных, но сначала визуализировать мои шаблоны Jinja на стороне сервера с Flask.Это то, что у меня пока есть:

Реакция

Seeds.jsx 

import React, { Component } from 'react';
import axios from 'axios';

class Seeds extends Component{
  constructor (props) {
    super(props);
    this.state = {
      restaurant:'',      
      email: '',
      id: '',
      username: '',
      active: '',
      admin: ''    
    };
  };
  componentDidMount() {
    if (this.props.isAuthenticated) {
      this.getSeeds();
    }
  };
  getSeeds(event) {
    const options = {
      url: `${process.env.REACT_APP_WEB_SERVICE_URL}/seeds`,
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    };
    return axios(options)
    .then((res) => {
    console.log(res)  
      console.log(res.data.data) 
      this.setState({
        restaurant: res.data.data[0].restaurant,
        template: res.data.data[0].content
      })
    })
    .catch((error) => { console.log(error); });
  };

    render(){
        let seeds_page;
        seeds_page = this.setState.template;

        return (
           <div className="form">
            {seeds_page}
           </div>
        );
    }
}

export default Seeds;

Настой

seed.py 

seeds_bp = Blueprint('seeds', 
                     __name__, 
                     template_folder='templates', 
                     static_url_path='static') 

@seeds_bp.route('/seeds', methods=['GET', 'POST'])
def seeds():

    user = User.query.filter_by(id=1).first()

    response_object = {
          'status': 'success',
          'message': 'success',
          'data': [{"user": user.restaurant,
                    "content": "seeds.html"}]
    }        
    return jsonify(response_object), 200

Jinja

seed.html 

{% include 'partials/head.html' %}
<section id="woz-content" >

  <div class="container">
    <h1 class="page-title">Menu(edit)</h1>
  </div>

  <div class="container">

    <h2 class="page-title">Seeds</h2>

    <ul style="list-style:none" >
        <li><form action="{{ url_for('seeds.handle_seeds') }}"method="post">Seed1
            <input type="text" name="seed1"/>
            <label style="font-size: 11px;"></label>  
            <input type="submit" value="seed" >
          </form>
        </li>
       <li><form action="{{ url_for('seeds.handle_seeds') }}" method="post">Seed2
            <input type="text" name="seed2"/>
            <label style="font-size: 11px;"></label>
            <input type="submit" value="seed" >
          </form></li>
     </ul>
   </div>

Мне удается получить данные, но рендеринг не выполняется.

Как настроить код для отображения моего шаблона во время получения данных?

1 Ответ

0 голосов
/ 27 мая 2019

Я полагаю, что вы хотите визуализировать seed.html внутри реактивного компонента, потому что у вас есть этот код внутри реактивного компонента: 

render(){
        let seeds_page;
        seeds_page = this.setState.template;

        return (
           <div className="form">
            {seeds_page}
           </div>
        );
    }

Чтобы выполнить это действие, вы должны убедиться, что ваш файл seed.html имееттот же синтаксис JSX.Например, этот код не работал внутри вашего компонента реакции: 

<h1 class='title'>Some title</h1>

, потому что для реакции используется className вместо класса.Итак, вам нужно переписать ваш seed.html, чтобы он был похож на синтаксис JSX, или модуль найти реагирует на синтаксический анализ HTML-шаблона в коде JSX.Это будет похоже на это: 

{% include 'partials/head.html' %}
<section id="woz-content" >

  <div className="container">
    <h1 className="page-title">Menu(edit)</h1>
  </div>
  ...
</section>

Затем вы можете визуализировать шаблон с помощью функции render_template: 

from flask import render_template
@seeds_bp.route('/seeds', methods=['GET', 'POST'])
def seeds():

    user = User.query.filter_by(id=1).first()
    example = "some example"
    template = render_template('seeds.html', example=example)

    response_object = {
          'status': 'success',
          'message': 'success',
          'data': [{"user": user.restaurant,
                    "content": template}]
    }        
    return jsonify(response_object)

Затем вы можете получить шаблон с помощью запроса axios и сохранить в шаблоне.государство.Чтобы преобразовать строку шаблона в реагирующий компонент, вы можете использовать React HTML Parser утилиту для преобразования строк HTML в компоненты React.Так что Seeds.jsx будет похож на это: 

import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 }
from 'react-html-parser';

class Seeds extends Component{
    constructor (props) {
         super(props);
         this.state = {
            restaurant:'',      
            email: '',
            id: '',
            username: '',
            active: '',
            admin: '',
            template: ''    
         };
    };
    // ... 
    render(){
        var seeds_page = this.state.template;

        return (
           <div className="form">
            { ReactHtmlParser(seeds_page) }
           </div>
        );
    }
}

export default Seeds;
...