用于搜索功能的烧瓶震荡端点的正确结构

问题描述

我正在创建一个网站,向用户提供有关日历事件的信息。我正在寻找有关端点体系结构的最佳实践。

我创建了一个搜索功能,该功能返回标题用户输入匹配的所有日历事件。这似乎很容易。我的Flask-Restful服务器上有返回事件的端点。

我想做的是也“保存”搜索条目,以便用户拥有与该事件和所有其他保存的搜索相匹配的将来事件的提要。像这样:

## GET (RETURNS) A LIST OF ALL EVENTS WHICH MATCH SAVED USER SEARCHES
api.add_resource(UserFeed,'/profile/<int:profile_id/searches/events/')

## GET (RETURNS) A LIST OF ALL SEARCHES WHICH THE USER HAS SAVED
api.add_resource(UserFeed,'/profile/<int:profile_id/searches/')

作为一个有问题的标签,是否还会在/profile/<int:profile_id>/settings/之类的位置进行用户设置?

当前端点

# Route_1
## GET (RETURNS) A LIST OF ALL EVENTS
## POST (CREATES) AN EVENT
api.add_resource(EventsList,'/events')

# Route_2
## GET (RETURNS) A LIST OF EVENTS BY MATCHING TITLE
api.add_resource(EventsListSearch,'/events/search/<string:query_title>')

搜索组件

import React,{Component} from "react";
import Form from 'react-bootstrap/Form'
import Events from './event/Events'



class Search extends Component{
  state = {
    searchCriteria: '',searchResults:[]
  }


  handleSubmit = async (event) => {
    event.preventDefault();
    fetch('http://127.0.0.1:5002/events/search/'+this.state.searchCriteria)
    .then(res => res.json())
    .then((resultsData) => {
      this.setState({
        searchResults: resultsData
      })
      console.log(resultsData);
    })
    .catch(console.log)

  };

render(){
  return (
    <div className="search container">
    <Form onSubmit={this.handleSubmit}>
      <Form.Group controlId="formBasicEmail">
        <Form.Label></Form.Label>
        <Form.Control type="text"
          value=""
          onChange={event => this.setState({ searchCriteria: event.target.value })}
          placeholder="Search by event title" />
        <Form.Text className="text-muted">
        "National Convention" or "Race". For tags use square brackets: "[earthquake]"
        </Form.Text>
      </Form.Group>
    </Form>



        <div>

              {this.state.searchResults
                  .map(event =>(
                    <Events event={event} />

                  )
                )
              }
        </div>

        </div>
      )




}
}


export default Search;

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)