自从node.js火了之后,前端工程师也可以分一杯后端的羹，node.js是运行在服务器端的基于javascript的脚本语言
当然也可以用原声 的node.js搭建后端服务器 但是那样代码量太大了 维护起来 也不好维护 这个时候就出来了俩款框架
express和koa 这俩个框架算是相爱相杀 竞争激烈 最后还是express胜出
不过express 胜出 只是 代表用的用户比较多 并不代表 就一定适合我们了
express 我在之前的博客有讲过 这里就不说了
今天来说说koa 框架 更具体的是说koa的第二代版本 koa2
koa 框架 是很小很小的轻量级框架 而且对最新的js版本 支持的也很好 比如 async await 等es7的语法它也支持
使用起来也很方便 能让我们快速搭建服务器
1.使用之前 你得先安装一个node.js版本 最好还是最新版本的吧
然后我们就是从零开始 快速入门koa2 框架
首先在页面上新建立一个 空白文件夹
打开命令行
npm init -y // 快速建立一个 package.json文件 不用不停的按回车了
然后就是 安装 koa
npm install koa -S
安装完了之后在当前文件夹下建立一个 index.js文件夹
const Koa=require('koa'); // 引入 koa
const app=new Koa(); // 实例化一个 app
app.use(async ctx=>{
ctx.body="hello koa" // 向前台界面响应一个hello koa
})
app.listen(3000,()=>{ // 监听 3000端口
console.log('服务器开启成功!');
})
然后再命令行中 输入命令 node index.js
再浏览器地址栏 输入 localhost:3000
就可以再页面上看到 一个 hello koa 就表示一个简单的服务器搭建完成
2.koa的post请求接受参数
app.use(async ctx=>{
// 叠加数据
let data='';
// 监听data事件 收到表单的数据就会执行
ctx.req.on('data',chunk=>{
data+=chunk; // chunk 二进制代码段 这里相当于 隐形使用了 toString()方法 字符串相加
});
// 接受表单提交数据完成后 执行
ctx.req.on('end',()=>{
data=decodeURI(data); // 解析数据 以防里面有汉字的出现
})
// 给前端返回数据
ctx.body=data;
})
3.koa-bodyparser中间件的使用
上面我们接受和处理 post传来的参数是不是有点麻烦了 不急有一个 koa-bodyparser 中间件的使用能简化我们的操作
还是先安装 npm i koa-bodyparser -S
然后就是引入
const bodyparser=require('koa-bodyparser'); // 引入
app.use(bodyparser()); // 注册使用
app.use(async ctx=>{
let data=ctx.request.body; // 直接使用 ctx.request.body 就能去除从前台传来的参数
ctx.body=data; // 然后反馈给前台
})
4.koa中路由 koa-router 的使用 还是和上面的一样 先安装
npm i koa-router -S
const Router=require('koa-router'); // 引入 路由
const router=new Router({ // 给路由每个地址前加前缀
prefix:'/user'
});
router.get('/abc',(ctx,next)=>{ // 建立一个get请求的路由 注意使用 /user/abc 进行进行请求
ctx.body="hello vue.js";
next()
})
app.use(router.routes()); // 注册路由
app.use(router.allowedMethods());
5.cookies的使用
app.use(async ctx=>{
if(ctx.url==='abc'){
ctx.cookies.set('name','vue.js',{
domain:'localhost',
path:'/abc',
maxAge:24*60*60*1000,
expires:new Date('2020-2-10'), //到期时间
httpOnly:false,
overwrite:false // 不允许重写覆盖
})
}
ctx.body="cookie success";
})
6.配合ejs模板的使用
学过expres的同学可能知道 ejs模板引擎 类似java中的framemarker 模板引擎
用来渲染从后端返回的数据
老样子 先安装
npm i koa-views ejs -S // koa-views 和 ejs配合使用的
//引入使用
const views =require('koa-views');
const path=require('path');
// 加载模板引擎
app.use(views(path.join(__dirname,'views'),{
extension:'ejs' // 标注后缀名字是 ejs
}))
//然后就是在当前文件夹下 建立一个 views文件夹 这个文件夹名字最好还是这个
然后建立一个 index.ejs 文件 注意后缀名字是 ejs
app.use(async ctx=>{
let title="hello webpack“;
await ctx.render('index',{ // 对应index.ejs 把title渲染过去
title,
list:[
{name:'css',age:63},
{name:'koa2',age:30},
{name:'javascript',age:40}
]
})
})
在 views 的文件夹下的 index.ejs文件 <%= %> ejs模板引擎语法 里面写 变量 写一个 = 里面只能放一个变量 注意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><%=title %></h1>
<ul>
<% for(let i=0;i<list.length;i++ ){ %> // 可以使用js的语法 和数组api
<li><%=list[i].name %>======<%=list[i].age %></li>
<% } %>
</ul>
</body>
</html>
最后在浏览器上输入 localhost:3000 （这里是笔者监听的端口 可以自定义并不一定是 3000）
最后就显示成功了 这里有一个 mvc的 设计模式 了解这个模式的同学 可能会很好理解 了
当然 koa的东西 不仅仅是这些东西 想深入学习的同学 建议先刷一遍 koa的官网
