简账(开源记账软件)-前端环境简介及部署

2,085 阅读3分钟

前言

由于自己有记账的需求,在尝试使用过市面上的记账软件后,发现大多数都有以下几个问题

  • 广告比较多,主要分为信息流广告及金融类广告
  • 页面太痈肿,使用体验不好
  • 部分高级功能需要收费,如数据导出

所以就萌生了自己做一个记账软件的想法,这个想法在2020年5月左右落地的,到目前也快有一年了。 本着OpenSource的想法,已全部开源,也想借写博客的机会获得一些Star❤

测试环境

正式环境:

  • 小程序:微信搜索【简账】
  • PC端:简账PC端

Github开源地址:

后续要完成的功能(重要性至上而下)

  • 支持多账本,可自定义维护
  • 支持设置预算(年月预算)
  • 支持多账本间冲销
  • 支持Excel导出(年或月可自定义)
  • 支持多人记账及家庭账本

待解决的Bug

  • 如用户未登录过小程序,小程序扫码授权会提示Token不能为空(提供者:喵了个小咪咪

写在后面
如果你有其他的想法或问题欢迎给我留言,或在Github上提Pr&Issue
tips:如果你也想你写的东西被人使用,欢迎跟我一起维护简账~

往期链接


一、前端主要技术栈简介

从大体上来看,整个后端为单体的SpringBoot+Redis+Mysql

具体涉及的技术如下所示:

  • Vue 2.6.x
  • Vue Router 3.1.2
  • Vuex 3.1.1
  • axios 0.19.0
  • AntDesign Vue 3.0

Q&A

  1. 项目是基于AntDesign Vue Pro吗?

是的,此项目基于AntDesign Vue Pro开发的

  1. 相较于AntDesign Vue Pro官方实例项目,有做哪些定制化开发?

1.整个项目均为真实接口数据,无mock
2.基于vue的路由守卫实现了权限管理和动态菜单

二、环境部署

前端开发环境相对来说比较简单,主要分为拉取代码和启动两个部分

1. 安装nodejs

  • nodejs官网下载12.x 对应平台的版本
  • 验证一下,是否安装正确 在这里插入图片描述

2. 从Github上下载代码

此处也可以fork一份代码到你自己的仓库后,从你自己的github仓库拉取代码

在这里插入图片描述

3. 安装依赖

  • 进入项目目录
  • 运行npm install 在这里插入图片描述

4. 运行项目

  1. 配置后台地址

如果你已经成功启动了简账的后端服务,此步骤可以跳过

修改vue.config.js中的webpack代理路径

修改前: 在这里插入图片描述

修改后(jz.jackbin.cn): 在这里插入图片描述

  1. 运行项目 运行命令:npm run serve,看到如下输出即代表成功 在这里插入图片描述

  2. 浏览器中查看 地址:http://localhost:8000 在这里插入图片描述

三、总结

后续博客内容:

  1. 数据库设计
  2. SpringBoot集成SpringSecurity+JWT及动态路由生成
  3. 小程序扫码登陆实现
  4. 记账及月账单实现
  5. 图表分析实现
  6. ...

简账开发者:

  1. SloppyJack
  2. SmallishJoker

四、致谢

如果你觉我这个项目还不错的话,不妨给我的Github点个Star❤