Node.js之koa2学习笔记

听说 koaexpress 的原班人马打造的,比 express 似乎更帅一些,帅的我,就用帅的东西,为此,学习 koa 迫在眉睫。

nodejs_图源百度

0x00 初始化项目

部署基础的模块和内容

// 第一步:生成 package.json 包管理文件
npm init --yes

// 第二步:安装 koa,koa-router 包, --save生产环境
npm i koa koa-router --save

//第三步:全局安装nodemon包,用于动态更新
npm i nodemom -g

//第四步:创建 app.js,修改package.json

目前package.json 文件内容如下:

{
  "name": "learn",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "nodemon app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.7.0",
    "koa-router": "^7.4.0"
  }
}

app.js 文件内容如下:

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

// 实例化 app
const app = new Koa();
const router = new Router();


// 路由
router.get('/', async (ctx) => {
    ctx.body = 'Hello DYBOY';
});


// 配置路由
app.use(router.routes()).use(router.allowedMethods());


// 端口,服务监听
const port = process.env.PORT || 5000;
app.listen(port, () => {
    console.log(`Server is running at http://127.0.0.1:${port}`);
});

命令运行:

npm start

Referencehttps://www.npmjs.com/package/koa


0x01 路由

koa-router 模块,就是路由模块

1.1 GET 参数获取

router.get('/user', async (ctx, next) => {
  // ctx.query             得到get的查询参数对象          {id: '1', name: 'dyboy'}   常用
  // ctx.querystring       得到get的查询参数字符串        id=1&name=dyboy
  // ctx.url               获取url
  // ctx.request           得到请求的数据
});

// ctx.request 的内容如下
{ 
  method: 'GET',
  url: '/user?id=1&name=dyboy',
  header:
   { 
     host: '127.0.0.1:5000',
     connection: 'keep-alive',
     'upgrade-insecure-requests': '1',
     'user-agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36',
     accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
     dnt: '1',
     'accept-encoding': 'gzip, deflate, br',
     'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8',
     cookie:  'csrftoken=EW7JD5GdHfPiAMqRTWIufgaSjgEAAoHV' 
  } 
}

1.2 POST参数获取

koa2 中没有默认的 POST 处理方法,原始处理方式:

  1. 解析处理上下文 ctxreq 对象
  2. POST 数据解析为 query string
  3. query string 解析为 jsonObject

不过这样过于麻烦,有 koa-bodyparser 模块

安装:

npm i koa-bodyparser --save

这样 POST 请求的数据,就存在 ctx.request.body 当中,返回的是一个对象

const bodyParser = require('koa-bodyparser');   // 加载模块
app.use(bodyParser());                          // 挂载到app

router.post('/login', async (ctx) => {
    let postData = ctx.request.body;           // post数据
    ctx.body = postData;
});

1.3 动态路由

router.get('/user/:uid/:uname', async (ctx, next) => {
    // console.log(ctx.request);
    console.log(ctx.params);        // 得到URL中的动态路由,动态路由的返回值,是一个查询参数对象
});

1.4 子路由

子路由利于模块化,新建 一个routes文件夹,其下有后台管理文件夹admin和admin.js,admin目录下有user.js用于管理用户的

admin.js内容

var router = require('koa-router');

var user = require('./admin/user.js');

router.get('/', async (ctx) => {
  ctx.body = "这是管理首页!";
});

router.use('/user', user);

moudle.export = router.routes();

user.js 内容

var router = require('koa-router');


router.get('/', async (ctx) => {
  ctx.body = "这是用户管理首页!";
});

router.get('/add', async (ctx) => {
  ctx.body = "添加用户!";
});

router.get('/del', async (ctx) => {
  ctx.body = "删除用户!";
});

moudle.export = router.routes();

在根目录下app.js中调用

var admin = reuqire('./routes/admin/admin.js');
router.use('/admin', admin);
// 访问 : http://127.0.0.1:3000/admin   就是管理后台的首页
// http://127.0.0.1:3000/admin/user     这就是用户管理首页 !

0x02 中间件

中间件功能:执行任何代码,修改请求和响应对象,终结请求和响应对象,调用堆栈中的下一个中间件

2.1 应用级中间件:

在请求处理前打印时间

const Koa = require('koa');
const router = require('koa-router')();
const bodyParser = require('koa-bodyparser');


const app = new Koa();
app.use(bodyParser());

// 应用级中间件 打印请求时间
app.use(async (ctx, next) => {
    console.log(new Date());    // 打印请求时间
    await next();               // 等待下一个中间件执行完成
});

router.get('/', async (ctx, next) => {
    ctx.body = 'Hello DYBOY';
});
router.get('/user/:uid', async (ctx, next) => {
    console.log(ctx.params);
});
router.post('/login', async (ctx) => {
    let postData = ctx.request.body;
    ctx.body = postData;
});

app.use(router.routes()).use(router.allowedMethods());

const port = process.env.PORT || 5000;
app.listen(port, () => {
    console.log(`Server is running at http://127.0.0.1:${port}`);
});

2.2 路由级中间件

