我国版式文档格式OFD前端WEB展示之EasyOFD
发布人：shili8
发布时间：2025-02-03 08:33
阅读次数：0
**EasyOFD 前端 WEB 展示**
**概述**
EasyOFD 是一个基于 Web 的前端展示系统，旨在简化我国版式文档格式 OFD 的显示和管理。通过 EasyOFD，可以快速创建并展示 OFD 文档，方便用户浏览和下载。
**技术栈**
* 前端框架：React* UI 库：Ant Design* 后端接口：Node.js Express* 数据库：MongoDB**EasyOFD 组件**
1. **文档列表组件**
* 展示 OFD 文档列表，包括文档名称、创建时间和下载次数。
* 支持分页功能，方便用户浏览大量文档。
2. **文档详情组件**
* 展示单个 OFD 文档的详细信息，包括文档内容、元数据和历史版本。
* 支持文档下载功能。
3. **搜索组件**
* 提供全文搜索功能，支持关键字和正则表达式搜索。
* 支持高亮显示匹配结果。
**EasyOFD API**
1. **获取文档列表**
* 接口:`GET /api/docs`
* 参数：`page`、`size`、`searchKey`（可选）
* 返回值：文档列表对象2. **获取单个文档**
* 接口:`GET /api/docs/:id`
* 参数：`id`（必填）
* 返回值：单个文档对象3. **下载文档**
* 接口:`GET /api/docs/:id/download`
* 参数：`id`（必填）
* 返回值：文档内容**EasyOFD 实现**
### 文档列表组件
jsximport React, { useState, useEffect } from 'react';
import { Table, Tag, Space } from 'antd';
const DocumentList = () => {
const [docs, setDocs] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
fetch('/api/docs')
.then(response => response.json())
.then(data => {
setDocs(data.docs);
setLoading(false);
})
.catch(error => console.error(error));
}, []);
const columns = [
{
title: '文档名称',
dataIndex: 'name',
key: 'name',
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
},
{
title: '下载次数',
dataIndex: 'downloads',
key: 'downloads',
},
];
return (
### 文档详情组件
jsximport React, { useState, useEffect } from 'react';
import { Layout, Breadcrumb, Card } from 'antd';
const DocumentDetail = () => {
const [doc, setDoc] = useState({});
const [loading, setLoading] = useState(false);
useEffect(() => {
fetch(`/api/docs/${id}`)
.then(response => response.json())
.then(data => {
setDoc(data.doc);
setLoading(false);
})
.catch(error => console.error(error));
}, []);
return (
<Layout>
<Breadcrumb>
<Breadcrumb.Item>文档列表</Breadcrumb.Item>
<Breadcrumb.Item>{doc.name}</Breadcrumb.Item>
</Breadcrumb>
<Card title={doc.name}>
<p>创建时间：{doc.createTime}</p>
<p>下载次数：{doc.downloads}</p>
<p>内容：</p>
<pre>{doc.content}</pre>
</Card>
</Layout>
);
};
export default DocumentDetail;
### 搜索组件
jsximport React, { useState } from 'react';
import { Input, Button } from 'antd';
const Search = () => {
const [searchKey, setSearchKey] = useState('');
const [results, setResults] = useState([]);
const handleSearch = async (e) => {
e.preventDefault();
fetch(`/api/docs/search?searchKey=${searchKey}`)
.then(response => response.json())
.then(data => {
setResults(data.results);
})
.catch(error => console.error(error));
};
return (
<form onSubmit={handleSearch}>
<Input value={searchKey}
onChange={(e) => setSearchKey(e.target.value)}
placeholder="请输入搜索关键字"
/>
<Button type="primary" htmlType="submit">
搜索 </Button>
{results.map((result, index) => (
<p key={index}>
<a href={`/api/docs/${result.id}`}>{result.name}</a>
</p>
))}
</form>
);
};
export default Search;
**EasyOFD 后端接口**
javascriptconst express = require('express');
const app = express();
app.get('/api/docs', (req, res) => {
// 获取文档列表 const docs = [];
res.json({ docs });
});
app.get('/api/docs/:id', (req, res) => {
// 获取单个文档 const id = req.params.id;
const doc = {};
res.json({ doc });
});
app.get('/api/docs/:id/download', (req, res) => {
// 下载文档 const id = req.params.id;
const content = '';
res.set("Content-Disposition", `attachment; filename="${id}.ofd"`);
res.send(content);
});
app.post('/api/docs/search', (req, res) => {
// 搜索文档 const searchKey = req.body.searchKey;
const results = [];
res.json({ results });
});
**EasyOFD 数据库**
javascriptconst mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/easyofd', { useNewUrlParser: true, useUnifiedTopology: true });
const docSchema = new mongoose.Schema({
name: String,
createTime: Date,
downloads: Number,
content: String,
});
const Doc = mongoose.model('Doc', docSchema);
**EasyOFD 部署**
1. 克隆 EasyOFD 源码到本地。
2. 安装依赖包：`npm install`
3. 启动后端服务：`node server.js`
4. 启动前端服务：`npm start`
5. 访问 EasyOFD 前端页面：` />
**EasyOFD 文档**
* [EasyOFD 文档]( />
**EasyOFD 贡献**
* [EasyOFD 贡献指南](
粤公网安备 44011102002787号