Table of Contents
1. Create a project
2. Configure routing
3. Static resources
4. Template engine
5. Conclusion
Home Web Front-end JS Tutorial Node.js uses Koa to build a basic project example tutorial

Node.js uses Koa to build a basic project example tutorial

Jan 09, 2018 am 09:06 AM
javascript node.js project

Many people pay more attention to new technologies such as NodeJs and express framework or Koa framework. Koa is an ultra-lightweight server-side framework created by the original team of Express. Compared with Express, it has a higher degree of freedom and can introduce middleware by itself. More importantly, it uses ES6 + async, thus avoiding callback hell. However, it is also because of the code upgrade that Koa2 requires a node.js environment of v7.60 or above.

1. Create a project

Manually create a project directory, and then quickly generate a package.json file

npm init -y
Copy after login

Install koa //Current version 2.4.1

npm install koa -S
Copy after login

Then create an app.js

// app.js

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

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

app.listen(3000);
Copy after login

Finally add the startup instructions in package.json

A most basic koa application is completed like this

You can execute npm start and visit http://localhost:3000/ in the browser to view the effect

If you feel that manually creating the project is too cumbersome, you can Use the scaffolding koa-generato to generate the project

npm install koa-generator -g
Copy after login
koa2 project_name
Copy after login

Then npm install to install the dependencies under the project, npm start to start the project

If you are new to koa, it is recommended to read this blog before using Scaffolding tool, so that you can better understand the role of each dependent package

2. Configure routing

There is a ctx in app.js above, which is a Context object provided by Koa, encapsulating request and response

Each HTTP Request will create a Context object

We can get the path requested by the user through Context.request.path, and then give it through Context.response.body Users send content

Koa’s default return type is text/plain. If you want to return an html file (or a module file), you need to modify Context.response.type

In addition , Context.response can be abbreviated, for example, Context.response.type is abbreviated as Context.type, Context.response.body is abbreviated as Context.type

Create a directory views under the project to store html files, and put it in the Create an index.html in the directory, then modify 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);
Copy after login

and then access http://localhost:3000/index in the browser to see the index.html page, and access other addresses. It is not found

It seems very clumsy to handle the url in this way, so we need to introduce the routing middleware koa-router

npm install koa-router -S
Copy after login

It should be noted that when importing koa-router, you need to add it at the end A bracket:

const router = require('koa-router')();
Copy after login

is equivalent to:

const koaRouter = require('koa-router');
const router = koaRouter();
Copy after login

Create a routes directory to store routing files, and create 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
Copy after login

You can also use the prefix method here to add a baseUrl to all interfaces in the file

// 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);
Copy after login

The above allowedMethods are used to verify the request method. If you use post request to access the get interface, it will directly return failure

In addition, you can also add variables in the url, and then pass Context.params .name access

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

3. Static resources

In the above index.html, if you need to introduce static resources such as css, you need to use koa-static

npm install koa-static -S
Copy after login

Create a directory public to store static resources

Then add the following code in app.js

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

In fact, this The three lines of code can also be optimized

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

and then the corresponding files can be introduced into index.html

4. Template engine

The above route uses the fs module to directly read the html file

When developing, it is recommended to use koa-views middleware to render the page

npm install koa-views -S
Copy after login

Set the views directory in app.js For the template directory

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

Then in the routing file, you can use the render method

// routes/index.js

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

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

module.exports = router
Copy after login

The above is the method of directly rendering the html file. If you want to introduce the template engine, you can add the extension field to set Defined template type

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

5. Conclusion

If Express is regarded as webstorm, then Koa is sublime

When Express became popular, its complicated dependencies were developed by many Criticized by developers

So the Express team disassembled Express down to the most basic skeleton and let developers assemble it by themselves. This is Koa

As mentioned in the article, starting from scratch is too cumbersome , you can use the scaffolding koa-generato to develop quickly

