Go 언어와 React를 사용하여 온라인 Q&A 애플리케이션을 구축하는 방법

인터넷의 발달과 함께 온라인 질의응답 애플리케이션이 점점 대중화되고 있습니다. 이 기사에서는 Go 언어와 React를 사용하여 온라인 질문 및 답변 애플리케이션을 구축하는 방법을 소개합니다.

1. 요구 사항 결정

애플리케이션을 구축하기 전에 먼저 애플리케이션의 요구 사항을 결정해야 합니다. 온라인 Q&A 애플리케이션의 경우 가능한 요구 사항은 다음과 같습니다.

• 사용자는 계정을 등록하고 로그인할 수 있습니다.
• 사용자는 질문을 할 수 있습니다.
• 사용자는 질문에 답변할 수 있습니다.
• 사용자는 질문이나 답변에 찬성하거나 반대할 수 있습니다.
• 사용자 질문 답변을 검색할 수 있습니다.

이러한 요구 사항을 통해 애플리케이션 구축을 시작할 수 있습니다.

2. 기술 스택 선택

애플리케이션 요구 사항을 결정한 후에는 애플리케이션을 구축하는 데 적합한 기술 스택을 선택해야 합니다. 이 온라인 질문 및 답변 애플리케이션에서는 다음 기술을 사용합니다.

• 백엔드: Go 언어, Gin 프레임워크 및 gorm ORM 사용
• 프런트엔드: React 프레임워크, antd UI 구성 요소 라이브러리 및 axios 라이브러리 사용

3. 빌드 백엔드

백엔드 구축을 시작하기 전에 Go 언어 및 Gin 프레임워크를 설치했는지 확인해야 합니다. 다음으로 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
• Votes: POST /api/votes
• Search: GET /api/search/:keyword

또한 데이터를 저장할 일부 모델을 정의해야 합니다. 이 애플리케이션에는 사용자, 질문, 답변 및 투표를 저장하는 모델이 필요합니다.

이제 백엔드 애플리케이션 구축이 완료되었습니다. 클라우드 서버에 배포하고 서버에서 실행할 수 있습니다.

4. 프런트 엔드 구축

프런트 엔드 구축을 시작하기 전에 Node.js와 React 프레임워크가 설치되어 있는지 확인해야 합니다. 다음으로 React 프레임워크를 사용하여 프런트엔드 애플리케이션을 구축합니다.

먼저 create-react-app 명령을 사용하여 새 React 애플리케이션을 만듭니다.

npx create-react-app qanda-app

다음으로 필요한 라이브러리를 설치해야 합니다.

npm install antd axios --save

이제 등록, 로그인, 질문하고 질문에 답하세요. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!