Application de gestion de dépenses باستعمال Vuejs

imadbelasri Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو une simple application كتدير la gestion de dépenses المستخدم كيدخل المداخيل والمصاريف ديالو والapplication كتحسب الصافي لي بقالو مع توضيح واش ايجابي ولا سلبي يلا مكنتيش تبعتي الدروس لي قبل عاود شوفهم باش تفهم اساسيات vuejs.

تحميل الكود

نظرة سريعة بالفيديو

1- الملف script.js

أول حاجة غادي تزيد مشروع جديد فين ما بغيتي و سميه لي بغيتي من بعد زيد فيه 3 ملفات واحد index.html و style.css و script.js من بعد فتحو ف navigateur من بعد غادي تمشي للملف script.js كنديرinstantiation ديال ل objet من la classe Vue منبعد داخل l'objet كنعطي ل el لي هو element مول ل id app من بعد ف data كنديكلاري les variables لي عندي كاين جدول غادي يكونوا فيه les dépenses وآخر فيه les gains وكاين libelle و price لي غادي تاخد القيمة لي دخل المستخدم فالحقول منبعد كاين l'objet methods عندي فيه les fonctions لي غادي نحتاج كاين addDep ولي ملي كنكليكي على bouton moins كتزيد ل objet فالجدول depences لي كياخد الlibelle وprice لي دخل المستخدم فالحقل وكتنقص المبلغ من total منبعد كاين addEntr لي كتدير العكس كتزيد مدخول فالجدول gains وكتزيد المبلغ على ال total منبعد كاين removeDep لي كتمسح dépense اختارها المستخدم باستخدام ل index ديالها و كتزيد المبلغ ديالها ف total منبعد كاين removeEnt لي كتمسح gain اختارها المستخدم باستخدام ل index ديالها و وكتنقص المبلغ ديالها من total منبعد كاين l'objet computed لي كاياخد des fonctions لي كيغيروا المحتوى ديال شي عنصر ف la page اوتوماتيكيا فمثلا هنا عندنا ل fonction classObject لي يلا كانت ل variable positif كتساوي true كترجعنا la classe positive لي غادي تكون عندنا فالملف css ويلا كانت false كترجع negative وبها غادي نغيروا لون total الكود ديال الملف هو :

عرض الكود

                                                    
                                                        new Vue({
    el: "#app",
    data: {
        depences: [],
        gains: [],
        montant: 0,
        libelle: '',
        price: 0,
        positif: true,
    },
    methods: {
        addDep: function() {
            if (this.price.length && this.libelle.length) {
                this.depences.push({ libelle: this.libelle, montant: this.price });
                this.montant -= parseInt(this.price);
                this.price = '';
                this.libelle = '';
                if (this.montant < 0) {
                    this.positif = false;
                }
            }
        },
        addEntr: function(index) {
            if (this.price.length && this.libelle.length) {
                this.gains.push({ libelle: this.libelle, montant: this.price });
                this.montant += parseInt(this.price);
                this.price = '';
                this.libelle = '';
                if (this.montant >= 0) {
                    this.positif = true;
                }
            }
        },
        removeDep: function(item, index) {
            this.montant += parseInt(item.montant);
            this.depences.splice(index, 1);
            if (this.montant >= 0) {
                this.positif = true;
            }
        },
        removeEnt: function(item, index) {
            this.montant -= parseInt(item.montant);
            this.gains.splice(index, 1);
            if (this.montant < 0) {
                this.positif = false;
            }
        }
    },
    computed: {
        classObject: function() {
            return !this.positif ? 'negative' : 'positive';
        }
    }
});

2- الملف index.html

فالملف index.php غادي تزيد فيه الكود لي فيه الفورم لي كتمكن المستخدم باش يدخل libelle ول prix منبعد عندي الفورم لي كنحدد ملي يديرلها المستخدم submit كنمنعها باش تدير refresh ب directive v-on:submit.prevent من بعد عندي input text لي كنخدم بل

v-model باش كنربطها ب variable libelle و price لي زدنا ف script.js منبعد عندي bouton plus ملي كنكليكي عليها كتنفد fonction addEntr و bouton moins ملي كنكليكي عليها كتنفد ل fonction addDep ملي كيتزادو les gains و les dépenses كن tester ب v-if يلا كانوا الجداول depences و gains عامرين كنخدم ب v-for لي بحالها بحال foreach ف php باش كنعرض les dépenses و les gains ديالي ف liste وعندي حدا كل depense كاين bouton لي كتمكن من مسحها ملي كنضغط عليها كتاخد ل index ديال ال depense وكتصيفطو لل fonction removeDep لي كتمسحها ونفس الشي بالنسبة ل les gains الكود ديال الملف هو :

عرض الكود

                                                        
                                                            <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
                <a class="navbar-brand" href="#">Vuejs-Dépences</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Accueil <span class="sr-only"></span></a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="container">
        <div class="row" id="app">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-4 col-md-offset-5">
                        <div class="text-center lead" v-bind:class="classObject" align="center">{{montant}}</div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <form v-on:submit.prevent>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input type="text" v-model="libelle" class="form-control" placeholder="Libelle">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <input type="text" v-model="price" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <button class="btn btn-success btn-xs" v-on:click="addEntr">+</button>
                                            <button class="btn btn-danger btn-xs" v-on:click="addDep">-</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4  pull-left">
                        <h3 class="text-danger">Dépences</h3>
                        <ul class="list-group" v-if="depences.length">
                            <li class="list-group-item" v-for="(dep,index) in depences" id="res">
                                {{dep.libelle}} {{dep.montant}}
                                <button class="btn btn-danger btn-xs pull-right" v-on:click="removeDep(dep,index)"><i class="fa fa-trash"></i></i></button>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-4 pull-right">
                        <h3 class="text-success">Gains</h3>
                        <ul class="list-group" v-if="gains.length">
                            <li class="list-group-item" v-for="(ent,index) in gains" id="res">
                                {{ent.libelle}} {{ent.montant}}
                                <button class="btn btn-danger btn-xs pull-right" v-on:click="removeEnt(ent,index)"><i class="fa fa-trash"></i></i></button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/vue"></script>
    <script src="script.js"></script>
</body>

</html>

3- الملف style.css

فيه غادي يكونوا les styles ديالنا لي غادي نضيفوا بهم تغييرات على design ديال la page ديالنا الكود ديال الملف هو:

عرض الكود

                                                        
                                                            body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.panel {
    background: beige;
}

#result {
    height: 40px;
    width: 150px;
    background: #8D8D81;
    color: #ffffff;
    padding: 10px;
    border-radius: 2px;
}

.btn {
    padding-left: 10px;
    padding-right: 10px;
}

form {
    margin-top: 15px;
}

button {
    margin-top: 6px;
}

.positive {
    background-color: #08BF08;
    color: #ffffff;
    width: 200px;
    text-align: center;
}

.negative {
    background-color: #ED4143;
    color: #ffffff;
    width: 200px;
    text-align: center;
}

li#res {
    padding: 20px;
}