소개

아내와 「가계부 붙여야 한다」라는 이야기가 되어, 공부하고 있던 Rails+Vue.js인 환경에서 조속히 만들어 보았다.



이런 느낌으로 SPA처럼 동작한다. 김에 PWA화도 하고 있으므로 스마트폰에서도 PC에서도 잘 움직여준다.

소스 코드는 이쪽

AccountsBook

했던 일

SPA 히나형 만들기

기본적으로는 이하의 기사를 참고로 컴퍼넌트의 작성이나 데이터의 송신등을 실시했다.
그래서 특별히 곤란할 수도 있는 부드럽게 할 수 있었다.

Vue.js와 Rails에서 TODO 앱 튜토리얼과 같은 것을 만들어 보았습니다.

디자인 관계에 관해서는 애용하고 있는 우미을 사용했다.

API 주위의 인증이라든지 아직 만들지 않았기 때문에, 뒤의 일도 생각해 이하의 기사를 참고로 구현할 예정.

【Rails】Rails에서 API의 간단한 토큰 인증 구현

날짜를 선택할 수 있도록

가계부이므로 지출의 날짜 등을 입력할 수 있도록 할 필요가 있었으므로, 이하와 같이 실장했다.

    <div class="input-group">
        <div class="input-group-append">
            <span class="input-group-text">日付</span>
        </div>
        <date-picker v-model="date" :config="options"></date-picker>
    </div>

import datePicker from 'vue-bootstrap-datetimepicker';

export default {
    data: function() {
        return {
            date: null,
            options: {
                format: 'YYYY/MM/DD',
                useCurrent: false,
            },
        }
    },
    methods: {
        //メソッドなど
    },
    components: {
        datePicker,
    }
}

vue-bootstrap-datetimepicker 라는 편리한 것이 있었으므로 그것을 사용해 구현.

컴퍼넌트를 호출해, 일자로서 받는 변수를 v-model 등에 건네줄 뿐의 간단한 일.

수입과 지출의 합계 값을 표시합니다.

이런 식으로 처리를 구현했다.

sumAccounts: function() {
    axios.get('api/accounts').then((response) => {
        for(var i = 0; i < response.data.length; i++){
            if(response.data[i].income === true){
                this.incomes += response.data[i].money;
            } else {
                this.payments += response.data[i].money;
            }
        }
    }, (error) => {
        console.log(error);
    });
},

API에서 반환된 JSON을 for 로 돌려 지출 합계: payments 과 수익 합계: incomes 에 추가할 뿐. 수입 여부는 income 에 true가 걸려 있는지 여부로 판단하고 있다.

월별 지출과 수입의 합계를 산출

간단한 가계부 샘플이라면 이것으로 OK이지만. 이번 만드는 것은 실제로 사용하기 위한 것이므로 또 하나의 연구.
월마다 수지를 산출할 수 있도록 하고 싶었으므로, 이하와 같이 노력해 보았다.

    <div class="input-group">
        <div class="input-group-append">
            <span class="input-group-text">絞り込み日付</span>
        </div>
        <vue-monthly-picker v-model="query"></vue-monthly-picker>
        <button type="button" class="btn btn-primary" v-on:click="sumAccounts">絞り込み</button>
    </div>

import moment from 'moment';
import VueMonthlyPicker from 'vue-monthly-picker'

export default {
    data: function() {
        return {
            incomes: 0,
            payments: 0,
            query: moment(new Date()).format('YYYY/MM')
        }
    },
    created: function () {
        this.getAccountsBook();
        this.getCategories();
    },
    mounted: function() {
        this.sumAccounts();
    },
    methods: {
        sumAccounts: function() {
            axios.get('api/accounts').then((response) => {
                const date = new Date(this.query);
                this.payments = 0;
                this.incomes = 0;
                console.log(moment(date).format('YYYY/MM'));
                for(var i = 0; i < response.data.length; i++){
                    if(moment(response.data[i].date).format('YYYY/MM') === moment(date).format('YYYY/MM')) {
                        if(response.data[i].income === true){
                            this.incomes += response.data[i].money;
                        } else {
                            this.payments += response.data[i].money;
                        }
                    }
                }
                console.log(this.payments);
                this.$forceUpdate();
            }, (error) => {
                console.log(error);
            });
        },
    },
    components: {
        VueMonthlyPicker
    }
}

월 지정에는 vue-monthly-picker 을 사용하고 있다. 이것도 매우 편리하기 때문에 다른 사람도 사용해야합니다.

그리고, 지정된 달의 데이터를 query 에 건네주고, 그것을 moment.js 에 건네주어 비교할 수 있도록 성형하고 있다.

그리고는 payments 와 incomes 에 각각 더해 갈 뿐.

결론

우선, 움직이는 것이 되었으므로 아내와 사용하면서 잘 안 되는 곳을 수정해 나갈까 생각한다.

참고 기사

Vue.js와 Rails에서 TODO 앱 튜토리얼과 같은 것을 만들어 보았습니다.