Руководство по CRUD операциям в React с использованием Parse

11min
Учебник по CRUD на React
Введение
Хранение данных в Parse основано на классе Parse.Object. Каждый Parse.Object содержит пары ключ-значение совместимых с JSON данных. Эти данные не имеют схемы, что означает, что вам не нужно заранее указывать, какие ключи существуют в каждом Parse.Object. Вы можете просто установить любые пары ключ-значение, которые хотите, и наш сервер сохранит их.
Вы также можете указывать типы данных в соответствии с потребностями вашего приложения и сохранять такие типы, какчисло, логическое значение, строка, Дата и время, список, GeoPointers, и Объект, кодируя их в JSON перед сохранением. Parse также поддерживает хранение и запрос реляционных данных, используя типы Указатели и Связи.
В этом руководстве вы узнаете, как выполнять основные операции с данными через пример приложения CRUD, которое покажет вам, как создавать, читать, обновлять и удалять данные из вашей базы данных сервера Parse в React. Сначала вы создадите функции компонентов для каждой операции CRUD, используя их позже в полном макете экрана, в результате чего получится приложение для списка дел.
Предварительные условия
Чтобы завершить этот учебник, вам потребуется:
Приложение React, созданное и подключенное к Back4App﻿
Если вы хотите протестировать/использовать макет экрана, предоставленный этим руководством, вам следует настроить Ant Design библиотеку.
Цель
Создать базовое CRUD-приложение на React с использованием Parse.
- Создание объектов данных
Первый шаг в управлении вашими данными в вашей базе данных Parse — это наличие данных в ней. Давайте теперь создадим createTodo функцию, которая создаст новый экземпляр Parse.Object с подклассом “Todo”. Задача будет иметь заголовок (string) описывающий задачу и поле done(boolean) указывающее, завершена ли задача.
JavaScript
TypeScript
 const createTodo = async function () {
   // This value comes from a state variable
   const newTodoTitleValue = newTodoTitle;
   // Creates a new Todo parse object instance
   let Todo = new Parse.Object('Todo');
   Todo.set('title', newTodoTitleValue);
   Todo.set('done', false);
   // After setting the to-do values, save it on the server
   try {
    await Todo.save();
    // Success
    alert('Success! To-do created!');
    // Refresh to-dos list to show the new one (you will create this function later)
    readTodos();
    return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
 const createTodo = async function () {
   // This value comes from a state variable
   const newTodoTitleValue = newTodoTitle;
   // Creates a new Todo parse object instance
   let Todo = new Parse.Object('Todo');
   Todo.set('title', newTodoTitleValue);
   Todo.set('done', false);
   // After setting the to-do values, save it on the server
   try {
    await Todo.save();
    // Success
    alert('Success! To-do created!');
    // Refresh to-dos list to show the new one (you will create this function later)
    readTodos();
    return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
﻿
Обратите внимание, что если в вашей базе данных еще нет Todo таблицы (или подкласса), Parse создаст ее автоматически и также добавит любые столбцы, установленные внутри экземпляра Parse.Object с помощью метода Parse.Object.set() , который принимает два аргумента: имя поля и значение, которое нужно установить.
- Чтение объектов данных
После создания некоторых данных в вашей базе данных ваше приложение теперь может читать их с сервера и показывать их вашему пользователю. Продолжайте и создайте readTodos функцию, которая выполнит Parse.Query, сохраняя результат внутри переменной состояния.
JavaScript
TypeScript
 const readTodos = async function () {
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Todo');
   try {
     let todos = await parseQuery.find();
     // Be aware that empty or invalid queries return as an empty array
     // Set results to state variable
     setReadResults(todos);
     return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
 const readTodos = async function () {
   // Reading parse objects is done by using Parse.Query
   const parseQuery = new Parse.Query('Todo');
   try {
     let todos = await parseQuery.find();
     // Be aware that empty or invalid queries return as an empty array
     // Set results to state variable
     setReadResults(todos);
     return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
﻿
Многие ограничения и упорядочивания могут быть применены к вашим запросам с использованием класса Parse.Query , но пока мы будем придерживаться этого простого запроса, который извлечет каждый сохраненный Todo объект.
- Обновление объектов данных
Обновление Parse.Object экземпляра очень похоже на создание нового, за исключением того, что в этом случае вам нужно назначить ранее созданный objectId и затем сохранить, после установки ваших новых значений.
JavaScript
TypeScript
 const updateTodo = async function (todoId, done) {
   // Create a new Todo parse object instance and set todo id
   let Todo = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // Set new done value and save Parse Object changes
   Todo.set('done', done);
   try {
     await Todo.save();
     // Success
    alert('Success! To-do updated!');
    // Refresh to-dos list
    readTodos();
    return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
 const updateTodo = async function (todoId, done) {
   // Create a new Todo parse object instance and set todo id
   let Todo = new Parse.Object('Todo');
   Todo.set('objectId', todoId);
   // Set new done value and save Parse Object changes
   Todo.set('done', done);
   try {
     await Todo.save();
     // Success
    alert('Success! To-do updated!');
    // Refresh to-dos list
    readTodos();
    return true;
  } catch (error) {
    // Error can be caused by lack of Internet connection
    alert(`Error! ${error.message}`);
    return false;
  };
};
﻿
Поскольку это пример приложения, представляющего список дел, ваша функция обновления принимает дополнительный аргумент, выполнено, который будет представлять, завершена ли конкретная задача или нет.
- Удаление объектов данных
Чтобы удалить объект данных, вам нужно вызвать метод .destroy() в экземпляре Parse.Object, представляющем его. Пожалуйста, будьте осторожны, так как эта операция необратима.
JavaScript
TypeScript
const deleteTodo = async function (todoId: string): Promise<boolean> {
 // Create a new Todo parse object instance and set todo id
 let Todo: Parse.Object = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // .destroy should be called to delete a parse object
 try {
   await Todo.destroy();
   alert('Success! To-do deleted!');
   // Refresh to-dos list to remove this one
   readTodos();
   return true;
 } catch (error: any) {
   // Error can be caused by lack of Internet connection
   alert(`Error! ${error.message}`);
   return false;
 };
};
const deleteTodo = async function (todoId: string): Promise<boolean> {
 // Create a new Todo parse object instance and set todo id
 let Todo: Parse.Object = new Parse.Object('Todo');
 Todo.set('objectId', todoId);
 // .destroy should be called to delete a parse object
 try {
   await Todo.destroy();
   alert('Success! To-do deleted!');
   // Refresh to-dos list to remove this one
   readTodos();
   return true;
 } catch (error: any) {
   // Error can be caused by lack of Internet connection
   alert(`Error! ${error.message}`);
   return false;
 };
};
﻿
Теперь давайте используем эти четыре функции в полном компоненте, чтобы вы могли протестировать его и убедиться, что каждая операция CRUD работает правильно.
- Использование CRUD в компоненте React
Вот полный код компонента, включая стилизованные элементы пользовательского интерфейса (с использованием Ant Design), переменные состояния и вызовы ваших функций CRUD. Вам следует создать отдельный компонент в файле с названием TodoList.js/TodoList.tsx в вашем src  каталоге, содержащем следующий код, или добавить его непосредственно в ваш основной файл приложения (App.js/App.tsx).
TodoList.js
TodoList.tsx
 import React, { useState, FC, ReactElement } from 'react';
 import './App.css';
 import { Button, Input, List } from 'antd';
 import {
   CheckOutlined,
   CloseOutlined,
   PlusOutlined,
   RedoOutlined,
 } from '@ant-design/icons';
const Parse = require('parse/dist/parse.min.js');
11
export const TodoList: FC<{}> = (): ReactElement => {
  // State variables
  const initialReadResults: Parse.Object[] = [];
  const [readResults, setReadResults] = useState(initialReadResults);
  const [newTodoTitle, setNewTodoTitle] = useState('');
17
  // Functions used by the screen components
  const createTodo = async function (): Promise<boolean> {
    // This value comes from a state variable
    const newTodoTitleValue: string = newTodoTitle;
    // Creates a new Todo parse object instance
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('title', newTodoTitleValue);
    Todo.set('done', false);
    // After setting the to-do values, save it on the server
    try {
      await Todo.save();
      // Success
      alert('Success! To-do created!');
      // Refresh to-dos list to show the new one (you will create this function later)
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
40
  const readTodos = async function (): Promise<boolean> {
    // Reading parse objects is done by using Parse.Query
    const parseQuery: Parse.Query = new Parse.Query('Todo');
    try {
      let todos: Parse.Object[] = await parseQuery.find();
      // Be aware that empty or invalid queries return as an empty array
      // Set results to state variable
      setReadResults(todos);
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
56
  const updateTodo = async function (todoId: string, done: boolean): Promise<boolean> {
    // Create a new to-do parse object instance and set todo id
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('objectId', todoId);
    // Set new done value and save Parse Object changes
    Todo.set('done', done);
    try {
      await Todo.save();
      // Success
      alert('Success! To-do updated!');
      // Refresh todos list
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
76
  const deleteTodo = async function (todoId: string): Promise<boolean> {
    // Create a new Todo parse object instance and set todo id
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('objectId', todoId);
    // .destroy should be called to delete a parse object
    try {
      await Todo.destroy();
      alert('Success! To-do deleted!');
      // Refresh to-dos list to remove this one
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
94
  return (
    <div>
      <div className="header">
        <img
          className="header_logo"
         alt="Back4App Logo"
         src={
           'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
         }
       />
       <p className="header_text_bold">{'React on Back4App'}</p>
       <p className="header_text">{'To-do List'}</p>
     </div>
     <div className="container">
       <div className="flex_between">
         <h2 className="list_heading">Todo List</h2>
         {/* To-do read (refresh) button */}
         <Button
           type="primary"
           shape="circle"
           color={'#208AEC'}
           onClick={readTodos}
           icon={<RedoOutlined />}
         ></Button>
       </div>
       <div className="new_todo_wrapper flex_between">
         {/* Todo create text input */}
         <Input
           value={newTodoTitle}
           onChange={(event: {target: {value: string}}) => setNewTodoTitle(event.target.value)}
           placeholder="New Todo"
           size="large"
         />
         {/* Todo create button */}
         <Button
           type="primary"
           className="create_todo_button"
           color={'#208AEC'}
           size={'large'}
           onClick={createTodo}
           icon={<PlusOutlined />}
         >
           Add
         </Button>
       </div>
       <div>
         {/* Todo read results list */}
         {readResults !== null &&
           readResults !== undefined &&
           readResults.length > 0 && (
             <List
               dataSource={readResults}
               renderItem={(item: Parse.Object) => (
                 <List.Item className="todo_item">
                   <p
                     className={
                       item.get('done') === true
                         ? 'todo_text_done'
                         : 'todo_text'
                     }
                   >
                     {item.get('title')}
                   </p>
                   <div className="flex_row">
                     {/* Todo update button */}
                     {item.get('done') !== true && (
                       <Button
                         type="primary"
                         shape="circle"
                         className="todo_button"
                         onClick={() => updateTodo(item.id, true)}
                         icon={
                           <CheckOutlined className="todo_button_icon_done" />
                         }
                       ></Button>
                     )}
                     {/* Todo delete button */}
                     <Button
                       type="primary"
                       shape="circle"
                       className="todo_button"
                       onClick={() => deleteTodo(item.id)}
                       icon={
                         <CloseOutlined className="todo_button_icon_remove" />
                       }
                     ></Button>
                   </div>
                 </List.Item>
               )}
             />
           )}
       </div>
     </div>
   </div>
 );
};
 import React, { useState, FC, ReactElement } from 'react';
 import './App.css';
 import { Button, Input, List } from 'antd';
 import {
   CheckOutlined,
   CloseOutlined,
   PlusOutlined,
   RedoOutlined,
 } from '@ant-design/icons';
const Parse = require('parse/dist/parse.min.js');
11
export const TodoList: FC<{}> = (): ReactElement => {
  // State variables
  const initialReadResults: Parse.Object[] = [];
  const [readResults, setReadResults] = useState(initialReadResults);
  const [newTodoTitle, setNewTodoTitle] = useState('');
17
  // Functions used by the screen components
  const createTodo = async function (): Promise<boolean> {
    // This value comes from a state variable
    const newTodoTitleValue: string = newTodoTitle;
    // Creates a new Todo parse object instance
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('title', newTodoTitleValue);
    Todo.set('done', false);
    // After setting the to-do values, save it on the server
    try {
      await Todo.save();
      // Success
      alert('Success! To-do created!');
      // Refresh to-dos list to show the new one (you will create this function later)
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
40
  const readTodos = async function (): Promise<boolean> {
    // Reading parse objects is done by using Parse.Query
    const parseQuery: Parse.Query = new Parse.Query('Todo');
    try {
      let todos: Parse.Object[] = await parseQuery.find();
      // Be aware that empty or invalid queries return as an empty array
      // Set results to state variable
      setReadResults(todos);
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
56
  const updateTodo = async function (todoId: string, done: boolean): Promise<boolean> {
    // Create a new to-do parse object instance and set todo id
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('objectId', todoId);
    // Set new done value and save Parse Object changes
    Todo.set('done', done);
    try {
      await Todo.save();
      // Success
      alert('Success! To-do updated!');
      // Refresh todos list
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
76
  const deleteTodo = async function (todoId: string): Promise<boolean> {
    // Create a new Todo parse object instance and set todo id
    let Todo: Parse.Object = new Parse.Object('Todo');
    Todo.set('objectId', todoId);
    // .destroy should be called to delete a parse object
    try {
      await Todo.destroy();
      alert('Success! To-do deleted!');
      // Refresh to-dos list to remove this one
      readTodos();
      return true;
    } catch (error: any) {
      // Error can be caused by lack of Internet connection
      alert('Error!' + error.message);
      return false;
    }
  };
94
  return (
    <div>
      <div className="header">
        <img
          className="header_logo"
         alt="Back4App Logo"
         src={
           'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'
         }
       />
       <p className="header_text_bold">{'React on Back4App'}</p>
       <p className="header_text">{'To-do List'}</p>
     </div>
     <div className="container">
       <div className="flex_between">
         <h2 className="list_heading">Todo List</h2>
         {/* To-do read (refresh) button */}
         <Button
           type="primary"
           shape="circle"
           color={'#208AEC'}
           onClick={readTodos}
           icon={<RedoOutlined />}
         ></Button>
       </div>
       <div className="new_todo_wrapper flex_between">
         {/* Todo create text input */}
         <Input
           value={newTodoTitle}
           onChange={(event: {target: {value: string}}) => setNewTodoTitle(event.target.value)}
           placeholder="New Todo"
           size="large"
         />
         {/* Todo create button */}
         <Button
           type="primary"
           className="create_todo_button"
           color={'#208AEC'}
           size={'large'}
           onClick={createTodo}
           icon={<PlusOutlined />}
         >
           Add
         </Button>
       </div>
       <div>
         {/* Todo read results list */}
         {readResults !== null &&
           readResults !== undefined &&
           readResults.length > 0 && (
             <List
               dataSource={readResults}
               renderItem={(item: Parse.Object) => (
                 <List.Item className="todo_item">
                   <p
                     className={
                       item.get('done') === true
                         ? 'todo_text_done'
                         : 'todo_text'
                     }
                   >
                     {item.get('title')}
                   </p>
                   <div className="flex_row">
                     {/* Todo update button */}
                     {item.get('done') !== true && (
                       <Button
                         type="primary"
                         shape="circle"
                         className="todo_button"
                         onClick={() => updateTodo(item.id, true)}
                         icon={
                           <CheckOutlined className="todo_button_icon_done" />
                         }
                       ></Button>
                     )}
                     {/* Todo delete button */}
                     <Button
                       type="primary"
                       shape="circle"
                       className="todo_button"
                       onClick={() => deleteTodo(item.id)}
                       icon={
                         <CloseOutlined className="todo_button_icon_remove" />
                       }
                     ></Button>
                   </div>
                 </List.Item>
               )}
             />
           )}
       </div>
     </div>
   </div>
 );
};
﻿
Также добавьте эти стили CSS в конце вашего App.css файла:
CSS
 /* ... */
 /* Your other styles */
3
 /* Back4App Guide Styles */
5
 html {
  box-sizing: border-box;
  outline: none;
  overflow: auto;
}
11
*,
*:before,
*:after {
 margin: 0;
 padding: 0;
 box-sizing: inherit;
}
19
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
28
p {
  margin: 0;
}
32
body {
 margin: 0;
 background-color: #fff;
}
37
.container {
  width: 100%;
  max-width: 600px;
  margin: auto;
  padding: 20px 0;
}
44
.wrapper {
  width: '90%';
  align-self: 'center';
}
49
.header {
  align-items: center;
  padding: 25px 0;
  background-color: #208AEC;
}
55
.header_logo {
  height: 55px;
  margin-bottom: 20px;
  object-fit: contain;
}
61
.header_text_bold {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: bold;
}
68
.header_text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}
73
.flex_row {
  display: flex;
}
77
.flex_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
83
.list_heading {
  font-weight: bold;
}
87
.new_todo_wrapper {
  margin-top: 20px;
  margin-bottom: 10px;
}
92
.new_todo_wrapper > input {
  margin-right: 20px;
}
96
.todo_item {
  border-bottom-width: 1;
  border-bottom-color: 'rgba(0, 0, 0, 0.12)';
}
101
.todo_text {
  font-size: 15px;
}
105
.todo_text_done {
  color: rgba(0, 0, 0, 0.3);
  font-size: 15px;
  text-decoration-line: line-through;
}
111
.todo_button {
  width: 32px;
  height: 32px;
  margin-left: 5px;
  background-color: transparent;
  border-radius: 50px;
  border: none;
  cursor: pointer;
}
121
.todo_button:hover,
.todo_button:focus {
  background-color: rgba(0, 0, 0, 0.1);
}
126
.todo_button_icon_done {
  color: #52c41a;
  font-size: 16px;
}
131
.todo_button_icon_remove {
  color: #f5222d;
  font-size: 16px;
}
 /* ... */
 /* Your other styles */
3
 /* Back4App Guide Styles */
5
 html {
  box-sizing: border-box;
  outline: none;
  overflow: auto;
}
11
*,
*:before,
*:after {
 margin: 0;
 padding: 0;
 box-sizing: inherit;
}
19
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
28
p {
  margin: 0;
}
32
body {
 margin: 0;
 background-color: #fff;
}
37
.container {
  width: 100%;
  max-width: 600px;
  margin: auto;
  padding: 20px 0;
}
44
.wrapper {
  width: '90%';
  align-self: 'center';
}
49
.header {
  align-items: center;
  padding: 25px 0;
  background-color: #208AEC;
}
55
.header_logo {
  height: 55px;
  margin-bottom: 20px;
  object-fit: contain;
}
61
.header_text_bold {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: bold;
}
68
.header_text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}
73
.flex_row {
  display: flex;
}
77
.flex_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
83
.list_heading {
  font-weight: bold;
}
87
.new_todo_wrapper {
  margin-top: 20px;
  margin-bottom: 10px;
}
92
.new_todo_wrapper > input {
  margin-right: 20px;
}
96
.todo_item {
  border-bottom-width: 1;
  border-bottom-color: 'rgba(0, 0, 0, 0.12)';
}
101
.todo_text {
  font-size: 15px;
}
105
.todo_text_done {
  color: rgba(0, 0, 0, 0.3);
  font-size: 15px;
  text-decoration-line: line-through;
}
111
.todo_button {
  width: 32px;
  height: 32px;
  margin-left: 5px;
  background-color: transparent;
  border-radius: 50px;
  border: none;
  cursor: pointer;
}
121
.todo_button:hover,
.todo_button:focus {
  background-color: rgba(0, 0, 0, 0.1);
}
126
.todo_button_icon_done {
  color: #52c41a;
  font-size: 16px;
}
131
.todo_button_icon_remove {
  color: #f5222d;
  font-size: 16px;
}
﻿
Если ваш компонент правильно настроен, вы должны увидеть что-то подобное после запуска приложения:
﻿
Продолжайте и добавьте несколько задач, вводя их названия в поле ввода по одной и нажимая на Добавить кнопку. Обратите внимание, что после каждого успешного создания функция createTodo вызывает функцию readTodos  автоматически, обновляя ваш список задач. Теперь у вас должен быть значительный список задач, как этот:
﻿
Теперь вы можете отмечать свои задачи как выполненные, нажимая на галочку рядом с ними, что приведет к обновлению их значения на true и изменению статуса иконки слева.
﻿
Единственная оставшаяся операция с данными — это удаление, которое можно выполнить, нажав на значок мусорной корзины в самом правом углу вашего объекта списка задач. После успешного удаления объекта вы должны получить сообщение об оповещении, как это:
﻿
Заключение
В конце этого руководства вы узнали, как выполнять основные операции с данными (CRUD) в Parse на React. В следующем руководстве мы покажем вам, какие типы данных поддерживаются в Parse и как их использовать.