捣鼓一个记账类的小程序
创始人
2024-06-03 06:01:21
0

项目前端小程序二维码:

gh_57e3d03938cf_258.jpg

简介: 记录个人,家庭等财务收支情况,可免费导出收支明细,与家人好友共享账本,让记账变得更简单

我的个人blog网站:https://www.zhooson.cn/ 里面其他全栈项目开源Github地址

1. 技术:

前端:uniapp(vue3)
后端:egg
node:16.5.0
数据库:mysql
工具:HbuilerX filezilla pm2 Termius等

2. 整体项目结构

image.png

3. uniapp

具体的开发文档:https://uniapp.dcloud.net.cn/
技术选型:uniapp以前没有使用过,这次决定尝试一次。

使用感觉,感觉不咋好,也许我是了解的不够全面,我每次小程序开发工具添加新的编译模式,重新打包后就没有了,这一点软件默认设置不太友好。

uniapp仔细阅读文档即可,本文不做详细讲解。

4. egg

1. 初始化的项目的老掉牙的命令自行查看文档:https://www.eggjs.org/zh-CN/intro/quickstart

2. jwt使用

  • 安装
    yarn add egg-jwt
  • 配置
// {app_root}/config/plugin.js
exports.jwt = {enable: true,package: "egg-jwt"
};
// {app_root}/config/config.default.js
exports.jwt = {secret: "123456"
};
  • 使用
// {app_root}/app/controller/user.js
//签发 token 数据...let result = await service.user.query({ openId });const token = app.jwt.sign({nickname: result.openId,userId: result.id,exp: Math.floor(Date.now() / 1000) + 60 * 60, // 1h},app.config.jwt.secret);
// {app_root}/app/router.js
module.exports = (app) => {const { router, controller, jwt } = app;/***  用户*/router.post('/api/user/login', controller.user.login);router.post('/api/user/update', jwt, controller.user.update);router.get('/api/user/list', jwt, controller.user.list);
}

3. 获取微信小程序用户openId(前端只需传递code)

// {app_root}/app/service/tool.js
'use strict';const Service = require('egg').Service;
const axios = require('axios');
class ToolService extends Service {// wx 相关操作async decodeWXByCode({ code }) {return new Promise((resolve, reject) => {const { ctx, app } = this;const { AppSecret, AppID } = app.config.wx;axios.get(`https://api.weixin.qq.com/sns/jscode2session?appid=${AppID}&secret=${AppSecret}&js_code=${code}&grant_type=authorization_code`).then((res) => {// console.log('decodeWXByCode', res.data);if (res.data.errcode === 40029) {resolve({ status: 201, message: '无效code' });} else if (res.data.errcode === 40163) {resolve({ status: 201, message: 'code被使用' });} else if (res.data.session_key && res.data.openid) {resolve({status: 200,message: '获取成功',data: {openid: res.data.openid,},});} else {resolve({ status: 201, message: '未知错误' });}});});}
}module.exports = ToolService;

4. 查询首页数据service, 分级查询

image.png

