最近搭了个nuxt+koa的前后端同构项目做性能统计用，记录一下

一、先贴出文档教程地址

1、nuxt
2、koa
3、element-ui
4、mongodb

二、准备好mongodb数据库

本地下载了mongodb，安装好。这步网上非常多教程。不多说。

运行mongo

sudo ./mongod

查看数据库

show dbs

admin   0.000GB
config  0.000GB
local   0.000GB
log     0.000GB
test    0.000GB

选择test数据库

use test

建一个集合perf

db.createCollection(TES)

简单的增删改查可以看看mongodb教程，还有技术胖的mongo教程。

我这还用了数据库可视化工具robo 3T，连接上数据库地址就可以直观看到数据，也可以操作，非常方便。

三、搭建

nuxt文档里很清楚，按照提示一步步来。终端信息如下。

*********$ npx create-nuxt-app perf-visualization
npx: 402 安装成功，用时 42.745 秒
> Generating Nuxt.js project in /Users/********/visualization
? Project name visualization
? Project description perf
? Use a custom server framework koa
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module yes
? Use eslint yes
? Use prettier no
? Author name luotiantian
? Choose a package manager npm

搭建好之后的项目目录大致如下

——assets                 存未编译的静态资源如 LESS、SASS 或 JavaScript
——components         组件
——layouts                 全局的页面布局
——middleware          中间件
——pages                  页面
——plugins                插件
——server                 服务端，写koa的文件夹。
      ——index.js         server入口文件
——static                  存放应用的静态文件，不会被Webpack打包
——store                   写vuex的
——util                      存放一些通用方法
——nuxt.config.js       nuxt配置文件
——package-lock.json  
——package.json

三、服务端

1、入口index.js文件

server目录下的index.js是入口，其代码如下，主要是引入几个koa插件。
（1）koa-router 路由插件
（2）koa-bodyparser 处理post请求
（3）monk 连接mongo
（4）koa-cors 解决跨域
（5）koa-convert 兼容低版本koa插件

const Koa = require('koa')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const router = require('koa-router')()
const bodyParser = require('koa-bodyparser')
const Monk = require('monk')
const cors = require('koa-cors');
const convert = require('koa-convert')

const api = require('./routes/api');
const app = new Koa()

// 进行requestbody解析
app.use(bodyParser())
// 加入路由
app.use(router.routes())
// 处理跨域
app.use(convert(cors()))
// 路由处理，在api中
app.use(api.routes(), api.allowedMethods())


const host = process.env.HOST || '**.**.**.134'
const port = process.env.PORT || 3000

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(app.env === 'production')


async function start() {
  // Instantiate nuxt.js
  const nuxt = new Nuxt(config)

  // Build in development
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  app.use(ctx => {
    ctx.status = 200 // koa defaults to 404 when it sees that status is unset

    return new Promise((resolve, reject) => {
      ctx.res.on('close', resolve)
      ctx.res.on('finish', resolve)
      nuxt.render(ctx.req, ctx.res, promise => {
        // nuxt.render passes a rejected promise into callback on error.
        promise.then(resolve).catch(reject)
      })
    })
  })

  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}

start()

2、模块化路由

server文件夹下新建2个文件夹

——server                 服务端，写koa的文件夹。
      ——controller      不同模块的操作（接口返回数据）
              ——perf.js    性能数据存取接口的具体操作
     ——routes             路由文件
              ——api.js     
      ——index.js         server入口文件

api.js代码如下

const router = require('koa-router')();
const perf = require('../controller/perf');

router.prefix('/api');

/*保存perfData接口*/
router.post('/savePerf', perf.savePerf);
/*获取perfData接口*/
router.get('/getPerf', perf.getPerf);
/*获取分类接口*/
router.get('/getCategory', perf.getCategory);

module.exports = router

perf.js代码如下

const Koa = require('koa')
const router = require('koa-router')()
const Monk = require('monk')

// 存性能数据
const savePerf = async (ctx) => {
  try {
      const db= Monk('localhost/test');//链接到库
      const perf = db.get('perf');//表
      const perfData =  Object.assign(ctx.request.query,{saveTime: new Date()}) 
      perf.insert({"perfTest": perfData})
      console.log('post perf.....',perfData)
      ctx.status = 200
      ctx.body = JSON.stringify({status:0})
  } catch (error) {
      ctx.body = {
        error:1,
        info:error
      }
  }
}

// 取性能数据
const getPerf = async (ctx) => {
  try {
      const db= Monk('localhost/test');//链接到库
      const perf = db.get('test');//表
      ctx.status = 200
      let path = ctx.params.id
      console.log('get ctx.req', ctx.request.query)
      let st = await perf.find({"perfTest.path": ctx.request.query.path}, {_id:false});
      const data = [...st]
      ctx.body = JSON.stringify({status: 0, data})
  } catch (error) {
      ctx.body = {
        error:1,
        info:error
      }
  }
}

// 取页面分类
const getCategory = async (ctx) => {
  try {
      const db= Monk('localhost/test');//链接到库
      const perf = db.get('ltt');//表
      ctx.status = 200
      let all = await perf.find({},{_id:false});
      let cate = []
      all.forEach((item, index) => {
        if(!cate.includes(item.perfTest.path) && item.perfTest.path) {
          cate.push(item.perfTest.path)
        }
      });
      const data = [...cate]
      ctx.body = JSON.stringify({status: 0, data})
  } catch (error) {
      ctx.body = {
        error:1,
        info:error
      }
  }
}


module.exports = {
  savePerf,
  getPerf,
  getCategory
}

四、页面请求

因为还在本地，所以页面上请求的接口是本地ip

this.$axios.$get('http://**.**.*.134:3000/api/getCategory', {}).then((res) => {
      if(res.status === 0) {
           this.paths = res.data
      }
})

五、待琢磨

nuxt2.0带的是webpack4.0，nuxt.config.js里配置（vendor）不太一样。