koa2的作用和express都差不多,都是在common.js环境下运行
都是用来构建服务器
koa2
npm init // 初始化
npm install koa2 --save // 安装koa2框架
npm install koa-router --save // 安装koa2中间件
axios(和ajax作用一样)
npm install axios --save // 安装axios
<script src="./node_modules/axios/dist/axios.js"></script>
// 下载下来只会由于现阶段用的都是script引入js,不是webpack不能通过import引用模块
server.js (创建服务的js文件)
是基于promise对象的技术
const Koa = require('koa2'); // 加载koa2模块
let app = new Koa(); // 实例化
const Router = require('koa-router');
const router = new Router();
router.get('/',async ctx => { // 设置路由 ctx是request和reponse的结合
ctx.body = { // 响应到页面中的数据 ctx.body代表报文的主体
token:'abc', // 通过axios会直接把body中的内容返回
msg:'ok'
};
})
app.use( router.routes() ); //把router对象的routes挂载到app上不然找不到,使用这个中间件
app.listen(9999,() => { // 对服务的监听
console.log("服务启动成功端口号为9999")
})
前台用来获取数据的页面,这个页面没有必要必须挂载到服务器上
var App = {
template:`
<div>
<button @click = 'sendAjax'>发请求</button>
</div>
`,
methods:{
sendAjax(){
this.$axios.get('http://127.0.0.1:9999/') // 对本地的服务器发出请求
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
})
}
}
};
Vue.prototype.$axios = axios // 将axios.js暴露出的axios对象给Vue的原型主要就可以在vue中直接使用了
new Vue({
el:'#app',
template:`<App />`,
components:{
App
}
});
返回的req和res集合的对象data是ctx.body中的数据
axios是一种基于promise的技术
router.post('/upload',async (ctx,next)=>{
console.log('上传成功')
ctx.body = 'ok';
})
.post('/add',async ctx => {
ctx.req.on('data',data=>{
console.log(data); // <Buffer 61 3d 31>
console.log(data.toString()); // a = 1
});
ctx.body = 'post ok';
});
前端的js
var App = {
data(){
return {
res1:"",
res2:''
}
},
template:`
<div>
响应1:{{res1}}
响应2:{{res2}}
<button @click = 'sendAjax'>合并强求</button>
</div>
`,
methods:{
sendAjax(){
// 请求1 get: /
// 请求 post : /add
this.$axios.defaults.baseURL = 'http://127.0.0.1:8888';
// 设置请求的默认路径
var q1 = this.$axios.get('/'); // 请求 /
var q2 = this.$axios.post('/add','a=1'); // 请求 /add
this.$axios.all([q1,q2]) // 同时发出请求 解决高并发的问题
.then(this.$axios.spread((res1,res2)=>{ // 请求结束后获取对应的报表对象
// all会等待最后一个执行结束后开始返回内容
// 全部成功了
this.res1 = res1.data;
this.res2 = res2.data;
}))
.catch(err=>{
// 其一失败
console.log(err);
})
}
}
};
Vue.prototype.$axios = axios
new Vue({
el:'#app',
template:`<App />`,
components:{
App
}
});
事件触发后
transformResponse和 transformRequest
用来在请求前和请求后对提交和获取的数据进行处理
可以通过修改data的内容来改变获取或提交的内容
// 公用上面我创建的服务
var App = {
template: `
<div>
<button @click = 'sendAjax'>发请求</button>
</div>
`,
methods: {
sendAjax() {
this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/'
this.$axios.get('', {
params: { id: 1 }, // 和要请求发出的数据在一个对象中
// 在传递给then/catch之前,允许修改响应的数据
transformResponse: [function(data) {
// 对 data 进行任意转换处理
// 会将data转化为json类型的数据方便出来
console.log(data); // string类型的{"token":"abc","msg":"ok"}
console.log(typeof data); // string 我测试的时候是只要使用transformResponsedata传来的就是string类型的
data = JSON.parse(data); // 对获取的data进行出来
console.log(data); // 假如我在这里给data重新赋一个值他的下面res接受到的内容就会发生变化
return data; // 如果中间什么都不写 会返回undefinded
}]
})
.then(res => {
console.log(res.data.msg); // ok
})
.catch(err => {
console.log(err);
})
this.$axios.post('/add', {
firstName: 'Fred'
// 这是我要提交到后台的数据
}, {
// `transformRequest` 允许在向服务器发送前,修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
transformRequest: [function(data) {
// 对 data 进行任意转换处理 这里不会转化为json类型
console.log(data); //对象类型的{firstName: "Fred"}
return data; // 如果我改变data的话提交的内容会发生变化
}],
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
})
}
}
};
Vue.prototype.$axios = axios
new Vue({
el: '#app',
template: `<App />`,
components: {
App
}
});