Előző

Következő

Gyakorlat – Webalkalmazás vázának létrehozása és egy dedukciós felület elkészítése

Befejeződött

Mielőtt elkezdené, ellenőrizze, hogy rendelkezik-e az alábbi szoftverekkel a saját számítógépén:

• Node.js
• npm
• Visual Studio Code
• Vue CLI

Megjegyzés:

A virtuálisgép-parancssori felület használatához a gépen elérhető csomópontra és npm-re lesz szüksége. A Vue felhasználói felületét is kipróbálhatja, amely a Vue CLI-jének grafikus felhasználói felülete. Indítsa el a parancssori felület vue uigrafikus felhasználói felületét, és hozza létre az alkalmazást vizuálisabb módon.

Az alkalmazás vázának létrehozása

Miután telepítette a Node, az npm és a Vue CLI-t, egyszerűen létrehozhat egy új alkalmazást. Ezzel cd a paranccsal lépjen arra a mappára, ahová a kódot el szeretné helyezni, nyisson meg egy parancssort vagy egy terminált, és írja be a következőt:

    vue create this-or-that

Amikor a parancssori felület megkérdezi, hogy szeretne-e előre beállított beállításokat vagy manuális állványzatot használni, válassza a "manuális" lehetőséget. Így szabályozhatja a telepíteni kívánt beépülő modulokat.

Győződjön meg arról, hogy a parancssori felület beállítási rutinjának ezen a képernyőjén a progresszív webalkalmazást választja. Olyan alkalmazást szeretne létrehozni, amely online és offline üzemmódban is működik.

Megjegyzés:

A Vue parancssori felület telepítésekor győződjön meg arról, hogy a Vue 2 lehetőséget választja.

Az alapszintű alkalmazás létrehozása után futtassa a következő beírással:

    cd this-or-that && npm run serve

A helyi böngészőben meg kell jelennie egy alapszintű Vue.js-alkalmazás vázának.

A Fejlesztői eszközök területen válassza az Auditok lehetőséget, és tekintse át az alkalmazás Lighthouse területét. Ezzel az eszközzel tesztelheti, hogy a progresszív webalkalmazás hogyan teljesít, de ezt csak később teheti meg, amikor üzembe helyezi az alkalmazást a azurewebsites.net.

A dedukciós felület elkészítése

Most létre kell hoznia egy rendkívül egyszerű felületet, amely betölti azt a képet, amellyel a modell elvégezheti a dedukciót. A modell egy pontszámrendszerrel különböző bizonyossági szinteket rendel hozzá a képekhez aszerint, hogy megfelelnek-e egy adott címkének. Ebben az esetben néhány képet adunk a dalmáciaiakról és a csokoládé chip fagylaltról. A modellt később betaníthatja.

Először nevezze át a kódbázis /src/components mappájában található HelloWorld.vue fájlt a következőre: DetectImage.vue. Távolítsa el a App.vueHelloWorld elemre vonatkozó hivatkozásait is. Az App.vue fájl jelenleg így néz ki:

<template>
    <div id="app">
        <DetectImage msg="What do you see?" />
    </div>
</template>

<script>
    import DetectImage from './components/DetectImage.vue';

    export default {
        name: 'app',
        components: {
            DetectImage,
        },
    };
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

Hozzon létre egy mappát a képekben /src/assets, hogy a rendszerképeket a következtetéshez használhassa. Bontsa ki ezt a zip-fájlt ebbe a mappába. Ez a fájl 17 képet tartalmaz, köztük egy üres képet is.

Ezek a képek azok, amelyeket Karen Zack használt, hogy létrehozza a dalmátok v fagylalt kollázs.

Megjeleníthet egy képet és egy gombot, a beszerkesztésével <template>DetectImage.vue pedig az alábbi elrendezést is megjelenítheti.

<div>
    <h1>{{ msg }}</h1>
    <div>
        <img class="image" ref="img" :src="require('../assets/images/' + getImgIndex + '.jpg')" />
    </div>
    <div>
        <button class="button" @click="next()" :disabled="disable">Next</button>
    </div>
    <div v-for="pred in predictions" :key="pred.index">
        {{ pred.label }}: {{ pred.probability.toFixed(0) + '%' }}
    </div>
    <div v-if="!predictions.length">hmm.....</div>
</div>

Adjon hozzá egy metódust data() az props objektum záró zárójele alatt (adjon hozzá egy vesszőt az objektum közelében) DetectImage.vue az adatok helyőrzőinek létrehozásához.

data() {
    return {
        image: 0,
        numImages: 16,
    };
},

Ebben az objektumban hozzon létre egy tulajdonságot computed , amely visszaadja egy kép indexét, és letiltja a sablonban lévő gombot, ha eléri az indexet.

computed: {
    getImgIndex() {
        return this.image.toString();
    },
    disable() {
        if (this.image == this.numImages) {
            return true;
        } else return false;
    },
},

Hozzon létre egy methods objektumot a számítási tulajdonságok objektuma alatt a felhasználói interakció rögzítéséhez.

methods: {
    next() {
        this.image++;
        this.predictions = [];
        setTimeout(this.predict, 500);
    },
},

Végül adjon hozzá néhány stílust a <styles> fájl alján DetectImage.vue található blokk felülírásával.

<style scoped>
h3 {
    margin: 40px 0 0;
}
.image {
    min-height: 300px;
    max-height: 300px;
    max-width: 100%;
}
.button {
    width: 200px;
    height: 50px;
    border-radius: 5px;
    background-color: blueviolet;
    color: white;
    font-size: 20pt;
    margin: 10px;
}
.button:disabled,
.button[disabled] {
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
}
</style>

Most egy 16 képből álló galérián kell végighaladnia, egymás után, egy üres képpel kezdve. Ezután létre kell hoznia egy modellt az alkalmazásban való használatra.

Folytatás