🐛 修复(ipc.ts)：更新ipcMain.handle('sql')函数以支持带params的查询

♻️ 重构(query.ts)：更新update函数以防止SQL注入
  🔧 添加(tables.ts)：创建contents表
  🔧 添加(preload/index.d.ts)：更新sql方法以支持params
  🔧 添加(preload/index.ts)：更新sql方法以支持params
  🔧 添加(Content.tsx)：更新内容页的key属性
  🔧 添加(ContentAction.ts)：更新async函数以接受params for路由传参

ui/autoMate/src/main/db/ipc.ts

@@ -1,5 +1,5 @@
 import { IpcMainInvokeEvent, ipcMain } from "electron";
 import * as query from './query'
-ipcMain.handle('sql', (_event: IpcMainInvokeEvent, sql: string, type: SqlActionType) => {
-    return query[type](sql)
+ipcMain.handle('sql', (_event: IpcMainInvokeEvent, sql: string, type: SqlActionType, params={}) => {
+    return query[type](sql, params)
 })

ui/autoMate/src/main/db/query.ts

@@ -12,8 +12,10 @@ export const create = (sql: string) => {
     return db.prepare(sql).run().lastInsertRowid;
 }
 
-export const update = (sql: string) => {
-    return db.prepare(sql).run().changes;
+
+//使用 params 是为了防止 sql 注入
+export const update = (sql: string, params: Record<string, any>) => {
+    return db.prepare(sql).run(params).changes;
 }
 
 export const del = (sql: string) => {

ui/autoMate/src/main/db/tables.ts

@@ -10,15 +10,15 @@ CREATE TABLE IF NOT EXISTS categories (
 `)
 
 
-// db.exec(`
-// CREATE TABLE IF NOT EXISTS contents (
-//     id INTEGER PRIMARY KEY AUTOINCREMENT not null,
-//     title TEXT not null,
-//     content TEXT not null,
-//     category_id INTEGER,
-//     created_at TEXT not null
-// );
-// `)
+db.exec(`
+CREATE TABLE IF NOT EXISTS contents (
+    id INTEGER PRIMARY KEY AUTOINCREMENT not null,
+    title TEXT not null,
+    content TEXT not null,
+    category_id INTEGER,
+    created_at TEXT not null
+);
+`)
 
 // for (let i = 0; i < 20; i++) {
 //     const name = Random.title(5, 10)

ui/autoMate/src/preload/index.d.ts

@@ -8,7 +8,7 @@ declare global {
       shortCut: (type: 'search', shortCut: string) => Promise<boolean>,
       setIgnoreMouseEvents: (ignore: boolean, options?: { forward: boolean }) => void,
       openConfigWindow: () => void,
-      sql: <T>(sql: string, type: SqlActionType) => Promise<T>
+      sql: <T>(sql: string, type: SqlActionType, params?: Record<string, any>) => Promise<T>
     }
   }
 }

ui/autoMate/src/preload/index.ts

@@ -15,8 +15,8 @@ const api = {
   openConfigWindow: () => {
     ipcRenderer.send("openConfigWindow")
   },
-  sql: (sql: string, type: SqlActionType) => {
-    return ipcRenderer.invoke("sql", sql, type)
+  sql: (sql: string, type: SqlActionType, params={}) => {
+    return ipcRenderer.invoke("sql", sql, type, params)
   }
 
 }

ui/autoMate/src/renderer/src/pages/Content/Content.tsx

@@ -4,7 +4,7 @@ export const Content = () => {
     const content = useLoaderData() as ContentType
     return (
     <Form method="PUT">
-    <main className="content-page">
+    <main className="content-page" key={content.id}>
         <input defaultValue={content.title} name="title"/>
         <textarea defaultValue={content.content} name="content"/>
         <div className="border-t flex items-center justify-center">

ui/autoMate/src/renderer/src/pages/Content/ContentAction.ts

@@ -1,5 +1,12 @@
-export default async({request}) => {
+export default async({request, params}) => {
+    // params 接收路由中传递过来的数据
     const data = await request.formData()
-    console.log(data.get("content"))
-    return {}
+    const res = window.api.sql(
+        `update contents set title=@title, content=@content where id=@id`, 
+        "update",
+        {title: data.get("title"), 
+        content: data.get("content"), 
+        id: params.id}
+    )
+    return res
 }