Cors mongodb

Question

Tôi đang tạo một ứng dụng web có góc cạnh ở giao diện người dùng và golang và mongo ở phần phụ trợ cho cơ sở dữ liệu. Tôi đã thiết lập và chạy db, đồng thời tất cả các yêu cầu định tuyến đã được kiểm tra và đang hoạt động trên Postman. Tuy nhiên, khi tôi cố gắng thực hiện yêu cầu XÓA hoặc yêu cầu PUT trên dịch vụ của ứng dụng góc cạnh, tôi gặp phải lỗi sau

Nội dung chính Show

Ngăn xếp MERN là gì?
Cách bắt đầu với ngăn xếp MERN
Thiết lập dự án
Kết nối với MongoDB Atlas
Điểm cuối API máy chủ
Thiết lập ứng dụng React
Thiết lập bộ định tuyến React
Tạo thành phần
tạo ra. js
chỉnh sửa. js
danh sách bản ghi. js
thanh điều hướng. js
Kết nối Front End với Back End

"Truy cập vào XMLHttpRequest tại '-my api url-' từ nguồn gốc 'http. //máy chủ cục bộ. 4200' đã bị chính sách CORS chặn. Phản hồi yêu cầu chiếu trước không vượt qua kiểm tra kiểm soát truy cập. Không có tiêu đề 'Kiểm soát truy cập-Cho phép-Xuất xứ' trên tài nguyên được yêu cầu. "

Tôi có thể thực hiện các yêu cầu GET và POST nhưng không thể DELETE hoặc PUT

Làm thế nào để tôi có được xung quanh này? . Cảm ơn bạn

Có nhiều cách bạn có thể truy vấn để lấy dữ liệu từ máy chủ API của mình. vì vậy ở đây tôi đang cố gắng mô tả hai trong số họ

Nội dung chính Hiển thị

Ngăn xếp MERN là gì?
Cách bắt đầu với ngăn xếp MERN
Thiết lập dự án
Kết nối với MongoDB Atlas
Điểm cuối API máy chủ
Thiết lập ứng dụng React
Thiết lập bộ định tuyến React
Tạo thành phần
danh sách bản ghi. js
Kết nối Front End với Back End
Làm cách nào để bạn hiển thị dữ liệu trong React JS từ MongoDB?
Làm cách nào để bạn tìm nạp dữ liệu từ cơ sở dữ liệu MongoDB trong nút JS và hiển thị trong phản ứng?
React JS kết nối với MongoDB như thế nào?
Làm cách nào để hiển thị dữ liệu đã tìm nạp trong phản ứng?
Làm cách nào để bạn tìm nạp dữ liệu từ cơ sở dữ liệu và hiển thị trong React JS?

1. Bằng trình duyệt gốc

npx create-react-app foldername

7 API


const AdsContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('/ads').then(response => {
      setData(response.json())
    })
  }, [])

  return (
    
      {children}
    
  )
}

2. bởi

npx create-react-app foldername

8

Điều này sẽ giúp bạn xử lý đồng bộ hơn như

npx create-react-app foldername

9,

cd foldername

0,

cd foldername

1, v.v.

Đầu tiên, ở cấp cao nhất của

cd foldername

2, bạn nên cung cấp

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      
        
      
    
  );
}

Sau đó,

cd foldername

3 của bạn có thể lấy dữ liệu như dưới đây

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

Trước hết, chúng tôi không thể kết nối React JS với MongoDB vì mọi thứ không hoạt động như thế này. Đầu tiên, chúng tôi tạo một ứng dụng phản ứng, sau đó để bảo trì phụ trợ, chúng tôi tạo API trong nút. js và thể hiện. js đang chạy ở một cổng khác và ứng dụng phản ứng của chúng tôi đang chạy ở một cổng khác. để kết nối React với cơ sở dữ liệu (MongoDB), chúng tôi tích hợp thông qua API. Bây giờ hãy xem cách chúng tôi tạo một ứng dụng React đơn giản lấy tên và email đầu vào từ người dùng và lưu nó vào cơ sở dữ liệu

Điều kiện tiên quyết

NodeJS được cài đặt trong hệ thống của bạn (cài đặt)
MongoDB được cài đặt trong hệ thống của bạn (cài đặt)

Tập tin và thư mục Setum. Thiết lập từng tệp và thư mục cần thiết cho giao diện người dùng và phụ trợ từng cái một

