如何使用Go語言和React建立線上問答應用程式

隨著網路的發展，線上問答應用程式越來越受歡迎。在這篇文章中，我們將介紹如何使用Go語言和React建立一個線上問答應用程式。

1. 確定需求

在建立任何應用程式之前，首先需要確定應用程式的需求。對於線上問答應用程式來說，以下是一些可能的需求：

• 使用者可以註冊帳戶並登入
• 使用者可以提出問題
##使用者可以回答問題
• 用戶可以投票支持或反對問題或答案
• 用戶可以搜尋問題和答案

有了這些需求，我們就可以開始建立應用程式了。

選擇技術堆疊

在確定了應用程式需求後，我們需要選擇合適的技術堆疊來建立應用程式。對於這個線上問答應用程序，我們將使用以下技術：

後端：Go語言，使用Gin框架和gorm ORM
• 前端：React框架，使用antd UI元件庫和axios函式庫

建置後端

在開始建置後端之前，需要確保已經安裝了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
• #「投票：POST /api/votes
• #」搜尋：GET /api/search/:keyword

我們還需要定義一些模型來儲存資料。在這個應用程式中，我們需要模型來儲存使用者、問題、答案和投票。

現在，我們已經完成了後端應用程式的建置。您可以將其部署到雲端伺服器上，並在伺服器上運行它。

建立前端

在開始建置前端之前，需要確保已經安裝了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;

以上程式碼實作了註冊和登入功能。當用戶註冊時，會向後端發送註冊請求。如果註冊成功，用戶將被設定為目前用戶。當使用者登入時，將向後端發送登入請求。如果登入成功，用戶將被設定為目前用戶。

現在，我們已經完成了應用程式的建置。您可以在本地運行它，並在伺服器上部署它。

總結

在這篇文章中，我們介紹如何使用Go語言和React建立線上問答應用程式。我們首先確定了應用程式的需求，然後選擇了合適的技術堆疊來建立應用程式。在後端方面，我們使用Gin框架和gorm ORM。在前端方面，我們使用React框架和antd UI元件庫和axios庫。透過這些技術，我們建立了一個具有註冊、登入、提問和回答功能的應用程式。

以上是如何使用Go語言和React建立線上問答應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！