前言
上一篇文章完成了个人信息模块的开发设计，接下来就开始备忘录模块的开发设计。备忘录模块主要用于记录日常容易忘记的笔记，便于在关键时刻能快速回顾。下面主要是开发备忘录的具体流程。
往期回顾
前端功能开发
页面绘制
- 创建备忘录组件：
components/memo/memoView.vue - 绘制列表页面布局
- 绘制编辑页面布局
功能分析
列表页面难点分析
- 头部的最大化/最小化按钮，因为同时在列表页面和编辑页面中使用，需要兼容底部内容的自适应高度，在内容溢出时显示滚动条。这里的办法是在点击最大化/最小化按钮时，获取变化后的窗口高度，动态设置高度样式。
编辑页面难点分析
- 根据工具栏选项对编辑区域进行样式涉及到多重判断，是个较复杂的难点。
- 将
div区域设置成可编辑区域
<div contenteditable="true" spellcheck="false"></div>
- 获取光标选择区域的内容
const selection: any = window.getSelection();
const range = selection.getRangeAt(0);
- 初始选择时拿到的是文本，设置样式需要在文本外套上一层
span，再次选择时是嵌套的span。这时需要在最内层设置相同的样式，才能覆盖外层原有的样式。 - 一级至六级标题和图片非文本样式，需要单独创建对应的节点。
后端功能开发
数据库配置
- 创建新的路由文件：
router/Memo.js - 创建新的数据库操作文件：
models/Memo.js - 创建新的数据表：
models/index.js
const db = new sqlite.Database('data/data.db', () => {
console.log('数据库打开成功')
db.run('CREATE TABLE IF NOT EXISTS personal (id INTEGER PRIMARY KEY AUTOINCREMENT, email VARCHAR, password VARCHAR, imgUrl VARCHAR, name VARCHAR,sex VARCHAR)');
db.run('CREATE TABLE IF NOT EXISTS memo (id INTEGER PRIMARY KEY AUTOINCREMENT, title VARCHAR, content TEXT)');
})
项目运行
前端部分
npm run dev
后端部分
npm run start
后续
以上便是备忘录模块的简易开发流程，富文本编辑器可加入的编辑设置较多，这里仅加入了平时比较常用的一些。这个模块实现的只是一个简单的基础功能，进行比较复杂的操作会存在些许问题。后续在进行其他模块开发时会迭代原始模块。
下一章：主页设置模块
