第三章 Electron 使用Koa以及Koa-Router

news2024/11/15 19:43:30

一、Koa是什么 👇 👇 👇

据网上的资料显示,Koa 是下一代的 Node.js 的 Web 框架。是express原班人马打造,同样用于构建服务端web application的。旨在提供一个更小型、更富有表现力、更可靠的 Web 应用和 API 的开发基础。扯这些没用的,它就是提供给我们构建API服务的。

二、Koa-Router是什么 👇 👇 👇

快捷式路由(app.get、app.put、app.post等), 命名URL参数 生成URL的命名路由,将路由与特定主机匹配,使用允许的方法响应OPTIONS请求,不允许支持405方法,不支持501方法,多路由中间件,多个可嵌套路由器,支持async/await。顾名思义,其实就和我们前端vue-router差不多。只是它做接口层面的匹配处理。

三、安装依赖 👇 👇 👇

yarn add koa koa-router

我当前的版本号

环境

四、编写路由 👇 👇 👇

非常的简单,我们只需要在方法里面进行逻辑处理,然后通过ctx.body进行一个响应。

const Router = require('koa-router');
// 如果添加了prefix前缀的话,接口访问就变成******/likeMusic/**
const router = new Router({ prefix: "/likeMusic" });

// ******/likeMusic/list
router.get('/list', async (ctx, next) => {
    ctx.body = {data: {
        name: '张三'
    }, status: 200};
})

router.post('/add', async (ctx, next) => {
    // ctx.req里面可以获取到我们前端丢过来的参数
    console.log('👉👉👉-----------------', ctx.req)
    ctx.body = {status: 200};
})

router.delete('/delete/:id', async (ctx, next) => {
    console.log('👉👉👉-----------------', ctx.params.id)
    ctx.body = {data: {message: '删除成功!'}, status: 200};
})

module.exports = router;

五、编写Koa 👇 👇 👇

koa的话也是非常简单。把刚刚编写好的router通过app.use注册以后。再配置一个404,就是没有再路由配置的请求路径都会返回404,最后通过app.listen进行启动,端口号是8088。

const Koa = require('koa');
const playlists = require('./playlists.ts')
const likeMusic = require('./like_music.ts') // 刚刚新增的likeMusic.ts文件
const app = new Koa();

function createKoaApp() {

    app.use(playlists.routes(), playlists.allowedMethods())
    app.use(likeMusic.routes(), likeMusic.allowedMethods()) // 注册

    app.use(async (ctx, next) => {
        await next();
        ctx.response.body = {
            status: 404,
        }
    });

    app.listen(8088, () => {
        console.log('👉👉👉-----------------KOA服务器已启动成功,端口号为: 45455')
    });
}

exports.createKoaApp = createKoaApp

六、启动 👇 👇 👇

接在我们在electron的main.ts中在合适的位置进行启动,为什么说合适,因为是demo所以我随意放置的,如果有需求做licenses的话,后期可以将Koa启动放置到授权通过的逻辑中。

const { app, BrowserWindow } = require('electron')
const path = require('path')
const remote = require("@electron/remote/main");
remote.initialize();
const { createKoaApp } = require('./router/koaApp.ts')
 
const NODE_ENV = process.env.NODE_ENV
let win
 
/**
 * @Description: electron程序入口
 * @Author: Etc.End
 * @Copyright: TigerSong
 * @CreationDate 2023-05-20 14:39:26
 */
const createWindow = () => {
    win = new BrowserWindow({
        icon: './public/logo.png',
        frame: false, // 去掉导航最大化最小化以及关闭按钮
        width: 1200,
        height: 800,
        minWidth: 1200,
        minHeight: 800,
        center: true,
        skipTaskbar: false,
        transparent: false,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            webSecurity: false,
        }
    })
 
    win.loadURL(
        NODE_ENV === 'development' ? 'http://localhost:5173/' : `file://${path.join(__dirname, '../dist/index.html')}`
    )
 
    if (NODE_ENV === 'development') {
        win.webContents.openDevTools()
    }

    // 启动Koa
    createKoaApp()
 
    remote.enable(win.webContents);
}
 