WechatIMG1451.jpeg

  async list({ openId, plus = 0, year, month, name_id }) {// console.log('2023-2-1', openId, plus, plus === 0, year, month, day);// let w = `where 1=1`;// let a = `where 1=1`;// if (openId) {//   w += ` and b.openId = '${openId}'`;//   a += ` and b.openId = '${openId}'`;// }// if (year) {//   w += ` and year = ${year}`;//   a += ` and year = ${year}`;// }// if (month) {//   w += ` and month = ${month}`;//   a += ` and month = ${month}`;// }// // if (day) {// //   a += ` and day = ${day}`;// // }// if (+plus) {//   w += ` and plus = ${plus}`;// }// 本月 支出 + 收入 =  总和// const sumSql = `select sum(price) from book b ${a}`;// const MonthCount = await this.app.mysql.query(sumSql);// 本月 支出const outSql = `select sum(price) from book  where  name_id = ${name_id} and year = ${year} and month = ${month} and plus = 1 and disabled = 0`;const MonthOutCount = await this.app.mysql.query(outSql);// 本月 收入const inSql = `select sum(price) from book b where name_id = ${name_id} and year = ${year} and month = ${month} and plus = 2 and disabled = 0`;const MonthInCount = await this.app.mysql.query(inSql);// 当月 所有明细// const sql = `select b.*, u.nickname, u.avatar, i.title icon_title   from book b inner join user u on b.openId = u.openId   inner join cate i on b.cate_id = i.id ${w} group day order by create_time desc`;const sql = `select distinct day, month, year from book where name_id = ${name_id} and year = ${year} and month = ${month} and disabled = 0  order by day desc`;let days = await this.app.mysql.query(sql);// const detailSql = `select * from book where openId = '${openId}' and year = ${year} and month = ${month}`;// const detailSql = `select b.*, u.nickname, u.avatar, i.title icon_title   from book b   inner join user u on b.openId = u.openId   inner join cate i on b.cate_id = i.id     where openId = '${openId}' and year = ${year} and month = ${month} order by create_time desc`;let n = '1 = 1 and disabled = 0';if (+plus) {n += ` and b.plus = ${plus}`;}for (let val of days) {val.date = `${val.year}-${val.month}-${val.day}`;val.items = [];val.items = await this.app.mysql.query(`select b.*, u.nickname, u.avatar, c.title icon_title   from book b   inner join user u on b.openId = u.openId   inner join cate c on b.cate_id = c.id   where  ${n}  and b.name_id = ${name_id} and year = ${year} and month = ${month} and day = ${val.day}  order by create_time desc`);}}

我的sql语法不太完美,请大神提出宝贵意见。

5. 导出数据 excle表格, 可根据自己的需求导出想要的类目。

WechatIMG1449.jpeg

  // 导出async export() {const { ctx, service } = this;try {let query = ctx.request.query.code // 当前code需要解密,需要自己的制定自己的解密规则console.log('search-query', query);query = JSON.parse(query);let list = await service.book.search(query);const bookDetail = await service.name.query({ id: query.name_id });let xls = [[]];xls[0] = ['方式', '金额', '创建人', '账本', '类别', '时间', '备注'];for (let index = 0; index < list.length; index++) {const element = list[index];xls[index + 1] = [element.plus === 1 ? '支出' : '收入',element.price,element.nickname,element.name_title,element.cate_title,element.year + '/' + element.month + '/' + element.day,element.remark,];}// console.log('xls', xls);const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, XLSX.utils.aoa_to_sheet(xls), '账本');const buf = XLSX.write(wb, { type: 'buffer', bookType: 'xlsx' });const filename = encodeURIComponent(`${bookDetail.title}_${query.year}_${query.month}月账本`);// 设置header关键代码ctx.set('Content-Disposition', `attachment; filename="${filename}.xlsx"`);ctx.set('Content-Type', 'application/vnd.ms-excel');ctx.status = 200;ctx.body = buf;// cb(ctx, 200, 200, '导出成功', list);} catch (err) {cb(ctx, 200, 422, '导出失败', JOSN.stringify(err));}}
  • excle:

image.png

6. 上传文件 用户头像和cover图,可动态生成文件夹目录。

'use strict';
const fs = require('fs');
const path = require('path');
const mkdirp = require('mkdirp');const { cb, formatDate } = require('../../utils');// 生成新的文件名称
function getUploadFileExt(name) {let ext = name.split('.');let last = formatDate(new Date(), 'YYYYMMDDhhmmssms');return `${last}.${ext[ext.length - 1]}`;
}const Controller = require('egg').Controller;class UploadController extends Controller {async file() {const { ctx } = this;try {// 1. 获取文件流const file = ctx.request.files[0];// console.log(33, file);// 2. 生成filenameconst name = getUploadFileExt(file.filename);// console.log('name', name);// 3. 获取bucket ps: demo 或者 demo/test 或者 demo/test/cdconst { bucket = 'avatar' } = ctx.request.body;// 4. 生成文件夹const dir = path.join(__dirname, `../public/images/${bucket}`);// console.log('dir', dir);await mkdirp(dir);// 5. 文件流读取/写入const filePath = `${dir}/${name}`;let readStream = fs.createReadStream(file.filepath);var writeStream = fs.createWriteStream(filePath);readStream.pipe(writeStream);readStream.on('end', function () {fs.unlinkSync(file.filepath);});cb(ctx, 200, 200, '上传成功', {url: `http://${ctx.request.header.host}/public/images/${bucket}/${name}`,});} catch (err) {cb(ctx, 200, 500, '上传失败!', JSON.stringify(err));}}
}module.exports = UploadController;

7. 好友共享账本

image.png

image.png

8. 具体的数据表设计展示如下

  • 账本表

image.png

  • 用户表

image.png

5. 博客

我的个人blog网站:https://www.zhooson.cn/ 有其他前后端项目代码已开源。

相关内容

热门资讯

优酷安卓9.0系统版本,畅享流... 你有没有发现,最近你的优酷APP是不是有点不一样了?没错,就是那个我们每天离不开的追剧神器——优酷,...
安卓手机系统体验排名,揭秘最佳... 你有没有发现,现在手机市场上安卓手机的品牌和型号简直多到让人眼花缭乱?每个品牌都试图在系统体验上大显...
安卓操作系统技巧在哪,安卓操作... 你有没有发现,安卓手机用久了,总感觉有点慢吞吞的?别急,今天就来给你支几招,让你的安卓手机焕发第二春...
安卓手机哪个系统最快,揭秘最快... 你有没有想过,为什么你的安卓手机有时候会慢吞吞的,像是老牛拉破车一样?别急,今天就来给你揭秘安卓手机...
安卓非系统允许程序,探索安卓非... 你知道吗?在安卓手机的世界里,除了那些系统自带的程序,还有很多“外来客”在悄悄地占领着你的手机空间。...
qq飞车安卓系统和苹果系统,安... 你有没有发现,最近QQ飞车这款游戏在安卓系统和苹果系统上可是火得一塌糊涂啊!不管是走在街头,还是坐在...
安卓系统页面不显示时间,安卓系... 手机屏幕上那时间怎么突然消失了呢?是不是你也遇到了安卓系统页面不显示时间的问题?别急,今天就来给你详...
怎么修改安卓系统设备,揭秘安卓... 手机用久了是不是觉得卡得要命?别急,今天就来教你怎么修改安卓系统设备,让你的手机焕发第二春!一、清理...
安卓平板刷车载系统固件,体验智... 你有没有想过,你的安卓平板不仅能陪你追剧、玩游戏,还能变身成为车载系统的得力助手呢?没错,就是那种让...
安卓要不要系统更新系统,守护安... 亲爱的安卓用户们,你是不是也经常被手机弹出的系统更新通知搞得头都大了?是不是在犹豫,这更新到底要不要...
电视机安卓系统则,体验升级 你有没有发现,现在的电视机越来越智能了?尤其是那些搭载了安卓系统的电视机,简直就像是个小机器人,不仅...
安卓系统打开动画效果,打开动画... 你有没有发现,每次打开安卓手机,那瞬间闪现的动画效果,就像是一场视觉盛宴呢?今天,就让我带你一起探索...
安卓系统的诞生和发展,安卓系统... 你有没有想过,手机里的那个小小的操作系统,竟然能改变我们的生活呢?没错,我要说的就是安卓系统。它就像...
安卓系统电话通话录音,捕捉真实... 你有没有想过,在繁忙的生活中,有时候一个电话的录音就能帮你回忆起重要的信息或者关键时刻的对话内容呢?...
安卓64位系统官方下载,解锁全... 你有没有发现,最近你的安卓手机好像有点卡卡的呢?别急,别急,今天就来给你揭秘一下如何给你的安卓手机升...
安卓8系统可以吗,创新与变革的... 你有没有听说安卓8系统?最近这个话题在数码圈可是火得一塌糊涂呢!不少朋友都在问我:“安卓8系统可以吗...
安卓系统电量显示不正,揭秘原因... 手机电量显示不准确,是不是你也遇到了这样的烦恼?每次看着那忽上忽下的电量百分比,心里是不是直发慌?别...
安卓平板开票系统怎么用,轻松实... 你有没有想过,拥有一台安卓平板,不仅能随时随地办公学习,还能轻松搞定开票业务呢?没错,现在就让我来带...
安卓系统怎样下载尚德,安卓系统... 你有没有想过,想要在安卓系统上下载尚德,其实就像是在茫茫书海中找到一本宝藏呢?别急,让我来带你一步步...
安卓5系统自带相机软件,系统自... 你有没有发现,自从你升级到了安卓5系统,手机里的相机软件好像变得不一样了呢?没错,就是那个我们每天都...