프론트엔드로서 이러한 백엔드 상식을 이해해야 합니다!-JS 튜토리얼-php.cn

이 글은 프론트엔드 + 백엔드 관련 지식을 주로 다루었습니다. 관심있는 친구들이 함께 살펴보시면 좋을 것 같습니다. .

서버란 무엇인가

서버는 백엔드, 서버라고도 불린다
프런트엔드는 나뭇가지, 나뭇잎 등 사용자가 볼 수 있고 조작 가능한 부분이다.
서버는 "지원"을 제공한다 " 그리고 " 영양", 나무뿌리 등

프론트엔드란 무엇인가

좁은 의미: 웹 페이지
광의: 앱, PC 클라이언트 등 다양한 클라이언트

책임 of the server

프런트엔드에서 표시하고 싶은 데이터 제공
프런트엔드에서 제출할 데이터 수신
저장 데이터(소프트웨어 회사는 데이터를 매우 중요하게 생각하며 모든 종류의 데이터를 수집합니다)

서버측 표현

프런트엔드 Ajax는 데이터를 얻기 위해 get 요청을 사용하고, 데이터를 제출하기 위해 post 요청을 사용하는 등의 인터페이스를 호출해야 합니다.
이 인터페이스는 서버에서 제공됩니다.

백엔드 대화형 통신 - HTTP 프로토콜

하이퍼텍스트 전송 프로토콜 Hyper Text Transfer Protocol
은 클라이언트와 서버가 통신하는 방법을 규정합니다.
은 인터넷입니다. 세계 데이터 통신의 표준이자 초석입니다.

HTTP - 범용

url: 백엔드 인터페이스의 주소, 즉 프런트엔드 Ajax 요청의 주소
method: GET POST PUT DELETE 등의 요청 메서드
상태 코드: 다음과 같이 인터페이스에서 반환된 상태 200 302 404 500 등

HTTP - 요청

요청: 프런트 엔드에서 서버

- 요청 본문: 요청은 백엔드로 전송된 데이터
- 요청 내용형식 : JSON 형식 등 데이터를 보내는 형식
- ...

HTTP - Response

Response: Return/response, 서버가 프론트엔드로 복귀

- 응답 본문: 프런트 엔드로 반환된 백엔드 데이터
- 응답 콘텐츠 유형: JSON 형식과 같은 반환된 데이터의 형식

Get 요청을 보여줍니다

POST 요청을 보여줍니다

웹 페이지는 여러 서버에 대응할 수 있습니다.

웹 페이지에서 로드해야 하는 리소스에는

html
css
js
사진
오디오 및 비디오
비즈니스 데이터

가 포함될 수 있습니다.

다른 리소스는 다른 도메인 이름에서 나올 수 있습니다

html 독립적인 도메인 이름에서 나올 수 있습니다
js css 독립적인 도메인 이름에서 나올 수 있습니다
데이터는 독립적인 도메인 이름에서 나올 수 있습니다
다른 도메인 이름 서로 다른 서버에 대응 가능

서버는 정적 서비스(html css js 이미지 등 처리)와 데이터 서비스(데이터 인터페이스 제공)로 나눌 수도 있습니다.

서버가 데이터를 처리하고 반환하는 방법

프런트 엔드 요청에 대한 URL 규칙 정의 - 라우팅(프런트 엔드 Ajax 요청에는 URL이 필요함)
데이터 획득 요청, 데이터 반환을 위한 응답 사용

- req 및 res라고도 할 수 있습니다
- 요청을 통해 사용 가능: 메소드 url body
- 통해 응답: 설정 가능: 상태 코드, 콘텐츠 유형, body

읽기 데이터 가져오기 및 저장 - 데이터베이스

- 데이터베이스, 데이터 저장 및 전용 query
- 데이터베이스는 nodejs에만 국한되지 않는 독립적인 시스템입니다
- 기본 작업: 쿼리, 추가, 삭제, 수정, 정렬 등 모두 쿼리 조건이 필요합니다

라우터란 무엇인가

서버의 입장 규칙
프런트 엔드와 합의해야 함
고대 성문과 마찬가지로 성문에도 특정 입구가 있고 각 입구에는 특정 입구가 있습니다. function
백엔드 정의 GET /api/list Routing=> 프런트엔드 axios.get( /api/list' )
백엔드 정의 POST /api/create Routing=> ( '/api/create' , {..)
경로는 전송 규칙을 정의하며, URL은 특정 전송 형식을 의미합니다.

경로에는 무엇이 포함되나요?

GET과 같은 방법을 정의합니다. /POST 등
/api/list 및 /api/create와 같은 URL 규칙 정의
입력(요청 본문) 및 출력(응답 본문) 형식 정의

Nodejs 환경 구성

노드 입력 설치할 공식 웹사이트:

설치가 완료된 후 다음 명령을 사용하여 설치가 완료되었는지 확인하세요.

node -vnode -v
npm -v

继续安装 nrm 管理包源：

npm i nrm -g
nrm ls
nrm use taobao

使用 nvm 管理 nodejs 多版本

Mac OS，使用 brew install nvm
windows ， github 中搜索 nvm-windows，有下载地址

使用 nvm

nvm list 查看当前所有的 node 版本
nvm install v16.10.0 安装指定的版本
nvm use —delete-prefix 16.10.0 切换到指定的版本

Nodejs 和 Javascript 的区别

Javascript

使用 ECMAScript 语法规范，外加 Web API（DOM 操作，BOM 操作，Ajax），缺一不可
两者结合，即可完成浏览器端的任何操作
ECMAScript 定义了语法（变量定义、循环、判断、函数、原型和原型链、作用域和闭包、异步等），写 javascript 和 nodejs 都必须遭守

Nodejs

使用 ECMAScript 语法规范，外加 nodejs API，缺一不可
处理 http，处理文件等，具体参考：nodejs.cn/api-v16/
两者结合，即可完成 server 端的任何操作

CommonJs

在 Nodejs 环境中，默认就支持模块系统，该模块系统遵循 CommonJS 规范
在 Nodejs 中一个 js 文件就是一个模块

// index.js
function add(a, b) {
  return a + b;
}

function minus(a, b) {
  return a - b;
}

// 导出单个
module.exports = add;
// 在别的文件引入
// const add = require("index.js");

// 导出多个
module.exports = {
  add,
  minus
};
// 在别的文件引入
// const { add, minus } = require("index.js");

// 直接引入npm包
// const _ = require("lodash");

로그인 후 복사