Vue3 项目实战 — Vue3记账本项目（前端Vue3，后端node.js）

项目介绍

本项目为高仿微信记账本 H5 项目（微信记账本是小程序），使用 Vue3、Vite4、Pinia、Vant 当前主流技术栈开发。项目页面虽然不多，但是涉及了很多前端开发知识，包括Vue3的新语法、Vite的基础使用和Pinia的基础使用等。后端用node.js来进行开发，框架用了egg框架。前后端都是用JavaScript来进行开发，不涉及其它复杂的开发语言，通过此项目可以独立完成记账本的全栈开发。

项目特色

• 采用 `Vue3`、`Vite4`、`Pinia`等主流技术栈，可以学习到最新的技术栈；
• 配套 `node.js` 后台接口，非 `Mock` 数据；
• 系统功能：账单列表、添加账单、账单详情、数据报表、消费类型管理和个人中心等；

技术栈

相关库名称	在线地址
Vue 3.x	https://vue3js.cn/docs/zh
Vant 3.x	https://vant-contrib.gitee.io/vant/next
Vite 4.x	https://cn.vitejs.dev/
pinia 2.x	https://pinia.web3doc.top/
Vue-Router 4.x	https://next.router.vuejs.org
Echart 5.x	https://echarts.apache.org/zh/index.html
dayjs	https://dayjs.fenxianglu.cn
axios	http://www.axios-js.com
lib-flexible	https://github.com/amfe/lib-flexible

项目架构

```
┌─ public                静态资源（打包时会直接复制）
├─ src                   项目目录
|  ├─ api                接口资源
|  ├─ assets             静态资源
|  ├─ components         公共组件
|  ├─ router             路由配置文件
|  ├─ store              统一状态管理
|  ├─ utils              工具函数
|  ├─ views              路由组件
├─ package.json          包管理文件
├─ README.md             项目说明文件
└─ vite.config.js        vite配置文件
```

项目预览

前后端项目目前已经部署到线上环境，大家可以通过以下地址进行访问：

「记账本」在线预览：http://114.115.145.217:8003/

测试账号：admin，测试密码：123456 也可以自行注册使用。

项目进度

• [√] 账单列表
• [√] 添加账单
• [√] 账单详情
• [√] 数据报表
• [√] 个人中心
• [√] 消费类型管理
• [√] 骨架屏
• [√] 软件打分

数据库设计

记账本主要分为三个模块，分别为用户模块、账单模块和账单类型模块，三个模块分别设计了三个数据表来存储数据。

用户模块————设计用户表 user

• id：自增主键;
• username：用于存储用户登录名称;
• password：用于存储用户登录密码;
• signature：用于存储用户个性签名;
• avatar：用于存储用户头像信息;
• ctime：用于存储用户创建时间字段。

账单模块————设计账单表 bill

• id：主键;
• pay_type：账单类型（1 为支出，2 为收入）;
• amount：账单价格;
• date：账单日期（以时间戳的形式存储）;
• type_id：账单标签 id（如：餐饮、交通、日用、学习、购物等）;
• type_name：账单标签名称（如：餐饮、交通、日用、学习、购物等）;
• user_id：账单归属的用户 id;
• remark：账单备注。

账单类型模块————设计账单类型表 type

• id：主键;
• name：类型名称，如餐饮、交通、日用、学习、购物等;
• type：类型类型（1 为支出，2 为收入）;
• icon：类型图标 class 名，如 icon-meishi;
• user_id：默认 0 为全部用户可见，某个用户单独设置的类型，user_id 就是该用户的用户 id，在获取列表的时候，方便过滤。