ThronRycer/BoostrapVue-Tutorial
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

End of Tutorial

Browse Source
This commit is contained in:
Philipp Klüter
2020-07-26 16:38:26 +02:00
parent 7019539346
commit 22b29ad46e
6 changed files with 202 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
public/jobs.json Normal file
View File

@@ -0,0 +1,58 @@
[
{
"name": "ABC Job123",
"id": 1
},
{
"name": "CDE Job123",
"id": 2
},
{
"name": "FGH Job123",
"id": 3
},
{
"name": "JKL Job123",
"id": 4
},
{
"name": "LMN Job123",
"id": 5
},
{
"name": "OPQ Job123",
"id": 6
},
{
"name": "QRS Job123",
"id": 7
},
{
"name": "TUV Job123",
"id": 8
},
{
"name": "WXY Job123",
"id": 9
},
{
"name": "ZZZ Job123",
"id": 10
},
{
"name": "ZZZ Job567",
"id": 11
},
{
"name": "ZaZZ Job999",
"id": 12
},
{
"name": "ZZZ Journey",
"id": 13
},
{
"name": "ZZZ Indigo",
"id": 14
}
]

26
src/App.vue
View File

@@ -1,13 +1,22 @@
<template> <template>
<div id="app"> <div id="app">
<div id="nav"> <div id="nav">
<router-link to="/">Home</router-link> | <Header></Header>
<router-link to="/about">About</router-link>
</div> </div>
<router-view /> <router-view />
</div> </div>
</template> </template>
<script>
import Header from "@/components/Header.vue";
export default {
name: "app",
components: {
Header
}
};
</script>
<style lang="scss"> <style lang="scss">
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -17,16 +26,5 @@
color: #2c3e50; color: #2c3e50;
} }
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style> </style>

36
src/components/Header.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="primary">
<b-navbar-brand href="/">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="/">Home</b-nav-item>
<b-nav-item href="/about">About</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name: "Header"
};
</script>
<style>
.navbar {
margin-bottom: 30px;
}
</style>

130
src/components/HelloWorld.vue
View File

@@ -1,130 +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-router"
target="_blank"
rel="noopener"
>router</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
target="_blank"
rel="noopener"
>vuex</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 lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

26
src/components/JobCard.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div>
<b-card
:title="name"
img-src="https://picsum.photos/600/300/?image=212"
img-alt="My Foto"
img-top
tag="Foto"
class="mb-2"
border-variant="primary"
>
<b-card-text>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora, accusamus.</b-card-text>
<b-button variant="primary">Apply</b-button>
</b-card>
</div>
</template>
<script>
export default {
name: "JobCard",
props: ["name"]
};
</script>
<style>
</style>

61
src/views/Home.vue
View File

@@ -1,18 +1,69 @@
<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png" /> <b-container>
<HelloWorld msg="Welcome to Your Vue.js App" /> <b-row algin-v="center">
<b-col cols="6" lg="3" v-for="job in displayJobs" :key="job.id">
<job-card :name="job.name"></job-card>
</b-col>
</b-row>
<div class="pagination justify-content-center mt-5">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
first-text="First"
prev-text="Prev"
next-text="Next"
last-text="Last"
@input="paginate(currentPage)"
></b-pagination>
</div>
</b-container>
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src import JobCard from "@/components/JobCard";
import HelloWorld from "@/components/HelloWorld.vue";
export default { export default {
name: "Home", name: "Home",
components: { components: {
HelloWorld "job-card": JobCard
},
mounted() {
this.fetchData();
},
data() {
return {
jobs: [],
displayJobs: [],
currentPage: 1,
rows: 1,
perPage: 4
};
},
methods: {
async fetchData() {
const res = await fetch("jobs.json");
const val = await res.json();
this.jobs = val;
this.displayJobs = val.slice(
this.perPage * (this.currentPage - 1),
this.perPage * this.currentPage
);
this.rows = this.jobs.length;
},
paginate(currentPage) {
this.currentPage = currentPage;
this.displayJobs = this.jobs.slice(
this.perPage * (currentPage - 1),
this.perPage * currentPage
);
}
} }
}; };
</script> </script>
<style>
</style>