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

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

小云云원래의: 2018-01-09 09:06:273046검색

많은 사람들이 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를 직접 사용하지 않는 것이 좋습니다