手动搭建koa项目

最新推荐文章于 2024-07-03 16:58:10 发布

咸鱼与梦想

最新推荐文章于 2024-07-03 16:58:10 发布

阅读量317

点赞数

分类专栏： koa 文章标签： koa

本文链接：https://blog.csdn.net/angle_lzc/article/details/86615076

版权

koa 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

初始化项目并按装koa

npm init -yes
yarn add koa

新建文件app.js

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


app.use(async ctx =>{
    ctx.body = 'hello world'
})

app.listen(3001, ()=>{
    console.log('server running on http://localhost:3001')
})

package.json中新增“start”：“nodemon app.js””

{
  "name": "Koa2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.6.2"
  }
}

npm start 即可运行一个简单的koa应用
koa-view模块（用于渲染静态模板）

yarn add koa-view

在app.js中新增代码并新建目录view，在view中新建文件index.html

const view = require('koa-view')

app.use(view(__dirname + '/view'))
app.use(async ctx =>{
    ctx.render('index', {
        title: 'welcome to koa'
    })
})

<!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>Document</title>
</head>
<body>
    <div>
        {{title}}
    </div>
</body>
</html>

koa-router（用于路由导航）：yarn add koa-router
新建文件夹/route并创建文件/route/index.js

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

router.get('/', async ctx =>{
    ctx.render('index', {
        title: 'welcome to koa2'
    })
})

module.exports = router

修改app.js即可看到index.html被渲染

const Koa = require('koa')
const app = new Koa()
const view = require('koa-view')
const index = require('./route')

app.use(view(__dirname + '/view'))
app.use(index.routes(), index.allowedMethods())

app.listen(3001, ()=>{
    console.log('server running on http://localhost:3001')
})

koa-static（用于存放静态资源）：yarn add koa-static
app.js中运用：

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

新建目录以及文件：/public/css/index.css

body{
    color: orange;
}

在index.html中引入css：<link rel=“stylesheet” href="/css/index.css">即可看到body中颜色发生改变

跨域（koa2-cors）
yarn add koa2-cors

var Koa = require('koa');
var cors = require('koa2-cors');
var app = new Koa();
app.use(cors());

post数据转换（koa-body）
yarn add koa-body

const Koa = require('koa');
const koaBody = require('koa-body'); 
const app = new Koa(); 
app.use(koaBody());
app.use(ctx => {
	//使用koa-body之后会带上ctx.request.body对象
  ctx.body = `Request Body: ${JSON.stringify(ctx.request.body)}`;
}); 
app.listen(3000);

打印日志（添加在app.js中）

//log
app.use(async (ctx, next) =>{
    let start = new Date()
    await next()
    let ms = new Date - start
    console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

koa-logger（打印日志）

const logger = require('koa-logger')

app.use(logger())

到此，简单的koa即搭建完毕。
源码：mykoa2
如果是前后端分离用koa做后台api，可不需要pug模板渲染

可用脚koa-generator手架快速搭建项目（集成了koa、koa-router、koa-static、koa-view以及pug模板等）

npm i koa-generator -g
koa2 myKoa
cd myKoa && yarn

咸鱼与梦想

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手动搭建koa项目

初始化项目并按装koanpm init -yesyarn add koa新建文件app.jsconst Koa = require('koa')const app = new Koa()app.use(async ctx =&amp;amp;amp;amp;gt;{ ctx.body = 'hello world'})app.listen(3001, ()=&amp;amp;amp;amp;gt;{ consol...
复制链接

扫一扫

专栏目录