AI编辑器

Chiaki17 / 2024-07-18 / 原文

功能实现

基础

phpStudy启动Apache+数据库工具phpMyAdmin(SQL)
前端·终端运行：npm run dev
后端：Run Code
首页：http://localhost:5173
编辑器页面：http://localhost:5173/Edit

功能

文本输入，基本工具栏，字数统计，智能格式排版，多媒体信息提取（OCR识别），划词AI智能润色

OCR识别

简介

OCR识别，是一种通过扫描、拍照等光学输入方式将各种票据、报刊、书籍、文稿及其他印刷品的文字转化为图像信息，再利用文字识别技术将图像信息转化为可以编辑和检索的文本的技术。OCR识别技术在现代社会中发挥着重要作用，它极大地提高了数据输入的效率和准确性，为文档处理和信息管理提供了高效的解决方案。
结合PaddlePaddle框架，实现前后端协同工作以完成输入图像中的文字识别任务。

具体功能

图片上传，后端接收并保存图片，MySQL数据库存储图片信息，OCR项目本地部署

说明

本地的环境配置完成，其他一些paddle模型本地运行也可以参考这种方式，安装对应的库，导入训练好的模型(或者自己重新训练也ok)，接着进行跑通即可在后续后端进行模型的使用。
封装为接口就可以前端调用使用。

编辑器

Tiptap介绍

Tiptap 的主要有5大部分组成：
（1）、Core：Tiptap 的核心模块，负责处理编辑器的基本功能，如文本输入、选择、撤销和重做等。
（2）、Extensions：扩展模块，提供丰富的编辑功能，如加粗、斜体、列表、链接等。开发者可以根据需求选择需要的功能，并通过插件系统轻松地添加到编辑器中。
（3）、Commands：命令模块，用于执行编辑操作，如插入、删除、修改等。开发者可以通过命令 API 对编辑器进行操作，实现自定义的功能。
（4）、Schema：定义编辑器的文档结构，包括节点、标记和规则。通过自定义 Schema，可以实现特定的文档结构和约束。
（5）、Vue/React components：Tiptap 提供了 Vue 和 React 的组件，使得编辑器可以轻松地集成到这两个框架中。

数据库操作

简介

数据库简称 DB，是按照数据结构来组织、存储和管理数据的仓库，用户可以对文件的数据进行增加、删除、修改、查找等操作。

指令

创建数据库：CREATE DATABASE EditData;
CREATE DATABASE IF NOT EXISTS userinfo;
删除数据库：DROP DATABASE IF EXISTS userinfo;

查看MySQL服务器下所有数据库：SHOW DATABASES;

information_schema数据库是MySQL服务器的数据字典（保存所有数据表和库的结构信息）
performance_schema数据库是MySQL服务器的性能字典（保存全局变量等的设置）
mysql 主要负责MySQL服务器自己需要使用的控制和管理信息（用户的权限关系等）
sys是系统数据库，包括了存储过程，自定义函数等信息
这4个数据库是MySQL安装时自动创建的，建议不要随意的删除和修改这些数据库，避免造成服务器故障。

查看指定数据库的创建信息：SHOW CREATE DATABASE 数据库名称;

显示sys数据库的SQL语句，以及数据库的默认字符集

先选择editdata数据库,接着查看当前数据库：
USE EditData;
SELECT DATABASE();

数据表操作

创建数据表

CREATE [TEMPORARY] TABLE [IF NOT EXISTS] 表名( 
    字段1 字段1类型 [字段属性] [COMMENT 字段1注释 ], 
    字段2 字段2类型 [字段属性] [COMMENT 字段2注释 ], 
    字段3 字段3类型 [字段属性] [COMMENT 字段3注释 ],
    ...... 
    字段n 字段n类型 [COMMENT 字段n注释 ] 
) [表属性] [ COMMENT 表注释 ] ;

例子，创建一个user的表，存储用户的用户名和密码。

CREATE TABLE `userinfo`.`user` ( 
  `id` INT NOT NULL AUTO_INCREMENT , 
  `username` VARCHAR(200) NOT NULL ,
  `password` VARCHAR(200) NOT NULL , 
  PRIMARY KEY (`id`)) ENGINE = MyISAM;

查看数据表

