Bridge between ImageForm and App
This commit is contained in:
28
src/App.vue
28
src/App.vue
@ -1,15 +1,29 @@
|
|||||||
<template>
|
<template>
|
||||||
<img alt="Vue logo" src="./assets/logo.png" />
|
<header>
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App" />
|
<nav-bar></nav-bar>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<image-form @detect-responsed="onDetectResponsed"></image-form>
|
||||||
|
<news-album></news-album>
|
||||||
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import HelloWorld from "./components/HelloWorld.vue";
|
import ImageForm from "./components/ImageForm.vue";
|
||||||
|
import NavBar from "./components/NavBar.vue";
|
||||||
|
import NewsAlbum from "./components/NewsAlbum.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
components: {
|
components: {
|
||||||
HelloWorld,
|
ImageForm,
|
||||||
|
NavBar,
|
||||||
|
NewsAlbum,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onDetectResponsed(res) {
|
||||||
|
console.log(res);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -19,8 +33,8 @@ export default {
|
|||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-align: center;
|
/* text-align: center;
|
||||||
color: #2c3e50;
|
color: #2c3e50; */
|
||||||
margin-top: 60px;
|
/* margin-top: 60px; */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
20
src/components/DetectResult.vue
Normal file
20
src/components/DetectResult.vue
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<div class="col" :hidden="!visible">
|
||||||
|
<h1 class="mb-3 text-center">Detect Result</h1>
|
||||||
|
<img :src="imageUrl" :alt="'Disease ' + diseaseName" />
|
||||||
|
<p>Trustworthiness: {{ trustworthiness }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
visible: { tyep: Boolean, default: false },
|
||||||
|
diseaseName: { type: String },
|
||||||
|
trustworthiness: { type: Number },
|
||||||
|
imageUrl: { type: String },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
@ -1,122 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hello">
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
<p>
|
|
||||||
For a guide and recipes on how to configure / customize this project,<br />
|
|
||||||
check out the
|
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-cli documentation</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
<h3>Installed CLI Plugins</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>babel</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>pwa</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>eslint</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Essential Links</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>Forum</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>Community Chat</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
|
||||||
>Twitter</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Ecosystem</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-router</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-devtools#vue-devtools"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>vue-devtools</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-loader</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/awesome-vue"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>awesome-vue</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "HelloWorld",
|
|
||||||
props: {
|
|
||||||
msg: String,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
39
src/components/ImageForm.vue
Normal file
39
src/components/ImageForm.vue
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<section class="py-5 text-center container">
|
||||||
|
<div class="row py-lg-5">
|
||||||
|
<div class="col-lg-6 col-md-8 mx-auto">
|
||||||
|
<h1 class="fw-light">Skin Disease Detection</h1>
|
||||||
|
<p class="lead text-muted">
|
||||||
|
Know more about your skin, before it's too late!
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-primary my-2"
|
||||||
|
@click.prevent="onUploadClicked"
|
||||||
|
>
|
||||||
|
Upload a Image
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
onUploadClicked() {
|
||||||
|
const detectData = {
|
||||||
|
diseaseName: "Test",
|
||||||
|
trustworthiness: 0.12,
|
||||||
|
detectImageUrl: "https://www.baidu.com",
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$emit("detect-responsed", detectData);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
71
src/components/NavBar.vue
Normal file
71
src/components/NavBar.vue
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<div class="collapse bg-dark" id="navbarHeader">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-8 col-md-7 py-4">
|
||||||
|
<h4 class="text-white">About</h4>
|
||||||
|
<p class="text-muted">
|
||||||
|
We are building a platform for detecting common skin disease easily,
|
||||||
|
and provide information for you.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 offset-md-1 py-4">
|
||||||
|
<h4 class="text-white">Contact</h4>
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/" class="text-white">Source Code</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#" class="text-white">Like on Facebook</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="mailto:dhao2001@outlook.com" class="text-white"
|
||||||
|
>Email me</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar navbar-dark bg-dark shadow-sm">
|
||||||
|
<div class="container">
|
||||||
|
<a href="#" class="navbar-brand d-flex align-items-center">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
aria-hidden="true"
|
||||||
|
class="me-2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
|
||||||
|
/>
|
||||||
|
<circle cx="12" cy="13" r="4" />
|
||||||
|
</svg>
|
||||||
|
<strong>EasySkin</strong>
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
class="navbar-toggler"
|
||||||
|
type="button"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#navbarHeader"
|
||||||
|
aria-controls="navbarHeader"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-label="Toggle navigation"
|
||||||
|
>
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
23
src/components/NewsAlbum.vue
Normal file
23
src/components/NewsAlbum.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div class="album py-5 bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
||||||
|
<news-album-item></news-album-item>
|
||||||
|
<news-album-item></news-album-item>
|
||||||
|
<news-album-item></news-album-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import NewsAlbumItem from "./NewsAlbumItem.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
NewsAlbumItem,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
42
src/components/NewsAlbumItem.vue
Normal file
42
src/components/NewsAlbumItem.vue
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card shadow-sm">
|
||||||
|
<svg
|
||||||
|
class="bd-placeholder-img card-img-top"
|
||||||
|
width="100%"
|
||||||
|
height="225"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
role="img"
|
||||||
|
aria-label="Placeholder: Thumbnail"
|
||||||
|
preserveAspectRatio="xMidYMid slice"
|
||||||
|
focusable="false"
|
||||||
|
>
|
||||||
|
<title>Placeholder</title>
|
||||||
|
<rect width="100%" height="100%" fill="#55595c" />
|
||||||
|
<text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-text">My Title</h5>
|
||||||
|
<p class="card-text">
|
||||||
|
This is a wider card with supporting text below as a natural lead-in
|
||||||
|
to additional content. This content is a little bit longer.
|
||||||
|
</p>
|
||||||
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-sm btn-outline-secondary">
|
||||||
|
Read More...
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted">9 mins</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
Reference in New Issue
Block a user