Koa2路由及koa腳手架使用入門詳解

更新時間：2023年05月24日 11:03:42 作者：前端老兵

這篇文章主要為大家介紹了Koa2路由及koa腳手架的使用入門詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

路由是什么

路由（routing）是指分組從源到目的地時，決定端到端路徑的網(wǎng)絡(luò)范圍的進(jìn)程。

路由是根據(jù)不同的 url 地址展示不同的內(nèi)容或頁面。

比如你請求了某個網(wǎng)站的用戶列表的URL他就會去執(zhí)行查詢用戶列表，并返回用戶列表數(shù)據(jù)。

如果你請求了特定用戶的接口的URL，他就會查詢特定用戶，并返回給你特定用戶的數(shù)據(jù)。

路由決定了不同URL是如何被不同地執(zhí)行的

在Koa中，路由的本質(zhì)是中間件

為什么要用路由？

如果沒有路由，會怎么樣？
路由存在的意義是什么？

如果沒有路由

所有請求都做了相同的事
所有請求都會返回相同的結(jié)果

路由存在的意義

處理不同的URL
處理不同的HTTP方法
解析URL上的參數(shù)

koa中使用路由

自定義項目中使用koa路由

安裝

npm install koa-router

新建服務(wù)器

const koa = require('koa');// 引入koa
const Router = require('koa-router');
//配置路由 ，ctx 上下文context ，包含了request和response等信息
var router =  new Router();
router.get('/',async (ctx)=>{
    ctx.body = '首頁'; //相當(dāng)于 res.writeHead(); res.end();
}).get('/news',async (ctx)=>{
    ctx.body = '這是一個新聞頁面';
});
const app = new koa();//實例化koa
app.use(router.routes()); //啟動路由
app.use(router.allowedMethods());//官方配置

獲取get傳值

const koa = require('koa');
var router = require('koa-router')();
var app = new koa();
router.get('/',async (ctx)=>{
    ctx.body = '首頁';
});
router.get('/news',async (ctx)=>{
    ctx.body = '新聞列表頁面';
});
//獲取get傳值
router.get('/newscontent',async(ctx)=>{
    //從ctx中讀取get值
    console.log(ctx.query); //獲取的是格式化的對象，例｛id:'123'｝
    console.log(ctx.querystring); //獲取的是url的字符串 ,例：'id=123'
    console.log(ctx.request); //獲取請求相關(guān)的信息，包括method,url，header等信息
    ctx.body = '新聞詳情';
});
//動態(tài)路由 
router.get('/news/:params',async(ctx)=>{
    //aid 為自定義參數(shù)名，可以通過ctx.params訪問
    //如果有多個動態(tài)傳值，則可以寫成 '/news/:params1/:params2'的形式
    ctx.body = ctx.params;
});
app.use(router.routes()); //啟動路由
app.use(router.allowedMethods()); //官方配置，請求錯誤的時候返回一個狀態(tài)
app.listen(3000);

使用 koa 腳手架（koa-generator）創(chuàng)建項目中使用koa路由

如果您使用 koa 腳手架（koa-generator）已經(jīng)創(chuàng)建好了項目你，那么使用路由會非常簡單。

如果不清楚如何使用koa腳手架，請參考：

淺談Koa

koa2項目目錄詳解：

.
+-- bin
|   +-- www               // 項目啟動必備文件,配置端口等服務(wù)信息
+-- node_modules          // 項目依賴，安裝的所有模塊都會在這個文件夾下
+-- public                // 存放靜態(tài)文件，如樣式、圖片等
|   +-- images            // 圖片
|   +-- javascript        // js文件
|   +-- stylesheets       // 樣式文件
+-- routers               // 存放路由文件，如果前后端分離的話只用來書寫api接口使用
|   +-- index.js
|   +-- user.js
+-- views                 // 存放存放模板文件，就是前端頁面，如果后臺只是提供api的話，這個就是備用
|   +-- error.pug
|   +-- index.pug
|   +-- layout.pug
+-- app.js                // 主入口文件
+-- package.json          // 存儲項目名、描述、作者、依賴等等信息
+-- package-lock.json     // 存儲項目依賴的版本信息，確保項目內(nèi)的每個人安裝的版本一致

打開 routes\index.js,j即可查看創(chuàng)建好的路由文件。

var router = require('koa-router')(); // 引入路由插件
// 定義路由內(nèi)容 我們只需要操作這里即可
router.get('/', function *(next) {
  yield this.render('index', {
    title: 'Hello World Koa!'
  });
});
router.get('/foo', function *(next) {
  yield this.render('index', {
    title: 'Hello World foo!'
  });
});
router.post('/post1', function *(next) {
  yield this.render('index', {
    title: 'Hello World foo!'
  });
});
//獲取get傳值
router.get('/newscontent',async(ctx)=>{
    //從ctx中讀取get值
    console.log(ctx.query); //獲取的是格式化的對象，例｛id:'123'｝
    console.log(ctx.querystring); //獲取的是url的字符串 ,例：'id=123'
    console.log(ctx.request); //獲取請求相關(guān)的信息，包括method,url，header等信息
    ctx.body = '新聞詳情';
});
//動態(tài)路由 
router.get('/news/:params',async(ctx)=>{
    //aid 為自定義參數(shù)名，可以通過ctx.params訪問
    //如果有多個動態(tài)傳值，則可以寫成 '/news/:params1/:params2'的形式
    ctx.body = ctx.params;
});
module.exports = router; // 導(dǎo)出路由

app.js中路由展示

注意：這里，只展示有關(guān)路由代碼，還有其他代碼，省略了不少：

var app = require('koa')();
...
var index = require('./routes/index'); 
var users = require('./routes/users'); // 自定義的路由模塊 : 用戶模塊 users
...
// routes definition
app.use(index.routes(), index.allowedMethods());  //啟動路由 
app.use(users.routes(), users.allowedMethods());  //官方配置，請求錯誤的時候返回一個狀態(tài)
...
module.exports = app;

users.js

var router = require('koa-router')(); // 引入路由插件
router.prefix('/users'); // 定義路由前綴
// 定義路由內(nèi)容 我們只需要操作這里即可
router.get('/', function *(next) {
  this.body = 'this is a users response!';
});
router.get('/bar', function *(next) {
  this.body = 'this is a users/bar response!';
});
module.exports = router; // 導(dǎo)出路由