查看数据表：SHOW TABLES FROM userinfo;
查看数据表的相关信息：SHOW TABLE STATUS FROM userinfo;
查看表结构：
USE userinfo;
DESC user

修改与删除

修改数据表名称：ALTER TABLE user RENAME AS users;
删除数据表：DROP TABLE IF EXISTS users;

数据操作

为部分字段添加数据

INSERT INTO user(username,password) VALUES("123","123");
INSERT INTO user SET username ="1234" ,password="1234";

为所有字段添加数据

INSERT INTO user VALUES ("3","12345","12345");

查询数据

查询全部数据：SELECT * FROM user;
查询部分字段：SELECT username FROM user;
简单条件查询数据：
SELECT * FROM user WHERE username = "123";
SELECT * FROM user WHERE username = "123" and password="123";

更新数据

UPDATE user SET username = "666" ,password ="666" WHERE id="1";

删除数据

DELETE FROM user WHERE username="1234";

改进

文档

可以根据开发文档进行上手练习与测试:
https://www.paddlepaddle.org.cn/documentation/docs/zh/guides/beginner/quick_start_cn.html

1.4.3 网络配置

1.4.4

其他一些相关库也可以使用类似方法进行引入。

环境配置

Node.js

Node.js简称Node，是一个可以使JavaScript运行在服务器端的开发平台，JavaScript是一种Web前端语言，Node.js让JavaScript成为服务器端脚本语言。

VS Code

Visual Studio Code是一个轻量且强大的跨平台开源代码编辑器（IDE），支持Windows，OSX和Linux。内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统。使用vscode进行Vue项目构建和代码编写。

Vue创建

前端环境准备完成。

Vue项目配置(vueRouter+pinia+axios+element-plus+Sass+Remix Icon）

路由配置

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得简单。

Pinia配置

Pinia是Vue.js的专属状态管理库，允许跨组件或页面共享状态，提供了更简洁的API和TypeScript支持，是Vuex的轻量级替代品，Vuex对TS的语法支持不是完整的。

网络请求配置

axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js中发送HTTP请求。它支持各种HTTP请求方法，如GET、POST、PUT、DELETE等，并且可以拦截请求和响应，设置请求超时等功能。它可以与现代前端框架（如Vue.js、React、Angular等）进行集成。
可以直接使用axios进行请求，在需要使用的页面引入axios模块:
import axios from 'axios';
并使用类似下面的代码直接请求后端：

const adduser=()=>{
    let formData = new FormData();
    formData.append("username","12345");
    formData.append("password","54321");
    let url = 'http://127.0.0.1:5000/adduser' //访问后端接口的url
    let method = 'post'
    axios({
      method,
      url,
      data: formData,
    }).then(res => {
      alert(res.data)
    });
}
adduser()

element-plus配置

官网地址：https://element-plus.org/zh-CN/
Element Plus是一个基于Vue.js 3.0的UI库，是Element UI的升级版。它提供了一套漂亮、易于使用和自定义的组件，如按钮、输入框、表格、弹窗、日期选择器等。Element Plus的设计理念注重用户体验和响应式设计，所有组件都可以自适应不同屏幕大小以提供良好的用户体验。

Sass预处理器

Sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)、导入(inline imports)等高级功能，这些拓展令CSS更加强大与优雅。使用Sass以及Sass的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。

Remix Icon图标库

官网地址:https://remixicon.com/
Remix Icon是一个开源的图标库,旨在提供一套统一、高质量、可定制的SVG图标,适用于Web和移动应用设计，所有图标均可免费用于个人和商业用途。
使用方式：在需要使用到图标的vue文件中进行引入：
import 'remixicon/fonts/remixicon.css'

路径别名

后端搭建

vscode配置python环境

前后端交互

前后端数据交互完成。

数据库环境准备

phpStudy
官网地址:https://www.xp.cn/
这是一款针对PHP开发的集成环境套装软件，特别为中国用户设计，简化了PHP环境的搭建过程。它集成了Web服务器（如Apache、Nginx）、PHP解释器、MySQL数据库服务器以及其他常用组件如phpMyAdmin和Zend Optimizer等，提供了一个即装即用的环境，让用户无需手动配置即可快速搭建起支持PHP的本地服务器环境。虽然是针对PHP开发的，但是其在配置数据库、Apache、项目部署等功能上具有通用性，能够极大简化开发过程。
数据库环境搭建完成。