koa2实现前端页面的翻页和数据获取接口开发

最近在写一个后台管理系统，koa2作为node.js的后台开发框架意义非凡。首先我们引入knex线程库，这是一个比较好用的连接数据库的线程池。

// 获取基础配置
const configs = require('./config')
//设定线程池
var knex = require('knex') ({
  client: 'mysql',
  connection: {
    host: configs.mysql.host,
    port: configs.mysql.port,
    user: configs.mysql.user,
    password: configs.mysql.pass,
    database: configs.mysql.db,
  }
})

config文件信息

const CONF = {
    port: '5757',
    mysql: {
      host: 'localhost',
      port: 3306,
      user: 'root',
      db: 'anjuke',
      pass: '',
      char: 'utf8mb4'
    }
  }
  
  module.exports = CONF

跨域文件设置

module.exports = async (ctx, next) => {
    ctx.set('Access-Control-Allow-Origin', '*'); //允许来自所有域名请求(不携带cookie请求可以用*，如果有携带cookie请求必须指定域名)
    // ctx.set("Access-Control-Allow-Origin", "http://localhost:8081"); // 只允许指定域名http://localhost:8080的请求

    ctx.set('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, POST, DELETE'); // 设置所允许的HTTP请求方法

    ctx.set('Access-Control-Allow-Headers', 'x-requested-with,authorization, accept, origin, content-type,token'); // 字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段.
    // 服务器收到请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

    ctx.set('Content-Type', 'application/json;charset=utf-8'); // Content-Type表示具体请求中的媒体类型信息

    ctx.set('Access-Control-Allow-Credentials', true); // 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。
    // 当设置成允许请求携带cookie时，需要保证"Access-Control-Allow-Origin"是服务器有的域名，而不能是"*";

    ctx.set('Access-Control-Max-Age', 300); // 该字段可选，用来指定本次预检请求的有效期，单位为秒。
    // 当请求方法是PUT或DELETE等特殊方法或者Content-Type字段的类型是application/json时，服务器会提前发送一次请求进行验证
    // 下面的的设置只本次验证的有效时间，即在该时间段内服务端可以不用进行验证

    ctx.set('Access-Control-Expose-Headers', 'myData'); // 需要获取其他字段时，使用Access-Control-Expose-Headers，
    // getResponseHeader('myData')可以返回我们所需的值
    /*
    CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：
        Cache-Control、
        Content-Language、
        Content-Type、
        Expires、
        Last-Modified、
        Pragma。
    */

    /* 解决OPTIONS请求 */
    if (ctx.method == 'OPTIONS') {
        ctx.body = '';
    } else {
        await next();
    }
    //添加这行代码，让OPTIONS请求通过
// if (httpServletRequest.getMethod().equals("OPTIONS")) {
//     httpServletResponse.setStatus(HttpServletResponse.SC_OK);
//     return true;
// }
};

使用get路由请求获取分页的数据

const Koa = require('koa')
const config = require('./config')
const cors = require('./libs/app_cros.js'); //跨域处理文件koa-cors.js
const koaBody = require('koa-body')
const path=require('path')
const app = new Koa()
app.use(cors)
const router = require('koa-router')({
    //添加路由前缀
    prefix: '/fy'
  })
app.use(koaBody({
  // 支持文件格式
  multipart: true
  }
}));
router.get('/tianjin/index',   async (ctx)=>{
      
      const query=ctx.request.query.query
      const pagenum=ctx.request.query.pagenum
      const pagesize=ctx.request.query.pagesize
     const tianjintotal=await mysql('tianjin_admin').orderBy('local')
     .where('local', 'like', '%' + query + '%').select()
    const finailresult=tianjintotal.slice((pagenum-1)*pagesize,pagesize*pagenum)
    ctx.body={
     'tianjin':finailresult,
     'total':tianjintotal.length
    }
  
})
app.use(router.routes())

app.listen(config.port, () => {
  console.log(`server is started at port ${config.port}`)
})

现在就可以直接请求接口数据，查询关键字query,查询当前页pagenum，每页限制消息条数pagesize，将返回你所选择的信息。
前端请求函数，这里我用的是vue在typescript的数据格式，挂载的是axios当然你可以直接用fetch。

// 查询参数对象
      queryInfo= {
        query: '',
        pagenum: 1,
        pagesize: 10
      }
      // 总数据条数
      total= 0
      //数据列表
      goodslist=[]
async  getgoodlist(){
    const {data:data}=await this.$http.get('/tianjin/index',{
      params:this.queryInfo
      
    })
    console.log(data);
     this.goodslist=data.tianjin
    console.log(this.goodslist);
     this.total=data.total
    
  }