oriAccounts 前端项目复盘

项目前端代码链接：oriAccounts-frontend: oriAccounts记账软件前端代码 (gitee.com)

一、项目概述与目标回顾

本项目是与oriAccounts后端配合使用的前端项目，是一个具有本地数据存储功能的简单手机记账app。

项目主要实现以下功能：

1. 账本的增删改查。

2. 账目的增删改查。

3. 同时往不同账本里添加相同账目。

4. 每个账本包含数据总结。

5. 清晰易用的界面。

二、实现方案

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);

三、项目总结

通过该项目的开发，我对前端各个技术栈有了更深入的了解，但从我对前端技术应用的熟练度和经常遇到瓶颈的表现来看，水平仍然有待提升。此次项目基本完成了设定好的目标，但功能的实现方案不够好，有待改善。

当然，这是一个不太成熟的项目，在未来的迭代中，我会优化整套业务逻辑的实现，前端代码的重构，补充上未开发的统计功能，做一个数据可视化界面。

总体来说，这个项目锻炼了我独立开发和学习能力，让我对前端开发有了更深的理解。做项目的过程中，我学会了解决实际问题，不断优化代码的方法。这些经验会让我在未来的开发工作中更上一层楼。