app.whenReady().then(() => {
    createWindow()
})
 
/**
 * @Description: 限制只能打开一个页面
 * @CreationDate 2023-05-20 14:35:52
 */
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
    app.quit()
} else {
    app.on('second-instance', (event, commandLine, workingDirectory) => {
        if (win) {
            if (win.isMinimized()) win.restore()
            win.focus()
        }
    })
}
 
app.on('window-all-closed', function () {
    if(process.platform !== 'darwin') app.quit()
})

七、效果 👇 👇 👇

我是Etc.End。如果文章对你有所帮助,能否帮我点个免费的赞和收藏😍。

 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/605585.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在输入URL后,前端浏览器的工作流程

这是一个经久不衰的面试题,整理一下。 浏览器 浏览器是一个多进程的架构。 主进程:主要适用于界面的显示,用户的交互,子进程管理。 渲染进程:将HTML,css,JS转换成页面,V8引擎以及…

redisson 随笔 0-入门

0. 虽说时运不佳,仍欲提桶跑路 分布式锁的常见实现方案 常用锁的用例 runoob Lua教程 对于分布式锁的实现方案,本文如标题所言,简单梳理了redisson的实现方案 redisson 也是基于redis的多个命令组合来实现的,为保证执行多个命…

项目实战:基于Linux的Flappy bird游戏开发

