インターネットの発展に伴い、オンラインの質問と回答のアプリケーションがますます普及しています。この記事では、Go言語とReactを使ってオンライン質疑応答アプリケーションを構築する方法を紹介します。
アプリケーションを構築する前に、まずアプリケーションの要件を決定する必要があります。オンライン Q&A アプリケーションの場合、次のような要件が考えられます。
これらの要件を満たしたら、アプリケーションの構築を開始できます。
アプリケーション要件を決定したら、アプリケーションを構築するために適切なテクノロジー スタックを選択する必要があります。このオンライン Q&A アプリケーションでは、次のテクノロジを使用します。
バックエンドの構築を開始する前に、Go 言語と Jin フレームワークがインストールされていることを確認する必要があります。次に、Gin フレームワークを使用してバックエンド アプリケーションを構築します。
まず、main.go ファイルを作成し、必要なライブラリとともにインポートして、Gin インスタンスを作成する必要があります。
package main import ( "github.com/gin-gonic/gin" ) func main() { r := gin.Default() // 路由定义在这里 r.Run() }
次に、ルートを定義します。考えられるルートは次のとおりです:
データを保存するためにいくつかのモデルを定義する必要もあります。このアプリケーションでは、ユーザー、質問、回答、投票を保存するモデルが必要です。
これで、バックエンド アプリケーションの構築が完了しました。クラウド サーバーにデプロイし、サーバー上で実行できます。
フロント エンドの構築を開始する前に、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 を使用してオンライン Q&A アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。