Go 言語と React を使用してオンライン Q&A アプリケーションを構築する方法

インターネットの発展に伴い、オンラインの質問と回答のアプリケーションがますます普及しています。この記事では、Go言語とReactを使ってオンライン質疑応答アプリケーションを構築する方法を紹介します。

1. 要件の決定

アプリケーションを構築する前に、まずアプリケーションの要件を決定する必要があります。オンライン Q&A アプリケーションの場合、次のような要件が考えられます。

• ユーザーはアカウントを登録してログインできます。
• ユーザーは質問することができます。
• ユーザーは質問に答えることができます。
• ユーザーは質問や回答に賛成または反対で投票できます
• ユーザーは質問と回答を検索できます

これらの要件を満たしたら、アプリケーションの構築を開始できます。

2. テクノロジー スタックの選択

アプリケーション要件を決定したら、アプリケーションを構築するために適切なテクノロジー スタックを選択する必要があります。このオンライン Q&A アプリケーションでは、次のテクノロジを使用します。

• バックエンド: Go 言語、Gin フレームワークと gorm ORM を使用します
• フロントエンド: React フレームワーク、antd UI コンポーネント ライブラリと gorm を使用axios ライブラリ

3. バックエンドの構築

バックエンドの構築を開始する前に、Go 言語と Jin フレームワークがインストールされていることを確認する必要があります。次に、Gin フレームワークを使用してバックエンド アプリケーションを構築します。

まず、main.go ファイルを作成し、必要なライブラリとともにインポートして、Gin インスタンスを作成する必要があります。

package main

import (
    "github.com/gin-gonic/gin"
)

func main() {
    r := gin.Default()

    // 路由定义在这里

    r.Run()
}

次に、ルートを定義します。考えられるルートは次のとおりです:

• 登録: POST /api/user/register
• ログイン: POST /api/user/login
• 質問: POST /api /questions
• 回答: POST /api/questions/:id/answers
• 投票: POST /api/votes
• 検索: GET /api/search/:keyword

データを保存するためにいくつかのモデルを定義する必要もあります。このアプリケーションでは、ユーザー、質問、回答、投票を保存するモデルが必要です。

これで、バックエンド アプリケーションの構築が完了しました。クラウド サーバーにデプロイし、サーバー上で実行できます。

4. フロント エンドの構築

フロント エンドの構築を開始する前に、Node.js と React フレームワークがインストールされていることを確認する必要があります。次に、React フレームワークを使用してフロントエンド アプリケーションを構築します。

まず、create-react-app コマンドを使用して新しい React アプリケーションを作成します:

npx create-react-app qanda-app

次に、必要なライブラリをインストールする必要があります:

npm install antd axios --save

次に、登録、ログイン、質問、回答を行うためのシンプルな UI を構築します。 App.js ファイルに次のコードを記述します。

import React, {useState} from 'react';
import './App.css';
import {Layout, Menu, Breadcrumb, Form, Input, Button, message} from 'antd';
import axios from 'axios';

const {Header, Content, Footer} = Layout;

function App() {
  const [form] = Form.useForm();
  const [user, setUser] = useState(null);

  const onFinish = async (values) => {
    try {
      const response = await axios.post('/api/user/register', values);
      setUser(response.data);
      message.success('注册成功');
    } catch (error) {
      message.error(error.response.data);
    }
  };

  const login = async (username, password) => {
    try {
      const response = await axios.post('/api/user/login', {username, password});
      setUser(response.data);
      message.success('登录成功');
    } catch (error) {
      message.error(error.response.data);
    }
  }

  return (
    <Layout className="layout">
      <Header>
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
          <Menu.Item key="1">主页</Menu.Item>
        </Menu>
      </Header>
      <Content style={{padding: '0 50px'}}>
        <Breadcrumb style={{margin: '16px 0'}}>
          <Breadcrumb.Item>主页</Breadcrumb.Item>
        </Breadcrumb>
        <div className="site-layout-content">
          {!user ?
            <div className="login-form">
              <h1>注册</h1>
              <Form form={form} onFinish={onFinish}>
                <Form.Item name="username" rules={[{required: true, message: '请输入用户名'}]}>
                  <Input placeholder="用户名" />
                </Form.Item>
                <Form.Item name="password" rules={[{required: true, message: '请输入密码'}]}>
                  <Input.Password placeholder="密码" />
                </Form.Item>
                <Form.Item name="confirmPassword" dependencies={['password']} rules={[
                    {required: true, message: '请确认密码'},
                    ({getFieldValue}) => ({
                      validator(rule, value) {
                        if (!value || getFieldValue('password') === value) {
                          return Promise.resolve();
                        }
                        return Promise.reject('两次输入的密码不一致');
                      }
                    })
                  ]}>
                  <Input.Password placeholder="确认密码" />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    注册
                  </Button>
                  <a href="#" onClick={() => message.warning('该功能尚未实现')}>
                    已有账户？登录！
                  </a>
                </Form.Item>
              </Form>
            </div>
            :
            <div>
              <h1>欢迎 {user.username}！</h1>
              <a href="#" onClick={() => message.warning('该功能尚未实现')}>
                提问
              </a>
            </div>
          }
        </div>
      </Content>
      <Footer style={{textAlign: 'center'}}>Ant Design ©2021 Created by Ant UED</Footer>
    </Layout>
  );
}

export default App;

上記のコードは、登録関数とログイン関数を実装します。ユーザーが登録すると、登録リクエストがバックエンドに送信されます。登録が成功すると、そのユーザーが現在のユーザーとして設定されます。ユーザーがログインすると、ログイン要求がバックエンドに送信されます。ログインに成功すると、そのユーザーが現在のユーザーとして設定されます。

これで、アプリケーションの構築が完了しました。ローカルで実行したり、サーバーにデプロイしたりできます。

5. まとめ

この記事では、Go 言語と React を使用してオンラインの質問と回答のアプリケーションを構築する方法を紹介しました。まずアプリケーションの要件を特定し、次にアプリケーションを構築するための適切なテクノロジー スタックを選択しました。バックエンド側では、Gin フレームワークと gorm ORM を使用します。フロントエンド側では、React フレームワークと antd UI コンポーネント ライブラリおよび axios ライブラリを使用します。これらのテクノロジーを使用して、登録、ログイン、質問と回答の機能を備えたアプリケーションを構築しました。

以上がGo 言語と React を使用してオンライン Q&A アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。