컴퓨터/react
react mysql
풍경소리^^
2023. 4. 28. 15:07
https://www.youtube.com/watch?v=re3OIOr9dJI&t=1347s
일종의 CRUD 응용 프로그램과 비슷하지만 실제로 구축 할 것입니다.
React Node와 MySQL
VS Code를 열어 Simple Crud라는 폴더를 만들고 프로젝트를 열었습니다.
2개의 폴더를 만들자
mkdir client
mkdir server
client 폴더는 프로젝트의 반응 부분을 모두 포함할 것입니다.
server 폴더는 Node.js 와 관련된 모든 것과
프로젝트의 express 부분을 포함할 것입니다.
클라이언트 폴더로 이동하면
cd client
npx create-react-app . (마침표 주의)
새 터미널을 만들고
현재 클라이언트 폴더 안에 있지만
cd ..
cd server
npm init
모든 질문에 Enter 키를 누르면 됩니다.
왼쪽에 package.json이 표시되는 것을 볼 수 있습니다.
npm install mysql express
React 애플리케이션을 만들 때 불필요한 대부분의 것들을 삭제하는 것입니다
예를 들어 setupTests.js를 삭제할 것이므로
index.css를 삭제하고
logo.svg를 삭제합니다
App.test.js 삭제
index.js 파일을 열어
import './index.css'; 삭제
App.js 파일 편집
App.css 파일 편집
server폴더에
index.js 파일을 만들고
client 터미널로 이동해서
yarn start또는
npm start물건은 um aligned처럼 됩니다. 나는 Prettier라는 확장 프로그램을 사용하고 있습니다 많은 사람들이 나에게 이것을 묻습니다.
정말 멋지다 나는 그것에 대한 비디오를 가지고 있습니다 그것은 기본적으로 모든 것을 정렬하고 저장할 때 만들 때 모든 것을 구성합니다.
귀하의 응용 프로그램 그래서 우리는 div를 만들었습니다 우리는 이것을 I don't know의 클래스 이름을 부여 할 것입니다.
정보를 입력하고 여기에서 CSS를 열어 보겠습니다.
그리고 여기에서 텍스트 정렬 센터라고 말하는 것을 볼 수 있습니다. 우리는 실제로 이것을 삭제할 것이고 우리가 하고 싶은 것은 기본적으로
우리는 우리의 응용 프로그램에 다른 페이지를 갖지 않을 것입니다 이것은 맨 위에 있는 간단한 응용 프로그램입니다 여기 우리는 장소를 가질 것입니다
고용주 또는 관리자가 추가하려는 정보를 입력하도록 합니다.
데이터베이스와 여기 하단에 직원 표시와 시기를 표시하는 버튼이 있습니다.
클릭하면 여기에 표시되므로 기본적으로 응용 프로그램 위에 물건을 쌓고 싶습니다.
서로 관리자 부분은 여기 있고 여기 당신이 보는 부분이 있습니다.
모든 직원에 대한 정보이므로 이를 위해 Display Flex를 사용할 것입니다.
Google과 Stack Overflow에서 코드를 복사하므로 실제로 중요하지 않으므로 표시 플래그를 작성할 것입니다.
서로 겹쳐서 보면 현재 우리가 아직 실제로 아무것도하지 않았기 때문에 약간 변경된 것을 볼 수 있습니다
하지만 중앙에 있는 것을 정당화하고 싶기 때문에 중앙에 바로 정렬하고 싶습니다.
Justify Content Center
바로 여기에 있는 정보 div 내부에서 우리는 기본적으로
너비 300 픽셀
높이 50 픽셀
중앙
너비를 100%로 늘리고 싶습니다.
중앙에 정렬
글꼴 크기를 작성하고 18 픽셀과 같이 제공하면 크기가 증가합니다.
조금 더 20픽셀이면 괜찮고 조금 더 추가해 보겠습니다.
10 픽셀 패딩
버튼 - 직원 추가
데이터베이스이므로 여기에 와서 정보 버튼을 말하여 조금 편집해 보겠습니다.
그리고 여기에서 우리는 너비를 늘릴 것입니다.
우리가 입력에 대해 한 일 중 조금 더 커질 것임을 알 수 있도록 우리는 또한
여백 상단 그래서 나는 여백을 잘못 썼습니다 그래서 여백 상단
15 픽셀 정도의 괜찮아 보이는지 보자 여백을 주자
또한 모든 입력에 대한 여백은 약간의 공간을 제공하고 싶기 때문입니다.
괜찮아요, 버튼의 크기, 너비를 20 정도로 조금 더 늘리겠습니다.
예, 이제 더 좋아 보이는지 봅시다, 그래서 여기에 버튼이 있고 마지막으로 내가 할 일은 그냥 호버링하는 것입니다
이것은 내가 항상 하는 일과 비슷하기 때문에 우리가 그것을 줄 때 이것을 하지 않으면 약간 짜증이 납니다.
호버 효과: 현재 버튼 위로 마우스를 가져가면 커서가
마찬가지로 포인터로 변경하여 마우스를 가져갈 때 이제 포인터가 되도록 하고 싶습니다.
내가 항상하는 일은 괜찮습니다 이것은 우리가 지금 할 모든 CSS이며 우리는 모든 다른 입력을 가지고 있습니다
우리는 기본적으로 화면에 글을 쓸 수 있기 때문에 좋습니다
그러나 현재 우리는 그 정보를 보관할 수 없으며, 여기에 쓰는 정보를 저장할 수 없습니다
내가 Pedro를 쓰고 그 값을 데이터베이스로 보내기 위해 변수로 시작하고 싶다면 우리는 그렇지 않습니다
그렇게 할 수 있다는 것은 우리가 React에서 states and states라는 것을 사용할 것이라는 것입니다
어, 만약 당신이 주에 대해 많이 알지 못한다면 나는 그것에 대한 비디오를 가지고 있지만 기본적으로 우리는 여기에 와서 const와
변수의 이름을 만들어 이름을 지정하고 set name이라는 변수를 변경하는 함수를 말할 수 있습니다.
예를 들어 use state를 작성하고 여기에서
초기 값 name은 문자열이므로 가져 오려는 빈 문자열을 전달할 것입니다.
React의 상태이므로 use state 및
React에서 우리는 이것을 가져오고 있습니다. 상태 후크 및
우리는 이제 그것을 사용할 수 있으므로 솔직히 말해서 당신이 함께 일한 적이 없다면 이 프로젝트에서 정말 중요한 것이 될 것입니다
상태에 대해 너무 깊이 들어가지는 않겠지만 조금 배우는 것이 좋습니다
전에 또는 그렇지 않으면 약간 혼란 스러울 수 있지만 이것은 기본 아이디어이며 변경할 수있는 변수 일뿐입니다.
데이터베이스로 보낼 수 있으므로 상태를 만들어 보겠습니다. 더 많이 만들자
상태 변수가 다르기 때문에 각각 하나씩 5개의 상태를 만들 것입니다.
변수 또는 정보를 보내려는 이름도 나이를 변경하고 싶고 이를 다음으로 변경하겠습니다.
나이 설정 이것은 문자열이 아니므로 숫자가 될 것이므로 그냥 넣을 수 있습니다.
여기서 0과 같이 <>에서 시작하겠습니다 음 이것을 국가로 변경합시다.
이것을 Set Country and Position으로 변경하십시오.
위치를 설정하고 마지막으로 임금 그렇게 임금
Set Set Wage 좋아, 이것도 숫자가 될 것이므로 0
자, 이제 기본적으로 값을 저장할 수 있는 5가지 상태가 있습니다
우리가 여기에 쓰고 이전에 React로 작업한 적이 있다면 실제로 어떻게 이 작업을 잘 수행합니까?
예를 들어 입력으로 이동하기 전에 입력과 상태로 작업했습니다.
name 이것은 name에 대한 입력이며 기본적으로 onchange 이벤트를 제공합니다.
here 내부의 함수와 그 함수는 기본적으로 매우 간단한 함수입니다.
우리가 현재 입력에 쓴 것은 무엇이든 그것은 설정합니다
그것과 같은 상태이므로 기본적으로 여기의 uh 속성 변경에 대해
함수 입력에서 무언가가 바뀔 때마다, 예를 들어 여기에 p를 쓰면 here 내부의 함수를 호출합니다.
내가 e를 작성하면 여기 내부의 함수를 호출합니다. 우리가하고 싶은 것은 간단한 변화가있을 때마다입니다.
변수를 여기에 있는 새 값으로 변경하고 싶기 때문에 어떻게 하면
여기서 이벤트 변수를 가져 와서 인수를 가져 와서 빈 함수를 전달합니다.
그리고 여기에서는 이벤트 도트 대상 값과 동일한 이름을 설정한다고 말할 수 있습니다.
따라서 이 매우 간단한 작업에 약간 혼란스러우시면 걱정하지 마세요.
그러나 당신은 변경되지 않은 이벤트를 전달할 것입니다 : 항상 이벤트 uh 인수가 있습니다.
이것은 입력이고 여기에서 우리가 이 함수 안에서 하는 유일한 일은 이름을 설정하는 것입니다
value event 또는 target의 target 이벤트와 같음 value는 입력의 현재 값이므로 현재 이상
여기 event.target 값은 pe와 같고 d를 넣으면 ped가 될 것이므로 기본입니다.
아이디어와 우리는 모든 입력에 대해 이 작업을 수행하기를 원하므로 여기에 올 이것을 복사할 것입니다.
입력 4h에 대해 변경할 유일한 것은 이것을 설정하여 나이를 설정하는 것입니다.
우리는 1 4 국가에 대해서도 똑같이 할 것이고, 이것을 국가를 설정하기 위해 바꾸고 합시다.
One for position도 마찬가지이며, 이것을 설정하여 position을 설정하고 마지막으로 uh the
하나는 임금을 위해 임금을 설정합니다
좋아요, 이제 우리는 다른 값이나 다른 변수를 갖게 되었습니다.
우리가 여기에 쓴 정보를 저장하고, 우리가 실제로 이것을 잘하고 있는지 확인하고 싶다면, 이것을 해보자, 하자,
뭔가 멋지다, 그래서 우리는 여기에 함수를 정말 빨리 만들 것입니다, 그래서 나는 여러분에게 그것이 단지 디스플레이 정보가 될 것입니다
말 그대로 매우 간단한 기능이며, 할 일은 로그를 콘솔하는 것뿐입니다
이름에 나이를 더한 나라 더하기
직위와 임금은 단지 콘솔 로그일 뿐입니다
이 기능은 기본적으로 현재 우리가 가지고 있는 모든 정보의 콘솔 로그일 뿐이므로 버튼을 클릭하면
그것을 표시하기 위해 우리는 여기에 올 것입니다.
버튼을 클릭하고 버튼을 클릭 할 때마다 함수를 호출하려면 일반 자바 스크립트로 수행하는 방법과 유사합니다.
클릭 시 이벤트와 여기 대신 Display Info라고 부르는 함수의 이름을 입력할 수 있으므로 괜찮습니다.
그러니 여기로 와서 볼 수 있도록 요소를 검사해 보겠습니다.
그리고 그냥 뭐든지, 뭐든지, 뭐든
직원 추가를 클릭하면 여기에 쓴 모든 정보가 바로 옆에 쓰여 있는 것을 볼 수 있습니다.
그것은 우리가 실제로 우리가 여기에 쓴 것을 움켜 쥐고있는 주들이 변수를 저장하고 있다는 것을 의미합니다
그리고 그들은 그것을 변수에 유지하고 있으므로 괜찮습니다, 훌륭합니다, 그것이 우리가 하고 싶은 것입니다.
너희들이 볼 수 있도록 이것을 삭제하고 이제 우리 뒤에서 작업을 시작합시다
끝 지금 백엔드로 작업하려는 이유는 실제로 정보를 보낼 모든 것을 설정했기 때문입니다.
React 앱에서 백엔드로의 프론트 엔드를 통해 백엔드 작업을 시작해야했고
그렇게 해, 나는 여기서 우리의 탐험가를 열 것이고, 나는 우리의 앱을 닫을 것이고.js 우리는 실제로 다음과 같은 일을 할 것입니다.
지금은 클라이언트 폴더를 닫고 지금은 작업하지 않을 것이므로 여기에서 서버 폴더를 열 것입니다
그리고 우리의 인덱스로 가서.js 거기에서 시작해서 우리의 인덱스에서.js 우리는 단지
간단한 익스프레스 서버를 어떻게 잘 할 수 있습니까? 먼저 Express가 필요하므로 const express가 필요합니다.
equals require express 이제 Express 라이브러리의 인스턴스가 있고
우리는 그것으로부터 앱을 만들 수 있으므로 const app은 express와 같습니다.
그리고 바로 아래에서 app.listen 을 작성하여 실제로 앱을 시작할 수 있습니다.
우리는 포트를 선택하고 싶기 때문에 여기에서 3000에서 실행되는 것을 볼 수 있듯이 3001에서 내 포트를 실행할 것입니다. 만약 너라면
오류가 발생하면 포트가 사용 중이므로 포트를 변경해 보십시오. 그래서 3001 그리고 여기에서 나는 전달할 수 있습니다
function from 기본적으로 실제로 실행 중인지 아닌지 알려주므로 빈 함수가 될 것입니다.
여기 하단에 위로.log 메시지가 있고 그 메시지는
예, 서버가 실행 중입니다.
포트 3001에서 이것을 저장하고 실제로 실행 중인지 확인합시다.
노드의 서버 이 작업을 수행하는 방법에 대한 기본 아이디어이며 카메라가 수신되는지 모르겠습니다.
이게 내가 할 일은 이걸 왼쪽으로 조금 밀어 넣는 거야 이게 터미널이야 당신이 볼 수 있는 두 개의 터미널이 있는데 이것은 반응입니다
그리고 이것은 노드 터미널이므로 이를 위해 노드 인덱스를 작성할 것입니다.js 그리고 당신은 그것을 볼 수 있습니다
예, 서버가 파 3001에서 실행 중이라고 말했습니다. 그것은 그것이 실행 중이라는 것을 의미하기 때문에 훌륭하지만 어떻게
실제로 실행 중인지 확인합니까? 여기로 와서 여기를 열고 localhost 3001을 작성할 수 있습니다.
그리고 이 메시지가 여기에 나타나면 작동 중이라는 의미이고 작동 중이라는 의미이며 슬래시를 얻을 수 없다는 것을 알고 있습니다.
그래서 그것은 우리 서버가 지금 실행 중이라는 것을 의미하므로 우리가 원하는 것은 실제로 원하는 것입니다.
이전에 Masquel로 작업한 적이 있다면 프로젝트의 MySQL 부분을 설정하십시오.
MySQL Workbench에 대해 들어 보셨을 것입니다 : MySQL 데이터베이스와 테이블을 시각화 할 수있는 좋은 방법입니다.
나는 확실히 100 추천을 원한다 터미널의 데이터베이스에서 작동하지 않는 것이 좋습니다.
여기에 MySQL 워크 벤치가 있고 실제로 데이터베이스를 만들지 않았으므로 전혀 권장하지 않습니다.
그러나 나는 너희들과 함께하고 싶기 때문에 먼저 MySQL Workbench를 설치하는 것이 좋습니다.
그것은 간단한 응용 프로그램이고 당신이 이것을 생각해낼 때 당신은 응용 프로그램을 열 것이고 당신은 없다는 것을 알게 될 것입니다
이 중 어느 것도 당신에게 나타나지 않을 것입니다 이것은 모두 내 것이고 여기에 데이터베이스를 만들려면 여기 왼쪽으로 올 것입니다
Create Schema를 작성할 예정이므로 이를 만들고 이 직원을 호출해 보겠습니다
시스템 또는 직원 시스템 그냥 이렇게 부르고 적용을 클릭하자 그래서 적용하십시오
즉, 데이터베이스를 만들기 위해 SQL 문을 실행했다는 의미입니다. 여기서 데이터베이스를 찾을 수 있습니다. 보시다시피 직원 시스템입니다
바로 여기에서 화살표를 클릭하면 테이블이라는 장소가 있는 것을 볼 수 있습니다. 아직 테이블을 만들지 않았으므로
테이블을 만들어 보겠습니다. 여기를 마우스 오른쪽 버튼으로 클릭하고 테이블 만들기를 클릭하고 테이블 이름을 지정하겠습니다.
직원과 우리가 원하는 모든 다른 열을 추가하여 첫 번째 열이 되도록 합시다.
직원 ID 그래서 우리는 이것을 보통 부르지 않습니다
직원 ID 우리는 그것을 ID라고 부르며 일반적으로 직원 시스템에서 항상 이렇게합니다
직원 ID가 있습니다 솔직히 말해서 우리가 일반적으로 항상 부르는 ID이기 때문에 실제로 이 ID라고 부르겠습니다
ID에 대한 열이 있고 int 유형이 될 것이고 또한 우리는
기본: 기본적으로 이것은 기본 키이며 우리가 이것을 해야 하고 또한 하지 말아야 한다는 것을 의미합니다.
사용자나 직원을 만들 때 ID가 있어야 하고 마지막으로 우리가 있어야 한다는 것을 알고 있습니다.
자동 증가에 대한 확인 표시를 하고 싶은데, 이는 우리가 다른
직원 ID를 설정하고 싶지 않은 경우 자동으로 이전 ID에 하나를 추가하기만 하면 됩니다.
내 말은, 한 명의 직원을 추가하면 그 직원은 한 명의 ID를 갖게 되고 두 번째 직원은 ID를 갖게 됩니다
두 가지 중 자동 증가이므로 매우 간단합니다. 이제 이름을 추가하려고 합니다.
이걸 텍스트로 바꿔서 2, 5, 5, 이건
내가 모르는 텍스트의 크기만 그냥 넣어두자 그래서 그것은 텍스트가 될 것이고 우리는 우리는 허용하고 싶지 않습니다.
이름 없이 만들어지는 실업자 그래서 null이 아닌 것을 선택하자 그래 괜찮아요
기본적으로 우리가하고 싶은 것은 우리가 추가하고 싶은 유일한 것입니다
나이 an h는 텍스트가 아닌 int이며 우리도 원하지 않습니다.
null로 만든 다음 um을 추가하겠습니다.
사실 우리는 이것을 필요로하지 않습니다, 우리는 이것을 여기에서 열 수 있습니다.
우리가 가진 것은 너무 나이 나라 나라를 추가하자 그것은 또한 텍스트가 될 것입니다
제255절 우리는 null이 될 수 있습니다.
위치와 아니오라고 말하자 나도 실수로
여기에 또 다른 것을 추가했는데 임금이라고 말할 수 있고 잊어버린 것이 될 것이기 때문에 괜찮습니다.
이것을 텍스트로 바꾸고 255도 넣자 255를 넣을거야 원하는대로 넣을 수 있지만
이것은 최대 크기이므로 나는 그것이 정말로 중요하지 않다고 생각하는 것처럼 퍼팅하고 있습니다.
255자로 된 나라가 있으니 그냥 아무거나 넣어두자 이제 추가해 보겠습니다.
int는 임금이 정수이고 no가 아니기 때문에 우리가 원하는 모든 것을 만들었습니다.
그리고 실제로 이것을 만들기 위해서는 아직 테이블을 만들지 않았으므로 여기 하단에 적용해야 합니다.
이것은 데이터베이스에 테이블을 만드는 SQL 문이며 다음과 같이 적용 할 것입니다.
올바르게 실행되었고 우리는 여기에서 닫을 것입니다 나는 이것을 여기에서 닫을 것이고 우리는 당신이 할 수 있는 우리의 데이터베이스를 볼 것입니다
여기 직원 시스템 왼쪽에 새 테이블이 생성되어 모든 테이블을 보려면 직원이라고 합니다.
해당 테이블에 포함된 데이터는 여기를 마우스 오른쪽 버튼으로 클릭하고 행 제한 1000 선택을 클릭할 수 있습니다.
따라서 실제로 아무것도 추가하지 않았기 때문에 데이터가 없는 테이블이 표시되는 것을 볼 수 있습니다
그 안에 MySQL 테이블이 있으므로 백엔드 작업을 시작할 것이므로 여기에서 열어 보겠습니다.
그리고 우리의 파일과 mysql을 가져 오자. 그래서 그것을 가져 오기 위해 우리는 말할 수 있습니다
const mysql 은 MySQL을 요구하는 것과 같으므로 mysql을 사용하면
데이터베이스에 대한 연결과 이것은 많은 사람들이 오류를 얻는 부분이므로 최대한 설명하려고 노력할 것입니다.
가능하므로 내가 하는 방법을 정확히 복사할 수 있으므로 db db4 데이터베이스라는 변수를 만들 수 있습니다.
이것은 데이터베이스가 무엇이든 삭제하기 위해 삽입 할 모든 호출을 수행하는 데 사용할 변수입니다.
당신이하고 싶은, 우리는 그것을 mysql dot create connection 및 create connection 과 동일하게 설정할 것입니다.
이제 여기 대신 물체를 지나쳐 중괄호를 열고 닫은 것을 볼 수 있습니다
그리고 이 객체는 TR 데이터베이스에 관한 모든 다른 정보를 포함할 것입니다.
예제 사용자는 우리를 보여줄 수도 있고 사용자는 일반적으로 루트라고 불리므로 루트를 넣으십시오.
당신은 사용자를 변경했습니다 그럼 대단합니다 나는 그것이 표준이기 때문에 내 루트라고 부를 것입니다.
일반적으로 localhost 이므로 localhost 인 호스트
그런 다음 암호를 추가하고 싶은데 실제로 오류가 발생하는 부분입니다.
따라서 일반적으로 어떤 이유로 MySQL Workbench를 다운로드 한 경우 일반적으로 암호입니다.
이와 같이 빈 암호이거나 제 경우처럼
비밀번호가 어느 것이 귀하의 것인지 모르겠습니다. 실제로 비밀번호를 입력하지 않으려 고 시도해보십시오. 작동하지 않으면 먼저 이렇게 시도하십시오.
암호를 시도하지만 이제 데이터베이스를 넣으려는 두 가지 중 하나에서 작동해야 합니다.
따라서 데이터베이스는 우리가 만든 데이터베이스의 이름일 뿐이며 가능한 한 직원 시스템이라고 불렀습니다
바로 여기 우리가 그것을 어떻게 불렀는지 정확히 넣어야 하므로 여기에 쓰도록 합시다 직원
시스템 그래서 우리는 이것을 저장할 것이고 이제 우리는 모든 쿼리를 만들 수 있는 tb라는 변수를 갖게 되었습니다.
따라서 node.js express에서 요청을 만들려면 API를 만듭니다.
엔드 포인트, 앱에 대한 앱, 여기에서 만든 변수를 작성할 수 있습니다.
get과 같은 것이 옳은 아이디어이므로 POST 요청을 만들어 보겠습니다.
기본적으로 POST 요청을하기 위해 데이터베이스에 UH 항목을 삽입 할 것입니다.
익스프레스를 사용하면 경로를 넣어야 합니다. 경로가 의미하는 바는 여기에서 볼 수 있습니다.
localhost 2001입니다. 따라서 프론트엔드에서 POST 요청을 하고 싶을 때 경로를 호출하고 싶지만 할 수 없습니다.
localhost 2001에 모든 것을 직접 넣으면 네 가지 작업만 수행할 수 있습니다
앱만 있기 때문에 게시물만 있고 바로 삭제하면 기본입니다
예를 들어, 사용자를 만들고 싶다면 Let's Our Employee, Let's Let's Let's
Create라는 경로를 만듭니다. 이 경로는 Create라는 경로이며 사용자를 생성하려는 경우
프론트 엔드로 가서 localhost 2001 슬래시 생성에 요청하면 아이디어가 맞습니다.
우리는 Create라는 경로를 만들었고 여기에서 통과해야 합니다
두 개의 변수는 랙 (rack)이라고 부르고 다른 하나는 해상도 (res)라고 부르며, 기본적으로 혼란 스럽다면
UM을 만들 때마다 Rec.Res는 다음과 같은 요청을 의미합니다.
예를 들어 프론트 엔드에서 보낸 것을 가져 오려는 경우 표준 항목입니다. 예를 들어 보내려는 경우 요청을 사용합니다.
프론트엔드에 대한 무언가 당신은 REST 응답을 사용하므로 바로 여기에서 우리는 이것이 인수이고 이것이 바로 이것입니다.
는 함수이므로 이것이 표준 구문이며 여기에서 논리 작업을 시작할 수 있으므로 가장 먼저 원하는 것은
get은 실제로 프론트 엔드에서 보낸 변수이므로 여기에서 모든 것을 볼 수 있습니다.
프론트 엔드의 이러한 변수와 프론트 엔드에서 백엔드로 요청할 때 우리가하지 않은 변수를 보낼 것입니다
지금 당장 그렇게 했지만 우리가 그 변수들을 잡을 것이기 때문에 이미 했다고 상상해 봅시다.
프론트 엔드에서 백엔드로 변수를 가져 오려면 여기로 와서 예를 들어
name과 같게 설정하고 rec와 같게 설정합니다. 요청 도트 본문 점 변수의 이름
프론트 엔드에서 전송되고 프런트 엔드에서 해당 변수를 보낼 때
우리는 그것을 이름이라고 부르고 싶습니다 맞습니다 나는 그것을 이름으로 부를 것입니다 그러나 당신은 당신이 원하는대로 그것을 부를 수 있습니다 그러나 당신이 그것을 이름으로 부르면 여기 당신은
앞에서 보낼 때 이름으로 보내야하므로 혼란스럽지 않기를 바랍니다.
프론트 엔드에서 정보를 얻는 방법 그래서 나이를 잡을 것이기 때문에 다섯 번 복사하여 붙여 넣을 것입니다
나이가 될 것이므로 나이가 너무 많아서 우리가 원하는 다른 것을 잡고 싶습니다
나라 그래서 나라 그리고 나라를 넣자
그럼 포지션을 넣고 포지션을 넣어 봅시다
임금 마침내 임금과 임금 괜찮아요 그래서 우리는 4 개 5 개를 가지고 있습니다
변수 이것은 우리가 데이터베이스로 보낼 네 개의 변수와 같은 값입니다
그리고 이제 당신은 어떻게 삽입합니까?
우리 데이터베이스에 물건을 넣으면 여기에 와서 아주 간단하게 할 수 있고 그건 그렇고 나는 당신이 여기에 올 수 있도록 모든 것을 들여 쓸 것입니다
그리고 여기에서 만든 변수 db를 사용하여 도트 쿼리를 작성하고
여기에 SQL 문을 넣을 수 있으며 SQL로 작업한 적이 있다면 무언가를 삽입할 수 있다는 것을 알 수 있습니다.
우리의 데이터베이스에 우리는 알고있는 데이터베이스의 이름에 삽입을 쓸 것입니다
테이블 이름 미안하지만 살펴 보겠습니다 우리는 그것을 직원이라고 불렀습니다 이것은 테이블의 이름이므로
직원이라고 부르기 직원 UM에 삽입
이제 삽입하려는 열을 전달해야하며 우리의 경우 무엇을 원합니까?
Insert 라는 열에 이름을 지정하고, age라는 열,
국가는 직위(position)라는 열과 임금(wage)이라는 열, 그리고 우리는
값을 쓰십시오 여러분이 값을 볼 수 있도록 이것의 크기를 늘릴 것입니다
그리고 여기에 일이 일어나기 시작하는 곳이므로 여기에서 우리가 삽입하고 싶은 것을 보고 있습니다.
열의 Employees 테이블, 이름, 나이, 국가, 직위 및 임금 값
그리고 여기에 값을 올바르게 넣어야 하지만 잠깐만요, 실제로 여기에 직접 값을 넣지 마세요.
당신은 보통 여기에 물음표를 붙이고 혼란스러워 보일 수 있다는 것을 알고 있지만 나는 너희들에게 보여줄 것이다
이것이 의미하는 바는 5 개의 물음표, 1, 2, 3, 4, 5 및 그 물음표를 넣습니다.
변수를 잘 나타냅니다. 값을 넣는 것과 같은 질문을 실제로 어떻게 사용합니까?
우리가 그 물음표에 들어갔다는 것, 글쎄, 여기 바로 옆에 올 수 있고 배열을 전달할 수 있습니다
이 배열에서 배열의 각 요소는 하나의 물음표를 나타내므로 첫 번째 요소는
이 배열에서 바로 여기에서 볼 수 있듯이 나이여야 하는 첫 번째 값이 될 것이므로
아니 나이 아니 이름 그래서 여기에 이름을 전달하자 그럼 그냥 순서대로 넣어 보자 이름 나이
국가 위치 및 대기 이름 나이 국가 위치
좋아, 그래서 이것의 아이디어는 이 변수를 SQL 문에 직접 넣는 대신입니다
우리는 그것을 바로 옆에 배열로 놓고 여기에 물음표를 붙이고 있는데 이것은 훌륭합니다 이것은 우리가 가진 훌륭한 기능입니다.
사용할 수 있고 이것은 표준과 같습니다.
뒤에 쉼표를 넣을 수 있고 바로 여기에 기본적으로 무엇을 나타내는 콜백 함수를 넣어야 합니다.
진술이 끝난 후 일반적으로 우리가 하는 일은 두 개를 두드리는 것입니다
변수 오류 및 결과 오류는 SQL 문을 만드는 동안 오류가 발생한 경우 화살표입니다.
여기에 표시되고 result는 해당 명령문의 결과일 뿐이므로 이를 사용하여 함수를 만들어 보겠습니다.
두 개의 변수와 여기에서 오류가 있는 경우 오류가 있는 경우 다음을 수행할 수 있습니다.
그런데 [음악] 어 콘솔이 오류를 기록하고 싶습니다.
웬일인지 내가 살고있는 곳에서 비가 많이 내리기 시작했는데 비가 내리지 않았고 오디오가 일종인지 모르겠습니다.
비를 잡는 것처럼 나는 그렇지 않기를 바라지 만, 이것이 아마도 그 이유라고 말하는 것입니다.
오류가 발생하면 소리가 들립니다.log 그렇지 않으면
그냥 난 몰라 res dot send uh yo no 사실 나는 말하지 않을거야
내가 말하려는 것은 값 삽입 그래서 당신은 잘 궁금해 할 것입니다.
res.send 글쎄, 우리는 요청을 바로 끝내고 싶기 때문에 res.send라고 말할 수 있습니다.
기본적으로 메시지와 같은 메시지를 보내거나 변수를 보낼 수 있으며 원하는 것은 무엇이든 보낼 수 있습니다.
우리는 단지 가치를 말하는 메시지를 보내고 있습니다. 우리가 그것을 알 수 있도록 요청에 삽입 된 값
실제로 작동했기 때문에 오류가 있으면 콘솔에 기록하고 다른 경우에는 그냥 보냅니다.
값이 삽입되었다는 메시지는 이제 끝났으니 할 수 있습니다.
이대로 조금 남겨두면 코드를 게시하여 github에서 볼 수 있도록 코드가 확실히
설명 당신이 그것을 확인하고 싶다면 그것은 훌륭하므로 기본적으로 이것은 우리가 이러한 변수를 만든 아이디어입니다.
그리고 우리는 그것들을 데이터베이스에 넣고 있지만 이제 그 변수를 어떻게 보내는지 궁금해 할 것입니다.
우리의 백엔드 글쎄, 우리는 지금 당장 그것을 할 것입니다, 나는 여기에서 열 것이고, 나는 여기에 올 것입니다, 나는 이 인덱스를 닫을 것입니다.js
그리고 저는 여기 우리 클라이언트에게 와서 우리의 반응 부분으로 다시 작업할 것이므로 우리 앱에서.js 여기 저는
이것을 조금 닫으십시오 우리는 실제로 라이브러리를 삽입 할 것이므로 일반적으로 좋아하지 않습니다.
이 초보자의 튜토리얼 비디오에서 외부 라이브러리를 사용하지만 요청으로 작업하고 있기 때문에
그리고 API를 만드는 것은 다음과 같은 것입니다.
더 쉽고 X Use라는 매우 유명한 라이브러리입니다. 당신이 그것에 대해 듣기 전에 내 채널에 있었다면 기본적으로 Axios와 나는 만들 것입니다
여기 터미널은 실제로 이전 터미널을 사용하지 않을 것이므로 여기 React 터미널로 올 것입니다.
현재 React를 실행 중이므로 Control C를 작성하여 React 부분 실행을 중지하여
변명 라이브러리를 설치하고 기본적으로 yarn을 실행하여 설치하겠습니다.
exuse 또는 npm install x 를 원한다면
클라이언트 폴더 우리는 Axis를 추가하고 있으며 X가 잘 사용하는 것은 매우 유명한 라이브러리입니다.
API에 요청하기 다른 사람이 만든 공개 API와 같습니다.
또는 자신의 것이므로 이제 설치되었으므로 다시 원사를 시작할 것입니다.
그리고 그것은 여기로 넘어갈 것이므로 이제 설치되었으므로 우리는 여기로 올 것입니다.
상단의 axios에 액세스하므로 x를 가져 오기 위해 import 를 작성하겠습니다.
axios에서 x 사용 바로 여기에서
제대로 작동하므로 Axis는 요청을 할 때만 사용되므로 언제 요청을 잘 하고 싶습니까?
우리는 고용에서 이 버튼을 클릭할 때 요청을 하고 싶기 때문에 그렇게 하기 위해 여기에 와서 const라고 말할 것입니다.
직원 추가와 같은 것은 함수와 같으며이 기능은 매우 간단합니다.
우리는 단지 여기에 올 것이고, 우리는 이것을 버튼과 클릭할 때 호출하고 싶은 이벤트를 제공할 것입니다.
Add Employee 함수 그래서 이 함수 안에서 우리가 하고 싶은 것은 기본적으로
액세스 요청, 이제 Axios를 잡자, 우리는 실제로 POST 요청을 생성했기 때문에 POST 요청을 할 것입니다.
그리고 우리가 여기에 넣은 것은 끝점이 무엇인지 포함하는 문자열입니다
우리가 만들고 싶다는 것, 요청에 우리가 우리 서버에 끝점을 만들었다는 것을 기억하고 싶다는 것;
slash create 라고 부르는 이 작업을 어떻게 잘 수행합니까?
여기에 붙여넣고 마지막에 슬래시라고 말할 것입니다
이것이 지금 요청하려는 엔드포인트이기 때문에 create access.post
이제 우리는 프론트 엔드에서 백엔드로 정보를 보내고 있다는 것을 기억하고 있습니다.
우리가 실제로 그 정보를 어디로 보내는지 궁금해하는 것은 바로 여기에 있습니다.
쉼표: 여기, 이것은 본문으로 간주되므로 우리는 친구를 바로 보내고 그 본문은 객체입니다.
그래서 우리는 곱슬을 열고 닫는 것을 알고 있다는 것을 추가하여 여기에 개체를 넣을 것입니다
중괄호와 여기 안에 우리는 그 객체의 모든 다른 속성을 추가 할 수 있습니다.
우리가 원하는 속성은 값이 여기에 있는 name 변수인 이름을 원합니다.
우리는 나이를 원하는데, 다시 한 번 우리가 갔던 나이 변수, 즉 그 나라에 갔던 나이입니다
그리고 나는 이것을 저장하여 너희들에게 더 명확해지도록 할 것이고, 우리는 어, 내가 이것을 열 것입니다.
그런 다음 우리는 직위를 원하고 임금을 원합니다
이건 임금이고 괜찮으니 좀 헷갈리시면 이건 물건이라고 생각해보세요
이것은 body 객체이고 우리는 이 객체를 백엔드로 보냅니다
그리고 그 안에 우리는 키 값 쌍과 같은 키 val을 갖고 싶기 때문에 기본적으로 이것이 키입니다.
name을 입력하고 키 이름에 대해 우리가 가지고 있는 변수인 값 name을 전달하려고 합니다.
여기 상태: 모든 변수에 대해 이 작업을 수행하여 인덱스의 백엔드에 올 때.js
그리고 우리는 다음과 같은 name 이라는 변수를 만들고 싶다고 말합니다 rec.body.name
이제 Buddy는 이름이 포함 된 객체입니다. 바로 여기에서 볼 수 있듯이 본문 내부에 속성 이름을 만들었습니다.
이제 이 속성은 여기서 만든 상태인 값 이름을 가지므로 값을 백엔드에 전달합니다
대단하니 이걸 저장하고 마지막까지 POST 요청이 끝날 때와 같이 약속이기 때문에
만약 당신이 약속과 혼동한다면, 이것은 아마도 그것을 배울 수있는 좋은 기회 일 것입니다.
간단하게: 기본적으로 요청이 언제 완료되는지 알 수 없으므로 다음과 같이 말할 수 있습니다.
dot은 요청이 완료될 때까지 전체 기능이 중지됨을 의미합니다.
access.post 요청이 완료될 때까지 기본적으로 원하지 않습니다.
우리가 지금 콘솔과 같은 응답을 잡을 수도 있고.log 여기에 함수를 전달할 것입니다
어느 것이 위로.log 성공으로 이어지므로 괜찮습니다.
우리는 이 엔드포인트에 보내는 POST 요청을 하고 있으며, 이 정보를 보내고 있습니다.
기본적으로 성공이라는 단어의 콘솔 로그 인 콜백 함수가 있으므로 괜찮습니다.
이것을 저장하려고 움 여기 우리 인덱스로 오자.js 그건 그렇고 나는 내가 평소에 사용하는 것을 좋아하지 않았습니다.
nodemon이라는 백엔드의 패키지 이 비디오에서는 Node One을 사용하지 않을 것입니다. 오래된 모드에 대해 이야기하는 비디오가 있습니다.
음, 복잡하게 만들고 싶지는 않지만 기본적으로 원할 때마다 인덱스.js 서버를 변경합니다.
다시 실행해야 하므로 여기 서버용 터미널로 오시면
너희들이 더 잘 볼 수 있도록 이 터미널을 조금 열어봐, 이걸 조금만 밀어보자
너희들은 여기에서 그것을 볼 수 있습니다, 나는 ctrl c를 작성하여 터미널을 닫을 것입니다.
노드 인덱스를 다시 작성하려면.js 다시 실행됩니다.
그리고 오류가 없었기 때문에 우리가 여기에 와서 이제 정보를 데이터베이스로 보내려고 합니다
데이터베이스를 보셨으니 비어 있으니 다시 해보겠습니다 pedro라는 직원을 추가해 보겠습니다
내 그림자 그건 내 이름이야 여기에 내 나이를 넣을거야 19 우리는 내 나라 브라질을 추가 할 것입니다
내 위치를 끝낼거야 uh 나는 풀 스택 개발자를 모른다 내 임금 내가 정말로 만들고 싶다
나는 내가 일년에 80 만 달러와 같은 미친 것을 넣을 것이라는 것을 모른다.
내가 일년에 십만, 십만, 800,000을 번다고 상상해 봅시다
그래서 오류가 있다는 말이 있었는데 이건 대단해요 나는 항상 이것을 하는 것을 잊어버립니다 당신은 아마 이것을 접하게 될 것입니다
오류도 있고 왜 이런 일이 잘 일어나는지 궁금해 할 것입니다
이런 일이 발생하는 이유는 코스를 추가하지 않았고 지금 당장 코스를 추가할 예정이므로 기본적으로 코스가 무엇인지
UM의 도서관 일 뿐이며 다음과 같은 아이디어 일뿐입니다.
자신의 앞에서 자신의 API로 API에서 자신의 API로 요청하는 것과 같이 자신의 API에서 백엔드로 요청
코스를 사용하여 허용해야하므로 바로 여기에 코스를 설치합시다 다시 가겠습니다
서버에 대해 여기에서 내 터미널을 엽니 다. 나는 닫을 것이다.
Ctrl C를 눌러 제어를 작성하여 실행중인 서버는 npm install 을 작성하겠습니다.
물론 코스를 설치할 것이고 이제 설치되었으므로 여기로 와서 const 코스를 작성하겠습니다.
코스가 필요한 것과 같습니다 그건 그렇고 코스가 헷갈리시면 걱정하지 마세요 혼란스러웠어요 uh 너무 헷갈렸어요
네트워킹에 대해 더 많이 배우기 시작할 때까지 처음 10 개월 동안 전혀 걱정하지 마십시오.
중요: 이것이 항상 해야 할 일이라는 것을 알아두세요 app.use를 작성해야 합니다.
물론 이제이 오류가 수정되어 프론트 엔드에서 백엔드로 요청할 수 있습니다.
그래서 이것을 저장합시다 우리는 노드 인덱스로 서버를 다시 실행할 것입니다.js 나는 이것을 왼쪽으로 밀어 넣을 것입니다
그리고 우리의 정보는 이미 백엔드의 오류였기 때문에 요청조차 할 수 없었습니다
물론 코스가 설치되었으므로 직원 추가를 다시 클릭하기만 하면 프런트 엔드를 새로 고칠 필요가 없습니다
또는 우리가 만든 모든 변경 사항이 백엔드에 있었기 때문에 직원 추가를 다시 클릭해 보겠습니다.
그리고 우리는 우리가 오류가 없다는 것을 알 수 있으며 어떤 종류의 오류인지 보여줄 수 있기 때문에 훌륭합니다.
오류가 발생하므로 여기에서 오류를 살펴보면 속성 이름을 읽을 수 없다고 말한 콘솔 로그가 무엇인지 확인할 수 있습니다.
정의되지 않은 우물의 분명히 이름이 정의되지 않았으므로 여기에 있습니다.
정의되지 않음 무슨 일이 일어 났는지 살펴 보겠습니다. 글쎄, 뭔가 훌륭하다 그것은 그것을 의미합니다
요청이 이루어졌지만 분명히 이름이 정의되지 않았습니다.
그래서 그것은 아니오에 있습니다 그것은 실제로 여기에 없습니다 그것은 16에 있습니다 예 여기 있습니다
name이 정의되지 않았습니다. 이것은 우리가 여기서 실수를 저질렀다는 것을 의미합니다.
자, 먼저 콘솔 이름을 기록하고 콘솔.log 이름을 말하여 실제로 단어를 잡고 있는지 확인합시다.
이름 그래서 직원 추가를 클릭하고 예, 실제로 pedro my 값이 있습니다.
왼쪽에 그림자가 있어서 실제로 단어 이름을 잡고 있는데 왜 잘 작동하지 않는지 살펴보겠습니다.
um 이름 이름 여기에 값을 전달합니다.
맞아요 음 좋아요 X는 반대합니다 맞습니다
작동해야합니다 이름을 설정하겠습니다 콘솔.log 이름은 여기에 있으므로 단점
그래서 실제로 로그하자 console.log rack.buddy 그래서 우리는 객체를 볼 수 있습니다.
우리는 프론트엔드에서 벗어나고 있으니 여기로 와서 그냥 합시다
이것을 새로 고치고, 여기로 와서 React로 와서 Add Employee를 다시 클릭해 보겠습니다. 콘솔이 무엇인지 살펴보겠습니다
우리 서버에 잘 로그인했는데 분명히 뭔가가 있었습니까?
콘솔이 로그 한 상단을 살펴 보겠습니다.
백엔드로 변경 실제로 서버를 다시 시작하지 않았으므로 노드 인덱스를 작성하여 서버를 다시 시작하겠습니다.js 다시
직원에게 요청하십시오 여기 상단을 살펴 보겠습니다 정의되지 않은 것을 볼 수 있습니다
우리가 실제로 프론트 엔드에서 백엔드로 본문을 보내지 않는다는 것을 의미합니다.
왜 이런 일이 일어나는지 실제로 모르겠지만 알아낼 것이고 내가 알아 냈을 때 돌아와서 설명하겠습니다
얘들아, 내가 돌아왔어 이건 아주 어리석은 실수였어 왠지 이걸 잊어버렸어 벌써
다른 비디오에서와 같이 이것을 잊어버렸고 아마도 항상 잊어버릴 것이지만 오류가 무엇인지 알고 있습니다.
JSON 미들웨어를 적용하기 만하면됩니다.
프론트 엔드에서 우리는 실제로 JSON을 구문 분석하는데, 혼란스럽게 들릴 수도 있지만 여러분에게 설명하겠습니다
유일한 해결책은 여기에 와서 app.use를 작성하는 것입니다.
모든 것을 고쳐야 하는 도트 json 그래서 도트 json 표현
이제 서버를 다시 실행하는 Control C를 작성하여 서버를 다시 시작하겠습니다.
서버 나는 이것이 작동 할 것이라는 것이 긍정적입니다 예, 그래서 작동합니다 여기에서 볼 수 있습니다 성공이라고 말합니다
그리고 그것은 분명히 요청이 올바르게 이루어 졌음을 의미하므로 데이터베이스를 살펴 보겠습니다.
데이터가 삽입되었는지 확인하기 위해 직원 시스템에서 모두 선택한 것을 볼 수 있습니다.
우리가 말했듯이 규칙 선택을 클릭했을 때 다시 호출하려면 이것을 클릭하기만 하면 됩니다.
여기 번개처럼 클릭하기만 하면 데이터가 데이터베이스에 있는 것을 볼 수 있습니다
그것은 우리의 요청이 작동하고 있다는 것을 의미하며, 프론트 엔드에서 정보를 얻고 있다는 것을 의미하며, 데이터베이스 연결을 의미합니다.
우리가 여기를 클릭했을 때 작동했기 때문에 이것이 작동했고 이 지점에 도달했다면 많은 것들이 있다는 것을 의미합니다.
당신을 위해 일했기 때문에 이제 우리가 해야 할 일은 기본적으로 조금 더 일하는 것이고 우리는 이것으로 끝내야 합니다.
가장 어려운 부분은 오류 없이 물건을 설정하는 것이기 때문에 우리가 통과한 것입니다
이제 우리는 뒤에서 프론트 엔드로 정보를 보낼 수 있으므로 그 정보를보고 싶습니다
맞아요, 어떻게 우리가 그것을 잘 볼 수 있습니까? 우리는 여기 우리의 앱으로.js 우리의 기본적으로 우리의
우리 서버는 프론트 엔드를 여기에 두고 내가 하고 싶은 것은 줄 바꿈을 추가하고 싶다는 것입니다.
부서처럼, 우리는 당신이 볼 수 있는 것처럼 볼 수 있습니다, 이것은 기본적으로 내가 추가하고 있는 것입니다.
음, 내가 뭘 잘못했나요?
[음악] 좋아, 어쩌면 줄 바꿈을 추가하지 않을거야
나는 단지 여기에 뭔가를 추가하고 싶었습니다 내가 이런 일을했다면 괜찮아 보이는지 보자.
이건 이게 아니야, 이건 네가해야 할 일이 아니야, 하지만 여기에 많은 줄을 넣어서 아이디어를 얻을 수 있도록 할거야
어, 우리처럼, 여기는 다른 곳이야, 그래, 그래, 이게 우리가 옳은 일을 하고 있는 거야
이것은 우리의 프로젝트이며 여기 하단에 다음과 같은 버튼이 있기를 원합니다.
직원 표시 해당 버튼을 클릭하면 데이터베이스에 있는 모든 직원이 표시되고
각 직원에 대한 정보, 그래서 우리가 그것을 할 방법은 우리가 여기로 올 것입니다, 우리는 그냥 갈 것입니다
여기로 오기 위해 우리는 버튼을 만들 것입니다 우리는 바로 여기 버튼과 이 버튼에 갈 것입니다
직원에게 표시하므로 직원에게 이 버튼이 끝났음을 보여줍니다.
여기에서 이 버튼을 클릭하면 모든 직원을 표시할 수 있으므로 좋습니다
그리고 우리가 실제로 직원들에게 어떻게 보여줄까요? 내가 싫어하는 것은 일종의 간격이 있는 것과 같아서 내가 실제로 할 일은
여기로 와서 이 정보를 제거하겠습니다.버튼 나는 이것을 모든 버튼에 적용하는 것을 좋아할 것입니다.
화면은 바로 여기에서 볼 수 있는 것과 같은 버튼이므로 여기에서 내가 하고 싶은 것은 내가 원하는 것입니다.
여기 이 버튼 주위에 div를 추가하려면 이것을 약간 줄이겠습니다
나는 이것을 조금 늘릴 것이고 우리는 이것을 감싸기 위해 div를 추가 할 것입니다.
그리고 여기에서 우리는 이 클래스 이름을 이 클래스 이름이 될 클래스 이름을 부여할 것입니다
직원 여러분, 그래서 우리는 여기 우리 앱으로 올 것입니다.css 우리는 단지 말할 것입니다
직원들과 지금은 디스플레이 플레이라고 말할 수 있기 때문에 괜찮습니다
flex 그런 다음 실제로 이미 flex 방향을 지정하고 싶습니다.
좋아, 우리는 항목을 중앙에 정렬하고 원하는 너비로 정렬 할 것입니다.
100% 괜찮아요
정렬 된 배경색을 지정하자 그래서 아쿠아 보자 네, 지금 작동 중입니다.
기본적으로 우리가하고 싶은 것은 콘텐츠 센터를 정당화하고 싶다는 것입니다.
어, 예, 이 경우에는 작동 중이기 때문에 작동하는 작업입니다.
플렉스 방향 칼럼 좋아, 이제 우리가 중심을 잡았어.
모든 것, 배경색을 변경해 보겠습니다. 이제 이 버튼을 클릭하면 바로 여기에 버튼이 있습니다
우리는 모든 직원의 목록을 표시하고 싶고 각 직원은 고용주와 같은 정보를 가지고 있어야 합니다
자, 그럼 어떻게 할 수 있는지 봅시다, 닫자, 앱을 닫자.css 그리고 여기에서 함수를 만들어 봅시다
맞아요, 우리 주, 실제로 우리는 직원 목록이라는 주를 만들 것입니다
따라서 상태를 만들려면 여기에서 직원 목록이라고 말할 수 있으며 모든 세트가 필요합니다.
employee list 함수를 사용하고 use state와 같을 것이며 배열 또는
list 그래서 여기의 초기 값은 빈 배열이 될 것이므로이 직원 목록은 무엇을 말합니까?
우리가 요청을 할 때 우리는 현재 데이터베이스에 있는 모든 정보를 얻고 싶습니다.
그리고 우리는 그 모든 정보를 목록에 저장하고 그것을 표시할 것입니다
여기에 나열하는 것이 기본 아이디어입니다.
글쎄, 우리는 여기에 올 것입니다, 우리는 말할 것입니다, const는 직원을 얻습니다, 그것은 단지 기능일 뿐입니다.
생성하고이 기능에서 우리는 넥서스 요청을 할 것이므로 이것을 잡을 것이고 분명히 우리는 가지 않을 것입니다
무엇이든 보내려면 데이터베이스의 모든 직원을 가져오고 싶기 때문에 이것을 제거합시다.
또한 POST 요청이 아니라 GET 요청이 될 것이므로 Access.get을 가져 오십시오.
아직 끝점을 수정하지만 기본적으로 이것을 다음과 같이 변경하려고 합니다.
Get So Get Employees So Employee 라는 끝점을 만들어 보겠습니다.
3001명의 직원과 그것은 get 요청이 될 것이고 그 다음에는 다르게 될 것입니다
AT 직원으로부터 데이터베이스에 무언가를 추가 할 때 우리는 올바른 것을 받고 싶지 않습니다.
그러나 이번에 우리는 실제로 응답을 받고 싶습니다.
그런 다음 응답을 받을 것이라고 응답할 수 있으며 바로 여기 응답에는 우리가 보낸 모든 것이 포함됩니다.
백엔드 이제 바로 콘솔에 응답을 기록해 보겠습니다.
그래서 괜찮고 바로 여기 버튼에서 클릭 시 클릭 이벤트를 제공하고 GET을 전달할 것입니다.
직원 여러분, 이 버튼을 클릭하면 백엔드에서 직원을 가져오고 싶습니다.
아직 이 끝점을 만들지 않았으므로 지금 바로 만들어 보겠습니다.js 인덱스로 이동하면 다음을 볼 수 있습니다.
여기에 POST 요청이 있습니다. 이를 변경하고 app.get get 요청인 요청을 만들어 보겠습니다.
그리고 우리가 만든 엔드포인트는 uh slash 직원이었기 때문에 그냥 슬래시라고 말할 수 있습니다
직원들과 여기에서도 같은 일을 하고 싶습니다.
res 및 함수는 이것이 생성 할 때 표준임을 기억하십시오.
Express를 사용하여 요청하므로 프런트 엔드에서 원하는 것을 보내지 않습니다.
물건을 받기 위해 우리는 데이터베이스에서 모든 것을 받기를 원하므로 이 모든 작업을 수행할 필요가 없습니다.
실제로 무엇이든 보내지만 실제로 이것을 해야 하므로 어떻게 해야 합니까?
여기에 db dot query라고 말하고 mysql로 작업하기 전에
테이블에서 데이터베이스의 모든 것을 선택하십시오.
이 별표는 직원 인 테이블 이름에서 모두 의미합니다.
이것은 말 그대로 우리가하고 싶은 일이며 우리는 실제로 변수가있는 배열을 전달하지 않을 것입니다.
우리가 요청하고 있는 요청에 어떤 변수도 보내지 않고 우리가 선택하고 싶은 것을 잘 알고 싶지 않습니다.
직원들의 모든 것이 괜찮지 만 실제로 여기서 뭔가를해야하는데 마지막 일을하고 싶습니다.
오류와 결과 함수를 전달하기만 하면 되므로 어떻게 해야 하는지 여기에 와서 오류라고 말하겠습니다.
우리가 이전에했던 것과 같은 결과이며 단지 기능 일뿐입니다.
오류가 발생하면 콘솔에 오류를 기록하고 싶습니다.log
오류가 발생하고 그렇지 않으면 이번에는 실제로 결과로 무언가를 할 것입니다.
삽입 된 res.send 값이이 정보를 뒤에서 앞으로 보냈다고 말했습니다
값이 잘 삽입되었다는 메시지로 끝나고 이번에는 실제로 원하는 정보를 더 많이 보내고 싶을 수도 있습니다.
이 요청의 결과를 보내서 우리가 할 수 있는 일은 여기에 res dot send라고 말하거나 그냥 사용할 수 있다는 것입니다.
rest.json2 이것은 또 다른 방법입니다 나는 rest.send라고 말할 것입니다 우리는 결과를 보낼 것이므로 우리는 이것을 만들 것입니다
데이터베이스에 요청하면 직원으로부터 모두 선택하십시오. 그런 다음 보낼 오류가 없으면 다음으로 이동합니다.
이 결과를 저장하자 여기로 오자.
우리의 백엔드 우리는 터미널에 올 수 있습니다 우리는 터미널을 닫아야 합니다
nodeindex.js 다시 실행 중이고 이제 여기로 와서 작동해야 합니다.
모든 것이 잘되어야한다 당신은 콘솔이 응답을 기록하는 곳을 볼 수 있습니다 그래서 이것을 확인합시다 이것을 열어 봅시다
그리고 맙소사, 이건 이거 봐, 이거 엄청 못생겼어, 그래서 난 그냥 이걸 제거할거야, 그냥 웬일인지
hr 태그가 작동하지 않으므로 이 hr을 확인하겠습니다.
그래, 괜찮아, 난 그냥 이걸 무시할 거야 여기에 버튼이 있습니다
직원들에게 괜찮다는 것을 보여주기 때문에 우리가 하고 싶은 것은 우리가 원하는 것입니다.
기본적으로 이 버튼을 클릭하고 무슨 일이 일어나는지 확인하므로 콘솔 로그를 열어 보겠습니다.
이 요청에서 콘솔 로그를 확인하여 이 버튼을 클릭하면 현재 데이터베이스에 데이터가 표시되는지 확인합니다.
Pedro Machado 19 브라질 풀 스택 개발자와 800K이므로 이것을 클릭하면 볼 수 있습니다.
우리가 요청한 것은 이것이 응답입니다 그것은 많은 것들을 포함하는 객체입니다.
contains는 기본적으로 실제로 걱정할 필요가 없는 임의의 항목일 뿐인 구성입니다
당신이 걱정해야 할 유일한 것들과 같은 것은 상태가 200이면 그것이 <>이라는 것을 의미합니다.
작동하고 데이터 데이터는 백엔드에서 받은 데이터이므로 여기를 클릭하면 배열을 받은 것을 볼 수 있습니다.
데이터베이스에 모든 것을 포함하는 하나의 유사한 행이 있기 때문에 하나의 요소 만 있습니다.
우리가 원하는 정보, 그래서 페드로에 대한 모든 것이 여기에 있으므로 그것이 작동하고 있음을 의미합니다.
이제 우리는 프론트 엔드에 사용자를 표시하고 싶지만 실제로 그렇게하기 전에 더 많은 가짜를 추가하고 싶습니다
목록을 갖고 싶기 때문에 데이터베이스에 데이터를 저장하면 현재 한 명의 사용자이므로 확인하겠습니다.
John을 추가하고 싶습니다 나는 29 세에 상관없이 John Fish를 모릅니다
국가: 독일, 그것은 독일인의 이름이 아니라 위치, 웹 UX
실제로 UX 임금 100 좋아, 추가를 클릭하겠습니다.
직원: 이게 맞는지 확인해보자 다시 한번 확인해보자 존 피쉬가 삽입됐다 이걸 바꿔보자
제시카 반스 나이를 추가해 보겠습니다.
22 나는 너를 몰라 콜롬비아를 모른다
다시 말하지만, 나는 실제로 그것이 콜롬비아 사람의 이름인지 모르겠습니다 ux 나는 단지 아니오라고 말할 것입니다
UI라고 말하면 앞이라고 말하고 임금은
500k 하나 둘 셋 사원에서 다시 확인하자
직원이 데이터베이스에 추가되었으므로 작동 중이므로 정보가 올바른지 확인하겠습니다.
정보 다시 직원 표시를 클릭해 보겠습니다. 요청을 받았고 이제 배열입니다.
세 명의 다른 사람들과 함께 모든 것이 작동하고 있음을 의미하므로 페이지를 새로 고치고 모든 것이 작동하고 괜찮습니다.
이제 정보를 얻었으니 이 정보를 화면에 어떻게 표시할까요?
그러기 위해 우리는 여기 버튼에 JavaScript 변수를 추가할 것입니다
JSX 내부와 목록을 렌더링하기 위해 이전에 React로 작업한 적이 있다면
당신의 페이지에서 당신은 이렇게해야합니다 당신은 목록을 잡고 싶기 때문에 직원 목록을 통과 할 것입니다
도트 맵 기능과 이 도트 맵 내부에서 열고 닫는 괄호를 열고 닫습니다.
괄호를 다시 그리고 여기 안에 키와 값을 바로 잡을 수 있으므로 값 키
그리고 여기 안에 함수를 전달할 수 있으므로 이것이 바로 아이디어입니다.
나는 그것이 중괄호와 괄호의 무리라는 것을 알고 있지만, 이것을 복사하고 싶다면 코드를 가지고 있지만 기본적으로 살펴보십시오.
우리는 직원 목록의 모든 요소를 매핑하고 div를 반환하려고합니다.
정보가 포함되어 있으므로 div 이고 여기 안에 있습니다.
지금은 넣고 싶은데, 예를 들어 값이 무엇인지, 예를 들어 우리가 보고 싶은 변수를 넣어 봅시다.
직원 목록의 목록에 있는 요소는 직원이어야 하지만 직원은
객체는 이름, 아이디, 나이, 국가, 직위, 임금을 포함하기 때문에 이 모든 것을 포함하므로 vol은
실제로 배열의 현재 요소에 대한 객체이므로 현재 직원입니다.
그래서 그것은 객체이기 때문에 우리는 vol.name 라고 말할 수 있고 예를 들어 이름을 표시 할 것이므로 그것이 작동하는지 봅시다
그리고 실제로 우리는 실제로 우리 목록에 아무것도 삽입하지 않았기 때문에 지금은 작동하지 않을 것입니다.
콘솔에 응답을 기록하므로 목록에 항목을 삽입하는 방법 변환 방법
백엔드에서 받은 값을 React에 있는 직원 목록으로 가져옵니다.
글쎄, 나는 여기서 직원 목록을 응답 도트 데이터와 동일하게 설정한다고 말할 수 있습니다
왜 점 데이터인가? 응답에는 속성이나 키를 포함한 많은 정보가 포함되어 있기 때문입니다.
해당 키 내부에 직원 배열이 포함되어있는 데이터이므로 직원 목록을 동일하게 설정합니다.
response.data에 모든 것이 정확하다는 것을 의미하므로 이것을 저장하고 이제 표시를 클릭하면
직원 여러분, 여기 아래에 있는 모든 직원들이 아름답게 나타나야 하지만 조금 더 해봅시다
우리는 여기에 와서 우리가 val.name 친절하게 대할지 모르겠다고 말할 수 있습니다
스타일에 대해 약간 우리는 클래스 이름을 추가하고 그 클래스 이름이 될 것이라고 말할 것입니다.
직원: 직원이 있다는 것을 알고 있습니다. 이 직원이라고 부르면 혼란스러울 수 있지만
그냥 그것을 얻으십시오 그것은 직원과 직원이므로 val.name 그러면 우리는 아마도 um을 추가하고 싶습니다.
조금 변경하기 위해 우리는 모든 다른 레이블을 추가 할 것입니다 실제로 헤더를 추가합시다 h3
오, 내가 잘못했으니 h 3 안에 헤더가 될 것입니다
여기에 이름을 vol.name 추가한 다음 추가하려고 합니다.
또 다른 h3는 여러분이 볼 수 있도록 이것을 저장하겠습니다. 여기에 헤더가 있고 추가하고 싶습니다.
더 많은 정보 권리 우리는 Valdo val.name 다른 모든 정보도 추가하고 싶습니다.
나이 Vol.Country 나는 Valdo 위치를 생각한다
그리고 마지막으로 하나를 추가합시다 val dot 급여 아니 아니 급여가 아니야 임금이야 미안해
임금 좋아, 그래서 당신은 그것이 여기에 나타나는 것을 볼 수 있습니다
div를 약간 편집하여 여기로 이동해 보겠습니다.css 그리고 여기 안에 dot이라고 합시다.
직원과 DOT 직원은 기본적으로 허용합니다.
우리는 바로 여기에서 이 div에 액세스할 수 있으므로 여기 모든 것이 여기에 있으므로
조금 더 좋아 보이는데 어떻게 하면 내가 모르는 것처럼 너비를 추가해 보겠습니다.
700 픽셀과 400 픽셀과 같은 높이는하지 않습니다.
너무 작을지 알고 지금은 배경색을 추가해 보겠습니다.
아주 간단합니다 azuri를 추가하자 어떻게 보이는지 보자 그래서 당신은 끔찍해 보이는 것을 볼 수 있습니다
보기에 좋지 않은 경우 밝은 회색을 추가해 보겠습니다.
그래도 안 좋아 보여도 괜찮아요 배경색을 추가하지 않을거야 테두리만 추가할게요 알았어
한 픽셀의 테두리 단색과 검은 색 좋아, 그게 내가 평소에하는 일이야.
테두리 높이가 엄청나니까 이거 고치자, 이거 만들어 보자
80. 그리고 괜찮아요 이제 모두에게 여백을 추가합시다.
이 중 10픽셀의 여백을 사용하여 간격이 있는 것과 같으며 현재 이
바로 여기에 나타납니다, 왜 그런지 아시겠지만, 우리가 실제로 이것을 나눌 것이기 때문에 우리는 이것을 디스플레이 플렉스로 줄 것입니다.
플렉스: 우리는 그것들을 서로 바로 옆에 놓을 것이고 아마도
패딩과 10픽셀의 패딩을 추가하여 각 h3를 잡을 측면과 비슷합니다.
그래서 당신은 여기에 와서 직원 H3라고 말할 수 있고 각 A3는 확실히 A를 가질 것입니다
20 픽셀과 같은 여백을 간격을 두고 마지막으로 하고 싶은 것은
바로 여기로 오고 싶어요 이게 바로 이름이야 그냥 표시하고 싶지 않아요 표시하고 싶은 이름
단어 이름과 이름 그래서 우리는 실제로 이것이 html입니다.
jsx 그래서 우리는 여기에 이름을 쓸 수 있고 신용 중괄호를 열고 닫을 때 우리는 자바 스크립트를 넣는 것입니다.
이름을 지정한 다음 중괄호를 열고 닫고 이름과 변수를 말하는 vol.name 말하면 괜찮습니다.
다른 것들에 대해서도 같은 일을 하니 이것을 나이로 바꿔봅시다
이것을 국가로 바꾸자 이것을 다음으로 바꾸자
[음악] 어쩌면 포지션일 수도 있고 그렇지 않다는 걸 알아요
이 비디오는 이미 너무 길어서 시간이 많지 않을 것이기 때문에 전혀 완벽합니다
그것을 완벽하게 만들기 위해 그러나 우리가 하고 싶은 것은 아마도 우리가 원하는 것입니다.
이것을 UM으로 만들지 말고 헤더로 만들어 봅시다.
그래서 그것이 어떻게 보이는지 봅시다.
좋아, 내가 이것을 p로 수정하고 여기에 쉼표를 넣을 것이므로
어떻게 생겼는지 봐, 똑같아 보이니까 이거 신경 쓰지 않을거야 바로 여기서 이걸 제거할게요
그래서 이것은 기본적으로 우리가 지금 가지고 있는 것입니다, 바로 지금, 완벽하지도 않습니다, 분명히 존재에 가깝지도 않습니다
끔찍해 보이기 때문에 완벽합니다. 조금 더 좋게 만들려고 노력할 것입니다.
결국에는 글꼴 패밀리라고 말하겠습니다.이 비디오의 요점은 다른 비디오가있는 기능을 보여주는 것입니다.
UI 나는 이것을 모노 스페이스를 줄 것이므로 조금 더 좋아 보이지 않을 것입니다.
새로운 오케이는 조금 더 좋아 보이고 네, 그게 기본입니다
아이디어 맞아요 우리는 우리의 다른 사용자가 모두 있다는 것을 알 수 있습니다.
사실 이걸 자동으로 만들려고 해요 어떻게 보이는지 보자 자동, 네, 조금 더 좋아 보입니다
이미 이것은 목록입니다 : 우리가 여기에서 보게 될 새 사용자를 추가하려면 바로 여기에서 여기에 와서 말할 수 있습니다.
페르난다, 제임스가 뭐든, 이건 이름도 아니야.
그녀는 다섯 살이고 캄보디아 출신인데 아마 잘못 썼을 것입니다
캄보디아 오른쪽 예 위치 UM CEO 임금
어 200만 또는 무엇이든 직원 추가를 클릭해 보겠습니다.
직원 쇼 직원을보고 이제 캄보디아의 페르난다 제임스가 다운되었습니다.
여기에 추가하고 싶을 때 보고 싶은 직원을 추가하는 것이 좋습니다
여기에 직접 나타나 직원 표시를 클릭하는 대신 문제를 해결할 수 있습니다.
그래서 정말 멋진 것은 배열 구조화를 사용하여 다음을 추가할 수 있다는 사실입니다.
요소를 데이터베이스에 자동으로 저장하므로 실제로 어떻게 하면 여기에 올 수 있습니다.
아마도 이 비디오에서 마지막으로 보여줄 것은 이 비디오가 이미 1시간 길이보다 1시간 이상일 것이기 때문일 것입니다.
너희들 더 많은 것들 나는 너희들에게 물건을 삭제하는 방법을 보여줄 수있는 또 다른 비디오를 만들 수 있습니다
삭제를 클릭하면 요소가 데이터베이스에서 삭제되고 삭제됩니다.
목록에서 자동으로 항목을 업데이트하는 방법을 보여줄 수도 있습니다.
하지만 지금은 다음과 같이 수정하여 요소를 목록에 추가하고 싶습니다.
직원 표시를 클릭하지 않고도 동시에 데이터베이스를 사용할 수 있습니다. 직원을 추가한 후 직원을 추가한다고 말할 때 어떻게 하면 잘 할 수 있습니까?
콘솔 로깅 성공이라고 말하는 대신 여기에 올 수 있지 않을까요?
그런 다음 배열을 전달해야 합니다. 그런 다음 직원 목록, 세 개의 점, 잠깐만요
실제로 세 개의 점 직원 목록을 전달합시다.
그런 다음 여기에서 우리는 새로운 값을 전달할 수 있다고 말할 수 있으며 이것은 당신에게 혼란을 줄 수 있습니다.
나는 그냥이 객체를 바로 여기에 전달할 것입니다, 이것은 당신에게 혼란 스러울 수 있지만 걱정하지 마십시오
그것은 모든 사람들에게 혼란 스럽습니다 그것은 반경 구조화라고 불리우므로 기본적으로 우리는 값을 추가하고 있습니다
Push 메서드를 사용하지 않고 배열에 값을 추가하는 방법은 다음과 같습니다.
배열에 새로운 값을 추가하고 반응하므로 그녀의 이름을 like 또는
실제로 존 홉킨스 (John Hopkins)라는 사람을 추가합시다
그리고 9 세, 우리도 CEO입니다.
Employee에서 새 직원이 자동으로 추가되고 John Hopkins라는 것을 알 수 있습니다.
우리가 실제로 그것을 데이터베이스로 보내고 있다는 것을 의미하므로 여기에 오면 June Hopkins가 데이터베이스에 나타나는 것을 볼 수 있습니다.
그것은 훌륭하고 모든 것이 작동하고 있다는 것을 의미하므로 이것이 기본적으로 수행하는 방법입니다
이런 종류의 프로젝트를 수행하는 방법에는 여러 가지가 있습니다. 이것은 작업 방법에 대한 간단한 소개일 뿐입니다.
반응 msql 및 노드 나는 과거에 이것에 대한 비디오를 만들었지 만 나는 정말로 내가 물건을 잘 설명하지 못했다고 생각했다.
저도 오디오가 꽤 나빴기 때문에 이것을 위해 새로운 비디오를 만들고 싶었기 때문에 네, 정말 여러분이 즐겼기를 바랍니다.
내가 삭제한 부분을 정말로 보고 싶다면 Edit and Employ와 같은 항목을 편집합니다
정보 나는 확실히 그렇게 할 수 있으므로 그 비디오도 만들 수 있으므로 다음과 같은 경우 이 비디오를 즐겼기를 바랍니다.
마음에 드셨어요 댓글 아래에 좋아요를 남겨주세요 다음에보고 싶은 내용 구독 오늘처럼 매일 게시하고 있기 때문에 방금 만들었습니다
1시간 길이의 영상이고 저는 대학에 다니기 때문에 할 일이 많아서 이 채널에 많은 노력을 기울이고 있습니다
그리고 여러분이 비디오를 구독하거나 좋아하거나 친구 또는 무엇이든 공유 할 수 있다면 정말 감사하겠습니다
네, 즐거우셨기를 바라며 다음에 뵙겠습니다
네, 즐거우셨기를 바라며 다음에 뵙겠습니다
50:14까지 insert
mysql workbench
# 스키마 생성
create schema test;
use test;
# 테이블 생성
CREATE TABLE employees (
id int primary key auto_increment,
name varchar(64),
age int,
country varchar(64),
position varchar(64),
wage int
) default character set utf8 collate utf8_general_ci;
show tables;
select * from employees;client-src-App.js--------------------
import './App.css';
import { useState } from "react";
import Axios from 'axios';
function App() {
const [name, setName] = useState("");
const [age, setAge] = useState(0);
const [country, setCountry] = useState("");
const [position, setPosition] = useState("");
const [wage, setWage] = useState(0);
const addEmployee = () => {
Axios.post('http://localhost:3001/create',{
name: name,
age: age,
country: country,
position: position,
wage: wage
}).then(() => {
console.log("success");
});
};
// const displayInfo = () => {
// console.log(name + age + country + position + wage);
// };
return (
<div className="App">
<div className="information">
<label>Name: </label>
<input
type="text"
onChange={(event) => {
setName(event.target.value);
}}
/>
<label>Age: </label>
<input
type="number"
onChange={(event) => {
setAge(event.target.value);
}}
/>
<label>Country: </label>
<input
type="text"
onChange={(event) => {
setCountry(event.target.value);
}}
/>
<label>Position: </label>
<input
type="text"
onChange={(event) => {
setPosition(event.target.value);
}}
/>
<label>Wage (year): </label>
<input
type="number"
onChange={(event) => {
setWage(event.target.value);
}}
/>
<button onClick={addEmployee}>등록</button>
</div>
</div>
);
}
export default App;client-src-App.css--------------------
.App {
display: flex;
flex-direction: column;
justify-content: center;
}
.information {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
.information input {
width: 300px;
height: 50px;
font-size: 20px;
padding-left: 10px;
margin: 5px;
}
.information button {
width: 320px;
height: 50px;
margin-top: 15px;
}
.information button:hover {
}client-src-index.js--------------------
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();server-index.js--------------------
const express = require("express");
const app = express();
const mysql = require('mysql');
const cors = require('cors');
app.use(cors());
app.use(express.json());
var db = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '패스워드',
database : 'test'
});
app.post('/create', (req,res) => {
// console.log(req.body);
const name = req.body.name;
const age = req.body.age;
const country = req.body.country;
const position = req.body.position;
const wage = req.body.wage;
db.query(
'INSERT INTO employees (name, age, country, position, wage) VALUES (?,?,?,?,?)',
[name,age,country,position,wage],
(err, result) => {
if (err) {
console.log(err)
} else {
res.send("Values Inserted")
}
}
);
});
app.listen(3001, () => {
console.log("yey, your server is running on port 3001");
});client
yarn startyarn add axiosserver
node index.jsnpm install corsserver-index.js--------------------
const fs = require('fs');
const express = require("express");
// const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;
const mysql = require('mysql');
const cors = require('cors');
// app.use(bodyParser.json());
// app.use(bodyParser.urlencoded({extended: true}));
app.use(cors());
app.use(express.json());
const data = fs.readFileSync('./database.json');
const conf = JSON.parse(data);
var db = mysql.createConnection({
host: conf.host,
user: conf.user,
password: conf.password,
database: conf.database
});
app.post('/create', (req,res) => {
const name = req.body.name;
const age = req.body.age;
const country = req.body.country;
const position = req.body.position;
const wage = req.body.wage;
db.query(
'INSERT INTO employees (name, age, country, position, wage) VALUES (?,?,?,?,?)',
[name,age,country,position,wage],
(err, result) => {
if (err) {
console.log(err)
} else {
res.send("Values Inserted")
}
}
);
});
app.get('/employees', (req, res) => {
db.query('select * from employees', (err, result) => {
if (err) {
console.log(err)
} else {
res.send(result)
}
})
})
app.listen(3001, () => {
console.log("yey, your server is running on port 3001");
});client-src-App.js--------------------
import './App.css';
import { useState } from "react";
import Axios from 'axios';
function App() {
const [name, setName] = useState("");
const [age, setAge] = useState(0);
const [country, setCountry] = useState("");
const [position, setPosition] = useState("");
const [wage, setWage] = useState(0);
const [employeeList, setEmployeeList] = useState([]);
const addEmployee = () => {
Axios.post('http://localhost:5000/create',{
name: name,
age: age,
country: country,
position: position,
wage: wage
}).then(() => {
console.log("success");
});
};
const getEmployees = () => {
Axios.get('http://localhost:5000/employees').then((response) => {
// console.log(response);
setEmployeeList(response.data)
});
}
// const displayInfo = () => {
// console.log(name + age + country + position + wage);
// };
return (
<div className="App">
<div className="information">
<label>Name: </label>
<input
type="text"
onChange={(event) => {
setName(event.target.value);
}}
/>
<label>Age: </label>
<input
type="number"
onChange={(event) => {
setAge(event.target.value);
}}
/>
<label>Country: </label>
<input
type="text"
onChange={(event) => {
setCountry(event.target.value);
}}
/>
<label>Position: </label>
<input
type="text"
onChange={(event) => {
setPosition(event.target.value);
}}
/>
<label>Wage (year): </label>
<input
type="number"
onChange={(event) => {
setWage(event.target.value);
}}
/>
<button onClick={addEmployee}>등록</button>
</div>
<hr />
<div className='employees'>
<button onClick={getEmployees}>테이블보기</button>
<table>
{employeeList.map((val, key) => {
return (
<div className='employee'>
<tr>
<td>name</td>
<td>age</td>
<td>country</td>
<td>position</td>
<td>wage</td>
</tr>
<tr>
<td>{val.name}</td>
<td>{val.age}</td>
<td>{val.country}</td>
<td>{val.position}</td>
<td>{val.wage}</td>
</tr>
</div>
)
})}
</table>
</div>
</div>
);
}
export default App;