目录
一、get请求接收的实现
二、原生post请求接收的实现
三、原生路由的实现
四、使用cookie
五、html模板
六、操作静态资源
一、get请求接收的实现
//ctx、ctx.request都具备相同的query、querystring
//query：返回的是格式化好的参数对象
//querystring：返回的是请求字符串
const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
let url =ctx.url;
//从request中获取GET请求
let request =ctx.request;
let req_query = request.query;
let req_querystring = request.querystring;
//从上下文中直接获取
let ctx_query = ctx.query;
let ctx_querystring = ctx.querystring;
ctx.body={
url,
req_query,
req_querystring,
ctx_query,
ctx_querystring
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
});
二、原生post请求接收的实现
1、获取Post请求的步骤：
（1）解析上下文ctx中的原生nodex.js对象req。
（2）将POST表单数据解析成query string-字符串.(例如:user=jspang&age=18)
（3）将字符串转换成JSON格式。
2、ctx.request和ctx.req的区别
（1）ctx.request:是Koa2中context经过封装的请求对象，它用起来更直观和简单。
（2）ctx.req:是context提供的node.js原生HTTP请求对象。这个虽然不那么直观，但是可以得到更多的内容，适合我们深度编程。
3、ctx.method 得到请求类型
Koa2中提供了ctx.method属性，可以轻松的得到请求的类型，然后根据请求类型编写不同的相应方法，这在工作中非常常用。我们先来作个小例子，根据请求类型获得不同的页面内容。GET请求时得到表单填写页面，POST请求时，得到POST处理页面。
4、表单post请求实现
const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
//get获得表单页面
if(ctx.url==='/' && ctx.method==='GET'){
let html=`
<h1>Koa2 request POST</h1>
<form method="POST" action="/">
<p>userName</p>
<input name="userName" /><br/>
<p>age</p>
<input name="age" /><br/>
<button type="submit">submit</button>
</form>
`;
ctx.body=html;
}
//post提交表单信息
else if(ctx.url==='/' && ctx.method==='POST'){
let pastData=await parsePostData(ctx);
ctx.body=pastData;
}
else{
ctx.body='<h1>404!</h1>';
}
});
//监听ctx.req变化，获取post请求内容
function parsePostData(ctx){
return new Promise((resolve,reject)=>{
try{
let postdata="";
ctx.req.on('data',(data)=>{
postdata += data;
})
ctx.req.addListener("end",function(){
let parseData = parseQueryStr( postdata );
resolve(parseData);
})
}catch(error){
reject(error);
}
});
}
//解析post请求内容（字符串），转化成对象
function parseQueryStr(queryStr){
let queryData={};
let queryStrList = queryStr.split('&');
for( let [index,queryStr] of queryStrList.entries() ){
let itemList = queryStr.split('=');
queryData[itemList[0]] = decodeURIComponent(itemList[1]);
}
return queryData;
}
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
});
5、koa-bodyparser实现post请求
三、原生路由的实现
1、在根目录下，新建页面文件夹
pages
├──index.html
├──koa.html
└──404.html
2、基本代码
const Koa = require('koa');
const fs = require('fs');
const app = new Koa();
// 根据需求,读取相应的页面,并返回
function render(page){
return new Promise((resolve, reject)=>{
let pageUrl = `./pages/${page}`;
//生成二进制流
fs.readFile(pageUrl, "binary", (err, data)=>{
if(err){
reject(err);
}else{
resolve(data);
}
})
})
}
// 识别url,判断所请求的页面
async function route(url){
let page = '404.html';
switch(url){
case '/':
page ='index.html';
break;
case '/index':
page ='index.html';
break;
case '/koa':
page = 'koa.html';
break;
default:
break;
}
let html = await render(page);
return html;
}
app.use(async(ctx)=>{
let url = ctx.request.url;
let html = await route(url);
ctx.body=html;
})
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
});
3、koa-router实现路由
四、使用cookie
1、api
（1）ctx.cookies.get(name,[optins])：读取上下文请求中的cookie。
（2）ctx.cookies.set(name,value,[options])：在上下文中写入cookie。
2、cookie配置对象选项
| 选项 | 作用 |
|---|---|
| domain | 写入cookie所在的域名 |
| path | 写入cookie所在的路径 |
| maxAge | Cookie最大有效时长 |
| expires | cookie失效时间 |
| httpOnly | 是否只用http请求中获得 |
| overwirte | 是否允许重写 |
3、代码实现
const Koa = require('koa');
const app = new Koa();
app.use(async(ctx)=>{
if(ctx.url=== '/'){
ctx.cookies.set(
'name','tony',{
domain:'127.0.0.1',
path:'/',
maxAge:1000*60*60*24,
expires:new Date('2019-6-18'),
httpOnly:false,
overwrite:false
}
);
ctx.body = 'cookie is ok';
}else{
if( ctx.cookies.get('MyName')){
ctx.body = ctx.cookies.get('MyName');
}else{
ctx.body = 'Cookie is none';
}
}
});
app.listen(3000,()=>{
console.log('[demo] server is starting at port 3000');
});
五、html模板
1、好处
使用html模板，将html从js中分离出去，有助于项目开发和管理。而且，html模板在koa2中，必须通过中间件来实现。
2、koa-views + ejs实现html模板
六、操作静态资源
1、静态资源在开发中的地位
静态资源环境在服务端是十分常用的一种服务，在后台开发中不仅有需要代码处理的业务逻辑请求，也会有很多的静态资源请求。比如请求js，css，jpg，png这些静态资源请求。也非常的多，有些时候还会访问静态资源路径。
网友评论