Koa2入门笔记 （上）

感谢一个不打荣耀的大神教会我使用Koa写接口

简单快速撸懂MySQL+Koa2_哔哩哔哩_bilibili

再也不必害怕后端不能沟通了，学会了还可以自己做喜欢的项目来玩

这里就是课堂笔记

哎呀！！真是开心啊~~

学习这个必需要会node, 数据库会有教学

分为上下两集,

Koa2入门笔记 （上）是基本使用,

Koa2入门笔记 （下）连接mySql： Koa2入门笔记 （下）_技术青菜的博客-优快云博客

---

那就开始吧！！

1.安装：

npm init -y

npm i koa2 -S

在接口项目的根目录兴建app.js，并在package.json配置

{
 "scripts":{
    "test": "echo \"err: no test specified\" && exit 1",
    "start": "node app.js"
  } 
}

在 app.js中 写下 console.log('hello app.js')

在终端cmd,也可以用 node .\app.js 输出 'hello app.js'

---

2. app.js就是项目的入口文件

在 app.js加入对Koa的引用

const Koa = require('koa2');

//声明实例
const app = new Koa();

//端口号（8080比较常用所以这里不用）
const port = 9000;

//调用中间件
app.use(async (ctx)=>{
    //返回数据给页面
    ctx.response.body = "hello,Koa";
    
})


//IP+端口

app.listen(port,()=>{
    
   console.log('server is running at http://localhost:'+port);
  
})

---

3.运行项目，npm start

出现 server is running at http://localhost:9000

中间老师说明了中间件，洋葱模型，有兴趣的小伙伴可以自己找看看 "Koa的洋葱模型"

---

4. 在app.js引入路由

const Koa = require('koa2');

//声明实例
const app = new Koa();

//端口号（8080比较常用所以这里不用）
const port = 9000;

//引入路由
const Router = require('koa-router');
const router = new Router();


//get 请求

router.get('/',async(ctx)=>{
  
  ctx.body = '首页' 

})

router.get('/list',async(ctx)=>{
  
  ctx.body = '列表页' 

})


//使用中间件
//router.routes()是启动路由
//router.allowMethods(),允许使用任何请求,例如：get,post,put

app.use(router.routes(), router.allowMethods());


//IP+端口

app.listen(port,()=>{
    
   console.log('server is running at http://localhost:'+port);
  
})

---

5.前端接口请求

在安装有axios的项目里写下

import axios from 'axios'

//请求 '列表页'的接口

//注意这里的跨域问题
let url = "http://localhost:9000/list"


axios.get(url).then(res =>{
  console.log(res)
})

---

6.前端跨域处理

在 package.json里

"proxy":"http://localhost:9000"

配置好跨域之后,在项目里写的url

let url = "/list"
axios.get(url).then(res =>{
  console.log(res)
})

---

7.router代码的目录

在根目录兴建router目录，里面新建一个index.js 作为 router的入口文件

把app.js里与router有关的代码都加到 index.js中

<index.js>  router的入口文件

//引入路由
const Router = require('koa-router');
const router = new Router();


//get 请求

router.get('/',async(ctx)=>{
  
  ctx.body = '首页' 

})

router.get('/list',async(ctx)=>{
  
  ctx.body = '列表页' 

})


//导出router
module.exports = router

之后修改app.js

<app.js>

const Koa = require('koa2');

//声明实例
const app = new Koa();

//端口号（8080比较常用所以这里不用）
const port = 9000;

//导入router
const router = require('./router')


//使用中间件,user内调用中间件
//app.use(router.routes(), router.allowMethods());


app.listen(port,()=>{
    
   console.log('server is running at http://localhost:'+port);
  
})

---

8. 拆分router

将列表拆分出来，为了可以方便管理列表的所有接口

在router目录新建list.js

<list.js>

const Router = require('koa-router');
const list = new Router();


router.get('/',async(ctx)=>{
  
  ctx.body = '列表页---根路径' 

})

router.get('/yingxiong',async(ctx)=>{
  
  ctx.body = '列表页---英雄列表' 

})

router.get('/weizhi',async(ctx)=>{
  
  ctx.body = '列表页---位置' 

})


//导出router (这里改成了list,避免混淆)
module.exports = list

修改index.js，使用中间件里的list

<index.js>

//引入路由
const Router = require('koa-router');
const router = new Router();

//引入list
const list = require('./list')


//get 请求

router.get('/',async(ctx)=>{
  
  ctx.body = '首页' 

})

//引入list

//router.get('/list',async(ctx)=>{ctx.body = '列表页' })

router.use('/list',list.routes(), list.allowMethods());


//导出router
module.exports = router

---

9.重定向

要是在index.js 不使用 '/'接口，要改成'/home'接口
可以这样做

step1. 先把index.js 的  '/'接口改成'/home'接口

router.get('/home',async(ctx)=>{
  
  ctx.body = '首页' 

})

step2.与list接口被拆分出来一样，兴建home.js

<home.js> 

const Router = require('koa-router');
const home = new Router();

router.get('/',async(ctx)=>{
  
  ctx.body = '首页' 

})


router.get('/wanjia',async(ctx)=>{
  
  ctx.body = '首页---玩家' 

})

router.get('/guanliyuan',async(ctx)=>{
  
  ctx.body = '首页---管理员' 

})


//导出router (这里改成了home,避免混淆)
module.exports = home

step3.修改index.js关于home接口的引用,并且将 '/ ' 重定向到 '/home'

<index.js>

//引入路由
const Router = require('koa-router');
const router = new Router();

//引入list
const list = require('./list')

//引入home
const home = require('./home')


//get 请求

//router.get('/',async(ctx)=>{ ctx.body = '首页' })

router.use('/home',home.routes(), home.allowMethods());


//引入list

//router.get('/list',async(ctx)=>{ctx.body = '列表页' })

router.use('/list',list.routes(), list.allowMethods());


//重定向 (访问根路径重定向到home)
router.redirect('/','/home');


//导出router
module.exports = router