如何实现个人维基站点用户点击按钮即可在服务端创建并保存新页面？

核心实现逻辑 #

你之前使用的DOMImplementation是纯前端API，仅能操作浏览器内的DOM结构，无法直接修改服务端的文件，因此无法满足需求。整体实现需要前端+后端配合，流程如下：

• 前端新增「新建页面」按钮，点击后弹出弹窗收集新页面的名称/路径参数
• 前端将参数通过请求发送给后端接口
• 后端接收参数后，校验合法性，在维基文章的存储目录下生成对应带预设模板的空白文件
• 生成完成后自动跳转到编辑页，编辑完成后点击保存调用后端写入接口，将内容同步到服务端文件中

前端核心代码示例 #

// 新建页面按钮点击事件
document.querySelector('#createNewPageBtn').addEventListener('click', async () => {
  const pageName = prompt('请输入新页面名称：')
  if (!pageName) return
  // 调用后端新建接口
  const res = await fetch('/api/create-page', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({pageName: pageName.trim()})
  })
  const data = await res.json()
  if (data.success) {
    // 跳转到编辑页，参数携带页面路径
    location.href = `/editor.html?page=${data.pagePath}`
  } else {
    alert('创建失败：' + data.msg)
  }
})

// 编辑页保存逻辑
document.querySelector('#saveBtn').addEventListener('click', async () => {
  const pagePath = new URLSearchParams(location.search).get('page')
  const content = document.querySelector('#editorArea').value
  const res = await fetch('/api/save-page', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({pagePath, content})
  })
  if (res.ok) alert('保存成功')
})

后端核心代码示例（Node.js Express 框架） #

const express = require('express')
const fs = require('fs/promises')
const path = require('path')
const app = express()
app.use(express.json())
// 维基文章存储目录，可自行修改路径
const ARTICLE_DIR = path.join(__dirname, 'articles')

// 新建页面接口
app.post('/api/create-page', async (req, res) => {
  const {pageName} = req.body
  // 过滤非法字符避免路径遍历攻击
  const safePageName = pageName.replace(/[\/\\:*?"<>|]/g, '')
  const pagePath = `${safePageName}.md`
  const fullPath = path.join(ARTICLE_DIR, pagePath)
  try {
    // 先判断文件是否存在，避免覆盖已有内容
    await fs.access(fullPath)
    res.json({success: false, msg: '该页面已存在'})
  } catch {
    // 写入预设模板，可自行调整模板内容
    await fs.writeFile(fullPath, `# ${pageName}\n\n请在此处编辑内容`, 'utf-8')
    res.json({success: true, pagePath})
  }
})

// 保存页面内容接口
app.post('/api/save-page', async (req, res) => {
  const {pagePath, content} = req.body
  const safePagePath = pagePath.replace(/[\/\\]/g, '')
  const fullPath = path.join(ARTICLE_DIR, safePagePath)
  try {
    await fs.writeFile(fullPath, content, 'utf-8')
    res.json({success: true})
  } catch (e) {
    res.status(500).json({success: false, msg: '写入失败'})
  }
})

app.listen(3000, () => console.log('服务启动在3000端口'))

补充说明 #

• 以上为最简实现，实际使用时建议添加权限校验逻辑，避免未授权用户创建、修改页面
• 如果你使用其他后端语言（Python/PHP/Go等），逻辑完全一致，仅需要替换为对应语言的文件操作、接口实现写法即可
• 如果你的维基是基于静态站点生成器搭建的，新增文件后可以额外加一步自动触发站点构建的逻辑，即可直接生成可访问的静态页面

内容的提问来源于stack exchange，提问作者Jasd887