项目介绍
本项目为高仿微信记账本 H5 项目(微信记账本是小程序),使用 Vue3、Vite4、Pinia、Vant 当前主流技术栈开发。项目页面虽然不多,但是涉及了很多前端开发知识,包括Vue3的新语法、Vite的基础使用和Pinia的基础使用等。后端用node.js来进行开发,框架用了egg框架。前后端都是用JavaScript来进行开发,不涉及其它复杂的开发语言,通过此项目可以独立完成记账本的全栈开发。
项目特色
- 采用 `Vue3`、`Vite4`、`Pinia`等主流技术栈,可以学习到最新的技术栈;
- 配套 `node.js` 后台接口,非 `Mock` 数据;
- 系统功能:账单列表、添加账单、账单详情、数据报表、消费类型管理和个人中心等;
技术栈
相关库名称 | 在线地址 |
---|---|
Vue 3.x | |
Vant 3.x | |
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,在获取列表的时候,方便过滤。
记账本前端源码(Vue3版本):下载链接🔗
记账本前端源码(uniapp版本):下载链接🔗
记账本后端源码:下载链接🔗
记账本MySQL数据库文件:下载链接🔗