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

2. 找到项目并拖入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 授权协议，转载请注明来源，谢谢！