vue全家桶+Koa2开发笔记(2)--koa2
1. 安装koa脚手架的时候 执行命令 koa2 -e koa-learn
注意要使用-e的方式,才会生成ejs的模板
2. async await的使用方法:存在的意义:提高promise的可读性
async是异步函数,写成来同步的形式,如:
async()=>{
const a = await A;
const b = await B;
const c = await C
}
而 Promise 是以then形式,级连往下走的:
new Promise(function(resolve,reject){ //实例一个promise对象
if(true){
resolve("aaaa"); //promise的第一个参数,表示成功,接下来会执行then()
}else{
reject("bbbbb"); //同上,表示失败,接下来会执行catch()
}
}) //执行函数
.then(function(result){console.log(result)})
.then(...)
具体用法区别详见: ES6学习笔记---Promise和异步函数
3.
router.get('/testAsync',async(ctx) =>{
console.log('start');
const a = await new Promise((resolve,reject)=>{//有了 await,先执行完异步操作之后再执行 下面的代码
setTimeout(()=>{ //否则的话,需要用回调或者then
console.log('async');
resolve('a'); //相当于返回a
},1000)
})
ctx.body = { //该代码执行结果: 先在服务器端显示 start 然后 一秒之后 显示 async 最后在页面上显示a的值
a
}
})
4. exports、module.exports和export、export default到底是咋回事
module.exports与exports,export与export default之间的关系和区别
主要思想:
require: node 和 es6 都支持的引入export : 只有es6 支持的导出引入/ export default/ importmodule.exports / exports :只有 node 支持的导出
5. 编辑中间件:
function pv(ctx){
console.log('pv',ctx.path);
}
module.exports = function(){//由于调用 使用的是 app.use(pv()),即抛出的需要是个函数
return async function (ctx,next){
pv(ctx)
await next();//使用异步函数,执行完该中间件之后,再执行下一个中间件的代码
}
}
并且在app.js中,调用:
const pv = require('./middleware/koa-pv');
app.use(pv())
6. 中间件的洋葱结构:

执行下面的中间件,改为m1 m2 m3
function m1(ctx){
console.log('m1');
}
module.exports = function(){
return async function (ctx,next){
console.log('m1 start')
m1(ctx)
await next();
console.log('m1 end');
}
}
执行顺序为:
app.use(m1());
app.use(m2());
app.use(m3());
最终结果为:
m1 start
m1
m2 start
m2
m3 start
m3
----
m3 end
m2 end
m1 end
注意 end的命令在 await next() 后面
7. koa-router 路由;
router.prefix('/users) //给路由加前缀
router.get('/', async (ctx, next) => {
await ctx.render('index', {//渲染页面
title: 'Hello Koa 2!'
})
})
router.get('/string', async (ctx, next) => {
ctx.body = 'koa2 string'//渲染接口
})
调用路由:
app.use(users.routes(), users.allowedMethods())
注意,这里是固定用法,将路由注册到全局上,users是引入的路由,如 const users = require('./routes/users') 后面注意是 routes()
8.服务器端的cookie和session;
访问某个接口的时候,设置cookie
router.get('/', async (ctx, next) => {
ctx.cookies.set('pvid',Math.random()) //设置cookie的值
await ctx.render('index', { //这里的index 指的是view中的模板文件的路径
title: 'Hello Koa 2!'
})
})

vue全家桶+Koa2开发笔记(2)--koa2的更多相关文章
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- [在线+源码]vue全家桶+Typescript开发一款习惯养成APP
# vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. [源码地址](https://github.com/xiaomuzhu/vue ...
- 用 Vue 全家桶二次开发 V2EX 社区
一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...
- Vue全家桶之组件化开发
Vue全家桶之组件化开发 一.组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代码 二. 组件注册 2.1 全局注册 Vue. ...
- Vue全家桶
简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
- 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程
使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...
- Vue全家桶介绍
一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...
- Vue全家桶高仿小米商城
大家好,我是河畔一角,时隔半年再次给大家带来一门重量级的实战课程:<Vue全家桶高仿小米商城>,现在很多公司都在参与到商城的构建体系当中,因此掌握一套商城的标准开发体系非常重要:商城的开始 ...
随机推荐
- Mybatis之trim标签的理解
最近在学Mybatis,在学到动态sql的trim标签时,很迷惑.不知所以然.看别人的博客和论坛里的解释,太宽泛,还是不能理解: trim元素的主要功能是可以在自己包含的内容前加上某些前缀,也可以在其 ...
- FFT模板(无讲解)
#include<bits/stdc++.h> using namespace std; ; const double pi=3.1415926535898; ],len; struct ...
- table添加行
需求是要实现表格的动态增加与删除,并且保留标题行和首行,找了半天jq插件,没找到合适的,所以自己写了个demo <!DOCTYPE html> <html> <head& ...
- 在嵌入式设计中使用MicroBlaze(Vivado版本)(转)
原文Xilinx官方文档<ug898-vivado-embedded-design>第三章 一.MicroBlaze处理器设计介绍(略) 二.创建带有MicroBlaze处理器的IP设计 ...
- 2019.3.5 L261 Are All Our Organs Vital?
Medicine has not always shown a lot of respect for the human body. Just think about the ghoulish dis ...
- OneinStack 安装
安装步骤 注意 如果有单独数据盘,建议您先挂载数据盘,建议将网站内容.数据库放在数据盘中.如何挂载数据盘,请参考(支持阿里云.腾讯云):<如何利用脚本自动化挂载数据盘?> yum -y i ...
- CHERRY G80 3000L 使用一月有感
就是楼上这家伙.. 都说程序猿用的最多的除了自己的右手就是键盘了.- - SO一个好的键盘必定会令写码的速度提升. 在TB和JD上选择许久,在青轴,红轴,黑轴,茶轴间难以抉择. 最后终于敲定: CHE ...
- 标准I/O读写文件
一.函数原型 1.FILE *fopen(const char *path, const char *mode); path:要打开文件路径及文件名: mode: r 打开只读文件,该文件必须存在. ...
- react-navigation 使用详解(转载)
上篇博客和大家分享了关于React Native jsBundle预加载,界面启动优化的内容,详情可点击: 基于最新版本React Native实现JsBundle预加载,界面秒开优化 一.开源库介绍 ...
- [转]ZooKeeper学习第一期---Zookeeper简单介绍
ZooKeeper学习第一期---Zookeeper简单介绍 http://www.cnblogs.com/sunddenly/p/4033574.html 一.分布式协调技术 在给大家介绍ZooKe ...