记账本前端代码（vue3版本）

<!-- * @Author: Huangxianlong * @Date: 2022-09-12 11:25:11 * @LastEditors: Huangxianlong * @LastEditTime: 2023-07-31 11:09:36 * @FilePath: \cashbook-vue3-h5\README.md * @Description: --> # cashbook-vue3-h5 ## 项目介绍 本项目为高仿微信记账本 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配置文件 ``` ## 环境要求 - Node 环境 版本：16+ - 开发工具 VSCode ## 项目预览 前后端项目目前已经部署到线上环境，大家可以通过以下地址进行访问： **「记账本」在线预览：** http://114.115.145.217:8003/ > 测试账号：admin，测试密码：123456 也可以自行注册使用。 **「记账本」前端代码开源地址：** https://gitee.com/Huangxianlong11/cashbook-vue3-h5 **「记账本」后端代码开源地址：** https://gitee.com/Huangxianlong11/cashbook-server ## 项目启动 ```bash # 安装依赖 npm install # 项目运行 npm run dev # 项目打包 npm run build ``` ## 项目部署 - 上传文件 将打包生成在 `dist` 目录下的文件拷贝至 `/usr/share/nginx/html/cashbook` 目录 - nginx.cofig 配置 ``` server { listen 8003; server_name localhost; location / { root /usr/share/nginx/html/cashbook; index index.html index.htm; } # 如设置了代理，需要进行代理转发，比如代理转发 api 标识至 127.0.0.1:7001 location /api/ { proxy_pass http://127.0.0.1:7001/; } } ``` ## 本地接口 > 默认使用线上接口，你可以通过以下步骤完成本地接口环境搭建： 1. 获取基于 `node.js` 开发的后端 [cashbook-server](https://gitee.com/Huangxianlong11/cashbook-server) 源码 ; 2. 根据后端工程说明文档完成本地启动; 3. 替换 [vite.config.ts](vite.config.ts) 的代理目标地址为本地的 [localhost:7001](localhost:7001) 。 ## 项目进度 - [√] 账单列表 - [√] 添加账单 - [√] 账单详情 - [√] 数据报表 - [√] 个人中心 - [√] 消费类型管理 - [√] 骨架屏 - [√] 软件打分 ## 项目页面截图         ## 数据库设计 记账本主要分为三个模块，分别为用户模块、账单模块和账单类型模块，三个模块分别设计了三个数据表来存储数据。 - 用户模块————设计用户表 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，在获取列表的时候，方便过滤。 ## Git 贡献提交规范 参考 vue 规范 - feat 增加新功能 - fix 修复问题/BUG - style 代码风格相关无影响运行结果的 - perf 优化/性能提升 - refactor 重构 - revert 撤销修改 - test 测试相关 - docs 文档/注释 - chore 依赖更新/脚手架配置修改等 - workflow 工作流改进 - ci 持续集成 - types 类型定义文件更改 - wip 开发中