学习笔记之koa.js 框架

koa.js 框架

安装koa框架

$ npm init --yse //初始化package.json
$ npm install koa koa-router koa-bodyparser --save
/*
安装koa框架及常用中间件
koa-router koa的路由中间件
koa-bodyparser koa的POST请求数据获取中间件
*/

koa使用

const Koa = require('koa');
const app = new Koa();
app.use(async (ctx, next) => {
	//ctx为上下文，包含node req、res对象，koa request、response对象等
	await next();
	//next()下面的代码会在koa匹配到路由并响应请求后执行
});

koa-router使用

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

const app = new Koa();
const router = new Router();

router.get('/', async ctx => {
	ctx.body = "hello Koa!";
}); //定义路由

app.use(router.routes()); //使用路由
app.use(router.allowedMethods()); 

koa-bodyparser使用

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

const app = new Koa();

app.use(bodyParser());
app.use(async ctx => {
	ctx.body = ctx.request.body; //ctx.request.body为POST请求传递的数据
});

koa-views使用

$ npm install koa-views --save //安装
$ npm install ejs --save //安装ejs模板引擎

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

const app = new Koa();

//配置ejs模板引擎，views()的第一个参数为视图文件目录，第二个参数为使用哪种模板引擎
app.use(views('views', { extension: 'ejs' })); //视图文件的后缀名为“.ejs”
/*
也可使用以下方式配置模板引擎，“ __dirname ”为当前目录，当使用以下方式时，视图文件的后缀名为“.html”
app.use(views(__dirname + '/views', {
	map: {
		html: 'ejs'
	}
}));
*/
//ctx.state 全局命名空间，里面的数据可全局使用
app.use(async (ctx, next) => {
	ctx.state = {
		name: "张三",
		age: "25"
	};
	await next();
});
app.use(async ctx => {
	await ctx.render('index.ejs', { title: "hello Koa" }); 
	//渲染视图文件，可传递第二个参数对象将后端数据传递到视图文件
	//render()方法是异步的，需使用"await"关键字等待render()方法执行完毕后传递数据
});

/*******ejs模板引擎使用*******/
//绑定数据
<%=title%> 
//循环渲染数据，即在ejs中，js代码需要用“<% //js代码 %>”包围
<%for(let i = 0; i < array.length; i++) {%>
	<p><%=array[i]%></p>
<%}%>
//引入ejs模块文件
<% include public/header.ejs %>
//绑定HTML标签数据，let content = `<div>渲染带HTML标签数据</div>`
<%-content%>
//条件渲染数据 ，let num = 24;
<% if(num > 24) { %>
	<p>数字大于24</p>
<% } else { %>
	<p>数字小于24</p>
<% } %>

/*******art-template模板引擎使用（相对渲染比较快的模板引擎）*******/
/*有两种渲染模式
标志语法
{{ //两个大括号包围JS代码 }}
原始语法，与ejs相同
<% //JS代码 %>
*/
//安装
$ npm install  art-template koa-art-template --save
//引入
cosnt Koa = require('koa');
const render = require('koa-art-template');
const path = require('path');

const app = new Koa();
//配置
render(app, {
	root: path.join(__dirname, 'views'), //视图文件目录
	extname: '.art', //视图文件后缀名，可更改为.html
	debug: process.env.NODE_ENV !== 'production' //是否开启调试模式
});
//使用
app.use(async ctx => {
	await ctx.render('index.art', { title: "hello Koa" }); 
});

koa-static使用

$ npm install koa-static --save //安装

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

const app = new Koa();

app.use(serve('static')); //static为资源目录