nodejs框架koa常用配置

文章目录

nodejs基础
express
koa
1. hello world
2. koa路由
3. nodemon 监控文件修改
4. koa中间件
5. 设置静态目录
6. 获取请求参数
7. 使用模板
8. 跨域配置
9. 使用vscode调试接口(下班回家了,明天再写)

nodejs基础（参考菜鸟教程的nodejs教程）

JavaScript语法
创建服务器模块http
文件读取模块fs
路径path
模块系统 require、module.exports
es6语法（新版本的nodejs除了模块外全部支持

nodejs框架-express

文档地址：http://www.expressjs.com.cn/

nodejs框架-koa

中文文档地址：https://koa.bootcss.com/
node模块仓库地址：https://www.npmjs.com/

koa之hello world

初始化package.json

新建目录koademo，执行 npm init，一路回车
创建一个简单的koa应用（hello world）

安装koa模块 npm install koa --save
在项目根目录新建app.js，app.js代码如下：

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

app.use(async ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000);

3. 执行node app.js
4. 用浏览器访问 http://localhost:3000

koa路由(一) koa-simple-router

https://www.npmjs.com/package/koa-simple-router
安装 koa-simple-router模块，然后修改上面的app.js代码，变成下面这个样子

const Koa = require('koa')
const router = require('koa-simple-router')
const app = new Koa()
 
app.use(router(_ => {
  _.get('/', (ctx, next) => {
    ctx.body = 'hello world';
  })
  _.post('/path', (ctx, next) => {
 
  })
  // 同时支持get和post请求
  _.all('/login', (ctx, next) => {
    ctx.body = {
        code: 666,
        msg: '登录成功'
    }
  })
  _.all('/regester', (ctx, next) => {
    ctx.body = {
        code: 666,
        msg: '注册成功'
    }
  })
}))

app.listen(3000,()=>{
    console.log('服务已启动，在 http://localhost:3000/');
});

启动服务，用浏览器访问
http://localhost:3000/login 和
http://localhost:3000/register

为了让代码结构性更好，我们可以把路由这部分单独放在一个文件里

kao路由(二) koa-router(我目前用这个)

创建新文件夹koa-app作为项目的跟目录
使用终端(命令提示符或者powershell)进入根目录,初始化package.json
```
npm init -y
```
安装koa和koa-router
```
npm i koa koa-router --save-dev
```

新建app.js,代码如下

const Koa = require('koa')
const Router = require('koa-router')
const app = new Koa()
const router = new Router();

router.get('/', ctx => {
  ctx.body = 'hello world'
})
router.get('/demo1', ctx => {
  ctx.body = 'demo1'
})
router.post('/demo1', ctx => {
  ctx.body = 'demo1'
})
router.all('/demo2', ctx => {
  ctx.body = 'demo2'
})

app.use(router.routes());

app.listen(3000, () => {
  console.log('服务已启动，在 http://localhost:3000/');
});

启动服务，用浏览器访接口即可

封装router,我们一般会把router单独放到一个文件,然后倒入到app.js使用

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

router.all('/', ctx => {
  ctx.body = 'hello world'
})
router.all('/add', ctx => {
  ctx.body = 'add'
})
router.all('/getList', ctx => {
  ctx.body = 'demo1'
})
router.all('/del', ctx => {
  ctx.body = 'del'
})
router.all('/edit', ctx => {
  ctx.body = 'edit'
})

module.exports = router;

app.js里的代码变成这样

const Koa = require('koa')
const app = new Koa()
const router = require('./router');

app.use(router.routes());

app.listen(3000, () => {
  console.log('服务已启动，在 http://localhost:3000/');
});

服务器自动重新部署

我们发现没修改一次代码，都必须重启才能生效，这显然不方便，我们希望修改了文件服务能自动重启.能实现这样功能的node模块有下面两个.

nodemon和supervisor
1. 全局安装npm i nodemon -g 或 npm i supervisor -g
2. 启动服务的时候用nodemon app.js 或 supervisor app.js代替node app.js

koa中间件

一个请求从发出到返回数据,如果我们想在这个过程里做一些统一的操作,可以使用中间件来完成.

