Bridge between ImageForm and App
This commit is contained in:
28
src/App.vue
28
src/App.vue
@ -1,15 +1,29 @@
|
||||
<template>
|
||||
<img alt="Vue logo" src="./assets/logo.png" />
|
||||
<HelloWorld msg="Welcome to Your Vue.js App" />
|
||||
<header>
|
||||
<nav-bar></nav-bar>
|
||||
</header>
|
||||
<main>
|
||||
<image-form @detect-responsed="onDetectResponsed"></image-form>
|
||||
<news-album></news-album>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
name: "App",
|
||||
components: {
|
||||
HelloWorld,
|
||||
ImageForm,
|
||||
NavBar,
|
||||
NewsAlbum,
|
||||
},
|
||||
methods: {
|
||||
onDetectResponsed(res) {
|
||||
console.log(res);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -19,8 +33,8 @@ export default {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
/* text-align: center;
|
||||
color: #2c3e50; */
|
||||
/* margin-top: 60px; */
|
||||
}
|
||||
</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