Daripada Pemula kepada Pro: Membina Apl Timbunan Penuh Pertama Anda dalam 4

Membina aplikasi tindanan penuh pertama anda ialah peristiwa penting dalam perjalanan mana-mana pembangun. Dalam panduan ini, kami akan membimbing anda melalui proses mencipta Apl Pengurus Tugas menggunakan React, Node.js dan MongoDB. Sepanjang perjalanan, kami akan menerangkan setiap langkah, daripada menyediakan persekitaran anda hingga menggunakan apl anda pada Vercel dan Render.

Pada akhirnya, anda akan mempunyai apl langsung yang berfungsi sepenuhnya dan keyakinan untuk menangani projek yang lebih kompleks.

1. Prasyarat: Menyediakan Alat Anda Sebelum menyelami kod, mari pastikan persekitaran pembangunan anda sedia. Inilah yang anda perlukan:

Perisian Penting
Node.js (Muat turun di sini):https://nodejs.org/fr
Node.js ialah masa jalan yang membolehkan anda menjalankan JavaScript di luar penyemak imbas. Pasangnya untuk menggunakan pengurus pakej terbina dalamnya, npm, untuk mengendalikan kebergantungan.

nod -v && npm -v
Jalankan arahan di atas selepas pemasangan untuk mengesahkan versi.

Git (Muat turun di sini):https://git-scm.com/
Git ialah sistem kawalan versi yang menjejaki perubahan pada kod anda dan memudahkan kerjasama.

MongoDB Atlas (Daftar di sini):https://www.mongodb.com/products/platform/atlas-database
Atlas menawarkan pangkalan data MongoDB dihoskan awan percuma, sesuai untuk pemula.

Vercel CLI (Panduan Pemasangan):https://vercel.com/
Vercel ialah platform untuk menggunakan bahagian hadapan React anda dengan cepat dan cekap.

Akaun Render (Daftar di sini):https://render.com/
Render menyediakan persekitaran yang teguh untuk menggunakan perkhidmatan bahagian belakang anda.

1. Menyediakan Projek Anda

Langkah 1: Buat Struktur Projek

Buka terminal anda dan buat direktori untuk apl anda:

apl pengurus tugas mkdir && apl pengurus tugas cd

Memulakan repositori Git:

git init

Sediakan fail package.json untuk mengurus kebergantungan:

npm init -y

Langkah 2: Pasang Ketergantungan

Kebergantungan Bahagian Belakang

Bahagian belakang akan dibina dengan Node.js dan Express, dan ia akan bersambung ke MongoDB untuk storan data.

Pasang pakej yang diperlukan:

npm install express mongoose dotenv cors
npm install --save-dev nodemon

• express: Rangka kerja untuk membina aplikasi sebelah pelayan.
• mongoose: Pustaka Pemodelan Data Objek (ODM) untuk MongoDB.
• dotenv: Untuk mengurus pembolehubah persekitaran.
• kor: Middleware untuk mengendalikan permintaan silang asal.
• nodemon: Alat untuk pelayan automatik dimulakan semula semasa pembangunan.

Kebergantungan Bahagian Depan

Halaman hadapan akan menggunakan React untuk membina antara muka pengguna.

Sediakan apl React:

npx create-react-app client

pelanggan cd

Di dalam direktori React, pasang perpustakaan tambahan:

npm pasang axios react-router-dom

• aksios: Untuk membuat permintaan HTTP kepada API bahagian belakang.
• react-router-dom: Untuk mengurus laluan dalam aplikasi anda.

1. Membina Bahagian Belakang: API dengan Express dan MongoDB

Langkah 1: Buat Struktur Direktori

Atur projek anda seperti ini:

npm install express mongoose dotenv cors
npm install --save-dev nodemon

Langkah 2: Cipta Pelayan Ekspres

Di dalam pelayan/ direktori, buat fail server.js:

task-manager-app/
├── server/
│   ├── models/       # Contains database models
│   ├── routes/       # Contains API routes
│   ├── .env          # Stores environment variables
│   ├── server.js     # Main server file

Langkah 3: Konfigurasi Pembolehubah Persekitaran

Buat fail .env dalam pelayan/ direktori dan tambah MongoDB anda

rentetan sambungan:

MONGO_URI=

Langkah 4: Tentukan Model Mongoose

Di dalam pelayan/model/ direktori, buat Task.js:

require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

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

// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log("Connected to MongoDB"))
  .catch(err => console.error(err));

// API Routes
app.use('/api/tasks', require('./routes/taskRoutes'));

// Start the server
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Langkah 5: Cipta Laluan API

Di dalam pelayan/laluan/ direktori, buat taskRoutes.js:

const mongoose = require('mongoose');

const TaskSchema = new mongoose.Schema({
  title: { type: String, required: true },
  completed: { type: Boolean, default: false },
}, { timestamps: true });

module.exports = mongoose.model('Task', TaskSchema);

1. Membina Bahagian Depan: React

Langkah 1: Sediakan Komponen React

Susun direktori React anda seperti ini:

const express = require('express');
const router = express.Router();
const Task = require('../models/Task');

// Fetch all tasks
router.get('/', async (req, res) => {
  const tasks = await Task.find();
  res.json(tasks);
});

// Add a new task
router.post('/', async (req, res) => {
  const task = await Task.create(req.body);
  res.json(task);
});

// Update a task
router.put('/:id', async (req, res) => {
  const task = await Task.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(task);
});

// Delete a task
router.delete('/:id', async (req, res) => {
  await Task.findByIdAndDelete(req.params.id);
  res.json({ message: 'Task deleted' });
});

module.exports = router;

Langkah 2: Ambil Data daripada API

Dalam src/components/TaskList.js:

client/
├── src/
│   ├── components/
│   │   ├── TaskList.js
│   │   ├── AddTask.js
│   │   ├── Task.js
│   ├── App.js
│   ├── index.js

1. Pengerahan: Mengambil Apl Anda Secara Langsung

Penggunaan Belakang pada Render

Tolak kod anda ke GitHub:

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

const TaskList = () => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/tasks')
      .then(response => setTasks(response.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      {tasks.map(task => (
        <div key={task._id}>
          <h3>{task.title}</h3>
          <p>{task.completed ? 'Completed' : 'Incomplete'}</p>
        </div>
      ))}
    </div>
  );
};

export default TaskList;

Gunakan pada Render:

Sambungkan repositori anda.
Tetapkan direktori akar kepada /server.
Tambahkan pembolehubah persekitaran (cth., MONGO_URI).

Pengedaran Bahagian Depan pada Vercel

Navigasi ke direktori pelanggan:

pelanggan cd

Kerahkan:

vercel (https://vercel.com/)

Kesimpulan
tahniah! ? Anda telah membina dan menggunakan aplikasi tindanan penuh pertama anda. Dengan menguasai proses ini, anda sedang dalam perjalanan untuk mencipta projek yang lebih kompleks dan berkesan.

Kekal Berhubung
? Terokai lebih lanjut di GladiatorsBattle.com
? Ikuti kami di Twitter
? Baca lebih lanjut di DEV.to
? Tunjuk cara interaktif pada CodePen

Mari kita bina sesuatu yang menakjubkan bersama-sama! ?

Atas ialah kandungan terperinci Daripada Pemula kepada Pro: Membina Apl Timbunan Penuh Pertama Anda dalam 4. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!