中间件是个函数

使用中间件的方式, app.use(中间件)

app.use((ctx, next) => {
 // 在ctx上放入username,后面的所有请求的ctx里都会有username这个变量
  ctx.username = '我是老胡';
  // 处理完之后放行,不使用next()的话,程序会被挂起来不动了
  next();  // 在vue路由守卫里曾使用过next
})

中间件有顺序

设置静态目录

在目录中创建目录static，在public下创建文件demo.html，访问http://localhost:3000/public/demo.html是无法访问得到，因为我们还没有设置静态资源目录,设置静态资源目录要用到koa-static模块
安装koa-static
```
npm i koa-static --save-dev
```
在app.j是里加入如下代码

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

再来访问 http://localhost:3000/demo.html 就可以访问了,ps: 路径不用加public

获取请求参数

给刚才的demo.html添加axios用来发送请求，代码如下：

<!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>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
</head>
<body>
  <h3>
    测试koa静态资源目录
  </h3>

  <script>
    let url = 'http://localhost:3000/add';
    let data = {
      params: {
        username: 'laohu',
        phone: 13800000000
      }
    }
    axios.get(url, data).then(res => {
      console.log(res);
    })

  </script>
</body>
</html>

获取get请求参数
在router.js的add接口里加入如下代码

router.all('/add', ctx => {
  // 获取get请求参数
  const username = ctx.query.username;
  const phone = ctx.query.phone;
  // 把拿到的数据放入ctx.body
  ctx.body = {
    module: 'add',
    username,
    phone
  }
})

获取post请求
获取post请求需要使用koa-body模块
安装koa-body npm i koa-body --save
```
npm i koa-body --save
```
在app.js里加入如下代码：

const koaBody = require('koa-body');
app.use(koaBody());

获取post请求参数的代码如下

ctx.request.body.xxx

使用模板

一般请求一个接口返回的是一坨数据，然而有时候我们希望返回的是一个html网页或者一段html代码（上周分享的服务器渲染）
我们试用koa-swig模块来向前端返回一个html

安装koa-swig

npm i koa-swig --save-dev

在根目录创建views目录，在views目录下创建tpl.html,代码如下

<!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>
  <h3><%=title %></h3>
  <ul>
    <%
      list.forEach(item=>{
    %>
    <li><%=item.username %> => <%=item.age %></li>
    <%
    })
    %>
  </ul>
</body>

</html>

在app.js添加如下代码：

const views = require("koa-views");
app.use(views(path.join(__dirname, "views"), {
  map: {
    html: 'underscore'
  }
}));
   
// 在路由中使用   
router.all('/', async ctx => {
  const list = [{
      username: '约书亚',
      age: 22
    },
    {
      username: '亚伯拉罕',
      age: 100
    },
    {
      username: '挪亚',
      age: 500
    }
  ]

  await ctx.render('tpl', {
    title: 'kao-框架实战',
    list
  });
})

访问 http://localhost:3000，就可以看到一个html页面

ps: 要访问一个接口,吐出一个页面你还可以直接在js里使用反引号``拼接模板,当然也可以使用vue来渲染

跨域配置

自己编写一个中间件即可,代码如下

// 跨域设置
app.use(async (ctx, next) => {
  ctx.set("Access-Control-Allow-Origin", "*");
  await next();
})

访问刚才的demo.html文件, http://localhost:3000/demo.html,你会发现你的请求的响应头上添加了Access-Control-Allow-Origin: *,说明服务器跨域设置已经成功了.

demo地址
（未完待续）
相关文章：
mongoose常用操作

egg+mongodb 配置
koa+mogodb创建简单的增删改查项目(待更新)

nodejs框架koa常用配置

nodejs框架koa常用配置

文章目录

nodejs基础（参考菜鸟教程的nodejs教程 ）

nodejs框架-express

nodejs框架-koa

koa之hello world

koa路由(一) koa-simple-router

kao路由(二) koa-router(我目前用这个)

服务器自动重新部署

koa中间件

设置静态目录

获取请求参数

使用模板

跨域配置

推荐阅读更多精彩内容

nodejs基础（参考菜鸟教程的nodejs教程）