rubuild dir structure

client/src/booking/Booking_page.js

@@ -0,0 +1,52 @@
+import React, {useState, useEffect} from 'react';
+import {TextField, Button} from '@mui/material';
+
+const BookingPage = () => {
+  const [seats, setSeats] = useState([
+    {id: 1, row: 1, col: 1, status: 'available'},
+    {id: 2, row: 1, col: 2, status: 'available'},
+  ]);
+
+  const handleSeatSelect = (seatId) => {
+    setSeats((prevSeats) =>
+      prevSeats.map((seat) => {
+        if (seat.id === seatId) {
+          return {
+            ...seat,
+            status: seat.status === 'available' ? 'selected' : 'available',
+          };
+        }
+        return seat;
+      }),
+    );
+  };
+
+  const handleConfirm = () => {
+    console.log(
+      'Selected seats:',
+      seats.filter((seat) => seat.status === 'selected'),
+    );
+  };
+
+  return (
+    <div>
+      <h2>Seat Reservation</h2>
+      <table>
+        <tbody>
+          {seats.map((seat) => (
+            <tr key={seat.id}>
+              <td
+                className={seat.status}
+                onClick={() => handleSeatSelect(seat.id)}>
+                {seat.row} - {seat.col}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <button onClick={handleConfirm}>Confirm</button>
+    </div>
+  );
+};
+
+export default BookingPage;

client/src/eventDetails/Detial_page.js

@@ -0,0 +1,98 @@
+// ActivityDetails.js
+import React, {useState, useEffect} from 'react';
+import example_img from './example-poster.jpg';
+import sample_text from './sample-text.txt';
+import {TextField, Button} from '@mui/material';
+
+async function fetchActivityDescription() {
+  try {
+    // const response = await fetch('http://localhost:3306/activity-description');
+    // const data = await response.json();
+
+    // 用于测试的假数据
+    const response = await fetch(sample_text);
+    const data = await response.text();
+    return data;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function ActivityDetails() {
+  const [activityDescription, setActivityDescription] = React.useState(''); //用户文本
+  const [activityTitle, setActivityTitle] = React.useState(''); //活动标题
+
+  const redirectToBookingPage = () => {
+    window.location.href = '/booking';
+  };
+
+  useEffect(() => {
+    async function fetchData() {
+      const data = await fetchActivityDescription();
+      setActivityDescription(data);
+    }
+    fetchData();
+    async function fetchTitle() {
+      // const response = await fetch('http://localhost:3306/activity-title');
+      // const data = await response.json();
+
+      // 用于测试的假数据
+      const data = '示例标题';
+      setActivityTitle(data);
+    }
+    fetchTitle();
+  }, []);
+
+  return (
+    <div
+      style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+      <div>
+        <h1 style={{textAlign: 'center', fontSize: '4rem'}}>{activityTitle}</h1>
+      </div>
+
+      <div
+        style={{
+          justifyContent: 'space-around',
+          display: 'flex',
+          width: '100%',
+        }}>
+        {/* 图片 */}
+        <img
+          src={example_img}
+          alt='活动海报'
+          style={{display: 'flex', width: '50%', height: 'auto'}}
+        />
+        <div
+          style={{
+            display: 'flex',
+            width: '50%',
+            fontSize: '2rem',
+            flexDirection: 'column',
+          }}>
+          {/* 活动信息模块 */}
+          <p>活动时间：2024-04-015 12:00</p>
+          <p>活动地点：示例地点</p>
+          <p>活动主办方：示例主办方</p>
+          <p>活动介绍</p>
+          <div>
+            {/* 用户自定义文本模块 */}
+            {activityDescription}
+          </div>
+        </div>
+      </div>
+
+      <div style={{textAlign: 'center', marginTop: '20px', fontSize: '2rem'}}>
+        <div>
+          <p>剩余座位数：50</p>
+          <Button variant='contained' onClick={redirectToBookingPage}>
+            预定
+          </Button>
+        </div>
+
+        <div style={{marginTop: '20px'}}>{/* 评论区 */}</div>
+      </div>
+    </div>
+  );
+}
+
+export default ActivityDetails;

client/src/logIn/Login.js

@@ -0,0 +1,68 @@
+import React, {useState} from 'react';
+import axios from 'axios';
+
+function Login() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    const res = await axios.post('http://localhost:3001/login', {
+      username,
+      password,
+    });
+    console.log(res.data);
+  };
+
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    const res = await axios.post('http://localhost:3001/register', {
+      username,
+      password,
+    });
+    console.log(res.data);
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleLogin}>
+        <h1>Login</h1>
+        <input
+          type='text'
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          placeholder='Username'
+          required
+        />
+        <input
+          type='password'
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder='Password'
+          required
+        />
+        <button type='submit'>Login</button>
+      </form>
+      <form onSubmit={handleRegister}>
+        <h1>Register</h1>
+        <input
+          type='text'
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          placeholder='Username'
+          required
+        />
+        <input
+          type='password'
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder='Password'
+          required
+        />
+        <button type='submit'>Register</button>
+      </form>
+    </div>
+  );
+}
+
+export default Login;