项目前端代码链接:oriAccounts-frontend: oriAccounts记账软件前端代码 (gitee.com)
一、项目概述与目标回顾
本项目是与oriAccounts后端配合使用的前端项目,是一个具有本地数据存储功能的简单手机记账app。
项目主要实现以下功能:
-
账本的增删改查。
-
账目的增删改查。
-
同时往不同账本里添加相同账目。
-
每个账本包含数据总结。
-
清晰易用的界面。
二、实现方案
2.1 前端程序架构
结合本项目的特点和技术流行度,我选择了uni-app框架作为本项目的开发框架。
2.2 页面实现
页面实现采用简约风格,由index和account两个页面构成,分别是主页和账本详情页,另有一个统计页面准备在以后产品迭代升级中完成。
在弹出框的实现中,使用了uni-pop-up组件,值得一提的是通过将要显示的信息设置成一个变量的值,将popup组件要显示的信息设置该变量即可实现一个提示框展示不同信息,避免了代码的重复。
<uni-popup ref="illegalAccountNameMessage" type="message">
<uni-popup-message :type="error" :message="messages[x]" :duration="2000"></uni-popup-message>
</uni-popup>
在右上角菜单的实现中,使用z-index提高其层数,并给整个页面加一个z-index介于右上菜单和主页面之间的遮罩层,可以实现点击菜单以外的区域自动关闭菜单的功能。
.Menu {
position: absolute;
margin-left: 440rpx;
margin-top: 140rpx;
z-index: 99;
width: 280rpx;
height: 280rpx;
background-color: #ffffff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: space-around;
justify-content: space-around;
}
.MenuCover {
position: absolute;
z-index: 97;
width: 750rpx;
height: 1240rpx;
}
在根据数组中数据进行组件批量按模板渲染时,采用了自定义component的方法实现,结合弹性盒模型的运用,可以实现美观的信息列表界面。
<view class="AccountList">
<view class="PackagedNote" v-for="(item, index) in $Accounts" :key="item.Name+item.Remark">
<note :Name="item.Name" :Remark="item.Remark"></note>
</view>
<view class="tips">点击右上角按钮打开菜单,长按账本进行编辑</view>
</view>
.AccountList {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
overflow-y: scroll;
height: 1080rpx;
}
2.3 本地存储实现
本地存储通过uni.setStorage()和uni.getStorage()系列方法实现,该方法默认为异步执行,uniapp也提供了相关同步方法,使用时需要根据需求决定同步还是异步。本项目的数据模型大致为本地->程序->本地,即程序运行时读入本地数据,数据修改后直接存入本地,再次读取以进行更新。这样的数据存取方式效率比较低,但是由于对前端相关技术的不熟悉,还没有找到更好的实现方法。
Vue.prototype.$Accounts = getAccountsFromStorage();
Vue.prototype.$Details = getDetailsFromStorage();
function getAccountsFromStorage() {
let ret = []
if (uni.getStorageSync("myOritentionAccountsRecord")!="") {
ret = uni.getStorageSync("myOritentionAccountsRecord");
}
return ret;
}
function getDetailsFromStorage() {
let ret = []
if (uni.getStorageSync("myOritentionAccountsDetailsRecord")!="") {
ret = uni.getStorageSync("myOritentionAccountsDetailsRecord");
}
return ret;
}
可以看到,若读取不到相关数据,需要设定一个空数组返回,否则在后续需要使用该数据时,该数据仍然为undefined状态,产生意外错误。
2.4 本地业务逻辑实现
本地业务通过一系列JavaScript逻辑代码实现,让我对这门语言的理解和熟练度有所提高。
特别记录一段代码,用于测试字符串是否是纯数字(可以是负数)。
let regex = /^[-]?[1-9]\d*|0$/;
regex.test(this.effect);
三、项目总结
通过该项目的开发,我对前端各个技术栈有了更深入的了解,但从我对前端技术应用的熟练度和经常遇到瓶颈的表现来看,水平仍然有待提升。此次项目基本完成了设定好的目标,但功能的实现方案不够好,有待改善。
当然,这是一个不太成熟的项目,在未来的迭代中,我会优化整套业务逻辑的实现,前端代码的重构,补充上未开发的统计功能,做一个数据可视化界面。
总体来说,这个项目锻炼了我独立开发和学习能力,让我对前端开发有了更深的理解。做项目的过程中,我学会了解决实际问题,不断优化代码的方法。这些经验会让我在未来的开发工作中更上一层楼。