But I recommend that after getting familiar with Koa, build a scaffolding suitable for your own project

Otherwise, why not use Express directly

Related recommendations:

Koa service current limiting method example

Analysis of koa middleware mechanism issues in node

Node.js+Koa Example Tutorial for Developing WeChat Official Accounts

The above is the detailed content of Node.js uses Koa to build a basic project example tutorial. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Share an easy way to package PyCharm projects Share an easy way to package PyCharm projects Dec 30, 2023 am 09:34 AM

Share the simple and easy-to-understand PyCharm project packaging method. With the popularity of Python, more and more developers use PyCharm as the main tool for Python development. PyCharm is a powerful integrated development environment that provides many convenient functions to help us improve development efficiency. One of the important functions is project packaging. This article will introduce how to package projects in PyCharm in a simple and easy-to-understand way, and provide specific code examples. Why package projects? Developed in Python

Can AI conquer Fermat's last theorem? Mathematician gave up 5 years of his career to turn 100 pages of proof into code Can AI conquer Fermat's last theorem? Mathematician gave up 5 years of his career to turn 100 pages of proof into code Apr 09, 2024 pm 03:20 PM

Fermat's last theorem, about to be conquered by AI? And the most meaningful part of the whole thing is that Fermat’s Last Theorem, which AI is about to solve, is precisely to prove that AI is useless. Once upon a time, mathematics belonged to the realm of pure human intelligence; now, this territory is being deciphered and trampled by advanced algorithms. Image Fermat's Last Theorem is a "notorious" puzzle that has puzzled mathematicians for centuries. It was proven in 1993, and now mathematicians have a big plan: to recreate the proof using computers. They hope that any logical errors in this version of the proof can be checked by a computer. Project address: https://github.com/riccardobrasca/flt

A closer look at PyCharm: a quick way to delete projects A closer look at PyCharm: a quick way to delete projects Feb 26, 2024 pm 04:21 PM

Title: Learn more about PyCharm: An efficient way to delete projects. In recent years, Python, as a powerful and flexible programming language, has been favored by more and more developers. In the development of Python projects, it is crucial to choose an efficient integrated development environment. As a powerful integrated development environment, PyCharm provides Python developers with many convenient functions and tools, including deleting project directories quickly and efficiently. The following will focus on how to use delete in PyCharm

PyCharm Practical Tips: Convert Project to Executable EXE File PyCharm Practical Tips: Convert Project to Executable EXE File Feb 23, 2024 am 09:33 AM

PyCharm is a powerful Python integrated development environment that provides a wealth of development tools and environment configurations, allowing developers to write and debug code more efficiently. In the process of using PyCharm for Python project development, sometimes we need to package the project into an executable EXE file to run on a computer that does not have a Python environment installed. This article will introduce how to use PyCharm to convert a project into an executable EXE file, and give specific code examples. head

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

PyCharm Tutorial: How to remove items in PyCharm? PyCharm Tutorial: How to remove items in PyCharm? Feb 24, 2024 pm 05:54 PM

PyCharm is a powerful Python integrated development environment (IDE) that provides rich functions to help developers write and manage Python projects more efficiently. In the process of developing projects using PyCharm, sometimes we need to delete some projects that are no longer needed to free up space or clean up the project list. This article will detail how to delete projects in PyCharm and provide specific code examples. How to delete a project Open PyCharm and enter the project list interface. In the project list,

Basic tutorial: Create a Maven project using IDEA Basic tutorial: Create a Maven project using IDEA Feb 19, 2024 pm 04:43 PM

IDEA (IntelliJIDEA) is a powerful integrated development environment that can help developers develop various Java applications quickly and efficiently. In Java project development, using Maven as a project management tool can help us better manage dependent libraries, build projects, etc. This article will detail the basic steps on how to create a Maven project in IDEA, while providing specific code examples. Step 1: Open IDEA and create a new project Open IntelliJIDEA

See all articles