Comment créer une application de questions-réponses en ligne en utilisant le langage Go et React

Avec le développement d'Internet, les applications de questions et réponses en ligne deviennent de plus en plus populaires. Dans cet article, nous présenterons comment créer une application de questions et réponses en ligne à l'aide du langage Go et de React.

1. Déterminer les exigences

Avant de créer une application, vous devez d'abord déterminer les exigences de l'application. Pour une candidature de questions et réponses en ligne, voici quelques conditions possibles :

• Les utilisateurs peuvent créer un compte et se connecter
• Les utilisateurs peuvent poser des questions
• Les utilisateurs peuvent répondre aux questions
• Les utilisateurs peuvent voter pour ou contre les questions ou réponses
• Questions des utilisateurs et les réponses peuvent être recherchées

Avec ces exigences, nous pouvons commencer à créer l'application.

2. Choisissez une pile technologique

Après avoir déterminé les exigences de l'application, nous devons choisir une pile technologique appropriée pour créer l'application. Pour cette application de questions et réponses en ligne, nous utiliserons les technologies suivantes :

• Backend : langage Go, utilisant le framework Gin et gorm ORM
• Frontend : framework React, utilisant la bibliothèque de composants antd UI et la bibliothèque axios

3. pour construire le backend

Avant de commencer à construire le backend, vous devez vous assurer que vous avez installé le langage Go et le framework Gin. Ensuite, nous construisons l'application backend à l'aide du framework Gin.

Tout d'abord, nous devons créer un fichier main.go, l'importer avec les bibliothèques nécessaires et créer une instance Gin :

package main

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

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

    // 路由定义在这里

    r.Run()
}

Ensuite, nous définissons les routes. Voici les itinéraires possibles :

• S'inscrire : POST /api/user/register
• Connexion : POST /api/user/login
• Demander : POST /api/questions
• Réponse : POST /api/questions/:id /answers
• Votes : POST /api/votes
• Recherche : GET /api/search/:keyword

Nous devons également définir certains modèles pour stocker les données. Dans cette application, nous avons besoin de modèles pour stocker les utilisateurs, les questions, les réponses et les votes.

Maintenant, nous avons terminé la création de l'application backend. Vous pouvez le déployer sur un serveur cloud et l'exécuter sur le serveur.

4. Construire le front-end

Avant de commencer à créer le front-end, vous devez vous assurer que vous avez installé Node.js et le framework React. Ensuite, nous construisons l'application front-end à l'aide du framework React.

Tout d'abord, nous créons une nouvelle application React à l'aide de la commande create-react-app :

npx create-react-app qanda-app

Ensuite, nous devons installer les bibliothèques requises :

npm install antd axios --save

Maintenant, nous allons créer une interface utilisateur simple pour implémenter l'enregistrement, la connexion, poser des questions et répondre aux questions. Dans le fichier App.js, nous écrirons le code suivant :

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;

Le code ci-dessus implémente les fonctions d'enregistrement et de connexion. Lorsqu'un utilisateur s'inscrit, une demande d'inscription est envoyée au backend. Si l’enregistrement réussit, l’utilisateur sera défini comme utilisateur actuel. Lorsqu'un utilisateur se connecte, une demande de connexion est envoyée au backend. Si la connexion réussit, l'utilisateur sera défini comme utilisateur actuel.

Maintenant, nous avons fini de créer l'application. Vous pouvez l'exécuter localement et le déployer sur le serveur.

5. Résumé

Dans cet article, nous avons présenté comment créer une application de questions et réponses en ligne à l'aide du langage Go et de React. Nous avons d'abord identifié les exigences de l'application, puis sélectionné la pile technologique appropriée pour créer l'application. Côté backend, nous utilisons le framework Gin et gorm ORM. Côté front-end, nous utilisons le framework React et la bibliothèque de composants antd UI et la bibliothèque axios. À l'aide de ces technologies, nous avons construit une application avec des fonctionnalités d'inscription, de connexion, de questions et réponses.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!