前端时间有跟着技术胖学了一下Koa2,相比于express是真的很简洁了,我很喜欢,这是一些笔记截图,大家如果对这个感兴趣,可以去听一听技术胖(百度搜索技术胖就可以了)的视频,个人觉得讲的很详细,很好理解。
笔记是听课的时候截的图,有什么不清楚的地方大家可以一起交流哈~
一、目录
二、开发环境搭建
要求Node.js版本高于V7.6 node -v
二、async/await的使用方法
async是声明一个方法是异步的,await是等待异步方法完成, 注意的是await必须在async方法中才可以使用因为await访问本身就会造成程序停止堵塞,所以必须在异步方法中才可以使用。
await只要传的是异步的都能接收,promise,async,要和async配合使用
三、Get请求的接收
在koa2中GET请求通过request接收,但是接受的方法有两种:query和querystring。
* query:返回的是格式化好的参数对象。
* querystring:返回的是请求字符串。
总结:获得GET请求的方式有两种,一种是从request中获得,一种是一直从上下文中获得。获得的格式也有两种:query和querystring。大家要区分记忆,并根据实际需求进行灵活变换。
四、接收post请求
ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历 --------------------- 本文来自 专注前端30年 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/qq_30100043/article/details/53307410?utm_source=copy
五、koa-bodyparser中间件
npminstall--save koa-bodyparser@3
const bodyParser= require('koa-bodyparser');
app.use(bodyParser());
* }else if(ctx.url==='/' && ctx.method==='POST'){
*let postData= ctx.request.body; 直接可以用ctx.request.body进行获取POST请求参数,中间件自动给我们作了解析
* ctx.body=postData;
* }else{
六、原生路由实现
需要得到地址栏输入的路径,然后根据路径的不同进行跳转。用ctx.request.url就可以实现
*
const Koa = require('koa')
* const app = new Koa()
* app.use( async ( ctx ) => {
* let url = ctx.request.url
* ctx.body = url
* })
* app.listen(3000)
七、Koa-router中间件
1、安装
安装koa-router中间件 npminstall--save koa-router
constkoa=require('koa')
// 引入路由
constRouter=require('koa-router')
constapp=newkoa()
// 实例化
constrouter=newRouter()
*
多页面配置
router.get('/', function (ctx, next) {
* ctx.body="Hello JSPang";
* })
* .get('/todo',(ctx,next)=>{
* ctx.body="Todo page"
* });
app
.use(router.routes())
.use(router.allowedMethods())
app.listen(3000,()=>{
console.log('port 3000');
})
2、设置前缀
设置前缀
有时候我们想把所有的路径前面都再加入一个级别,比如原来我们访问的路径是http://127.0.0.1:3000/todo,现在我们希望在所有的路径前面都加上一个jspang层级,把路径变成http://127.0.0.1:3000/jspang/todo.这时候就可以使用层级来完成这个功能。路由在创建的时候是可以指定一个前缀的,这个前缀会被至于路由的最顶层,也就是说,这个路由的所有请求都是相对于这个前缀的。
* const router = new Router({
* prefix:'/jspang'
* })
设置前缀一般都是全局的,并不能实现路由的层级,如果你想为单个页面设置层级,也是很简单的。只要在use时使用路径就可以了。
3、传参
八、koa中使用cookie
* ctx.cookies.get(name,[optins]):读取上下文请求中的cookie。
* ctx.cookies.set(name,value,[options]):在上下文中写入cookie。
写入Cookie操作:
先来一个基本的写入cookie。
* const Koa = require('koa');
* const app = new Koa();
* app.use(async(ctx)=>{
* if(ctx.url=== '/index'){
* ctx.cookies.set(
* 'MyName','JSPang'
* );
* ctx.body = 'cookie is ok';
* }else{
* ctx.body = 'hello world'
* }
* });
* app.listen(3000,()=>{
* console.log('[demo] server is starting at port 3000');
* })
读取
九、koa的模板初识
安装中间件
在koa2中使用模板机制必须依靠中间件,我们这里选择koa-views中间件,先使用npm来进行安装。
* cnpm install --save koa-views
* npm install --save ejs
编写模板
安装好ejs模板引擎后,就可以编写模板了,为了模板统一管理,我们新建一个view的文件夹,并在它下面新建index.ejs文件。
views/index.ejs
*
*
*
*
*
*
* <%= title %>
* EJS Welcome to <%= title %>
*
*
编写koa文件
有了模板文件,我们需要在js文件中配置并渲染。
* const Koa = require('koa')
* const views = require('koa-views')
* const path = require('path')
* const app = new Koa()
* // 加载模板引擎
* app.use(views(path.join(__dirname, './view'), {
* extension: 'ejs'
* }))
* app.use( async ( ctx ) => {
* let title = 'hello koa2'
* await ctx.render('index', {
* title
* })
* })
* app.listen(3000,()=>{
* console.log('[demo] server is starting at port 3000');
* })
十、koa-static静态资源中间件
安装koa-static: 使用npm进行安装中间件,讲课时使用的是4.0.2版本。
* npm install --save koa-static
* const Koa = require('koa')
* const path = require('path')
* const static = require('koa-static')
* const app = new Koa()
* const staticPath = './static'
* app.use(static(
* path.join( __dirname, staticPath)
* ))
* app.use( async ( ctx ) => {
* ctx.body = 'hello world'
* })
* app.listen(3000, () => {
* console.log('[demo] static-use-middleware is starting at port 3000')
* })