先打印请求的URL

router.get('/', async(ctx, next)=>{
    console.log(ctx.url)
    next()
})
router.get('/', function (ctx) {
    ctx.body="Hello DYBOY";
})

2.3 错误处理中间件

预先处理404页面

app.use(async (ctx, next) => {
    next();
    if(ctx.status == '404') {
        ctx.body = 'Sorry, we can not find the page!';
    }
});

2.4 第三方中间件

挂载到app上的三方插件模块,例如 koa-bodyparser

const bodyParser = require('koa-bodyparser');
app.use(bodyParser());

koa 中间件处理顺序


0x03 koa-static 静态资源中间件

http请求访问网站的静态资源,例如,jscss、图片资源,可以理解为:koa-static设置静态资源解析的URI,设置解析为静态资源的目录。

安装:

npm i koa-static --save

新建一个 public 目录

const Static = require('koa-static');

app.use(Static(__dirname, 'public'));

如此就可以通过 类似: http://www.test.com/public/1.jpg,访问 public 目录下所有静态资源!

Referencehttps://www.npmjs.com/package/koa-static


HTTP是无状态协议,浏览器作为客户端,将服务端生成的特征字符串叫做cookie,用于标志客户端的唯一性。cookie是具有时效性的,因此cookie是解决无状态的一种方式。

ctx.cookie.set(name, value, [options]);
ctx.cookie.get('name');

0x05 Session

Session 与 cookie的不同点在于,session保存在服务端,session更安全,cookie的数据不能超过4K(65535bit)

安装 koa-session

npm i koa-session --save

session可以在ctx.session中直接赋值,取值

用session统计该用户浏览次数

const Koa = require('koa');
const session = require('koa-session');

const app = new Koa();

app.keys = ['name'];

const  CONFIG = {
    key: 'koa:sess',
    maxAge: '86400000',         // 以下的值均为缺省值
    autoCommit: true,
    overwrite: true,
    httponly: true,
    signed: true,
    rolling: false,
    renew: false
};

app.use(session(CONFIG, app));

app.use(ctx => {
    if(ctx.path == '/favicon.ico') return;
    let n = ctx.session.views || 0;
    ctx.session.views = ++n;
    ctx.body = ctx.session.views;
});

app.listen(3000);

Referencehttps://www.npmjs.com/package/koa-session


0x06 模版引擎 art-template

模版引擎用于渲染动态生成返回页面

art-template 采用作用域声明的方式来优化渲染速度,同时支持node.js和浏览器

貌似是腾讯员工开发的???估计去了腾讯实习,也是用这个模版吧,估计~

几种模版的速度比较

安装:

npm i art-template koa-art-template --save

配置 koa2 的中间件:

const Koa = require('koa');
const render = require('koa-art-template');

const app = new Koa();
render(app, {
  root: path.join(__dirname, 'view'),
  extname: '.art',
  debug: process.env.NODE_ENV !== 'production'
});

app.use(async function (ctx) {
  await ctx.render('user');
});

app.listen(8080);

Reference:


0x07 数据库

后端的操作自然离不开数据库的配合

7.1 Mysql

安装:

npm install mysql --save

使用方法:

var mysql  = require('mysql');
var connection = mysql.createConnection({
  host     : '127.0.0.1',
  user     : 'root',
  password : 'root',
  database : 'cqudb'
});

// 建立连接
connection.connect();

// 查询
connection.query('SELECT * FROM students', (error, results, fields) => {
  if (error) throw error;
  console.log('The solution is: ', results[0].solution);
});

// 断开
connection.end();

7.2 MongoDB

安装

npm i mongodb --save

使用

var MongoCilent = require('mongodb').MongoClient;

var url = 'mongodb://localhost:27019';
var dbName = 'cqudb';

MongoClient.connect(url, function(err, client) {
  const db = client.db(dbName);
  db.collection('user').insertOne({"sid": "202135151","sname": "小东"}, function(err, result) {
    // 关闭连接
    db.close();
  })
});

0x08 MVC基本结构

构建项目基本结构的步骤:

// 创建dyapp目录
mkdir dyapp

cd dyapp

// 初始化生成一个package.json文件
npm init --yes

// 安装必要的包
npm install koa koa-router koa-session koa-bodyparser koa-static art-template koa-art-template mysql --save

// 开发环境的自动运行包
npm install nodemon -g

// 创建基本的目录结构
mkdir routes
mkdir views
mkdir public
mkdir config
mkdir utils
echo 1 > app.js

0x09 总结

nodejs —— 前辈的智慧结晶!

发表评论 / Comment

用心评论~

金玉良言 / Appraise
7LV 1
2019-05-23 20:01
东哥,新的页面怎么新建啊
回复我下呗
头像
DYBOY站长已认证
2019-05-24 18:01
@7:可以看下教程哈,https://blog.dyboy.cn/develop/129.html,文章内有视频教程!

Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/blog.dyboy.cn/content/templates/dyblog/footer.php:56) in /www/wwwroot/blog.dyboy.cn/include/lib/view.php on line 23