一、Koa是什么?????????
據(jù)網(wǎng)上的資料顯示，Koa 是下一代的 Node.js 的 Web 框架。是express原班人馬打造,同樣用于構(gòu)建服務(wù)端web application的。旨在提供一個(gè)更小型、更富有表現(xiàn)力、更可靠的 Web 應(yīng)用和 API 的開(kāi)發(fā)基礎(chǔ)。扯這些沒(méi)用的，它就是提供給我們構(gòu)建API服務(wù)的。
二、Koa-Router是什么?????????
快捷式路由（app.get、app.put、app.post等）， 命名URL參數(shù) 生成URL的命名路由，將路由與特定主機(jī)匹配，使用允許的方法響應(yīng)OPTIONS請(qǐng)求，不允許支持405方法，不支持501方法，多路由中間件，多個(gè)可嵌套路由器，支持async/await。顧名思義，其實(shí)就和我們前端vue-router差不多。只是它做接口層面的匹配處理。
三、安裝依賴?????????
yarn add koa koa-router我當(dāng)前的版本號(hào)
環(huán)境
四、編寫路由?????????
非常的簡(jiǎn)單，我們只需要在方法里面進(jìn)行邏輯處理，然后通過(guò)ctx.body進(jìn)行一個(gè)響應(yīng)。
const Router = require('koa-router');
// 如果添加了prefix前綴的話,接口訪問(wèn)就變成******/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里面可以獲取到我們前端丟過(guò)來(lái)的參數(shù)
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的話也是非常簡(jiǎn)單。把剛剛編寫好的router通過(guò)app.use注冊(cè)以后。再配置一個(gè)404，就是沒(méi)有再路由配置的請(qǐng)求路徑都會(huì)返回404，最后通過(guò)app.listen進(jìn)行啟動(dòng)，端口號(hào)是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()) // 注冊(cè)
app.use(async (ctx, next) => {
await next();
ctx.response.body = {
status: 404,
}
});
app.listen(8088, () => {
console.log('??????-----------------KOA服務(wù)器已啟動(dòng)成功,端口號(hào)為: 45455')
});
}
exports.createKoaApp = createKoaApp
六、啟動(dòng)?????????
接在我們?cè)趀lectron的main.ts中在合適的位置進(jìn)行啟動(dòng)，為什么說(shuō)合適，因?yàn)槭莇emo所以我隨意放置的，如果有需求做licenses的話，后期可以將Koa啟動(dòng)放置到授權(quán)通過(guò)的邏輯中。
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, // 去掉導(dǎo)航最大化最小化以及關(guān)閉按鈕
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()
}
// 啟動(dòng)Koa
createKoaApp()
remote.enable(win.webContents);
}
app.whenReady().then(() => {
createWindow()
})
/**
* @Description: 限制只能打開(kāi)一個(gè)頁(yè)面
* @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。如果文章對(duì)你有所幫助，能否幫我點(diǎn)個(gè)免費(fèi)的贊和收藏??。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-470300.html
??? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-470300.html
到了這里，關(guān)于第三章 Electron 使用Koa以及Koa-Router的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
