Web应用开发框架-koa(二)——koa原生路由 & koa-route模块 & koa-static模块请求静态资源之图片、字体、样式表、脚本 & koa路由重定向

Web应用开发框架-koa(二)——koa原生路由 & koa-route模块 & koa-static模块请求静态资源之图片、字体、样式表、脚本 & koa路由重定向

路由

1.原生路由

网站一般都有多个页面。通过ctx.request.path可以获取用户请求的路径，由此实现简单的路由。

const main = ctx => {
  if (ctx.request.path !== '/') {
    ctx.response.type = 'html';
    ctx.response.body = '<a href="/">Index Page</a>';
  } else {
    ctx.response.body = 'Hello World';
  }
};

2. koa-route模块

原生路由用起来不太方便，我们可以使用封装好的koa-route模块。

const route = require('koa-route');

const about = ctx => {
  ctx.response.type = 'html';
  ctx.response.body = '<a href="/">Index Page</a>';
};

const main = ctx => {
  ctx.response.body = 'Hello World';
};

app.use(route.get('/', main));
app.use(route.get('/about', about));

实例

route.js

var koa = require('koa');
var app = new koa();
var route = require('koa-route');


const main = (ctx) => {
    console.log()
    ctx.response.body = 'hello world';
}

const qita = (ctx) => {
    console.log()
    ctx.response.body = 'qita';
}

app.use(route.get('/', main));  //  1. 路径 2. ctx函数
app.use(route.get('/qita', qita));
app.listen(3000);  // 起服务 ， 监听3000端口

3. 静态资源

如果网站提供静态资源（图片、字体、样式表、脚本…），为它们一个个写路由就很麻烦，也没必要。koa-static模块封装了这部分的请求。

const path = require('path');
const serve = require('koa-static');

const main = serve(path.join(__dirname));
app.use(main);

实例1-基础版

read_img.js

var koa = require('koa');
var app = new koa();
var route = require('koa-route');
var fs = require('fs');
var path = require('path');

const main = (ctx) => {
    ctx.response.body = 'hello world';
}

// 目的： 读取图片
// 思路： 
// 1. 通过 fs读取图片
// 2. response返回图片，修改type
const meinv = (ctx) => {
    ctx.response.type = 'jpeg';
    ctx.response.body = fs.readFileSync(path.resolve(path.join(__dirname, './img/meinv.jpeg')));
}

app.use(route.get('/', main));  //  1. 路径 2. ctx函数
app.use(route.get('/meinv', meinv));
app.use(route.get('/meinv2', meinv2));
app.listen(3000);  // 起服务 ， 监听3000端口

实例2-实用版

static.js

var koa = require('koa');
var app = new koa();
var static = require('koa-static');

var path = require('path');

app.use(static(
    path.join(__dirname, './img')
));
app.listen(3000);  // 起服务 ， 监听3000端口

4.重定向

有些场合，服务器需要重定向（redirect）访问请求。比如，用户登陆以后，将他重定向到登陆前的页面。ctx.response.redirect()方法可以发出一个302跳转，将用户导向另一个路由。

const redirect = ctx => {
  ctx.response.redirect('/');
  ctx.response.body = '<a href="/">Index Page</a>';
};

app.use(route.get('/redirect', redirect));

实例

redirect.js

var koa = require('koa');
var app = new koa();
var route = require('koa-route');


const main = (ctx) => {
    ctx.response.body = 'hello world';
}

const qita = (ctx) => {
    // ctx.response.body = 'qita';
    ctx.response.redirect('/');
}

app.use(route.get('/', main));  //  1. 路径 2. ctx函数
app.use(route.get('/qita', qita));
app.listen(3000);  // 起服务 ， 监听3000端口