목차
1. 프로젝트 만들기
2. 라우팅 구성
위 index.html에서 정적을 도입해야 하는 경우 CSS와 같은 리소스, koa-static
위 경로는 fs 모듈을 사용하여 html 파일을 직접 읽습니다
Express를 웹스톰으로 본다면 Koa는 숭고합니다
웹 프론트엔드 JS 튜토리얼 Node.js는 Koa를 사용하여 기본 프로젝트 예제 튜토리얼을 구축합니다.

Node.js는 Koa를 사용하여 기본 프로젝트 예제 튜토리얼을 구축합니다.

Jan 09, 2018 am 09:06 AM
javascript node.js 프로젝트

많은 사람들이 NodeJ, Express 프레임워크 또는 Koa 프레임워크와 같은 새로운 기술에 더 많은 관심을 기울이고 있습니다. Koa는 Express의 원래 팀이 만든 초경량 서버 측 프레임워크로 Express에 비해 자유도가 더 높고 자체적으로 미들웨어를 도입할 수 있다는 점은 ES6 + 비동기를 사용하므로 콜백 지옥을 피할 수 있다는 것입니다. 하지만 Koa2에 v7.60 이상의 node.js 환경이 필요한 것도 코드 업그레이드 때문입니다.

1. 프로젝트 만들기

수동으로 프로젝트 디렉터리를 만든 후 빠르게 package.json 파일을 생성합니다

npm init -y
로그인 후 복사

koa 설치 //현재 버전은 2.4.1

npm install koa -S
로그인 후 복사

그런 다음 app.js를 만듭니다

// app.js

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
 ctx.body = 'Wise Wrong';
});

app.listen(3000);
로그인 후 복사

마지막으로 패키지에 json

가장 기본적인 Koa 애플리케이션이 완성되었습니다.

npm start를 실행하고 브라우저에서 http://localhost:3000/을 방문하면 확인할 수 있습니다. 효과

수동으로 만들고 싶은 경우 프로젝트가 너무 번거로우므로 스캐폴딩 koa-generato를 사용하여 프로젝트를 생성할 수 있습니다

npm install koa-generator -g
로그인 후 복사
koa2 project_name
로그인 후 복사

그런 다음 npm install을 통해 프로젝트 아래에 종속 항목을 설치하고 npm start를 통해 프로젝트를 시작합니다

koa를 처음 접한다면 먼저 이 블로그를 읽고 스캐폴딩 도구를 사용하는 것이 좋습니다. 이를 통해 각 종속 패키지의 역할을 더 잘 이해할 수 있습니다.

2. 라우팅 구성

app.js에 ctx가 있습니다. 위는 요청과 응답을 캡슐화한 Koa에서 제공하는 Context 객체입니다.

모든 HTTP 요청마다 Context 객체가 생성됩니다

Context.request.path를 통해 사용자가 요청한 경로를 가져온 다음 콘텐츠를 보낼 수 있습니다. Context.response.body

를 통해 사용자에게 Koa의 기본 반환 유형은 text/plain이며, html 파일(또는 모듈 파일)을 반환하려면 Context.response.type

을 수정해야 합니다. Context.response는 축약될 수 있습니다. 예를 들어 Context.response.type은 Context.type, Context.response.body는 Context.type

으로 축약됩니다.

프로젝트 아래에 html 파일을 저장할 디렉터리 뷰를 생성하고, 이 디렉터리에 index.html을 넣고 app.js를 수정

// app.js// 原生路由

const Koa = require('koa');
const fs = require('fs');
const app = new Koa();

app.use(async (ctx, next) => {
 if (ctx.request.path === '/index') {
 ctx.type = 'text/html';
 ctx.body = fs.createReadStream('./views/index.html');
 } else {
 await next();
 }
});

app.listen(3000);
로그인 후 복사

그런 다음 브라우저에서 http://localhost:3000/index를 방문하여 index.html 페이지로 보면 되는데 다른 주소에 접근하면 찾을 수 없다

It 이런 식으로 URL을 처리하는 것은 매우 서투른 것 같아서 라우팅 미들웨어 koa-router를 도입해야 합니다.

npm install koa-router -S
로그인 후 복사

라우팅 파일을 저장할 경로 디렉터리를 생성하고 해당 디렉터리에 index.js를 생성합니다

const router = require('koa-router')();
로그인 후 복사
여기에서 prefix 메서드를 사용하여 파일을 추가할 수도 있습니다. baseUrl

// router.prefix 추가 ('/about')

app.js

const koaRouter = require('koa-router');
const router = koaRouter();
로그인 후 복사

위의 allowedMethods를 app.js

// routes/index.js

const fs = require('fs');
const router = require('koa-router')()

router.get('/index', async (ctx, next) => {
 ctx.type = 'text/html';
 ctx.body = fs.createReadStream('./views/index.html');
});

module.exports = router
로그인 후 복사

에서 수정하여 요청 메소드를 확인하기 위해 게시 요청을 사용하여 get 인터페이스에 액세스하면 Direct가 됩니다. return failure

