koa2簡單入門
阿新 • • 發佈：2020-07-24
安裝：npm i koa --save / cnpm i koa --save
koa專案生成器
安裝
npm i -g koa-generator
建立專案
koa2 專案名稱
1.簡單入門
//匯入koa框架
const koa = require('koa')
//建立伺服器物件
const app =new koa()
//中間配置
app.use(async (etx)=>{ //把req,res都封裝成etx
etx.body='你好 koa2' //響應資料的格式
})
//對比express框架
//app.use((req,res,next)=>{
//res.send('你好express')
//監聽埠
app.listen(3000)
console.log('伺服器啟動成功')
2.Koa路由koa-router
//安裝
cnpm i koa-router --save / npm i koa-router
//匯入並例項化
const router = require('koa-router')()
router.get('/',async (etx)=>{
etx.body = '首頁'
}).get('/news',async (etx)=>{
etx.body='新聞頁面'
})
//啟動路由
app
.use(router.routes())
.use(router.allowedMethods)
1.1get傳值
/*
在koa2中GET傳值通過request接收 但是接收的方法有兩種query和querystring
query返回的是格式化好的引數物件
querystring返回的是請求的字串
*/
router.get('/newsDetail', async (etx, next) => {
console.log(etx.query)
console.log(etx.querystring)
//在etx中有個request物件，也可以拿到引數，其實就是express中req,包含了請求的資訊
console.log(etx.request.query)
console.log(etx.request.querystring)
})
1.2動態路由
/*
動態路由
接收：etx.params
*/
//動態路由
router.get('/newsDetail/:id', async (etx, next) => {
console.log(etx.params)
const id = etx.params['id']
etx.body = '新聞詳情頁面' + id
})
//可以接受多個動態引數
router.get('/newsDetail/:id/:aid', async (etx, next) => {
console.log(etx.params)
const id = etx.params['id']
etx.body = '新聞詳情頁面' + id
})
1.3中介軟體
//匹配路由前的中介軟體，第一個引數不加預設攔截所有路由，滿足條件就next放行
app.use(async (etx, next) => {
console.log(new Date())
await next() //向下執行
})
//路由級中介軟體
router.get('/news', async (etx, next) => {
etx.body = '新聞頁面1'
await next() //放行
})
//這個路由才會被匹配到
router.get('/news', async (etx, next) => {
etx.body = '新聞頁面'
})
1.4錯誤處理中介軟體
//引入koa框架
let Koa = require('koa')
let Router = require('koa-router')
//建立網站伺服器
let app = new Koa()
//建立路由例項物件
let router = Router()
/*
錯誤處理中介軟體
不管放在路由的下面還是路由的上方都會首先執行中介軟體
express執行順序是從上往下依次執行
當處理完之後返回來處理中介軟體next()後面的內容
就像洋蔥一樣
request一層一層往裡走，走完之後response一層層往外走
就相當於先進後出
最先匹配到的中介軟體，他next後面的內容最晚執行
*/
router.get('/', async (etx, next) => {
etx.body = '首頁'
})
router.get('/news', async (etx, next) => {
console.log('匹配到news路由')
etx.body = '新聞頁面'
})
//動態路由
router.get('/newsDetail/:id/:aid', async (etx, next) => {
console.log(etx.params)
const id = etx.params['id']
etx.body = '新聞詳情頁面' + id
})
//放在路由下面也會比路由先執行
app.use(async (etx,next)=>{
console.log('這是一個錯誤處理中介軟體1')
await next()
if(etx.status == 404){
etx.status = 404
etx.body='Not Found'
}else{
console.log('1')
}
})
app.use(async (etx,next)=>{
console.log('這是一個錯誤處理中介軟體2')
await next()
if(etx.status == 404){
etx.status = 404
etx.body='Not Found'
}else{
console.log('2')
}
})
app
.use(router.routes()) //啟動路由
.use(router.allowedMethods())
app.listen(3000)
console.log('伺服器啟動成功')
1.5第三方中介軟體
/*
第三方中介軟體
配置模板引擎
1.下載koa-views外掛
cnpm i koa-views --save
2.下載ejs模板引擎
cnpm i ejs --save
3.匯入koa-views模組
const views = require('koa-views)
4.使用中介軟體配置模板引擎
配置1：app.use(views('views',{extension:'ejs}))//告訴模板引擎的位置和使用哪個模板引擎
配置2：app.use(views('views',{map:{html:'ejs'}}))//這樣配置views中的模板字尾名要是html
*/
//匯入koa模板引擎
let views = require('koa-views')
//第三方中間，模板引擎的位置
app.use(views('views',{extension:'ejs'}))//告訴模板引擎的位置和使用哪個模板引擎
1.6ejs模板的使用
//匯入公共模板
<%- include ('common/header.ejs') %>
//迴圈
<%for(let i =0;i < arr.length;i++){%>
<li><%=arr[i]%></li>
<%}%>
//解析html語句
<%- %>
<%- comment%>
//條件判斷
<%if(age >= 18){%>
<h3>可以訪問此網站</h3>
<%}else{%>
<h3>未成年禁止訪問</h3>
<%}%>
1.7post傳值
-
原生js獲取post和get
const http = require('http');
const url = require('url');
const querystring = require('querystring');
const fs = require('fs');
let users = {};
let server = http.createServer(function(req,res){
// console.log('請求來了',req.url);
// console.log(req.method);
let path ='',get={},post={};
if(req.method == 'GET'){
let {pathname,query}=url.parse(req.url,true);
path=pathname;
get=query;
complete();
}else if(req.method == "POST"){
path=req.url;
let arr = [];//定義一個空陣列
req.on('data',buffer=>{
// console.log(buffer);//返回的是二進位制形式
arr.push(buffer);//把返回的二進位制追加到數組裡面
});
req.on('end',()=>{
let buffer = Buffer.concat(arr);
// console.log(buffer.toString());
post = querystring.parse(buffer.toString());
// console.log(query);
complete();
});
}
function complete(){
// console.log(path,get,post);
if(path == '/reg'){
let {username,password} = get;
if(users[username]){
console.log('使用者名稱已存在，使用者名稱：',users[username],'密碼',password);
}
if(users[username]){//如果user裡面有這個username就報錯
res.write(JSON.stringify({error:1,msg:"此使用者已存在"}));//只能是字串，所以用json的方法
res.end();
}else{//如果沒有這個使用者就把這個密碼賦給這個使用者
users[username] = password;
res.write(JSON.stringify({error:0,msg:''}));
res.end();
}
}else if(path == '/login'){
let {username,password}=get;
if(users[username]){
console.log('使用者名稱：',users[username],'密碼',password);
}
if(!users[username]){
res.write(JSON.stringify({error:1,msg:'找不到此使用者'}));
res.end();