Koa를 사용하여 Node.js를 통해 프로젝트 빌드

요즘에는 많은 프런트엔드 엔지니어들이 NodeJ, Express 프레임워크, Koa 프레임워크 등의 신기술에 더 많은 관심을 기울이고 있습니다. 최근에 여가 시간이 많은 경우가 드물기 때문에 설날이 공식적으로 도착하기 전에 이 자유 시간을 활용하여 이에 참여하고 그 비밀을 엿볼 수 있었습니다.

Koa는 Express의 원팀이 만든 초경량 서버사이드 프레임워크입니다

Express에 비해 자유도가 더 높고 미들웨어를 직접 도입할 수 있다는 점과 더 중요하게는 ES6+를 사용한다는 점입니다. async, 콜백 지옥을 피하세요

하지만 코드 업그레이드 때문이기도 하므로 Koa2에는 v7.60

1 이상의 node.js 환경이 필요합니다. 프로젝트 만들기

프로젝트 디렉터리를 수동으로 만든 다음 빠르게 패키지를 생성하세요. .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);

마지막으로 package.json에 시작 명령을 추가합니다

이렇게 하면 가장 기본적인 Koa 애플리케이션이 완성됩니다.

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

프로젝트를 수동으로 생성하는 것이 너무 번거롭다고 생각되면 스캐폴딩 koa-generato를 사용하여 프로젝트 생성

npm install koa-generator -g

koa2 project_name

그런 다음 프로젝트 아래에 npm을 설치하여 종속 항목을 설치하고, npm start 프로젝트를 시작하세요

koa를 처음 접하시는 분이라면 이 블로그를 먼저 읽어보신 후 스캐폴딩 도구를 사용하시는 걸 추천드립니다. 각 종속 패키지의 역할을 더 잘 이해하세요

둘째, 라우팅 구성

app.js에 ctx 위에 하나가 있는데, 이는 Koa에서 제공하는 Context 객체로 요청과 응답을 캡슐화합니다

모든 HTTP 요청은 Context 객체를 생성합니다

Context.request.path를 통해 사용자 요청의 경로를 얻은 다음 Context.response를 통해 body가 사용자에게 콘텐츠를 보냅니다.

Koa의 기본 반환 유형은 text/plain입니다. 또는 모듈 파일), 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 페이지가 보이실 텐데, 다른 주소에 접속하면 찾을 수 없습니다

이렇게 URL을 처리하는 게 너무 서툴러 보여서 라우팅 미들웨어를 도입해야 합니다 koa-router

npm install koa-router -S

가져올 때 주의하셔야 할 점 koa-router를 사용하려면 끝에 대괄호를 추가해야 합니다.

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

와 동일:

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

라우팅 파일을 저장할 경로 디렉터리를 생성하고 해당 디렉터리에 index.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

다음을 사용할 수도 있습니다. 파일의 모든 인터페이스에 baseUrl을 추가하려면 여기에 prefix 메서드를 추가하세요

// router.prefix('/about')

Modify app.js

// app.js

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

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

app.listen(3000);

위의 allowedMethods를 사용하면 요청 메서드를 확인하는 데 사용됩니다. get 인터페이스에 액세스하기 위한 게시물 요청은 직접 실패를 반환합니다

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

router.get('/about/:name', async (ctx, next) => {
 ctx.body = `I am ${ctx.params.name}!`;
});

3을 통해 액세스할 수도 있습니다. 위 색인에서. .html, CSS 등 정적 리소스를 도입해야 한다면 koa-static

npm install koa-static -S

를 사용해야 합니다

정적 리소스를 저장할 public 디렉터리를 생성합니다

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

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

실제로 이 세 줄의 코드도 최적화할 수 있습니다

app.use(require('koa-static')(__dirname + '/public'));

그러면 해당 파일을 index.html

Four.템플릿 엔진

위 라우팅에서는 fs 모듈을 직접 사용합니다. html 파일 읽기

개발할 때 페이지를 렌더링하려면 koa-views 미들웨어를 사용하는 것이 좋습니다

npm install koa-views -S

views 디렉터리를 app.js의 템플릿 디렉터리로 설정

const views = require('koa-views')
app.use(views(__dirname + '/views'));

그런 다음 라우팅 파일에서 렌더링 메서드

// routes/index.js

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

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

module.exports = router

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

app.use(views(__dirname + '/views', {
 extension: 'pug' // 以 pug 模版为例
}))

5. 결론

Express가 웹스톰이라면 Koa는 숭고합니다

Express가 대중화되자 많은 개발자들로부터 Express의 복잡한 종속성이 비난을 받았습니다

그래서 Express 팀은 Express를 가장 기본적인 뼈대까지 분해하여 개발자들이 직접 조립하게 했습니다. 이것이 바로 Koa

입니다.

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

하지만 Koa에 익숙해진 후 자신의 프로젝트에 적합한 스캐폴딩을 구축하는 것이 좋습니다

위 내용은 다음과 같습니다. 내가 당신을 위해 정리한 내용 네, 그것이 미래에 모든 사람에게 도움이 되기를 바랍니다.

관련 글 :

express와 koa의 사용 비교(상세 튜토리얼)

Vue에서 처음으로 스타일러스 설치 방법 사용(상세 튜토리얼)

Vue 프레임워크에서 관련 상품 컴포넌트 개발

위 내용은 Koa를 사용하여 Node.js를 통해 프로젝트 빌드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!