Tạo ứng dụng phản ứng. Để xây dựng một ứng dụng phản ứng, hãy làm theo các bước dưới đây

Bước 1. Tạo một ứng dụng phản ứng bằng lệnh sau

npx create-react-app foldername

Bước 2. Sau khi hoàn tất, hãy thay đổi thư mục của bạn thành ứng dụng mới được tạo bằng lệnh sau

cd foldername

Bước chạy ứng dụng. Nhập lệnh sau để chạy ứng dụng


const AdsContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('/ads').then(response => {
      setData(response.json())
    })
  }, [])

  return (
    
      {children}
    
  )
}

2

Thiết lập phụ trợ với NodeJS. Setup NodeJs cho Backend để tích hợp với frontend

Bước 1. Tạo một thư mục trong thư mục gốc bằng lệnh sau


const AdsContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('/ads').then(response => {
      setData(response.json())
    })
  }, [])

  return (
    
      {children}
    
  )
}

3

Bước 2. Sau khi hoàn tất, hãy thay đổi thư mục của bạn thành thư mục mới được tạo có tên là phụ trợ bằng lệnh sau


const AdsContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('/ads').then(response => {
      setData(response.json())
    })
  }, [])

  return (
    
      {children}
    
  )
}

4

Bước 3. Chạy lệnh sau để tạo tệp cấu hình


const AdsContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('/ads').then(response => {
      setData(response.json())
    })
  }, [])

  return (
    
      {children}
    
  )
}

5

Bước 3. Bây giờ Cài đặt mongoose MongoDB bằng lệnh sau


const AdsContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('/ads').then(response => {
      setData(response.json())
    })
  }, [])

  return (
    
      {children}
    
  )
}

6

Bước 4. Tạo một tệp chỉ mục. js

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      
        
      
    
  );
}

0

Cấu trúc dự án. Nó sẽ giống như sau

Bước chạy ứng dụng. Nhập lệnh sau để chạy ứng dụng

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      
        
      
    
  );
}

1

Thí dụ. Bây giờ hãy viết đoạn mã sau vào các tệp sau

Bạn sẽ cần quyền truy cập vào cơ sở dữ liệu MongoDB Atlas cho hướng dẫn này. Nếu chưa có tài khoản, bạn có thể đăng ký miễn phí để theo dõi

Hướng dẫn này sẽ chỉ cho bạn cách xây dựng ứng dụng MERN full-stack—trong trường hợp này là cơ sở dữ liệu nhân viên—với các công cụ mới nhất hiện có. Trước khi bắt đầu, hãy đảm bảo rằng bạn đã quen thuộc với Node. js và phản ứng. js cơ bản và đã cài đặt Node và Tạo ứng dụng React. Bạn cũng sẽ cần quyền truy cập vào cơ sở dữ liệu MongoDB Atlas cho hướng dẫn này. Mã đầy đủ có sẵn trên repo GitHub này

Ngăn xếp MERN là gì?

Ngăn xếp MERN là một khung phát triển web được tạo thành từ ngăn xếp MongoDB, Express. js, phản ứng. js và Nodejs. Đây là một trong một số biến thể của ngăn xếp MEAN

Khi bạn sử dụng ngăn xếp MERN, bạn làm việc với React để triển khai lớp trình bày, Express và Node để tạo lớp giữa hoặc lớp ứng dụng và MongoDB để tạo lớp cơ sở dữ liệu

Trong hướng dẫn ngăn xếp MERN này, chúng tôi sẽ sử dụng bốn công nghệ này để phát triển một ứng dụng cơ bản có khả năng ghi lại thông tin của nhân viên và sau đó hiển thị thông tin đó bằng React

Cách bắt đầu với ngăn xếp MERN

Để bắt đầu, bạn sẽ cần làm như sau

Cài đặt nút
Để cài đặt nút, hãy truy cập https. //nodejs. org/en/ và tải xuống phiên bản LTS hoặc phiên bản hiện tại.
Có hoặc cài đặt Trình chỉnh sửa mã
Bạn có thể sử dụng bất kỳ trình chỉnh sửa mã nào bạn chọn cho hướng dẫn này. Tuy nhiên, để trình diễn, chúng tôi sẽ sử dụng trình soạn thảo VS Code với plugin đẹp hơn và các biểu tượng vscode.

Thiết lập dự án

