如何在skynet_fly_demo新增一个后台模块？

前言

skynet_fly_demo 中的admin用的go语言gin框架的中间件模式。客户端用的vue-admin-template,项目架构是前后端分离的。我们将以添加一个警告日志模块为示例。

服务端

服务端只需要通过API接口即可，通常API接口我们会按模块划分，比如用户模块就是提供/user/login,user/loginout,这在gin分格的中间件模式中，我们可以把user建一个组(group),在admin项目，我把各个模块都分成了组在router.lua中加载。

local user_router = require "router_group.user_router"
local role_router = require "router_group.role_router"
local monitor_router = require "router_group.monitor_router"
local realtimelist_router = require "router_group.realtimelist_router"
local warnlog_router = require "router_group.warnlog_router"
local dashboard_router = require "router_group.dashboard_router"

return function(app)
    user_router(app:group("/user"))                     --用户模块
    role_router(app:group("/role"))                     --角色模块
    monitor_router(app:group("/monitor"))               --服务监控
    realtimelist_router(app:group("/realtimelist"))     --服务实时信息
    warnlog_router(app:group("/warnlog"))               --警告日志
    dashboard_router(app:group("/dashboard"))           --数据看板
end

API实现

warnlog_router.lua

local rsp_body = require "common.rsp_body"
local frpc_client = require "skynet-fly.client.frpc_client"
local log = require "skynet-fly.log"

local assert = assert
local tonumber = tonumber

return function(group)
    group:get('/info',function(c)
        local query = c.req.query
        local pre_day = assert(query.pre_day,"not pre_day")                 --前几天
        pre_day = tonumber(pre_day)
        local instance = frpc_client:instance("logserver","warn_m"):set_svr_id(1)
        local ret = instance:byid_mod_call('read', pre_day)
        local context = ret.result
        log.info("warnlog_router:", context)
        local result = nil
        if context then
            result = "OK"
            context = context[1]
        else
            context = "无"
        end
        rsp_body.set_rsp(c,{
            result = result,
            context = context
        })
    end)
end

warnlog模块实现了info,method为get,API路径为127.0.0.1:80/warnlog/info,接下来实现客户端端。

客户端

环境安装

1. 下载node.js v18.16
2. 进入admin的client 目录下安装依赖
   cd admin/client
npm install

添加代码

添加调用API

打开src/api文件夹新建warnlog.js

import request from '@/utils/request'

export function getInfo(pre_day) {
return request({
    url: '/warnlog/info',
    method: 'get',
    params: { 
    pre_day : pre_day,
    }
})
}

添加模块页面代码

打开views文件夹新建warnlog文件夹，新建index.vue文件。

添加vue代码

<template>
    <div>
        <el-select v-model="pre_day" placeholder="请选择哪天">
            <el-option v-for="item in dayOption" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>

        <div style="white-space: pre-wrap;">{{context}}</div>
    </div>
</template>

<script>
import { getInfo } from '@/api/warnlog'

const day_options = [
    {value : 0, label : "当天"},
    {value : 1, label : "昨天"},
    {value : 2, label : "前天"},
    {value : 3, label : "前第三天"},
    {value : 4, label : "前第四天"},
    {value : 5, label : "前第五天"},
    {value : 6, label : "前第六天"},
    {value : 7, label : "前第七天"},
]

export default {
    data() {
        return {
            pre_day : null,
            dayOption : day_options,
            context : "",
        }
    },

    watch: {
        pre_day : {
            handler(val) {
                this.handleSetLine()
            }
        },
    },
   
    methods: {
        async getInfo() {
            const res = await getInfo(this.pre_day)
            let data = res.data
            console.log("getInfo>> ",data)
            if (data.result != "OK") {
                return
            }
            this.context = data.context
        },

        handleSetLine() {
            this.getInfo()
        },
    }
}
</script>

添加路由

打开router/index.js

添加如下路由

{
  path: '/warnlog',
  component: Layout,
  children: [
    {
      path : 'index',
      name : 'WarnLog',
      component: () => import('@/views/warnlog/index'),
      meta: {title: '警告日志'},
    }
  ]
},

warnlog添加的路由表是没有权限控制，任何可登录的用户都能访问，如果需要权限控制，可以把路由加入到asyncRoutes中。

此时客户端的代码也加好了，还差一个步骤就是编译打包。

编译打包

在客户端目录下执行:npm run build:prod就会生成dist目录文件，就是客户端打好的包。
我们服务器需要把根目录路由到客户端打包的目录下，以便提供客户端页面的访问。

在服务端的app.lua,会把根目录路由到客户端首页。

--设置前端入口路径
app:static_dir("/","../client/dist")
--设置前端入口
app:static_file("/","../client/dist/index.html")

如何不依赖服务端调试客户端呢？

客户端提供了mock用来模拟服务端接口调用。
开启此功能我们需要找到main.js,把对应的注释放开(注释，当我们打正式包时，需要注释掉mock)。

// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

添加mock API

在mock目录下创建warnlog.js

module.exports = [
    {
        url: '/warnlog/info',
        type: 'get',
        response: config => {
        return {
            code: 20000,
            data: {
                result : "OK",
                context : "warnlogssssssssssss>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"
            }
        }
        }
    },
]

打开mock/index.js
把warnlog添加到mocks中即可。

const warnlog = require('./warnlog')
const dashboard = require('./dashboard')

const mocks = [
  ...user,
  ...role,
  ...monitor,
  ...realtimelist,
  ...warnlog,
  ...dashboard,
]

运行开发环境

npm run dev