React Todo示例应用程序：使用用户身份验证和Codehooks.io NOSQL后端构建全堆栈应用程序-DEV365 开发者社区

在当今迅速发展的网络开发环境中，全栈开发变得越来越重要。在前端和后端技术中无缝工作的能力使开发人员能够创建全面而强大的应用程序。

此写入涵盖了一个React todo示例应用程序作为一个全堆栈应用程序，其中包括React前端客户端，使用Auth0.com的用户身份验证以及使用Abiaoqian的NOSQL数据库的后端API。

。

codehooks.io是一种简单的API和NOSQL服务，可以使开发人员快速构建和部署数据库后端和集成。

TODO应用程序允许用户创建，更新和删除TODO项目。用户身份验证由Auth0处理，该验证提供了一个安全且易于使用的身份验证解决方案。

You can read a detailed blog post for the Todo app development here.

Check out a live example here

todo app ui

auth0.com的身份验证

这是该应用程序中的一些代码示例：

设置应用程序

import { Auth0Provider } from "@auth0/auth0-react";

const domain = "YOUR_AUTH0_DOMAIN";
const clientId = "YOUR_AUTH0_CLIENT_ID";

ReactDOM.render(
  <Auth0Provider
    domain={domain}
    clientId={clientId}
    // Other configuration options
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

后端API和数据库

import { app, Datastore } from 'codehooks-js';

app.get('/todo', async (req, res) => {
  const db = await Datastore.open();
  // Fetch and return todo items from the database
const db = await Datastore.open();
  db.getMany('tododata', {
    filter: {owner: req.user.email}, // filter Todo items by authenticated user.email
    sort: {completed: 1, _id: -1}
  }).pipe(res);
});

app.post('/todo', async (req, res) => {
  const db = await Datastore.open();
  // Create a new todo item in the database
});

app.put('/todo/:id', async (req, res) => {
  const db = await Datastore.open();
  // Update a todo item in the database
});

app.delete('/todo/:id', async (req, res) => {
  const db = await Datastore.open();
  // Delete a todo item from the database
});

export default app.init();

反应前端组件

import { useAuth0 } from "@auth0/auth0-react";

const TodoList = () => {
  const { isAuthenticated, loginWithRedirect } = useAuth0();

  if (!isAuthenticated) {
    return (
      <div>
        <p>Please log in to view your todos.</p>
        <button onClick={loginWithRedirect}>Log In</button>
      </div>
    );
  }

  // Render the todo list for authenticated users
};

export default TodoList;

从React Frontend调用数据库API

const callApi = async () => {
    try {      
      const token = await getAccessTokenSilently();
      const response = await fetch(`${apiOrigin}/todo`, {
        headers: {
          "Authorization": `Bearer ${token}`
        },
      });      
      let responseData = await response.json();
      console.log('Get data', responseData);
      responseData = responseData.map((todo) => {
        if (todo.completed === undefined) {
          todo.completed = false;
        }
        return todo;
      })      
      if (responseData) {
        setState({
          ...state, todoItems: responseData,
          error: null
        });
      }
    } catch (error) {
      console.error('API error', error)
      setState({
        ...state,
        error: error.error || error.message
      });
    }
  };

这些示例演示了该应用程序如何集成用户身份验证的auth0，并使用Codehooks.io后端来处理API请求并与NOSQL数据库进行交互。 React组件处理用户界面和用于管理TODO项目的逻辑。

注意：代码示例已简化，可能不包括所有必要的配置和错误处理。建议参考原始源代码和文档，以完全了解应用程序的功能。

Github here上的完整源代码
Detailed blog post here

愉快的编码！ ð