前言
上一篇文章完成了备忘录模块的开发设计，接下来为工作台添加一个设置模块，用于配置工作台应用信息和布局样式。下面主要是开发设置的具体流程。
往期回顾
【一】用Vue3+Typescript+nodejs完成一个功能完整的登录系统
前端功能开发
页面开发
- 新增一个设置页面：
views\Setting\SettingView.vue
- 添加工作台页面配置编辑框，这里添加了背景图片和桌面应用的字体图片样式编辑。
- 在输入框配置Tab新增一个页面搜索条件的表格
- 在应用配置Tab新增一个桌面应用编辑的表格
4. 输入框配置Tab和应用配置Tab是两个相似的表格，可以抽离出一个组件进行复用。
路由配置
- 新增设置页面路由：
router/index.ts
{
path: '/setting',
name: 'Setting',
component: () => import('@/views/Setting/SettingView.vue')
}
主页联动
- 页面加载时渲染配置：
views\Home\HomeView.vue
后端功能开发
- 创建新的路由文件：
router/Setting.js - 创建新的数据库操作文件：
models/Setting.js - 创建新的数据表：
models/index.js
db.run('CREATE TABLE IF NOT EXISTS app (id INTEGER PRIMARY KEY AUTOINCREMENT, appName VARCHAR, url VARCHAR, imgUrl VARCHAR, type VARCHAR)');
db.run('CREATE TABLE IF NOT EXISTS setting (id INTEGER PRIMARY KEY AUTOINCREMENT, email VARCHAR, imgUrl VARCHAR, fontSize VARCHAR, fontColor VARCHAR, radius VARCHAR, uploadType VARCHAR)');
项目运行
前端部分
npm run dev
后端部分
npm run start
后续
以上便是设置模块的开发流程，工作台底座到这里也算是完全完成开发，设置模块都是些寻常的表单表格开发对接，代码部分就先省略，如有学习参考的需求可以在Github进行查看，功能优化与迭代在后续会持续进行。