一、项目介绍 项目总结 1.按下空格键小鸟上升,不按小鸟下落 2.搭建小鸟需要穿过的管道 3.管道自动左移和创建 4.小鸟撞到管道游戏结束 知识储备 1.C语言 2.数据结构-链表 3.Ncurses库 4.信号机制 二、Ncurses库介绍 Ncurses是最早的System V Release 4.0 (…

F. Editorial for Two(二分答案+反悔贪心)

F. Editorial for Two(二分答案反悔贪心) F. Editorial for Two 1、问题 给定一个 n n n和 k k k,以及一个长度为 n n n数组。现在从 n n n个数中,挑出 k k k个数,称作个子序列。然后将这个子序列分成两部分&#x…

干翻Mybatis源码系列之第八篇:Mybatis二级缓存的创建和存储

给自己的每日一句 不从恶人的计谋,不站罪人的道路,不坐亵慢人的座位,惟喜爱耶和华的律法,昼夜思想,这人便为有福!他要像一棵树栽在溪水旁,按时候结果子,叶子也不枯干。凡他所做的尽…

C++之---树/数据结构

一、树 什么是树? 1.1 树(Tree)是n(n>0)个结点的有限集。n0时称为空树。在任意一棵非空树中: (1) 有且仅有一个特定的称为根(Root)的结点; &am…

CodeForces..最新行动.[中等].[遍历].[判断]

题目描述: 题目解读: "最近操作"字段会显示最近操作的n个文件。 最初有编号文件1,2,... n在"最近操作"字段,还有其他无限多个文件不在。 当某个文件pi发生操作时: 如果它位于“最近…

小红书账号矩阵优化软件

小红书账号矩阵优化软件 大家有关注过品牌在⼩红书上的打法有哪些吗? #品牌营销#小红书运营#爆文拆解#品牌投放#爆品打造 我们如果确定了我们要去做小红书,那我到底该怎么去做?现在小红书对我们目前这些品牌来说,你们是作为把它…

Allegro16.6详细教程(二)

R.3-D Viewer 3-D Viewer,可以直接在allegro中看到board file的3-D顯示效果。3-D Viewer對於PCB Editor Products,只有環境變數中的OpenGL顯示功能開啟後才有效,而對於APD/SiP是無效的。 2.3-D viewer是在一個獨立的視窗中打開的。3-D environment環境支援多種顯示內容的過…

Spring Cloud Alibaba - Nacos源码分析(二)

目录 一、Nacos服务端服务注册 1、服务端调用接口 2、服务注册 instanceServiceV2.registerInstance EphemeralClientOperationServiceImpl.registerInstance ServiceManager clientManager Client实例AbstractClient ClientOperationEvent.ClientRegisterServiceEven…

2023《中国好声音》全国巡演Channel[V]歌手大赛广州赛区半决赛圆满举行!

2023年5月27-28日,由腾扬广告、Channel[V]、盛娱星汇联合主办的2023《中国好声音》全国巡演Channel[V]歌手大赛广州赛区半决赛在广州番禺天河城正式打响,自广州赛区赛事启动以来,汇集了近五千名音乐人参与其中,历经2个多月、超40场…

【数据库复习】第七章 数据库设计

数据库设计的过程(六个阶段) ⒈需求分析阶段 准确了解与分析用户需求(包括数据与处理) 最困难、最耗费时间的一步 ⒉概念结构设计阶段 整个数据库设计的关键 通过对用户需求进行综合、归纳与抽象,形成一个独立于具体DBMS的概念模型 ⒊…

基于微信小程序蛋糕店商城管理系统的设计与实现

1:后端采用技术 SpringBoot 、Mybatis、Mybatis-plus、Redis、阿里云短信息服务、Hutool 邮箱服务、WebSocket通讯服务、OSS对象存储服务、支付宝沙箱服务,接口简单限流、简单定时任务。。。。。。 2:前端采用技术 Vue2、Vue2-uploader组件、…

[图表]pyecharts模块-日历图

[图表]pyecharts模块-日历图 先来看代码: import random import datetimeimport pyecharts.options as opts from pyecharts.charts import Calendarbegin datetime.date(2017, 1, 1) end datetime.date(2017, 12, 31) data [[str(begin datetime.timedelta(d…

Leetcode 110-平衡二叉树

1. 递归法求解 递归三部曲: 确定递归函数的参数及其返回值确定终止条件确定单层递归逻辑 深度:从上往下 高度:从下往上 1.1 根据深度求解 构建求二叉树节点深度的函数(后序遍历)递归求该树是否是平衡二叉树&#…

国产化麒麟linux系统开发编译常见问题汇总

团队自研股票软件关注威信龚总号:QStockView,下载 1 问题处理 1.1 Unknown module in QT:QJsonDocument 缺少QJsonDocument 解决方法: Pro文件中加上 QTcore; 播放器库问题 1.2 代码中汉字乱码需要设置文件编码格式 原因分析&…

2023-06-03:redis中pipeline有什么好处,为什么要用 pipeline?

2023-06-03:redis中pipeline有什么好处,为什么要用 pipeline? 答案2023-06-03: Redis客户端执行一条命令通常包括以下四个阶段: 1.发送命令:客户端将要执行的命令发送到Redis服务器。 2.命令排队&#…

内网安全:Cobalt Strike 工具 渗透多层内网主机.(正向 || 反向)

内网安全:Cobalt Strike 工具 渗透多层内网主机. Cobalt Strike 是一款以 metasploit 为基础的 GUI 的框架式渗透工具,又被业界人称为 CS。拥有多种协议主机上线方式,集成了端口转发,服务扫描,自动化溢出,…

Docker容器化Java程序

💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Docker容器化Java程序 Docker:用于创建和管理容器的开源平台 Java运行环境:Java是一个跨平台的编程语言,因此在CentOS系统中需要安…

一个帮助写autoprefixer配置的网站

前端需要用到postcss的工具,用到一个插件叫autoprefixer,这个插件能够给css属性加上前缀,进行一些兼容的工作。 如何安装之类的问题在csdn上搜一下都能找到(注意,vite是包含postcss的,不用在项目中安装pos…