Makoto-Genshin-Wish插件开发文档(试行)
浏览 74 | 评论 0 | 字数 2738
Makoto
2024年09月04日
  • Makoto-Genshin-Wish扩展开发文档(试行)

    前言

    Makoto-Genshin-Wish扩展是原神祈愿统计系统(暂定)的专用插件。设计初衷是为了方便查询服务器数据库内的祈愿记录,以图形化的方式展现出来。由于扩展需要,插件前端基于光年模板与PUG渲染引擎,框架为Express框架,在开发前你需要先了解这些框架。参与本项目插件的开发,则意味着您愿意开源您的源代码。

    开发环境

    • Windows10系统
    • NodeJs V16及以上
    • Makoto-Genshin-Wish主程序
    • VScode(或其他)

    功能描述

    • 程序功能较为简单,分别为入口文件app.js,路由routes,视图views,静态资源public。
    • 默认功能为连接到MongoDB数据库,将数据库内的gachas集合内的文档查询出来与配置文件内的卡池配置表匹配查询,查询到则进行写入数组存储,发送到前端。
    • 0.1.0版本开始,加入插件扩展。任何人都可以基于Makoto-Genshin-Wish插件进行开发。

    参考资料

    • 光年模板V5
    • NodeJs
    • Express
    • PUG
    • MongoDB
    • VScode以及相关插件

    扩展支持

    扩展自由度相对比较高,几乎是半独立的框架,但是运行需要依托祈愿统计系统。

    1. 支持本框架自带的光年模板的所有公共模板,也就是光年模板V5的所有框架你都可以引入使用。您有自己的目录需要,请自行注册使用。
    2. 支持独立的模板导入,可以完全脱离光年模板进行开发设计,你的静态资源必须放在扩展名/static下,否则不会生效。

    开发

    1. 从Github或者Gitee拉取仓库
    git clone https://gitee.com/MakotoArai-CN/Makoto-Genshin-Wish-Analysis-Prod.git
    # or
    git clone https://github.com/MakotoArai-CN/Makoto-Genshin-Wish-Analysis-Prod.git
    1. 找到项目并拖入VScode或者用VScode打开
    • 打开plugins文件夹,新建你的扩展名(英文),然后新建index.js入口文件:结构如下
    module.exports = {
        author: "author",
        version: "0.0.1",
        description: "description",
        icon: "mdi-panorama-sphere",
        pathname: "pathname",
        name: "name",
        subnav: [{
                name: "菜单",
                href: "/pathname/router"
            },
            {
                name: "菜单",
                href: "/pathname/routers"
            }
        ],
        router: require('./routes/index')
    };
    • 新建views文件夹,这是扩展的文件视图,例如views/route.pug,views/routes.pug,结构如下:
    extends ../layout
    block content
        your views code……
    
    • extends 为导入主程序的header部分,block content之后写静态页面即可。
    • 独立样式或者js文件的引入,格式如下:
    "pathname/js/Jquery.js"

    • 新建routes文件夹,文件夹内为index.js,结构如下:
    
    // plugins/pathname/routes/index.js
    const express = require('express');
    const router = express.Router();
    
    router.get('/router', function(req, res, next) {
      res.render('pathname/router', { title: '菜单' });
    });
    
    router.get('/routers', function(req, res, next) {
      res.render('pathname/routers', { title: '菜单' });
    });
    
    
    // 404 错误处理
    router.all('*', function(req, res, next) {   
        res.status(404).sendFile(path.join(__dirname, '../../../public/404.html'));
    });
    
    module.exports = router;
    • 逻辑处理可以在router内加入,处理完毕需要使用router返回视图以及数据。如果逻辑处理需求很大,可以新建控制器文件夹controller,存放你的逻辑处理,例如:routeController.js
    • 在路由最后需要导出路由,否则入口文件无法引用。
    • 至此,扩展程序基本构建完毕。

    3. 其他

    • 扩展程序基本上是独立的,你需要的功能都可以完全独立实现。稍作修改也可以独立运行。
    • 新增或修改扩展需要重启服务,否则不生效。

    三. 发布

    您可以独立发布您的扩展,但需要您开放源代码,并使用本程序所使用的开源协议。

    四. 问题与修复说明 - Bug修复文档

    问题与修复文档您可以独立发布。

    五. 性能与优化

    为了确保程序的性能,请做好对应优化。Google Chrome的lighthouse性能测试总体需要大于90。

    本文作者:Makoto
    本文链接:https://blog.ciy.cool/archives/110/
    最后修改时间:2024-09-14 17:07:26
    本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
    评论
    与本文无关评论请发留言板。请不要水评论,谢谢。
    textsms
    支持 Markdown 语法
    email
    link
    评论列表
    暂无评论