使用koa2創(chuàng)建web項(xiàng)目的方法步驟
Github上有一個(gè)express風(fēng)格的koa腳手架，用著挺方便，一直以來(lái)使用koa開(kāi)發(fā)web項(xiàng)目用的也都是那個(gè)腳手架，今天想自己從頭搭一個(gè)web項(xiàng)目，就折騰了一下
腳手架地址： https://github.com/17koa/koa-generator
初始化
使用 npm init 初始化一個(gè)nodejs項(xiàng)目
mkdir koa-demo cd koa-demo npm init
一直回車即可，創(chuàng)建好之后目錄里會(huì)有一個(gè) package.json 文件
安裝依賴
npm install --save koa koa-body koa-logger koa-json-error koa-router koa-static koa-njk
- koa
- koa-body 解析http請(qǐng)求參數(shù)的，支持 multipart/form-data application/x-www-urlencoded application/json 三種參數(shù)類型
- koa-logger 顯示http請(qǐng)求的日志
- koa-router 路由
- koa-json-error 程序出異常輸出json
- koa-static 映射靜態(tài)資源文件
- koa-njk nunjucks模板解析
配置
在根目錄下創(chuàng)建 app.js 然后貼上下面代碼，代碼內(nèi)有注釋，很簡(jiǎn)單
// 引入依賴
const koa = require('koa');
const koa_body = require('koa-body');
const koa_json_error = require('koa-json-error');
const koa_logger = require('koa-logger');
const koa_static = require('koa-static');
const koa_njk = require('koa-njk');
const path = require('path');
// 初始化koa
const app = new koa()
// 引入路由配置文件，這個(gè)在下面說(shuō)明
const routers = require('./routes/routers');
// 配置程序異常輸出的json格式
app.use(koa_json_error((err) => {
return {
code: err.status || 500,
description: err.message
}
}));
// 添加靜態(tài)資源文件映射
app.use(koa_static(path.join(__dirname, 'static')))
// 添加nunjucks模板
app.use(koa_njk(path.join(__dirname, 'views'), '.njk', {
autoescape: true,
}, env => {
// 添加自己的過(guò)濾器
env.addFilter('split', (str, comma) => {
if (str) {
return str.split(comma);
} else {
return '';
}
});
}));
// 解析表單提交參數(shù)
app.use(koa_body());
// 顯示請(qǐng)求和響應(yīng)日志
app.use(koa_logger());
// 路由
app.use(routers.routes())
// 程序啟動(dòng)監(jiān)聽(tīng)的端口
const port = 3000;
app.listen(port);
console.log('Listening on ' + port);
路由
在根目錄下創(chuàng)建 routes 文件夾
在 routes 文件夾內(nèi)創(chuàng)建 index.js routers.js 文件
在 index.js 文件內(nèi)添加如下代碼
// 測(cè)試路由，輸出請(qǐng)求的參數(shù)
exports.index = async ctx => {
const body = ctx.request.body;
const query = ctx.request.query;
const params = ctx.params;
ctx.body = {
body: body,
query: query,
params: params,
};
}
// 測(cè)試nunjucks模板
exports.view = async ctx => {
await ctx.render('index', {
title: 'Koa'
})
}
// 測(cè)試異常
exports.test_error = async ctx => {
throw new Error('測(cè)試異常');
}
配置路由，在 routers.js 文件內(nèi)配置路由
const router = require('koa-router')();
// route
const index = require('./index');
router.get('/view', index.view);
router.get('/index', index.index);
router.get('/index:id', index.index);
router.post('/index', index.index);
router.get('/test_error', index.test_error);
module.exports = router
靜態(tài)文件
在根目錄創(chuàng)建文件夾 static 添加 app.css 文件，寫上下面代碼
body {
background-color: #eee;
}
模板
在根目錄創(chuàng)建文件夾 views 添加 index.njk 文件，寫上下面代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <link rel="stylesheet" href="/app.css" rel="external nofollow" > </head> <body> Hello, ! <br> <ul> <!-- 使用自定義的過(guò)濾器 --> </ul> </body> </html>
啟動(dòng)
安裝 nodemon
npm install -g nodemon
在根目錄運(yùn)行命令啟動(dòng)項(xiàng)目
nodemon app.js
測(cè)試
訪問(wèn) http://localhost:3000/view/
訪問(wèn) http://localhost:3000/index/ 可以看到輸出的json
{
"body": {},
"query": {},
"params": {}
}
訪問(wèn) http://localhost:3000/index/?id=1
{
"body": {},
"query": {
"id": "1"
},
"params": {}
}
訪問(wèn) http://localhost:3000/index/1
{
"body": {},
"query": {},
"params": {
"id": "1"
}
}
POST 請(qǐng)求 curl -X POST http://localhost:3000/index/ -d '{"id": "1"}' -H 'Content-Type:application/json'
{
"body":{
"id":"1"
},
"query":{},
"params":{}
}
訪問(wèn) http://localhost:3000/test_error
{
"code": 500,
"description": "測(cè)試異常"
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Node.js API詳解之 readline模塊用法,結(jié)合實(shí)例形式詳細(xì)分析了Node.js API中readline模塊基本函數(shù)、功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
nodejs?實(shí)現(xiàn)簡(jiǎn)單的文件上傳功能(示例詳解)
這篇文章主要介紹了nodejs?實(shí)現(xiàn)簡(jiǎn)單的文件上傳功能,文件上傳方式分為三種，本文通過(guò)實(shí)例代碼給大家詳細(xì)介紹，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02
關(guān)于Mac下安裝nodejs、npm和cnpm的教程
本文通過(guò)圖文并茂的形式給大家介紹了Mac下安裝nodejs、npm和cnpm的教程，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
PHP和NodeJs開(kāi)發(fā)的應(yīng)用如何共用Session
這篇文章主要介紹了PHP和NodeJs開(kāi)發(fā)的應(yīng)用如何共用Session的相關(guān)資料及思路,需要的朋友可以參考下2015-04-04
本篇文章主要介紹了詳解NODEJS基于FFMPEG視頻推流測(cè)試，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
node.js正則表達(dá)式獲取網(wǎng)頁(yè)中所有鏈接的代碼實(shí)例
這篇文章主要介紹了node.js正則表達(dá)式獲取網(wǎng)頁(yè)中所有鏈接的代碼實(shí)例,使用正則表達(dá)式實(shí)現(xiàn),需要的朋友可以參考下2014-06-06
NestJS開(kāi)發(fā)核心概念Providers類基本用法詳解
這篇文章主要為大家介紹了NestJS開(kāi)發(fā)核心概念Providers類基本用法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
解決Node.js包管理器安裝報(bào)錯(cuò)npm?ERR!?code?1的問(wèn)題
在開(kāi)發(fā)過(guò)程中,我們經(jīng)常需要使用各種Node.js包來(lái)擴(kuò)展我們的應(yīng)用程序功能,這些包通常通過(guò)npm（Node.js包管理器）進(jìn)行安裝和管理,有時(shí)候我們可能會(huì)遇到一些關(guān)于npm的錯(cuò)誤,本文將詳細(xì)介紹如何解決這個(gè)問(wèn)題,并提供一個(gè)詳細(xì)的實(shí)例,需要的朋友可以參考下2024-03-03
Node.js API詳解之 util模塊用法實(shí)例分析
這篇文章主要介紹了Node.js API詳解之 util模塊用法,結(jié)合實(shí)例形式分析了node.js API中util模塊基本功能與相關(guān)函數(shù)使用技巧,需要的朋友可以參考下2020-05-05
使用Node.js在深度學(xué)習(xí)中做圖片預(yù)處理的方法
這篇文章主要介紹了使用Node.js在深度學(xué)習(xí)中做圖片預(yù)處理的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09