(Vui lòng viết mã hoặc tải xuống toàn bộ mã từ kho lưu trữ GitHub này. )

MERN cho phép chúng tôi tạo ra các giải pháp toàn diện. Vì vậy, để tận dụng hết tiềm năng của nó, chúng tôi sẽ tạo một dự án ngăn xếp MERN. Đối với dự án này, chúng tôi sẽ tạo cả mặt sau và mặt trước. Giao diện người dùng sẽ được triển khai với React và giao diện người dùng sẽ được triển khai với MongoDB, Node và Express. Chúng tôi sẽ gọi máy khách phía trước và máy chủ phía sau

Hãy bắt đầu bằng cách tạo một thư mục trống. gió nhẹ. Thư mục này sẽ chứa tất cả các tệp của chúng tôi sau khi chúng tôi tạo một dự án mới. Sau đó, chúng ta sẽ tạo một ứng dụng React—ứng dụng khách—trong đó

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      
        
      
    
  );
}

2

Sau đó, chúng tôi tạo một thư mục cho mặt sau và đặt tên là máy chủ

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      
        
      
    
  );
}

3

Chúng tôi sẽ nhảy vào thư mục máy chủ mà chúng tôi đã tạo trước đó và tạo máy chủ. Sau đó, chúng tôi sẽ khởi tạo gói. json sử dụng npm init

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      
        
      
    
  );
}

4

Chúng tôi cũng sẽ cài đặt các phụ thuộc

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      
        
      
    
  );
}

5

Lệnh trên sử dụng một vài từ khóa

lệnh mongodb cài đặt trình điều khiển cơ sở dữ liệu MongoDB cho phép Node của bạn. js để kết nối với cơ sở dữ liệu và làm việc với dữ liệu
express cài đặt web framework cho Node. js. (Nó sẽ làm cho cuộc sống của chúng ta dễ dàng hơn. )
cors cài đặt một nút. js cho phép chia sẻ tài nguyên nguồn gốc chéo
dotenv cài đặt mô-đun tải các biến môi trường từ một. tập tin env vào quá trình. tập tin env. Điều này cho phép bạn tách các tệp cấu hình khỏi mã

Chúng tôi có thể kiểm tra các phụ thuộc đã cài đặt bằng gói. tập tin json. Nó sẽ liệt kê các gói cùng với các phiên bản của chúng

Sau khi chúng tôi đảm bảo rằng các phụ thuộc đã được cài đặt thành công, chúng tôi tạo một tệp có tên máy chủ. js với đoạn mã sau

mern/máy chủ/máy chủ. js

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      
        
      
    
  );
}

6

Ở đây, chúng tôi yêu cầu sử dụng express và cors. quá trình cổng const. env. cổng sẽ truy cập biến cổng từ cấu hình. env chúng tôi yêu cầu

Kết nối với MongoDB Atlas

Đã đến lúc kết nối máy chủ của chúng tôi với cơ sở dữ liệu. Chúng tôi sẽ sử dụng MongoDB Atlas làm cơ sở dữ liệu. MongoDB Atlas là một dịch vụ cơ sở dữ liệu dựa trên đám mây cung cấp độ tin cậy và bảo mật dữ liệu mạnh mẽ. MongoDB Atlas cung cấp một cụm tầng miễn phí không bao giờ hết hạn và cho phép bạn truy cập một tập hợp con các tính năng và chức năng của Atlas

Làm theo hướng dẫn Bắt đầu với Atlas để tạo tài khoản, triển khai cụm đầu tiên của bạn và xác định chuỗi kết nối của cụm của bạn

Bây giờ bạn đã có chuỗi kết nối, hãy quay lại thư mục ‘máy chủ’ và tạo tệp ‘config. tập tin env. Ở đó, gán chuỗi kết nối cho một biến

cd foldername

4 mới. Sau khi hoàn tất, tệp của bạn sẽ trông giống như tệp bên dưới. Thay thế

cd foldername

5 và

cd foldername

6 bằng tên người dùng và mật khẩu cơ sở dữ liệu của bạn

mern/máy chủ/cấu hình. env

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      
        
      
    
  );
}

7

Tạo một thư mục bên dưới thư mục máy chủ—db—và bên trong đó, một tệp—conn. js. Ở đó chúng ta có thể thêm đoạn mã sau để kết nối với cơ sở dữ liệu của mình