또한 URL에 변수를 추가한 다음 Context.params.name

// app.js

const Koa = require('koa');
const app = new Koa();

const index = require('./routes/index')
app.use(index.routes(), index.allowedMethods())

app.listen(3000);
로그인 후 복사

3을 통해 액세스할 수도 있습니다. 정적 리소스

위 index.html에서 정적을 도입해야 하는 경우 CSS와 같은 리소스, koa-static

router.get('/about/:name', async (ctx, next) => {
 ctx.body = `I am ${ctx.params.name}!`;
});
로그인 후 복사
를 사용해야 합니다

정적 리소스를 저장하기 위해 public 디렉토리를 생성합니다

그런 다음 app.js에 다음 코드를 추가합니다

npm install koa-static -S
로그인 후 복사

실제로 이 세 줄의 코드는 또한 beoptimized

const static = require('koa-static');
// 将 public 目录设置为静态资源目录
const main = static(__dirname + '/public');
app.use(main);
로그인 후 복사

그런 다음 index.html에 해당 파일을 도입하면 됩니다

4. 템플릿 엔진

위 경로는 fs 모듈을 사용하여 html 파일을 직접 읽습니다

개발 시 koa 사용을 권장합니다 -페이지 렌더링을 위한 views 미들웨어

app.use(require('koa-static')(__dirname + '/public'));
로그인 후 복사

views 디렉터리를 app.js

npm install koa-views -S
로그인 후 복사

에서 템플릿 디렉터리로 설정합니다. 그런 다음 라우팅 파일에서 render 메서드를 사용할 수 있습니다

const views = require('koa-views')
app.use(views(__dirname + '/views'));
로그인 후 복사

위는 html 파일을 직접 렌더링하는 방법입니다. .템플릿 엔진을 도입하고 싶다면 확장 필드를 추가하여 템플릿 유형을 설정할 수 있습니다

// routes/index.js

const router = require('koa-router')()

router.get('/index', async (ctx, next) => {
 await ctx.render('index');
});

module.exports = router
로그인 후 복사

5. 결론

Express를 웹스톰으로 본다면 Koa는 숭고합니다

Express가 대중화되자 복잡한 종속성 많은 개발자들에게 비난을 받았습니다

그래서 Express 팀은 Express를 가장 기본적인 뼈대까지 분해하여 개발자가 직접 조립할 수 있도록 했습니다. 이것이 Koa입니다

기사에서 언급했듯이 처음부터 시작하는 것은 너무 번거롭습니다. koa-generato를 사용하면 빠르게 개발할 수 있습니다

하지만 Koa에 익숙해진 후 자신의 프로젝트에 적합한 비계를 구축하는 것이 더 좋습니다

그렇지 않으면 Express를 직접 사용하지 않는 것이 좋습니다

관련 권장 사항:

Koa 서비스 전류 제한 메소드 예시

노드 내 koa 미들웨어 메커니즘 분석 질문

Node.js+Koa WeChat 공개 계정 개발을 위한 예제 튜토리얼

위 내용은 Node.js는 Koa를 사용하여 기본 프로젝트 예제 튜토리얼을 구축합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

AI는 페르마의 마지막 정리를 정복할 수 있을까? 100페이지의 증거를 코드로 만들기 위해 5년의 경력을 포기한 수학자 AI는 페르마의 마지막 정리를 정복할 수 있을까? 100페이지의 증거를 코드로 만들기 위해 5년의 경력을 포기한 수학자 Apr 09, 2024 pm 03:20 PM

AI는 페르마의 마지막 정리를 정복할 수 있을까? 100페이지의 증거를 코드로 만들기 위해 5년의 경력을 포기한 수학자

PyCharm 자세히 살펴보기: 프로젝트를 삭제하는 빠른 방법 PyCharm 자세히 살펴보기: 프로젝트를 삭제하는 빠른 방법 Feb 26, 2024 pm 04:21 PM

PyCharm 자세히 살펴보기: 프로젝트를 삭제하는 빠른 방법

PyCharm 프로젝트를 패키징하는 쉬운 방법 공유 PyCharm 프로젝트를 패키징하는 쉬운 방법 공유 Dec 30, 2023 am 09:34 AM

PyCharm 프로젝트를 패키징하는 쉬운 방법 공유

PyCharm 실용 팁: 프로젝트를 실행 가능한 EXE 파일로 변환 PyCharm 실용 팁: 프로젝트를 실행 가능한 EXE 파일로 변환 Feb 23, 2024 am 09:33 AM

PyCharm 실용 팁: 프로젝트를 실행 가능한 EXE 파일로 변환

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축

PyCharm 튜토리얼: PyCharm에서 항목을 제거하는 방법은 무엇입니까? PyCharm 튜토리얼: PyCharm에서 항목을 제거하는 방법은 무엇입니까? Feb 24, 2024 pm 05:54 PM

PyCharm 튜토리얼: PyCharm에서 항목을 제거하는 방법은 무엇입니까?

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법

See all articles