# 建立後端程式碼（server）
1. 創建一個新的資料夾以存放專案
`mkdir fitness-website
cd fitness-website
`

2. 初始化 Node.js 專案並安裝 Express 和 Mongoose

npm init -y
npm install express mongoose

(我的vs code跑不出來才採用這種方式給您過目)

3. 在根目錄創建 server 資料夾和 server.js 檔案

mkdir server
cd server
touch server.js

## * server.js裡面的內容

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
const port = 3001;

app.use(cors());
app.use(express.json());

mongoose.connect('mongodb://localhost/fitness_system', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const Trainer = mongoose.model('Trainer', {
  name: String,
  specialization: String,
  bio: String,
});

const Member = mongoose.model('Member', {
  name: String,
  email: String,
  phone: String,
});

const Course = mongoose.model('Course', {
  title: String,
  description: String,
  trainer: { type: mongoose.Schema.Types.ObjectId, ref: 'Trainer' },
  start_date: Date,
  end_date: Date,
});

app.post('/trainers', async (req, res) => {
  const { name, specialization, bio } = req.body;
  const trainer = new Trainer({ name, specialization, bio });
  await trainer.save();
  res.json(trainer);
});

app.get('/trainers', async (req, res) => {
  const trainers = await Trainer.find();
  res.json(trainers);
});

app.post('/members', async (req, res) => {
  const { name, email, phone } = req.body;
  const member = new Member({ name, email, phone });
  await member.save();
  res.json(member);
});

app.get('/members', async (req, res) => {
  const members = await Member.find();
  res.json(members);
});

app.post('/courses', async (req, res) => {
  const { title, description, trainerId, start_date, end_date } = req.body;
  const course = new Course({ title, description, trainer: trainerId, start_date, end_date });
  await course.save();
  res.json(course);
});

app.get('/courses', async (req, res) => {
  const courses = await Course.find().populate('trainer');
  res.json(courses);
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

---

# 建立前端程式碼（client）
1. 在專案根目錄創建一個新的 React 專案

npx create-react-app client
cd client

2. 安裝 Axios（用於處理 HTTP 請求）

npm install axios

3.
在src資料夾中
創建一個名為components的資料夾
在components資料夾中
創建三個檔案
TrainerList.js
MemberList.js
CourseList.js

## * src/components/TrainerList.js裡面的內容

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const TrainerList = () => {
  const [trainers, setTrainers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:3001/trainers')
      .then(response => setTrainers(response.data))
      .catch(error => console.error('Error fetching trainers:', error));
  }, []);

  return (
    <div>
      <h2>教練列表</h2>
      <ul>
        {trainers.map(trainer => (
          <li key={trainer._id}>{trainer.name} - {trainer.specialization}</li>
        ))}
      </ul>
    </div>
  );
};

export default TrainerList;

---

## * src/components/MemberList.js裡面的內容

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MemberList = () => {
  const [members, setMembers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:3001/members')
      .then(response => setMembers(response.data))
      .catch(error => console.error('Error fetching members:', error));
  }, []);

  return (
    <div>
      <h2>會員列表</h2>
      <ul>
        {members.map(member => (
          <li key={member._id}>{member.name} - {member.email}</li>
        ))}
      </ul>
    </div>
  );
};

export default MemberList;

---

## * src/components/CourseList.js裡面的內容

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const CourseList = () => {
  const [courses, setCourses] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:3001/courses')
      .then(response => setCourses(response.data))
      .catch(error => console.error('Error fetching courses:', error));
  }, []);

  return (
    <div>
      <h2>課程列表</h2>
      <ul>
        {courses.map(course => (
          <li key={course._id}>{course.title} - {course.trainer.name} - {course.start_date} to {course.end_date}</li>
        ))}
      </ul>
    </div>
  );
};

export default CourseList;

---

4. 在src 資料夾中，創建一個名為pages的資料夾。在 pages 資料夾中，創建一個檔案Home.js
## * src/pages/Home.js

import React from 'react';
import TrainerList from '../components/TrainerList';
import MemberList from '../components/MemberList';
import CourseList from '../components/CourseList';

const Home = () => {
  return (
    <div>
      <h1>健身服務網站</h1>
      <TrainerList />
      <MemberList />
      <CourseList />
    </div>
  );
};

export default Home;

5. 在src資料夾中，打開App.js檔案，刪除現有內容，並將以下程式碼複製到該檔案中
## * src/App.js裡面的內容

import React from 'react';
import Home from './pages/Home';

const App = () => {
  return (
    <div>
      <Home />
    </div>
  );
};

export default App;

---
# 啟動應用程式
1. 在fitness-website專案根目錄中，先啟動後端server

cd server
node server.js

2. 在另一個終端或命令提示字元中，啟動前端應用

cd client
npm start

應用程式將在瀏覽器中打開