mern/máy chủ/db/conn. js

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      
        
      
    
  );
}

8

Điểm cuối API máy chủ

cơ sở dữ liệu được thực hiện. Máy chủ đã hoàn tất. Bây giờ là lúc dành cho điểm cuối API Máy chủ. Hãy bắt đầu bằng cách tạo thư mục route và thêm bản ghi. js trong đó. Điều hướng trở lại thư mục “máy chủ” của bạn và tạo thư mục và tệp mới

import { QueryClient, QueryClientProvider } from "react-query";
import AdsContainer from "./AdsContainer";

const queryClient = new QueryClient()
function App() {
  return (
    
      
        
      
    
  );
}

9

Các tuyến đường/bản ghi. js cũng sẽ có các dòng mã sau trong đó

mern/máy chủ/tuyến đường/bản ghi. js

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

0

Nếu bạn chạy ứng dụng tại thời điểm này, bạn sẽ nhận được thông báo sau trong thiết bị đầu cuối của mình khi kết nối được thiết lập

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

1

Đó là nó cho phần cuối. Bây giờ, chúng ta sẽ bắt đầu làm việc trên giao diện người dùng

Thiết lập ứng dụng React

Vì chúng tôi đã thiết lập ứng dụng React của mình bằng lệnh tạo ứng dụng phản ứng, chúng tôi có thể điều hướng đến thư mục máy khách và kiểm tra mã ứng dụng React của mình

Hãy hoàn thiện ứng dụng, nhưng trước khi thực hiện, chúng ta cần cài đặt hai phụ thuộc bổ sung sẽ được sử dụng trong dự án của chúng ta. Mở trình giả lập thiết bị đầu cuối mới, điều hướng đến thư mục “máy khách” và cài đặt

cd foldername

7 và

cd foldername

8

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

2

cd foldername

7 cho phép bạn nhanh chóng triển khai một mẫu và các thành phần cho ứng dụng web mới của mình mà không phải làm mọi thứ từ đầu. Và,

cd foldername

8 cài đặt các thành phần bộ định tuyến React cho các ứng dụng web. Đảm bảo ứng dụng máy chủ của bạn vẫn đang chạy

Thiết lập bộ định tuyến React

Hãy bắt đầu bằng cách làm trống thư mục src và thêm hai tệp mới vào đó. mục lục. js và ứng dụng. js

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

3

Bên trong src/chỉ mục. js, chúng ta thêm đoạn mã sau

mern/client/src/index. js

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

4

Chúng tôi đã sử dụng


const AdsContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('/ads').then(response => {
      setData(response.json())
    })
  }, [])

  return (
    
      {children}
    
  )
}

21 để giữ cho giao diện người dùng của chúng tôi đồng bộ với URL. BrowserRouter giúp chuyển đổi liền mạch trong khi chuyển đổi giữa các thành phần. Về cơ bản, nó sẽ chỉ tải lại/làm mới thành phần cần thay đổi thay vì làm mới/tải lại toàn bộ trang. Mặc dù BrowserRouter không phải là thứ cần thiết, nhưng nó là thứ bắt buộc nếu bạn muốn ứng dụng của mình phản hồi nhanh

Tạo thành phần

Sau khi thêm mã vào chỉ mục. js, chúng tôi sẽ tạo một thư mục thành phần bên trong src. Đối với mỗi thành phần chúng tôi tạo, chúng tôi sẽ thêm một thành phần mới. js bên trong thư mục thành phần. Trong trường hợp này, chúng tôi sẽ thêm tạo. js, chỉnh sửa. js, thanh điều hướng. js và danh sách bản ghi. js

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

5

Ảnh chụp nhanh của từng tệp sẽ giống như sau

tạo ra. js

Đoạn mã sau sẽ phục vụ như một thành phần tạo cho hồ sơ của chúng tôi. Sử dụng thành phần này, người dùng có thể tạo một bản ghi mới. Thành phần này sẽ gửi lệnh tạo đến máy chủ của chúng tôi

mern/client/src/thành phần/tạo. js

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

6

chỉnh sửa. js

Đoạn mã sau sẽ phục vụ như một thành phần chỉnh sửa cho hồ sơ của chúng tôi. Nó sẽ sử dụng bố cục tương tự như thành phần tạo và cuối cùng sẽ gửi lệnh cập nhật đến máy chủ của chúng tôi

mern/client/src/thành phần/chỉnh sửa. js

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

