最近搭了个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）不太一样。
网友评论