Node.js는 Koa를 사용하여 기본 프로젝트 예제 튜토리얼을 구축합니다.
Jan 09, 2018 am 09:06 AM많은 사람들이 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')();
// 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를 사용하여 기본 프로젝트 예제 튜토리얼을 구축합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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

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