7

danh sách bản ghi. js

Đoạn mã sau sẽ đóng vai trò là thành phần xem cho hồ sơ của chúng tôi. Nó sẽ tìm nạp tất cả các bản ghi trong cơ sở dữ liệu của chúng tôi thông qua phương thức GET

mern/client/src/components/recordList. js

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

8

thanh điều hướng. js

trong thanh điều hướng. js, chúng tôi sẽ tạo một thanh điều hướng sẽ liên kết chúng tôi với các thành phần được yêu cầu bằng mã sau

mern/client/src/thành phần/thanh điều hướng. js

import {useQuery} from "react-query";

const AdsContainer = ({children}) => {
  const query = useQuery('todos', () => {
    return fetch("/ads").then(response => {
      return response.json()
    })
  })

  
  /* logics that depends on your data
   * userEffect(() => {}, [data.length])
   */

  return (
    
      {children}
    
  )
}

9

Bây giờ, chúng tôi thêm phần sau vào src/App. js mà chúng ta đã tạo trước đó

mern/client/src/Ứng dụng. js

npx create-react-app foldername

0

Kết nối Front End với Back End

Chúng ta đã hoàn thành việc tạo các thành phần. Chúng tôi cũng đã kết nối ứng dụng React của mình với phần cuối bằng cách sử dụng


const AdsContainer = ({children}) => {
  const [data, setData] = useState();

  useEffect(() => {
    fetch('/ads').then(response => {
      setData(response.json())
    })
  }, [])

  return (
    
      {children}
    
  )
}

22. tìm nạp cung cấp các cách sạch hơn và dễ dàng hơn để xử lý các yêu cầu http. tìm nạp được sử dụng trong tạo. js, chỉnh sửa. js và danh sách bản ghi. js khi chúng xử lý các yêu cầu http. trong tạo. js, chúng tôi đã thêm đoạn mã sau vào khối onSubmit(e). Khi một yêu cầu POST được gửi tới URL tạo, tìm nạp sẽ thêm một bản ghi mới vào cơ sở dữ liệu

npx create-react-app foldername

1

Tương tự, trong chỉnh sửa. js, chúng tôi đã thêm đoạn mã sau vào khối onSubmit(e)

npx create-react-app foldername

2

Chúng tôi cũng đã đặt khối mã sau để chỉnh sửa. js bên dưới khối xây dựng

npx create-react-app foldername

3

Cuối cùng, chúng ta có recordList. js. danh sách bản ghi. js tìm nạp các bản ghi từ cơ sở dữ liệu, vì vậy chúng tôi sẽ sử dụng phương thức get để lấy các bản ghi từ cơ sở dữ liệu. Để đạt được điều này, chúng tôi đã thêm các dòng mã sau vào phía trên hàm recordList() trong recordList. js

npx create-react-app foldername

4

Sau khi đóng mọi thứ, để khởi động ứng dụng, hãy làm theo các bước sau

Đảm bảo rằng ứng dụng máy chủ vẫn đang chạy. Nếu không, hãy bắt đầu bằng cách thực hiện lệnh sau trong thư mục server/

npx create-react-app foldername

5

Quay trở lại thư mục máy khách và chạy lệnh

npx create-react-app foldername

6

Đây là giao diện trang đích của thành phần bản ghi sau khi chúng tôi thêm hai bản ghi cho “Richard” và “Billy” thông qua nút “Tạo bản ghi”

Đây là giao diện màn hình cho phép bạn thêm nhân viên

Chúc mừng bạn đã xây dựng ứng dụng MERN đầu tiên của mình. Để biết thêm ý tưởng và khái niệm nâng cao, hãy truy cập Trung tâm nhà phát triển của chúng tôi hoặc theo dõi hội thảo MERN này để đưa ứng dụng MERN To-Do cơ bản đến một ứng dụng tự động mở rộng, được quản lý hoàn toàn

programming mongodb

Cors mongodb

Ngăn xếp MERN là gì?

Cách bắt đầu với ngăn xếp MERN

Thiết lập dự án

Kết nối với MongoDB Atlas

Điểm cuối API máy chủ

Thiết lập ứng dụng React

Thiết lập bộ định tuyến React

Tạo thành phần

tạo ra. js

chỉnh sửa. js

danh sách bản ghi. js

thanh điều hướng. js

Kết nối Front End với Back End

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội