Cara membina aplikasi Soal Jawab dalam talian menggunakan bahasa Go dan React

Dengan perkembangan Internet, aplikasi soal jawab dalam talian semakin popular. Dalam artikel ini, kami akan memperkenalkan cara membina aplikasi soal jawab dalam talian menggunakan bahasa Go dan React.

1. Tentukan Keperluan

Sebelum membina sebarang aplikasi, anda perlu terlebih dahulu menentukan keperluan permohonan itu. Untuk permohonan Soal Jawab dalam talian, berikut adalah beberapa keperluan yang mungkin:

• Pengguna boleh mendaftar akaun dan log masuk
• Pengguna boleh bertanya soalan
• Pengguna boleh menjawab soalan
• Pengguna boleh mengundi untuk atau menentang soalan atau jawapan
• Pengguna boleh mencari soalan dan jawapan

Dengan adanya keperluan ini, kami boleh mula membina aplikasi.

2. Pilih Tindanan Teknologi

Selepas menentukan keperluan aplikasi, kita perlu memilih tindanan teknologi yang sesuai untuk membina aplikasi. Untuk aplikasi soal jawab dalam talian ini, kami akan menggunakan teknologi berikut:

• Backend: Go language, using Gin framework and gorm ORM
• Frontend: React framework, using antd UI component perpustakaan dan perpustakaan axios

3. Membina bahagian belakang

Sebelum anda mula membina bahagian belakang, anda perlu memastikan anda telah memasang bahasa Go dan rangka kerja Gin . Seterusnya, kami membina aplikasi bahagian belakang menggunakan rangka kerja Gin.

Pertama, kita perlu mencipta fail main.go, mengimportnya dengan perpustakaan yang diperlukan dan mencipta contoh Gin:

package main

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

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

    // 路由定义在这里

    r.Run()
}

Seterusnya, kami menentukan laluan. Berikut adalah laluan yang mungkin:

• Daftar: POST /api/user/register
• Log masuk: POST /api/user/login
• Tanya: POST /api /soalan
• Jawapan: POST /api/questions/:id/answers
• Undian: POST /api/votes
• Cari: GET /api/search/:keyword

Kami juga perlu menentukan beberapa model untuk menyimpan data. Dalam aplikasi ini kami memerlukan model untuk menyimpan pengguna, soalan, jawapan dan undian.

Kini, kami telah selesai membina aplikasi bahagian belakang. Anda boleh menggunakan ia ke pelayan awan dan menjalankannya pada pelayan.

4. Membina bahagian hadapan

Sebelum anda mula membina bahagian hadapan, anda perlu memastikan anda telah memasang Node.js dan rangka kerja React. Seterusnya, kami membina aplikasi bahagian hadapan menggunakan rangka kerja React.

Pertama, kami menggunakan arahan create-react-app untuk mencipta aplikasi React baharu:

npx create-react-app qanda-app

Seterusnya, kami perlu memasang perpustakaan yang diperlukan:

npm install antd axios --save

Sekarang, kami akan membina UI mudah untuk mendaftar, log masuk, bertanya soalan dan menjawab soalan. Dalam fail App.js, kami akan menulis kod berikut:

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;

Kod di atas melaksanakan fungsi pendaftaran dan log masuk. Apabila pengguna mendaftar, permintaan pendaftaran dihantar ke bahagian belakang. Jika pendaftaran berjaya, pengguna akan ditetapkan sebagai pengguna semasa. Apabila pengguna log masuk, permintaan log masuk dihantar ke bahagian belakang. Jika log masuk berjaya, pengguna akan ditetapkan sebagai pengguna semasa.

Kini, kami telah selesai membina aplikasi. Anda boleh menjalankannya secara tempatan dan menggunakan ia pada pelayan.

5. Ringkasan

Dalam artikel ini, kami memperkenalkan cara membina aplikasi soal jawab dalam talian menggunakan bahasa Go dan React. Kami mula-mula mengenal pasti keperluan aplikasi dan kemudian memilih tindanan teknologi yang sesuai untuk membina aplikasi. Di bahagian belakang, kami menggunakan rangka kerja Gin dan ORM gorm. Di bahagian hadapan, kami menggunakan rangka kerja React dan perpustakaan komponen UI dan perpustakaan axios. Menggunakan teknologi ini, kami membina aplikasi dengan fungsi pendaftaran, log masuk, soal jawab.

Atas ialah kandungan terperinci Cara membina aplikasi Soal Jawab dalam talian menggunakan bahasa Go dan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!