Learning From Youtube Channel: Traversy Media
Video: Vue.js Crash Course 2024
Thank you.
Timestamps:
00:00:00 – Intro
00:02:19 – Daily.dev Sponsor
00:03:11 – What is Vue.js?
00:04:45 – Prerequisites
00:06:17 – Role of Frontend Frameworks
00:08:40 – Why Vue.js?
00:11:14 – Vue Components
00:13:39 – Getting Setup
00:15:40 – Using The Vue CDN
00:20:54 – Create-Vue Setup
00:22:58 – Exploring Folders & Files
00:26:10 – Boilerplate Clean Up
00:26:50 – Component Structure
00:27:25 – Optinos API data() & Interpolation
00:28:36 – v-if, v-else & v-else-if Directives
00:30:43 – v-for Directive & Looping
00:32:17 – v-bind Directive
00:33:36 – v-on Directive, Events & Methods
00:35:55 – Composition API – Long Form
00:39:08 – ref() & Reactive Values
00:40:35 – Composition API Short Form
00:42:41 – Forms & v-model
00:46:38 – Delete task
00:48:36 – Lifecycle Methods
00:49:50 – onMounted & Fetching Data
00:51:58 – Vue Jobs Project Start
00:52:26 – Tailwind CSS Setup
00:56:47 – Theme Files & Images
00:58:16 – Navbar Component
01:01:20 – Hero Component
01:02:30 – Props
01:04:57 – HomeCards & Card Container Component
01:10:20 – JobListings Component & JSON Data
01:16:47 – JobListing Limit & showButton Props
01:24:26 – computed() & Truncate Description
01:30:41 – PrimeIcons
01:32:35 – Vue Router & Home View
01:39:52 – Jobs View
01:41:55 – RouterLink
01:46:07 – Navbar Active Link
01:50:42 – Not Found Page
01:56:27 – JSON Server REST API
01:59:50 – Fetch Data For JobListings
02:03:42 – reactive() Function
02:05:15 – JobListings Refactor To reactive()
02:07:26 – Vue Spinner
02:09:50 – Fetch Single Job & Display Data
02:19:06 – BackButton Component
02:21:03 – Proxying
02:23:54 – Add Job Page
02:32:20 – Save Job POST
02:37:15 – Toast Notifications
02:40:08 – Delete Job
02:44:14 – Edit Page
02:47:06 – Fetch Job To Edit
02:50:58 – Update Job
02:52:50 – Netlify Deployment
Intro
Daily.dev Sponsor
What is Vue.js?
- Progressive JS framework for building user interfaces & SPAs
- Designed to be simple, flexible and incrementally adoptable
- Used for projects of all sizes
- Reactive data-binding & component-based architecture
Prerequisites
- JavaScript Fundamentals (loops, functions, object, etc)
- Events & DOM Manipulation
- Fetch API & Basic HTTP
- Arrow Functions, High-Order Array Methods, Destructuring, etc
- NMP (Node Package Manager)
Role of Frontend Frameworks
The Role Of Frontend Frameworks
Enhanced UI/UX
Makes it easy to create UIs that are dynamic and interactive
Organization
UI is broken into components with their own state and properties
Performance
Optimized for performance with features such as the virtual DOM
Modularity
Allow developers to break down their applications into smaller, reusable components
Why Vue?
- Simplicity & Approachability
- Flexibility
- Performance & Size
- Component-Based Architecture
- Active Community & Rich Ecosystem
Vue Components
- Reusable, self-contained pieces of code
- Includes the logic/JS, dynamic HTML output & scoped styling
- Options API vs Composition API
Getting Setup
- CDN – Include the script tag with the CDN url
- Vue CLI – Command line interface for setting up Vue projects. This is no longer recommended
- Create Vue – Uses Vite, which includes features like hot-reloading, out of the box TypeScript and an ecosystem of plugins
- Nuxt.js & Gridsome – SSR & SSG frameworks that use Vue
Using The Vue CDN
Vue.js Quick Start – Using Vue from CDN
- 建立 vue-test 資料夾
- 在 vue-test 資料夾裡面建立 index.html 檔案
- 修改 index.html 檔案
// vue-test/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<h1>
{{message}}
</h1>
<button @click="clickMe">Click Me</button>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello From Vue!'
}
},
methods: {
clickMe() {
console.log('Button Clicked!');
this.message = 'Updated Message';
},
},
});
app.mount('#app');
</script>
</body>
</html>
Create-Vue Setup
- 使用終端機建立專案
npm create vue@latest vue-carsh-2024 - Vue.js – The Progressive JavaScript Framework
- Add TypeScript? No
- Add JSX Support? No
- Add Vue Router for Single Page Application development? No
- Add Pinia for state management? No
- Add Vitest for Unit Testing? No
- Add an End-to-End Testing Solution?
- Add ESLint for code quality? No
- Add Vue DevTools 7 extensin for debugging? (experimental) No
- cd vue-crash-2024
npm install
npm run dev - 安裝 VSCode 套件 – Vue – Official
Exploring Folders & Files
- 講解 package.json 檔案
- 講解 vite.config.js 檔案
- 修改 vite.config.js 檔案
- 講解 index.html 檔案
- 修改 index.html 檔案
- 講解 src 資料夾以及裡面的檔案
- main.js
- App.vue
- 使用終端機執行指令 – npm run dev
// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
server: {
port: 3000,
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Jobs</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
Boilerplate Clean Up
- 刪除在 components 資料夾裡面的檔案
- 修改 App.vue 檔案
// App.vue
<template>
<h1>Vue Jobs</h1>
</template>
Component Structure
Options API data() & Interpolation
- 修改 App.vue 檔案
// App.vue
<script>
export default {
data() {
return {
name: 'John Doe',
};
},
};
</script>
<template>
<h1>{{ name }}</h1>
</template>
v-if, v-else & v-else-if Directives
- 修改 App.vue 檔案
// App.vue
<script>
export default {
data() {
return {
name: 'John Doe',
status: 'pending',
}
}
};
</script>
<template>
<h1>{{ name }}</h1>
<p v-if="status === 'active'">User is active</p>
<p v-else-if="status === 'pending'">User is pending</p>
<p v-else>User is inactive</p>
</template>
v-for Directive & Looping
- 修改 App.vue 檔案
// App.vue
<script>
export default {
data() {
return {
name: 'John Doe',
status: 'pending',
tasks: ['Task One', 'Task Two', 'Task Three']
}
}
};
</script>
<template>
<h1>{{ name }}</h1>
<p v-if="status === 'active'">User is active</p>
<p v-else-if="status === 'pending'">User is pending</p>
<p v-else>User is inactive</p>
<h3>Tasks:</h3>
<ul>
<li v-for="task in tasks" :key="task">{{ task }}</li>
</ul>
</template>
v-bind Directive
- 修改 App.vue 檔案
// App.vue
<script>
export default {
data() {
return {
name: 'John Doe',
status: 'pending',
tasks: ['Task One', 'Task Two', 'Task Three'],
link: 'https://google.com'
}
}
}
</script>
<template>
<h1>{{ name }}</h1>
<p v-if="status === 'active'">User is active</p>
<p v-else-if="status === 'pending'">User is pending</p>
<p v-else>User is inactive</p>
<h3>Tasks:</h3>
<ul>
<li v-for="task in tasks" :key="task">{{ task }}</li>
</ul>
<!-- <a v-bind:href="link">Click for Google</a> -->
<a :href="link">Click for Google</a>
</template>
v-on Directive, Events & Methods
- 修改 App.vue 檔案
// App.vue
<script>
export default {
data() {
return {
name: 'John Doe',
status: 'pending',
tasks: ['Task One', 'Task Two', 'Task Three'],
link: 'https://google.com'
}
},
methods: {
toggleStatus() {
if (this.status === 'active') {
this.status = 'pending';
} else if (this.status === 'pending') {
this.status = 'inactive';
} else {
this.status = 'active';
}
}
}
};
</script>
<template>
<h1>{{ name }}</h1>
<p v-if="status === 'active'">User is active</p>
<p v-else-if="status === 'pending'">User is pending</p>
<p v-else>User is inactive</p>
<h3>Tasks:</h3>
<ul>
<li v-for="task in tasks" :key="task">{{ task }}</li>
</ul>
<!-- <a v-bind:href="link">Click for Google</a> -->
<a :href="link">Click for Google</a>
<br />
<!-- <button v-on:click="toggleStatus">Change Status</button> -->
<button @click="toggleStatus">Change Status</button>
</template>
Composition API – Long Form
- 複製 App.vue 檔案，並把 Options API 改名為 App2.vue 檔名
- 修改 App.vue 檔案
// App.vue
<script>
export default {
setup() {
const name = 'John Doe';
const status = 'active';
const tasks = ['Task One', 'Task Two', 'Task Three'];
const toggleStatus = () => {
if (this.status === 'active') {
this.status = 'pending';
} else if (this.status === 'pending') {
this.status = 'inactive';
} else {
this.status = 'active';
}
}
return {
name,
status,
tasks,
toggleStatus,
};
}
};
</script>
<template>
<h1>{{ name }}</h1>
<p v-if="status === 'active'">User is active</p>
<p v-else-if="status === 'pending'">User is pending</p>
<p v-else>User is inactive</p>
<h3>Tasks:</h3>
<ul>
<li v-for="task in tasks" :key="task">{{ task }}</li>
</ul>
<br />
<!-- <button v-on:click="toggleStatus">Change Status</button> -->
<button @click="toggleStatus">Change Status</button>
</template>
ref() & Reactive Values
- 修改 App.vue 檔案
// App.vue
<script>
import { ref } from 'vue';
export default {
setup() {
const name = ref('John Doe');
const status = ref('active');
const tasks = ref(['Task One', 'Task Two', 'Task Three']);
const toggleStatus = () => {
if (status.value === 'active') {
status.value = 'pending';
} else if (status.value === 'pending') {
status.value = 'inactive';
} else {
status.value = 'active';
}
}
return {
name,
status,
tasks,
toggleStatus,
};
},
};
</script>
<template>
<h1>{{ name }}</h1>
<p v-if="status === 'active'">User is active</p>
<p v-else-if="status === 'pending'">User is pending</p>
<p v-else>User is inactive</p>
<h3>Tasks:</h3>
<ul>
<li v-for="task in tasks" :key="task">{{ task }}</li>
</ul>
<br />
<!-- <button v-on:click="toggleStatus">Change Status</button> -->
<button @click="toggleStatus">Change Status</button>
</template>
Composition API Short Form
- 修改 App.vue 檔案
// App.vue
<script setup>
import { ref } from 'vue';
const name = ref('John Doe');
const status = ref('active');
const tasks = ref(['Task One', 'Task Two', 'Task Three']);
const toggleStatus = () => {
if (status.value === 'active') {
status.value = 'pending';
} else if (status.value === 'pending') {
status.value = 'inactive';
} else {
status.value = 'active';
}
};
</script>
<template>
<h1>{{ name }}</h1>
<p v-if="status === 'active'">User is active</p>
<p v-else-if="status === 'pending'">User is pending</p>
<p v-else>User is inactive</p>
<h3>Tasks:</h3>
<ul>
<li v-for="task in tasks" :key="task">{{ task }}</li>
</ul>
<br />
<!-- <button v-on:click="toggleStatus">Change Status</button> -->
<button @click="toggleStatus">Change Status</button>
</template>
Forms & v-model
- 修改 App.vue 檔案
// App.vue
<script setup>
import { ref } from 'vue';
const name = ref('John Doe');
const status = ref('active');
const tasks = ref(['Task One', 'Task Two', 'Task Three']);
const newTask = ref('');
const toggleStatus = () => {
if (status.value === 'active') {
status.value = 'pending';
} else if (status.value === 'pending') {
status.value = 'inactive';
} else {
status.value = 'active';
}
};
const addTask = () => {
if (newTask.value.trim() !== '') {
tasks.value.push(newTask.value);
newTask.value = '';
}
};
</script>
<template>
<h1>{{ name }}</h1>
<p v-if="status === 'active'">User is active</p>
<p v-else-if="status === 'pending'">User is pending</p>
<p v-else>User is inactive</p>
<form @submit.prevent="addTask">
<label for="newTask">Add Task</label>
<input type="text" id="newTask" name="newTask" v-model="newTask">
<button type="submit">Submit</button>
</form>
<h3>Tasks:</h3>
<ul>
<li v-for="task in tasks" :key="task">{{ task }}</li>
</ul>
<br />
<!-- <button v-on:click="toggleStatus">Change Status</button> -->
<button @click="toggleStatus">Change Status</button>
</template>
Delete task
- 修改 App.vue 檔案
// App.vue
<script setup>
import { ref } from 'vue';
const name = ref('John Doe');
const status = ref('active');
const tasks = ref(['Task One', 'Task Two', 'Task Three']);
const newTask = ref('');
const toggleStatus = () => {
if (status.value === 'active') {
status.value = 'pending';
} else if (status.value === 'pending') {
status.value = 'inactive';
} else {
status.value = 'active';
}
};
const addTask = () => {
if (newTask.value.trim() !== '') {
tasks.value.push(newTask.value);
newTask.value = '';
}
};
const deleteTask = (index) => {
tasks.value.splice(index, 1);
};
</script>
<template>
<h1>{{ name }}</h1>
<p v-if="status === 'active'">User is active</p>
<p v-else-if="status === 'pending'">User is pending</p>
<p v-else>User is inactive</p>
<form @submit.prevent="addTask">
<label for="newTask">Add Task</label>
<input type="text" id="newTask" name="newTask" v-model="newTask">
<button type="submit">Submit</button>
</form>
<h3>Tasks:</h3>
<ul>
<li v-for="(task, index) in tasks" :key="task">
<span>
{{ task }}
</span>
<button @click="deleteTask(index)">x</button>
</li>
</ul>
<br />
<!-- <button v-on:click="toggleStatus">Change Status</button> -->
<button @click="toggleStatus">Change Status</button>
</template>
Lifecycle Methods
- 講解 Lifecycle Methods
Lifecycle Methods
- onBeforeMount – called before mounting begins
- onMounted – called when component is mounted
- onBeforeUpdate – called when reactive data changes and before re-render
- onUpdated – called after re-render
- onBeforeUnmount – called before the Vue instance is destroyed
- onUnmounted – called after the instance is destroyed
- onActivated – called when a kept-alive component is activated
- onDeactivated – called when a kept-alive component is deactivated
- onErrorCaptured – called when an error is captured from a child component
onMounted & Fetching Data
- 關於 onMounted 用法，使用 jsonplaceholder todos
- 修改 App.vue 檔案
// App.vue
<script setup>
import { ref, onMounted } from 'vue';
const name = ref('John Doe');
const status = ref('active');
const tasks = ref(['Task One', 'Task Two', 'Task Three']);
const newTask = ref('');
const toggleStatus = () => {
if (status.value === 'active') {
status.value = 'pending';
} else if (status.value === 'pending') {
status.value = 'inactive';
} else {
status.value = 'active';
}
};
const addTask = () => {
if (newTask.value.trim() !== '') {
tasks.value.push(newTask.value);
newTask.value = '';
}
};
const deleteTask = (index) => {
tasks.value.splice(index, 1);
};
onMounted(async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos');
const data = await response.json();
tasks.value = data.map((task) => task.title);
} catch (error) {
console.log('Error fetching tasks');
}
});
</script>
<template>
<h1>{{ name }}</h1>
<p v-if="status === 'active'">User is active</p>
<p v-else-if="status === 'pending'">User is pending</p>
<p v-else>User is inactive</p>
<form @submit.prevent="addTask">
<label for="newTask">Add Task</label>
<input type="text" id="newTask" name="newTask" v-model="newTask">
<button type="submit">Submit</button>
</form>
<h3>Tasks:</h3>
<ul>
<li v-for="(task, index) in tasks" :key="task">
<span>
{{ task }}
</span>
<button @click="deleteTask(index)">x</button>
</li>
</ul>
<br />
<!-- <button v-on:click="toggleStatus">Change Status</button> -->
<button @click="toggleStatus">Change Status</button>
</template>
Vue Jobs Project Start
- 複製 App.vue 檔案程式碼，貼到 App2.vue 檔案
- 修改 App.vue 檔案
// App.vue
<template>
<h1>Vue Jobs</h1>
</template>
Tailwind CSS Setup
- 搜尋 Vue Tailwind
Setting up Tailwind CSS - 安裝 Tailwind via npm
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest - 開啟新的終端機然後安裝
- 建立 your configuration files
npx tailwindcss init -p - 修改 tailwind.config.js 檔案
- Include Tailwind in your CSS
修改 main.css 檔案 - 重新執行終端機 – npm run dev
- 修改 App.vue 檔案
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif']
},
gridTemplateColumns: {
'70/30': '70% 28%'
}
},
},
variants: {
extend: {},
},
plugins: [],
}
// src/assets/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
// App.vue
<template>
<h1 class="text-2xl">Vue Jobs</h1>
</template>
Theme Files & Images
- Full Project Code
- 複製 _theme_files 檔案到專案裡面
- 複製 img 資料夾到 assets 資料夾裡面
- 刪除在 assets 資料夾裡面的 base.css、logo.svg 檔案
Navbar Component
- 在 components 資料夾裡面建立 Navbar.vue 檔案
- 修改 Navbar.vue 檔案
- 複製 _theme_files 資料夾裡面的 index.html 檔案程式碼
- 修改 Navbar.vue 檔案
- 修改 App.vue 檔案
// src/components/Navbar.vue
<script setup>
import logo from '@/assets/img/logo.png'
</script>
<template>
<nav class="bg-green-700 border-b border-green-500">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="flex h-20 items-center justify-between">
<div
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
>
<!-- Logo -->
<a class="flex flex-shrink-0 items-center mr-4" href="index.html">
<img class="h-10 w-auto" :src="logo" alt="Vue Jobs" />
<span class="hidden md:block text-white text-2xl font-bold ml-2"
>Vue Jobs</span
>
</a>
<div class="md:ml-auto">
<div class="flex space-x-2">
<a
href="index.html"
class="text-white bg-green-900 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Home</a
>
<a
href="jobs.html"
class="text-white hover:bg-green-900 hover:text-white rounded-md px-3 py-2"
>Jobs</a
>
<a
href="add-job.html"
class="text-white hover:bg-green-900 hover:text-white rounded-md px-3 py-2"
>Add Job</a
>
</div>
</div>
</div>
</div>
</div>
</nav>
</template>
// App.vue
<script setup>
import Navbar from '@/components/Navbar.vue'
</script>
<template>
<Navbar />
</template>
Hero Component
- 在 components 資料夾裡面建立 Hero.vue 檔案
- 修改 Hero.vue 檔案
- 複製 _theme_files 資料夾裡面的 index.html 檔案 Hero 的部分
- 修改 App.vue 檔案
- 修改 Hero.vue 檔案
// src/components/Hero.vue
<script setup>
</script>
<template>
<section class="bg-green-700 py-20 mb-4">
<div
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
>
<div class="text-center">
<h1
class="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl"
>
Become a Vue Dev
</h1>
<p class="my-4 text-xl text-white">
Find the Vue job that fits your skills and needs
</p>
</div>
</div>
</section>
</template>
// App.vue
<script setup>
import Navbar from '@/components/Navbar.vue'
import Hero from '@/components/Hero.vue'
</script>
<template>
<Navbar />
<Hero />
</template>
Props
- 修改 App.vue 檔案
- 修改 Hero.vue 檔案
- 修改 App.vue 檔案
// App.vue
<script setup>
import Navbar from '@/components/Navbar.vue'
import Hero from '@/components/Hero.vue'
</script>
<template>
<Navbar />
<Hero />
</template>
// Hero.vue
<script setup>
import { defineProps } from 'vue';
defineProps({
title: {
type: String,
default: 'Become a Vue Dev'
},
subtitle: {
type: String,
default: 'Find the Vue job that fits your skills and needs'
}
});
</script>
<template>
<section class="bg-green-700 py-20 mb-4">
<div
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
>
<div class="text-center">
<h1
class="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl"
>
{{ title }}
</h1>
<p class="my-4 text-xl text-white">
{{ subtitle }}
</p>
</div>
</div>
</section>
</template>
HomeCards & Card Container Component
- 在 components 資料夾裡面建立 HomeCards.vue 檔案
- 修改 HomeCards.vue 檔案
- 複製 _theme_files 資料夾裡面的 index.html 檔案 Developers and Employers 的部分
- 修改 App.vue 檔案
- 在 components 資料夾裡面建立 Card.vue 檔案
- 修改 Card.vue 檔案
- 修改 HomeCards.vue 檔案
- 修改 Card.vue 檔案
- 修改 HomeCards.vue 檔案
// src/components/HomeCards.vue
<script setup>
import Card from '@/components/Card.vue'
</script>
<template>
<section class="py-4">
<div class="container-xl lg:container m-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
<Card>
<h2 class="text-2xl font-bold">For Developers</h2>
<p class="mt-2 mb-4">
Browse our Vue jobs and start your career today
</p>
<a
href="jobs.html"
class="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
>
Browse Jobs
</a>
</Card>
<Card bg="bg-green-100">
<h2 class="text-2xl font-bold">For Employers</h2>
<p class="mt-2 mb-4">
List your job to find the perfect developer for the role
</p>
<a
href="add-job.html"
class="inline-block bg-green-500 text-white rounded-lg px-4 py-2 hover:bg-green-600"
>
Add Job
</a>
</Card>
</div>
</div>
</section>
</template>
// App.vue
<script setup>
import Navbar from '@/components/Navbar.vue'
import Hero from '@/components/Hero.vue'
import HomeCards from '@/components/HomeCards.vue'
</script>
<template>
<Navbar />
<Hero />
<HomeCards />
</template>
// src/components/Card.vue
<script setup>
import { defineProps } from 'vue';
defineProps({
bg: {
type: String,
default: 'bg-gray-100'
}
})
</script>
<template>
<div :class="`${bg} p-6 rounded-lg shadow-md`">
<slot></slot>
</div>
</template>
JobListings Component & JSON Data
- 在 components 資料夾裡面建立 JobListings.vue 檔案
- 修改 JobListings.vue 檔案
- 修改 App.vue 檔案
- 複製 job2.json 檔案到 src 資料夾，重新命名為 jobs.json 檔案
- 修改 JobListings.vue 檔案
// src/components/JobListings.vue
<script setup>
import jobData from '@/jobs.json';
import { ref } from 'vue';
const jobs = ref(jobData);
console.log(jobs.value);
</script>
<template>
<section class="bg-blue-50 px-4 py-10">
<div class="container-xl lg:container m-auto">
<h2 class="text-3xl font-bold text-green-500 mb-6 text-center">
Browse Jobs
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div v-for="job in jobs" :key="job.id">
{{ job.title }}
</div>
</div>
</div>
</section>
</template>
// src/jobs.json
[
{
"id": 1,
"title": "Senior Vue Developer",
"type": "Full-Time",
"description": "We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript, with experience working with modern JavaScript frameworks such as Vue or Angular.",
"location": "Boston, MA",
"salary": "$70K - $80K",
"company": {
"name": "NewTek Solutions",
"description": "NewTek Solutions is a leading technology company specializing in web development and digital solutions. We pride ourselves on delivering high-quality products and services to our clients while fostering a collaborative and innovative work environment.",
"contactEmail": "contact@teksolutions.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 2,
"title": "Front-End Engineer (Vue)",
"type": "Full-Time",
"description": "Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion for crafting beautiful and responsive web applications. Experience with UI/UX design principles and a strong attention to detail are highly desirable.",
"location": "Miami, FL",
"salary": "$70K - $80K",
"company": {
"name": "Veneer Solutions",
"description": "Veneer Solutions is a creative agency specializing in digital design and development. Our team is dedicated to pushing the boundaries of creativity and innovation to deliver exceptional results for our clients.",
"contactEmail": "contact@loremipsum.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 3,
"title": "Vue.js Developer",
"type": "Full-Time",
"description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
"location": "Brooklyn, NY",
"salary": "$70K - $80K",
"company": {
"name": "Dolor Cloud",
"description": "Dolor Cloud is a leading technology company specializing in digital solutions for businesses of all sizes. With a focus on innovation and customer satisfaction, we are committed to delivering cutting-edge products and services.",
"contactEmail": "contact@dolorsitamet.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 4,
"title": "Vue Front-End Developer",
"type": "Part-Time",
"description": "Join our team as a Part-Time Front-End Developer in beautiful Pheonix, AZ. We are looking for a self-motivated individual with a passion for creating engaging user experiences. This position offers flexible hours and the opportunity to work remotely.",
"location": "Pheonix, AZ",
"salary": "$60K - $70K",
"company": {
"name": "Alpha Elite",
"description": "Alpha Elite is a dynamic startup specializing in digital marketing and web development. We are committed to fostering a diverse and inclusive workplace where creativity and innovation thrive.",
"contactEmail": "contact@adipisicingelit.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 5,
"title": "Full Stack Vue Developer",
"type": "Full-Time",
"description": "Exciting opportunity for a Full-Time Front-End Developer in bustling Atlanta, GA. We are seeking a talented individual with a passion for building elegant and scalable web applications. Join our team and make an impact!",
"location": "Atlanta, GA",
"salary": "$90K - $100K",
"company": {
"name": "Browning Technologies",
"description": "Browning Technologies is a rapidly growing technology company specializing in e-commerce solutions. We offer a dynamic and collaborative work environment where employees are encouraged to think creatively and innovate.",
"contactEmail": "contact@consecteturadipisicing.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 6,
"title": "Vue Native Developer",
"type": "Full-Time",
"description": "Join our team as a Front-End Developer in beautiful Portland, OR. We are looking for a skilled and enthusiastic individual to help us create innovative web solutions. Competitive salary and great benefits package available.",
"location": "Portland, OR",
"salary": "$100K - $110K",
"company": {
"name": "Port Solutions INC",
"description": "Port Solutions is a leading technology company specializing in software development and digital marketing. We are committed to providing our clients with cutting-edge solutions and our employees with a supportive and rewarding work environment.",
"contactEmail": "contact@ipsumlorem.com",
"contactPhone": "555-555-5555"
}
}
]
JobListing Component
- 到 _theme_files 資料夾裡面的 index.html 檔案複製程式碼
- 在 components 資料夾裡面建立 JobListing.vue 檔案
- 修改 JobListing.vue 檔案
- 修改 JobListings.vue 檔案
- 修改 JobListing.vue 檔案
// src/components/JobListing.vue
<script setup>
import { defineProps } from 'vue';
defineProps({
job: Object
});
</script>
<template>
<div class="bg-white rounded-xl shadow-md relative">
<div class="p-4">
<div class="mb-6">
<div class="text-gray-600 my-2">{{ job.type }}</div>
<h3 class="text-xl font-bold">{{ job.title }}</h3>
</div>
<div class="mb-5">
{{ job.description }}
</div>
<h3 class="text-green-500 mb-2">{{ job.salary }} / Year</h3>
<div class="border border-gray-100 mb-5"></div>
<div class="flex flex-col lg:flex-row justify-between mb-4">
<div class="text-orange-700 mb-3">
<i class="fa-solid fa-location-dot text-lg"></i>
{{ job.location }}
</div>
<a
:href="'/job/' + job.id"
class="h-[36px] bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
</template>
// src/components/JobListings.vue
<script setup>
import JobListing from './JobListing.vue';
import jobData from '@/jobs.json';
import { ref } from 'vue';
const jobs = ref(jobData);
console.log(jobs.value);
</script>
<template>
<section class="bg-blue-50 px-4 py-10">
<div class="container-xl lg:container m-auto">
<h2 class="text-3xl font-bold text-green-500 mb-6 text-center">
Browse Jobs
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<JobListing v-for="job in jobs" :key="job.id" :job="job" />
</div>
</div>
</section>
</template>
JobListings Limit & showButton Props
- 修改 JobListings.vue 檔案
- 修改 App.vue 檔案
- 到 _theme_files 資料夾裡面的 index.html 檔案複製程式碼貼到 JobListings.vue 檔案
- 修改 JobListings.vue 檔案
- 修改 App.vue 檔案
- 修改 JobListings.vue 檔案
// src/components/JobListings.vue
<script setup>
import JobListing from './JobListing.vue';
import jobData from '@/jobs.json';
import { ref, defineProps } from 'vue';
defineProps({
limit: Number,
showButton: {
type: Boolean,
default: false
}
});
const jobs = ref(jobData);
</script>
<template>
<section class="bg-blue-50 px-4 py-10">
<div class="container-xl lg:container m-auto">
<h2 class="text-3xl font-bold text-green-500 mb-6 text-center">
Browse Jobs
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<JobListing v-for="job in jobs.slice(0, limit || jobs.length)" :key="job.id" :job="job" />
</div>
</div>
</section>
<section v-if="showButton" class="m-auto max-w-lg my-10 px-6">
<a
href="/jobs"
class="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</a
>
</section>
</template>
// App.vue
<script setup>
import Navbar from '@/components/Navbar.vue'
import Hero from '@/components/Hero.vue'
import HomeCards from '@/components/HomeCards.vue'
import JobListings from './components/JobListings.vue'
</script>
<template>
<Navbar />
<Hero />
<HomeCards />
<JobListings :limit="3" :showButton="true" />
</template>
computed() & Truncate Description
- 修改 JobListing.vue 檔案
// src/components/JobListing.vue
<script setup>
import { defineProps, ref, computed } from 'vue';
const props = defineProps({
job: Object
});
const showFullDescription = ref(false);
const toggleFullDescription = () => {
showFullDescription.value = !showFullDescription.value;
}
const truncatedDescription = computed(() => {
let description = props.job.description;
if (!showFullDescription.value) {
description = description.substring(0, 90) + '...';
}
return description;
});
</script>
<template>
<div class="bg-white rounded-xl shadow-md relative">
<div class="p-4">
<div class="mb-6">
<div class="text-gray-600 my-2">{{ job.type }}</div>
<h3 class="text-xl font-bold">{{ job.title }}</h3>
</div>
<div class="mb-5">
<div>
{{ truncatedDescription }}
</div>
<button @click="toggleFullDescription" class="text-green-500 hover:text-green-600 mb-5">
{{ showFullDescription ? 'Less' : 'More' }}
</button>
</div>
<h3 class="text-green-500 mb-2">{{ job.salary }} / Year</h3>
<div class="border border-gray-100 mb-5"></div>
<div class="flex flex-col lg:flex-row justify-between mb-4">
<div class="text-orange-700 mb-3">
<i class="fa-solid fa-location-dot text-lg"></i>
{{ job.location }}
</div>
<a
:href="'/job/' + job.id"
class="h-[36px] bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
</template>
PrimeIcons
- 搜尋 primeicons
- 使用 PrimeVue
- 修改 main.js 檔案
- 修改 JobListing.vue 檔案
// src/main.js
import './assets/main.css'
import 'primeicons/primeicons.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
// src/components/JobListing.vue
<script setup>
import { defineProps, ref, computed } from 'vue';
const props = defineProps({
job: Object
});
const showFullDescription = ref(false);
const toggleFullDescription = () => {
showFullDescription.value = !showFullDescription.value;
}
const truncatedDescription = computed(() => {
let description = props.job.description;
if (!showFullDescription.value) {
description = description.substring(0, 90) + '...';
}
return description;
});
</script>
<template>
<div class="bg-white rounded-xl shadow-md relative">
<div class="p-4">
<div class="mb-6">
<div class="text-gray-600 my-2">{{ job.type }}</div>
<h3 class="text-xl font-bold">{{ job.title }}</h3>
</div>
<div class="mb-5">
<div>
{{ truncatedDescription }}
</div>
<button @click="toggleFullDescription" class="text-green-500 hover:text-green-600 mb-5">
{{ showFullDescription ? 'Less' : 'More' }}
</button>
</div>
<h3 class="text-green-500 mb-2">{{ job.salary }} / Year</h3>
<div class="border border-gray-100 mb-5"></div>
<div class="flex flex-col lg:flex-row justify-between mb-4">
<div class="text-orange-700 mb-3">
<i class="pi pi-map-marker text-orange-700"></i>
{{ job.location }}
</div>
<a
:href="'/job/' + job.id"
class="h-[36px] bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</a>
</div>
</div>
</div>
</template>
Vue Router & Home View
- 開啟終端機、安裝 npm i vue-router
- 在 src 資料夾裡面建立 router 資料夾
- 在 router 資料夾裡面建立 index.js 檔案
- 修改 index.js 檔案
- 在 src 資料夾裡面建立 views 資料夾
- 修改 App.vue 檔案
- 在 views 資料夾裡面建立 HomeView.vue 檔案
- 修改 HomeView.vue 檔案
- 修改 App.vue 檔案
- 修改 HomeView.vue 檔案
- 修改 index.js 檔案
- 修改 main.js 檔案
- 修改 HomeView.vue 檔案，除錯
- 修改 App.vue 檔案
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
}
]
});
export default router;
// src/App.vue
<script setup>
import Navbar from '@/components/Navbar.vue'
import { RouterView } from 'vue-router'
</script>
<template>
<Navbar />
<RouterView />
</template>
// src/views/HomeView.vue
<script setup>
import Hero from '@/components/Hero.vue'
import HomeCards from '@/components/HomeCards.vue'
import JobListings from '@/components/JobListings.vue'
</script>
<template>
<Hero />
<HomeCards />
<JobListings :limit="3" :showButton="true" />
</template>
// src/main.js
import './assets/main.css'
import 'primeicons/primeicons.css'
import router from './router'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(router);
app.mount('#app')
Jobs View
- 修改 Navbar.vue 檔案
- 在 views 資料夾裡面建立 JobsView.vue 檔案
- 修改 JobsView.vue 檔案
- 修改 index.js 檔案
// src/components/Navbar.vue
<script setup>
import logo from '@/assets/img/logo.png'
</script>
<template>
<nav class="bg-green-700 border-b border-green-500">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="flex h-20 items-center justify-between">
<div
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
>
<!-- Logo -->
<a class="flex flex-shrink-0 items-center mr-4" href="index.html">
<img class="h-10 w-auto" :src="logo" alt="Vue Jobs" />
<span class="hidden md:block text-white text-2xl font-bold ml-2"
>Vue Jobs</span
>
</a>
<div class="md:ml-auto">
<div class="flex space-x-2">
<a
href="/"
class="text-white bg-green-900 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Home</a
>
<a
href="/jobs"
class="text-white hover:bg-green-900 hover:text-white rounded-md px-3 py-2"
>Jobs</a
>
<a
href="/jobs/add"
class="text-white hover:bg-green-900 hover:text-white rounded-md px-3 py-2"
>Add Job</a
>
</div>
</div>
</div>
</div>
</div>
</nav>
</template>
// src/views/JobsView.vue
<script setup>
import JobListings from '@/components/JobListings.vue';
</script>
<template>
<JobListings />
</template>
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import JobsView from '@/views/JobsView.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/jobs',
name: 'jobs',
component: JobsView
}
]
});
export default router;
RouterLink
- 修改 Navbar.vue 檔案
- 修改 HomeCards.vue 檔案
- 修改 JobListing.vue 檔案
- 修改 JobListings.vue 檔案
// src/components/Navbar.vue
<script setup>
import { RouterLink } from 'vue-router'
import logo from '@/assets/img/logo.png'
</script>
<template>
<nav class="bg-green-700 border-b border-green-500">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="flex h-20 items-center justify-between">
<div
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
>
<!-- Logo -->
<RouterLink class="flex flex-shrink-0 items-center mr-4" to="/">
<img class="h-10 w-auto" :src="logo" alt="Vue Jobs" />
<span class="hidden md:block text-white text-2xl font-bold ml-2"
>Vue Jobs</span
>
</RouterLink>
<div class="md:ml-auto">
<div class="flex space-x-2">
<RouterLink
to="/"
class="text-white bg-green-900 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2"
>Home</RouterLink
>
<RouterLink
to="/jobs"
class="text-white hover:bg-green-900 hover:text-white rounded-md px-3 py-2"
>Jobs</RouterLink
>
<RouterLink
to="/jobs/add"
class="text-white hover:bg-green-900 hover:text-white rounded-md px-3 py-2"
>Add Job</RouterLink
>
</div>
</div>
</div>
</div>
</div>
</nav>
</template>
// src/components/HomeCards.vue
<script setup>
import { RouterLink } from 'vue-router'
import Card from '@/components/Card.vue'
</script>
<template>
<section class="py-4">
<div class="container-xl lg:container m-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
<Card>
<h2 class="text-2xl font-bold">For Developers</h2>
<p class="mt-2 mb-4">
Browse our Vue jobs and start your career today
</p>
<RouterLink
to="/jobs"
class="inline-block bg-black text-white rounded-lg px-4 py-2 hover:bg-gray-700"
>
Browse Jobs
</RouterLink>
</Card>
<Card bg="bg-green-100">
<h2 class="text-2xl font-bold">For Employers</h2>
<p class="mt-2 mb-4">
List your job to find the perfect developer for the role
</p>
<RouterLink
to="/jobs/add"
class="inline-block bg-green-500 text-white rounded-lg px-4 py-2 hover:bg-green-600"
>
Add Job
</RouterLink>
</Card>
</div>
</div>
</section>
</template>
// src/components/JobListing.vue
<script setup>
import { RouterLink } from 'vue-router';
import { defineProps, ref, computed } from 'vue';
const props = defineProps({
job: Object
});
const showFullDescription = ref(false);
const toggleFullDescription = () => {
showFullDescription.value = !showFullDescription.value;
}
const truncatedDescription = computed(() => {
let description = props.job.description;
if (!showFullDescription.value) {
description = description.substring(0, 90) + '...';
}
return description;
});
</script>
<template>
<div class="bg-white rounded-xl shadow-md relative">
<div class="p-4">
<div class="mb-6">
<div class="text-gray-600 my-2">{{ job.type }}</div>
<h3 class="text-xl font-bold">{{ job.title }}</h3>
</div>
<div class="mb-5">
<div>
{{ truncatedDescription }}
</div>
<button @click="toggleFullDescription" class="text-green-500 hover:text-green-600 mb-5">
{{ showFullDescription ? 'Less' : 'More' }}
</button>
</div>
<h3 class="text-green-500 mb-2">{{ job.salary }} / Year</h3>
<div class="border border-gray-100 mb-5"></div>
<div class="flex flex-col lg:flex-row justify-between mb-4">
<div class="text-orange-700 mb-3">
<i class="pi pi-map-marker text-orange-700"></i>
{{ job.location }}
</div>
<RouterLink
:to="'/job/' + job.id"
class="h-[36px] bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</RouterLink>
</div>
</div>
</div>
</template>
// src/components/JobListings.vue
<script setup>
import { RouterLink } from 'vue-router';
import JobListing from './JobListing.vue';
import jobData from '@/jobs.json';
import { ref, defineProps } from 'vue';
defineProps({
limit: Number,
showButton: {
type: Boolean,
default: false
}
});
const jobs = ref(jobData);
</script>
<template>
<section class="bg-blue-50 px-4 py-10">
<div class="container-xl lg:container m-auto">
<h2 class="text-3xl font-bold text-green-500 mb-6 text-center">
Browse Jobs
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<JobListing v-for="job in jobs.slice(0, limit || jobs.length)" :key="job.id" :job="job" />
</div>
</div>
</section>
<section v-if="showButton" class="m-auto max-w-lg my-10 px-6">
<RouterLink
to="/jobs"
class="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</RouterLink
>
</section>
</template>
Navbar Active Link
- 修改 Navbar.vue 檔案
// src/components/Navbar.vue
<script setup>
import { RouterLink, useRoute } from 'vue-router'
import logo from '@/assets/img/logo.png'
const isActiveLink = (routePath) => {
const route = useRoute();
return route.path === routePath;
}
</script>
<template>
<nav class="bg-green-700 border-b border-green-500">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="flex h-20 items-center justify-between">
<div
class="flex flex-1 items-center justify-center md:items-stretch md:justify-start"
>
<!-- Logo -->
<RouterLink class="flex flex-shrink-0 items-center mr-4" to="/">
<img class="h-10 w-auto" :src="logo" alt="Vue Jobs" />
<span class="hidden md:block text-white text-2xl font-bold ml-2"
>Vue Jobs</span
>
</RouterLink>
<div class="md:ml-auto">
<div class="flex space-x-2">
<RouterLink
to="/"
:class="[isActiveLink('/') ? 'bg-green-900' : 'hover:bg-gray-900 hover:text-white', 'text-white', 'px-3', 'py-2', 'rounded-md']"
>Home</RouterLink
>
<RouterLink
to="/jobs"
:class="[isActiveLink('/jobs') ? 'bg-green-900' : 'hover:bg-gray-900 hover:text-white', 'text-white', 'px-3', 'py-2', 'rounded-md']"
>Jobs</RouterLink
>
<RouterLink
to="/jobs/add"
:class="[isActiveLink('/jobs/add') ? 'bg-green-900' : 'hover:bg-gray-900 hover:text-white', 'text-white', 'px-3', 'py-2', 'rounded-md']"
>Add Job</RouterLink
>
</div>
</div>
</div>
</div>
</div>
</nav>
</template>
Not Found Page
- 在 views 資料夾裡面建立 NotFoundView.vue 檔案
- 到 _theme_files 資料夾裡面複製 not-found.html 檔案程式碼
- 修改 NotFoundView.vue 檔案
- 修改 index.js 檔案
- 在 views 資料夾裡面建立 JobView.vue 檔案
- 修改 JobView.vue 檔案
- 到 _theme_files 資料夾裡面複製 job.html 檔案程式碼
- 修改 JobView.vue 檔案
- 修改 index.js 檔案
- 修改 JobListing.vue 檔案
// src/views/NotFoundView.vue
<script setup>
import { RouterLink } from 'vue-router';
</script>
<template>
<section class="text-center flex flex-col justify-center items-center h-96">
<i class="pi pi-exclamation-triangle text-yellow-500 text-7xl mb-5"></i>
<h1 class="text-6xl font-bold mb-4">404 Not Found</h1>
<p class="text-xl mb-5">This page does not exist</p>
<RouterLink
to="/"
class="text-white bg-green-700 hover:bg-green-900 rounded-md px-3 py-2 mt-4"
>Go Back</RouterLink
>
</section>
</template>
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import JobsView from '@/views/JobsView.vue';
import NotFoundView from '@/views/NotFoundView.vue';
import JobView from '@/views/JobView.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/jobs',
name: 'jobs',
component: JobsView
},
{
path: '/jobs/:id',
name: 'job',
component: JobView
},
{
path: '/:catchAll(.*)',
name: 'not-found',
component: NotFoundView
},
]
});
export default router;
// src/views/JobView.vue
<script setup>
</script>
<template>
<section class="bg-green-50">
<div class="container m-auto py-10 px-6">
<div class="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
<main>
<div
class="bg-white p-6 rounded-lg shadow-md text-center md:text-left"
>
<div class="text-gray-500 mb-4">Full-Time</div>
<h1 class="text-3xl font-bold mb-4">Senior Vue Developer</h1>
<div
class="text-gray-500 mb-4 flex align-middle justify-center md:justify-start"
>
<i
class="fa-solid fa-location-dot text-lg text-orange-700 mr-2"
></i>
<p class="text-orange-700">Boston, MA</p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-green-800 text-lg font-bold mb-6">
Job Description
</h3>
<p class="mb-4">
We are seeking a talented Front-End Developer to join our team
in Boston, MA. The ideal candidate will have strong skills in
HTML, CSS, and JavaScript, with experience working with modern
JavaScript frameworks such as Vue or Angular.
</p>
<h3 class="text-green-800 text-lg font-bold mb-2">Salary</h3>
<p class="mb-4">$70k - $80K / Year</p>
</div>
</main>
<!-- Sidebar -->
<aside>
<!-- Company Info -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-6">Company Info</h3>
<h2 class="text-2xl">NewTek Solutions</h2>
<p class="my-2">
NewTek Solutions is a leading technology company specializing in
web development and digital solutions. We pride ourselves on
delivering high-quality products and services to our clients
while fostering a collaborative and innovative work environment.
</p>
<hr class="my-4" />
<h3 class="text-xl">Contact Email:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">
contact@newteksolutions.com
</p>
<h3 class="text-xl">Contact Phone:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">555-555-5555</p>
</div>
<!-- Manage -->
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-xl font-bold mb-6">Manage Job</h3>
<a
href="add-job.html"
class="bg-green-500 hover:bg-green-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>Edit Job</a
>
<button
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>
Delete Job
</button>
</div>
</aside>
</div>
</div>
</section>
</template>
// src/components/JobListing.vue
<script setup>
import { RouterLink } from 'vue-router';
import { defineProps, ref, computed } from 'vue';
const props = defineProps({
job: Object
});
const showFullDescription = ref(false);
const toggleFullDescription = () => {
showFullDescription.value = !showFullDescription.value;
}
const truncatedDescription = computed(() => {
let description = props.job.description;
if (!showFullDescription.value) {
description = description.substring(0, 90) + '...';
}
return description;
});
</script>
<template>
<div class="bg-white rounded-xl shadow-md relative">
<div class="p-4">
<div class="mb-6">
<div class="text-gray-600 my-2">{{ job.type }}</div>
<h3 class="text-xl font-bold">{{ job.title }}</h3>
</div>
<div class="mb-5">
<div>
{{ truncatedDescription }}
</div>
<button @click="toggleFullDescription" class="text-green-500 hover:text-green-600 mb-5">
{{ showFullDescription ? 'Less' : 'More' }}
</button>
</div>
<h3 class="text-green-500 mb-2">{{ job.salary }} / Year</h3>
<div class="border border-gray-100 mb-5"></div>
<div class="flex flex-col lg:flex-row justify-between mb-4">
<div class="text-orange-700 mb-3">
<i class="pi pi-map-marker text-orange-700"></i>
{{ job.location }}
</div>
<RouterLink
:to="'/jobs/' + job.id"
class="h-[36px] bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-center text-sm"
>
Read More
</RouterLink>
</div>
</div>
</div>
</template>
JSON Server REST API
- 安裝 json-server
npm i json-server - 複製 jobs.json 檔案並把它改名為 jobs2.json 檔案
- 修改 jobs.json 檔案
- 修改 package.json 檔案
- 開啟第二個終端機並執行指令
npm run server - 如果 port 5000 有重複可改用 port 8000
// src/jobs2.json
[
{
"id": 1,
"title": "Senior Vue Developer",
"type": "Full-Time",
"description": "We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript, with experience working with modern JavaScript frameworks such as Vue or Angular.",
"location": "Boston, MA",
"salary": "$70K - $80K",
"company": {
"name": "NewTek Solutions",
"description": "NewTek Solutions is a leading technology company specializing in web development and digital solutions. We pride ourselves on delivering high-quality products and services to our clients while fostering a collaborative and innovative work environment.",
"contactEmail": "contact@teksolutions.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 2,
"title": "Front-End Engineer (Vue)",
"type": "Full-Time",
"description": "Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion for crafting beautiful and responsive web applications. Experience with UI/UX design principles and a strong attention to detail are highly desirable.",
"location": "Miami, FL",
"salary": "$70K - $80K",
"company": {
"name": "Veneer Solutions",
"description": "Veneer Solutions is a creative agency specializing in digital design and development. Our team is dedicated to pushing the boundaries of creativity and innovation to deliver exceptional results for our clients.",
"contactEmail": "contact@loremipsum.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 3,
"title": "Vue.js Developer",
"type": "Full-Time",
"description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
"location": "Brooklyn, NY",
"salary": "$70K - $80K",
"company": {
"name": "Dolor Cloud",
"description": "Dolor Cloud is a leading technology company specializing in digital solutions for businesses of all sizes. With a focus on innovation and customer satisfaction, we are committed to delivering cutting-edge products and services.",
"contactEmail": "contact@dolorsitamet.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 4,
"title": "Vue Front-End Developer",
"type": "Part-Time",
"description": "Join our team as a Part-Time Front-End Developer in beautiful Pheonix, AZ. We are looking for a self-motivated individual with a passion for creating engaging user experiences. This position offers flexible hours and the opportunity to work remotely.",
"location": "Pheonix, AZ",
"salary": "$60K - $70K",
"company": {
"name": "Alpha Elite",
"description": "Alpha Elite is a dynamic startup specializing in digital marketing and web development. We are committed to fostering a diverse and inclusive workplace where creativity and innovation thrive.",
"contactEmail": "contact@adipisicingelit.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 5,
"title": "Full Stack Vue Developer",
"type": "Full-Time",
"description": "Exciting opportunity for a Full-Time Front-End Developer in bustling Atlanta, GA. We are seeking a talented individual with a passion for building elegant and scalable web applications. Join our team and make an impact!",
"location": "Atlanta, GA",
"salary": "$90K - $100K",
"company": {
"name": "Browning Technologies",
"description": "Browning Technologies is a rapidly growing technology company specializing in e-commerce solutions. We offer a dynamic and collaborative work environment where employees are encouraged to think creatively and innovate.",
"contactEmail": "contact@consecteturadipisicing.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 6,
"title": "Vue Native Developer",
"type": "Full-Time",
"description": "Join our team as a Front-End Developer in beautiful Portland, OR. We are looking for a skilled and enthusiastic individual to help us create innovative web solutions. Competitive salary and great benefits package available.",
"location": "Portland, OR",
"salary": "$100K - $110K",
"company": {
"name": "Port Solutions INC",
"description": "Port Solutions is a leading technology company specializing in software development and digital marketing. We are committed to providing our clients with cutting-edge solutions and our employees with a supportive and rewarding work environment.",
"contactEmail": "contact@ipsumlorem.com",
"contactPhone": "555-555-5555"
}
}
]
// src/jobs.json
{
"jobs":[
{
"id": 1,
"title": "Senior Vue Developer",
"type": "Full-Time",
"description": "We are seeking a talented Front-End Developer to join our team in Boston, MA. The ideal candidate will have strong skills in HTML, CSS, and JavaScript, with experience working with modern JavaScript frameworks such as Vue or Angular.",
"location": "Boston, MA",
"salary": "$70K - $80K",
"company": {
"name": "NewTek Solutions",
"description": "NewTek Solutions is a leading technology company specializing in web development and digital solutions. We pride ourselves on delivering high-quality products and services to our clients while fostering a collaborative and innovative work environment.",
"contactEmail": "contact@teksolutions.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 2,
"title": "Front-End Engineer (Vue)",
"type": "Full-Time",
"description": "Join our team as a Front-End Developer in sunny Miami, FL. We are looking for a motivated individual with a passion for crafting beautiful and responsive web applications. Experience with UI/UX design principles and a strong attention to detail are highly desirable.",
"location": "Miami, FL",
"salary": "$70K - $80K",
"company": {
"name": "Veneer Solutions",
"description": "Veneer Solutions is a creative agency specializing in digital design and development. Our team is dedicated to pushing the boundaries of creativity and innovation to deliver exceptional results for our clients.",
"contactEmail": "contact@loremipsum.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 3,
"title": "Vue.js Developer",
"type": "Full-Time",
"description": "Are you passionate about front-end development? Join our team in vibrant Brooklyn, NY, and work on exciting projects that make a difference. We offer competitive compensation and a collaborative work environment where your ideas are valued.",
"location": "Brooklyn, NY",
"salary": "$70K - $80K",
"company": {
"name": "Dolor Cloud",
"description": "Dolor Cloud is a leading technology company specializing in digital solutions for businesses of all sizes. With a focus on innovation and customer satisfaction, we are committed to delivering cutting-edge products and services.",
"contactEmail": "contact@dolorsitamet.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 4,
"title": "Vue Front-End Developer",
"type": "Part-Time",
"description": "Join our team as a Part-Time Front-End Developer in beautiful Pheonix, AZ. We are looking for a self-motivated individual with a passion for creating engaging user experiences. This position offers flexible hours and the opportunity to work remotely.",
"location": "Pheonix, AZ",
"salary": "$60K - $70K",
"company": {
"name": "Alpha Elite",
"description": "Alpha Elite is a dynamic startup specializing in digital marketing and web development. We are committed to fostering a diverse and inclusive workplace where creativity and innovation thrive.",
"contactEmail": "contact@adipisicingelit.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 5,
"title": "Full Stack Vue Developer",
"type": "Full-Time",
"description": "Exciting opportunity for a Full-Time Front-End Developer in bustling Atlanta, GA. We are seeking a talented individual with a passion for building elegant and scalable web applications. Join our team and make an impact!",
"location": "Atlanta, GA",
"salary": "$90K - $100K",
"company": {
"name": "Browning Technologies",
"description": "Browning Technologies is a rapidly growing technology company specializing in e-commerce solutions. We offer a dynamic and collaborative work environment where employees are encouraged to think creatively and innovate.",
"contactEmail": "contact@consecteturadipisicing.com",
"contactPhone": "555-555-5555"
}
},
{
"id": 6,
"title": "Vue Native Developer",
"type": "Full-Time",
"description": "Join our team as a Front-End Developer in beautiful Portland, OR. We are looking for a skilled and enthusiastic individual to help us create innovative web solutions. Competitive salary and great benefits package available.",
"location": "Portland, OR",
"salary": "$100K - $110K",
"company": {
"name": "Port Solutions INC",
"description": "Port Solutions is a leading technology company specializing in software development and digital marketing. We are committed to providing our clients with cutting-edge solutions and our employees with a supportive and rewarding work environment.",
"contactEmail": "contact@ipsumlorem.com",
"contactPhone": "555-555-5555"
}
}
]
}
// package.json
{
"name": "vue-crash-2024",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"server": "json-server --watch src/jobs.json --port 8000"
},
"dependencies": {
"json-server": "^1.0.0-beta.2",
"primeicons": "^7.0.0",
"vue": "^3.4.29",
"vue-router": "^4.4.3"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.5",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.41",
"tailwindcss": "^3.4.10",
"vite": "^5.3.1"
}
}
Fetch Data For JobListings
- 開啟第三個終端機
安裝 axios 套件 – npm i axios - 修改 JobListings.vue 檔案
// src/components/JobListings.vue
<script setup>
import { RouterLink } from 'vue-router';
import JobListing from './JobListing.vue';
import { ref, defineProps, onMounted } from 'vue';
import axios from 'axios';
defineProps({
limit: Number,
showButton: {
type: Boolean,
default: false
}
});
const jobs = ref([]);
onMounted(async () => {
try {
const response = await axios.get('http://localhost:8000/jobs');
jobs.value = response.data;
} catch (error) {
console.error('Error fetching jobs', error);
}
});
</script>
<template>
<section class="bg-blue-50 px-4 py-10">
<div class="container-xl lg:container m-auto">
<h2 class="text-3xl font-bold text-green-500 mb-6 text-center">
Browse Jobs
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<JobListing v-for="job in jobs.slice(0, limit || jobs.length)" :key="job.id" :job="job" />
</div>
</div>
</section>
<section v-if="showButton" class="m-auto max-w-lg my-10 px-6">
<RouterLink
to="/jobs"
class="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</RouterLink
>
</section>
</template>
reactive() Function
- 修改 JobListings.vue 檔案
// src/components/JobListings.vue
<script setup>
import { RouterLink } from 'vue-router';
import JobListing from './JobListing.vue';
import { reactive, defineProps, onMounted } from 'vue';
import axios from 'axios';
defineProps({
limit: Number,
showButton: {
type: Boolean,
default: false
}
});
const jobs = ref([]);
onMounted(async () => {
try {
const response = await axios.get('http://localhost:8000/jobs');
jobs.value = response.data;
} catch (error) {
console.error('Error fetching jobs', error);
}
});
</script>
<template>
<section class="bg-blue-50 px-4 py-10">
<div class="container-xl lg:container m-auto">
<h2 class="text-3xl font-bold text-green-500 mb-6 text-center">
Browse Jobs
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<JobListing v-for="job in jobs.slice(0, limit || jobs.length)" :key="job.id" :job="job" />
</div>
</div>
</section>
<section v-if="showButton" class="m-auto max-w-lg my-10 px-6">
<RouterLink
to="/jobs"
class="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</RouterLink
>
</section>
</template>
ref vs reactive
- reactive() only takes objects. It does not take primitives like strings, numbers and booleans. It uses `ref()` under the hood.
- ref() cant take objects or primitives.
- ref() has a `.value` property for reassigning, `reactive()` doesn’t use `.value` and can’t be reassigned
JobListings Refactor To reactive()
- 修改 JobListings.vue 檔案
// src/components/JobListings.vue
<script setup>
import { RouterLink } from 'vue-router';
import JobListing from './JobListing.vue';
import { reactive, defineProps, onMounted } from 'vue';
import axios from 'axios';
defineProps({
limit: Number,
showButton: {
type: Boolean,
default: false
}
});
const state = reactive({
jobs: [],
isLoading: true
});
onMounted(async () => {
try {
const response = await axios.get('http://localhost:8000/jobs');
state.jobs = response.data;
} catch (error) {
console.error('Error fetching jobs', error);
} finally {
state.isLoading = false;
}
});
</script>
<template>
<section class="bg-blue-50 px-4 py-10">
<div class="container-xl lg:container m-auto">
<h2 class="text-3xl font-bold text-green-500 mb-6 text-center">
Browse Jobs
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<JobListing v-for="job in state.jobs.slice(0, limit || state.jobs.length)" :key="job.id" :job="job" />
</div>
</div>
</section>
<section v-if="showButton" class="m-auto max-w-lg my-10 px-6">
<RouterLink
to="/jobs"
class="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</RouterLink
>
</section>
</template>
Vue Spinner
- 使用終端機安裝 Vue Spinner
npm i vue-spinner - 修改 JobListings.vue 檔案
// src/components/JobListings.vue
<script setup>
import { RouterLink } from 'vue-router';
import JobListing from './JobListing.vue';
import { reactive, defineProps, onMounted } from 'vue';
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import axios from 'axios';
defineProps({
limit: Number,
showButton: {
type: Boolean,
default: false
}
});
const state = reactive({
jobs: [],
isLoading: true
});
onMounted(async () => {
try {
const response = await axios.get('http://localhost:8000/jobs');
state.jobs = response.data;
} catch (error) {
console.error('Error fetching jobs', error);
} finally {
state.isLoading = false;
}
});
</script>
<template>
<section class="bg-blue-50 px-4 py-10">
<div class="container-xl lg:container m-auto">
<h2 class="text-3xl font-bold text-green-500 mb-6 text-center">
Browse Jobs
</h2>
<!-- Show loading spinner while loading is true -->
<div v-if="state.isLoading" class="text-center text-gray-500 py-6">
<PulseLoader />
</div>
<!-- Show job listing when done loading -->
<div v-else class="grid grid-cols-1 md:grid-cols-3 gap-6">
<JobListing v-for="job in state.jobs.slice(0, limit || state.jobs.length)" :key="job.id" :job="job" />
</div>
</div>
</section>
<section v-if="showButton" class="m-auto max-w-lg my-10 px-6">
<RouterLink
to="/jobs"
class="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</RouterLink
>
</section>
</template>
Fetch Single Job & Display Data
- 修改 JobView.vue 檔案
- 複製 JobListings.vue 檔案中的程式碼 onMounted 的部分
- 修改 JobView.vue 檔案
// src/views/JobView.vue
<script setup>
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import { reactive, onMounted } from 'vue';
import { useRoute, RouterLink } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const jobId = route.params.id;
const state = reactive({
job: {},
isLoading: true
});
onMounted(async () => {
try {
const response = await axios.get(`http://localhost:8000/jobs/${jobId}`);
state.job = response.data;
} catch (error) {
console.error('Error fetching job', error);
} finally {
state.isLoading = false;
}
});
</script>
<template>
<section v-if="!state.isLoading" class="bg-green-50">
<div class="container m-auto py-10 px-6">
<div class="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
<main>
<div
class="bg-white p-6 rounded-lg shadow-md text-center md:text-left"
>
<div class="text-gray-500 mb-4">{{ state.job.type }}</div>
<h1 class="text-3xl font-bold mb-4">{{ state.job.title }}</h1>
<div
class="text-gray-500 mb-4 flex align-middle justify-center md:justify-start"
>
<i
class="fa-solid fa-location-dot text-lg text-orange-700 mr-2"
></i>
<p class="text-orange-700">{{ state.job.location }}</p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-green-800 text-lg font-bold mb-6">
Job Description
</h3>
<p class="mb-4">
{{ state.job.description }}
</p>
<h3 class="text-green-800 text-lg font-bold mb-2">Salary</h3>
<p class="mb-4">{{ state.job.salary }} / Year</p>
</div>
</main>
<!-- Sidebar -->
<aside>
<!-- Company Info -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-6">Company Info</h3>
<h2 class="text-2xl">{{ state.job.company.name }}</h2>
<p class="my-2">
{{ state.job.company.description }}
</p>
<hr class="my-4" />
<h3 class="text-xl">Contact Email:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">
{{ state.job.company.contactEmail }}
</p>
<h3 class="text-xl">Contact Phone:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">{{ state.job.company.contactPhone }}</p>
</div>
<!-- Manage -->
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-xl font-bold mb-6">Manage Job</h3>
<RouterLink
:to="`/jobs/edit/${state.job.id}`"
class="bg-green-500 hover:bg-green-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>Edit Job</RouterLink
>
<button
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>
Delete Job
</button>
</div>
</aside>
</div>
</div>
</section>
<div v-else class="text-center text-gray-500 py-6">
<PulseLoader />
</div>
</template>
BackButton Component
- 在 components 資料夾裡面建立 BackButton.vue 檔案
- 修改 BackButton.vue 檔案
- 到 _theme_files 資料夾的 job.html 檔案複製 Go Back 程式碼貼到 BackButton.vue 檔案
- 修改 BackButton.vue 檔案
- 修改 JobView.vue 檔案
- 修改 BackButton.vue 檔案
// src/components/BackButton.vue
<script setup>
import { RouterLink } from 'vue-router';
</script>
<template>
<section>
<div class="container m-auto py-6 px-6">
<RouterLink
to="/jobs"
class="text-green-500 hover:text-green-600 flex items-center"
>
<i class="pi pi-arrow-circle-left mr-3"></i> Back to Job Listings
</RouterLink>
</div>
</section>
</template>
// src/views/JobView.vue
<script setup>
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import BackButton from '@/components/BackButton.vue';
import { reactive, onMounted } from 'vue';
import { useRoute, RouterLink } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const jobId = route.params.id;
const state = reactive({
job: {},
isLoading: true
});
onMounted(async () => {
try {
const response = await axios.get(`http://localhost:8000/jobs/${jobId}`);
state.job = response.data;
} catch (error) {
console.error('Error fetching job', error);
} finally {
state.isLoading = false;
}
});
</script>
<template>
<BackButton />
<section v-if="!state.isLoading" class="bg-green-50">
<div class="container m-auto py-10 px-6">
<div class="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
<main>
<div
class="bg-white p-6 rounded-lg shadow-md text-center md:text-left"
>
<div class="text-gray-500 mb-4">{{ state.job.type }}</div>
<h1 class="text-3xl font-bold mb-4">{{ state.job.title }}</h1>
<div
class="text-gray-500 mb-4 flex align-middle justify-center md:justify-start"
>
<i
class="fa-solid fa-location-dot text-lg text-orange-700 mr-2"
></i>
<p class="text-orange-700">{{ state.job.location }}</p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-green-800 text-lg font-bold mb-6">
Job Description
</h3>
<p class="mb-4">
{{ state.job.description }}
</p>
<h3 class="text-green-800 text-lg font-bold mb-2">Salary</h3>
<p class="mb-4">{{ state.job.salary }} / Year</p>
</div>
</main>
<!-- Sidebar -->
<aside>
<!-- Company Info -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-6">Company Info</h3>
<h2 class="text-2xl">{{ state.job.company.name }}</h2>
<p class="my-2">
{{ state.job.company.description }}
</p>
<hr class="my-4" />
<h3 class="text-xl">Contact Email:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">
{{ state.job.company.contactEmail }}
</p>
<h3 class="text-xl">Contact Phone:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">{{ state.job.company.contactPhone }}</p>
</div>
<!-- Manage -->
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-xl font-bold mb-6">Manage Job</h3>
<RouterLink
:to="`/jobs/edit/${state.job.id}`"
class="bg-green-500 hover:bg-green-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>Edit Job</RouterLink
>
<button
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>
Delete Job
</button>
</div>
</aside>
</div>
</div>
</section>
<div v-else class="text-center text-gray-500 py-6">
<PulseLoader />
</div>
</template>
Proxying
- 修改 vite.config.js 檔案
- 修改 JobView.vue 檔案
- 修改 JobListings.vue 檔案
// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
}
}
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
// src/views/JobView.vue
<script setup>
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import BackButton from '@/components/BackButton.vue';
import { reactive, onMounted } from 'vue';
import { useRoute, RouterLink } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const jobId = route.params.id;
const state = reactive({
job: {},
isLoading: true
});
onMounted(async () => {
try {
const response = await axios.get(`/api/jobs/${jobId}`);
state.job = response.data;
} catch (error) {
console.error('Error fetching job', error);
} finally {
state.isLoading = false;
}
});
</script>
<template>
<BackButton />
<section v-if="!state.isLoading" class="bg-green-50">
<div class="container m-auto py-10 px-6">
<div class="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
<main>
<div
class="bg-white p-6 rounded-lg shadow-md text-center md:text-left"
>
<div class="text-gray-500 mb-4">{{ state.job.type }}</div>
<h1 class="text-3xl font-bold mb-4">{{ state.job.title }}</h1>
<div
class="text-gray-500 mb-4 flex align-middle justify-center md:justify-start"
>
<i
class="fa-solid fa-location-dot text-lg text-orange-700 mr-2"
></i>
<p class="text-orange-700">{{ state.job.location }}</p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-green-800 text-lg font-bold mb-6">
Job Description
</h3>
<p class="mb-4">
{{ state.job.description }}
</p>
<h3 class="text-green-800 text-lg font-bold mb-2">Salary</h3>
<p class="mb-4">{{ state.job.salary }} / Year</p>
</div>
</main>
<!-- Sidebar -->
<aside>
<!-- Company Info -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-6">Company Info</h3>
<h2 class="text-2xl">{{ state.job.company.name }}</h2>
<p class="my-2">
{{ state.job.company.description }}
</p>
<hr class="my-4" />
<h3 class="text-xl">Contact Email:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">
{{ state.job.company.contactEmail }}
</p>
<h3 class="text-xl">Contact Phone:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">{{ state.job.company.contactPhone }}</p>
</div>
<!-- Manage -->
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-xl font-bold mb-6">Manage Job</h3>
<RouterLink
:to="`/jobs/edit/${state.job.id}`"
class="bg-green-500 hover:bg-green-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>Edit Job</RouterLink
>
<button
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>
Delete Job
</button>
</div>
</aside>
</div>
</div>
</section>
<div v-else class="text-center text-gray-500 py-6">
<PulseLoader />
</div>
</template>
// src/components/JobListings.vue
<script setup>
import { RouterLink } from 'vue-router';
import JobListing from './JobListing.vue';
import { reactive, defineProps, onMounted } from 'vue';
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import axios from 'axios';
defineProps({
limit: Number,
showButton: {
type: Boolean,
default: false
}
});
const state = reactive({
jobs: [],
isLoading: true
});
onMounted(async () => {
try {
const response = await axios.get('/api/jobs');
state.jobs = response.data;
} catch (error) {
console.error('Error fetching jobs', error);
} finally {
state.isLoading = false;
}
});
</script>
<template>
<section class="bg-blue-50 px-4 py-10">
<div class="container-xl lg:container m-auto">
<h2 class="text-3xl font-bold text-green-500 mb-6 text-center">
Browse Jobs
</h2>
<!-- Show loading spinner while loading is true -->
<div v-if="state.isLoading" class="text-center text-gray-500 py-6">
<PulseLoader />
</div>
<!-- Show job listing when done loading -->
<div v-else class="grid grid-cols-1 md:grid-cols-3 gap-6">
<JobListing v-for="job in state.jobs.slice(0, limit || state.jobs.length)" :key="job.id" :job="job" />
</div>
</div>
</section>
<section v-if="showButton" class="m-auto max-w-lg my-10 px-6">
<RouterLink
to="/jobs"
class="block bg-black text-white text-center py-4 px-6 rounded-xl hover:bg-gray-700"
>View All Jobs</RouterLink
>
</section>
</template>
Add Job Page
- 在 views 資料夾裡面建立 AddJobView.vue 檔案
- 修改 AddJobView.vue 檔案
- 修改 index.js 檔案
- 到 _theme_files 資料夾裡面找到 add-job.html 檔案複製程式碼
- 修改 AddJobView.vue 檔案
// src/views/AddJobView.vue
<script setup>
import { reactive } from 'vue';
const form = reactive({
type: 'Full-Time',
title: '',
description: '',
salary: '',
location: '',
company: {
name: '',
description: '',
contactEmail: '',
contactPhone: ''
}
});
const handleSubmit = async () => {
console.log(form.title);
};
</script>
<template>
<section class="bg-green-50">
<div class="container m-auto max-w-2xl py-24">
<div
class="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
>
<form @submit.prevent="handleSubmit">
<h2 class="text-3xl text-center font-semibold mb-6">Add Job</h2>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Job Type</label
>
<select
v-model="form.type"
id="type"
name="type"
class="border rounded w-full py-2 px-3"
required
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2"
>Job Listing Name</label
>
<input
v-model="form.title"
type="text"
id="name"
name="name"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
/>
</div>
<div class="mb-4">
<label
for="description"
class="block text-gray-700 font-bold mb-2"
>Description</label
>
<textarea
v-model="form.description"
id="description"
name="description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
></textarea>
</div>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Salary</label
>
<select
v-model="form.salary"
id="salary"
name="salary"
class="border rounded w-full py-2 px-3"
required
>
<option value="Under $50K">under $50K</option>
<option value="$50K - $60K">$50 - $60K</option>
<option value="$60K - $70K">$60 - $70K</option>
<option value="$70K - $80K">$70 - $80K</option>
<option value="$80K - $90K">$80 - $90K</option>
<option value="$90K - $100K">$90 - $100K</option>
<option value="$100K - $125K">$100 - $125K</option>
<option value="$125K - $150K">$125 - $150K</option>
<option value="$150K - $175K">$150 - $175K</option>
<option value="$175K - $200K">$175 - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">
Location
</label>
<input
v-model="form.location"
type="text"
id="location"
name="location"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="Company Location"
required
/>
</div>
<h3 class="text-2xl mb-5">Company Info</h3>
<div class="mb-4">
<label for="company" class="block text-gray-700 font-bold mb-2"
>Company Name</label
>
<input
v-model="form.company.name"
type="text"
id="company"
name="company"
class="border rounded w-full py-2 px-3"
placeholder="Company Name"
/>
</div>
<div class="mb-4">
<label
for="company_description"
class="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
v-model="form.company.description"
id="company_description"
name="company_description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
></textarea>
</div>
<div class="mb-4">
<label
for="contact_email"
class="block text-gray-700 font-bold mb-2"
>Contact Email</label
>
<input
v-model="form.company.contactEmail"
type="email"
id="contact_email"
name="contact_email"
class="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
/>
</div>
<div class="mb-4">
<label
for="contact_phone"
class="block text-gray-700 font-bold mb-2"
>Contact Phone</label
>
<input
v-model="form.company.contactPhone"
type="tel"
id="contact_phone"
name="contact_phone"
class="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
/>
</div>
<div>
<button
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Add Job
</button>
</div>
</form>
</div>
</div>
</section>
</template>
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import JobsView from '@/views/JobsView.vue';
import NotFoundView from '@/views/NotFoundView.vue';
import JobView from '@/views/JobView.vue';
import AddJobView from '@/views/AddJobView.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/jobs',
name: 'jobs',
component: JobsView
},
{
path: '/jobs/:id',
name: 'job',
component: JobView
},
{
path: '/jobs/add',
name: 'add-job',
component: AddJobView,
},
{
path: '/:catchAll(.*)',
name: 'not-found',
component: NotFoundView
},
]
});
export default router;
Save Job POST
- 修改 AddJobView.vue 檔案
- 到 JobView.vue 檔案複製程式碼關於 trycatch 的部分
- 修改 AddJobView.vue 檔案
- 測試表單
- 修改 JobView.vue 檔案
// src/views/AddJobView.vue
<script setup>
import router from '@/router';
import { reactive } from 'vue';
import axios from 'axios';
const form = reactive({
type: 'Full-Time',
title: '',
description: '',
salary: '',
location: '',
company: {
name: '',
description: '',
contactEmail: '',
contactPhone: ''
}
});
const handleSubmit = async () => {
const newJob = {
title: form.title,
type: form.type,
location: form.location,
description: form.description,
salary: form.salary,
company: {
name: form.company.name,
description: form.company.description,
contactEmail: form.company.contactEmail,
contactPhone: form.company.contactPhone,
}
};
try {
const response = await axios.post(`/api/jobs`, newJob);
// @todo - show toast
router.push(`/jobs/${response.data.id}`);
} catch (error) {
console.error('Error fetching job', error);
// @todo - show toast
}
};
</script>
<template>
<section class="bg-green-50">
<div class="container m-auto max-w-2xl py-24">
<div
class="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
>
<form @submit.prevent="handleSubmit">
<h2 class="text-3xl text-center font-semibold mb-6">Add Job</h2>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Job Type</label
>
<select
v-model="form.type"
id="type"
name="type"
class="border rounded w-full py-2 px-3"
required
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2"
>Job Listing Name</label
>
<input
v-model="form.title"
type="text"
id="name"
name="name"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
/>
</div>
<div class="mb-4">
<label
for="description"
class="block text-gray-700 font-bold mb-2"
>Description</label
>
<textarea
v-model="form.description"
id="description"
name="description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
></textarea>
</div>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Salary</label
>
<select
v-model="form.salary"
id="salary"
name="salary"
class="border rounded w-full py-2 px-3"
required
>
<option value="Under $50K">under $50K</option>
<option value="$50K - $60K">$50 - $60K</option>
<option value="$60K - $70K">$60 - $70K</option>
<option value="$70K - $80K">$70 - $80K</option>
<option value="$80K - $90K">$80 - $90K</option>
<option value="$90K - $100K">$90 - $100K</option>
<option value="$100K - $125K">$100 - $125K</option>
<option value="$125K - $150K">$125 - $150K</option>
<option value="$150K - $175K">$150 - $175K</option>
<option value="$175K - $200K">$175 - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">
Location
</label>
<input
v-model="form.location"
type="text"
id="location"
name="location"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="Company Location"
required
/>
</div>
<h3 class="text-2xl mb-5">Company Info</h3>
<div class="mb-4">
<label for="company" class="block text-gray-700 font-bold mb-2"
>Company Name</label
>
<input
v-model="form.company.name"
type="text"
id="company"
name="company"
class="border rounded w-full py-2 px-3"
placeholder="Company Name"
/>
</div>
<div class="mb-4">
<label
for="company_description"
class="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
v-model="form.company.description"
id="company_description"
name="company_description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
></textarea>
</div>
<div class="mb-4">
<label
for="contact_email"
class="block text-gray-700 font-bold mb-2"
>Contact Email</label
>
<input
v-model="form.company.contactEmail"
type="email"
id="contact_email"
name="contact_email"
class="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
/>
</div>
<div class="mb-4">
<label
for="contact_phone"
class="block text-gray-700 font-bold mb-2"
>Contact Phone</label
>
<input
v-model="form.company.contactPhone"
type="tel"
id="contact_phone"
name="contact_phone"
class="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
/>
</div>
<div>
<button
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Add Job
</button>
</div>
</form>
</div>
</div>
</section>
</template>
// src/views/JobView.vue
<script setup>
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import BackButton from '@/components/BackButton.vue';
import { reactive, onMounted } from 'vue';
import { useRoute, RouterLink } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const jobId = route.params.id;
const state = reactive({
job: {},
isLoading: true
});
onMounted(async () => {
try {
const response = await axios.get(`/api/jobs/${jobId}`);
state.job = response.data;
} catch (error) {
console.error('Error fetching job', error);
} finally {
state.isLoading = false;
}
});
</script>
<template>
<BackButton />
<section v-if="!state.isLoading" class="bg-green-50">
<div class="container m-auto py-10 px-6">
<div class="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
<main>
<div
class="bg-white p-6 rounded-lg shadow-md text-center md:text-left"
>
<div class="text-gray-500 mb-4">{{ state.job.type }}</div>
<h1 class="text-3xl font-bold mb-4">{{ state.job.title }}</h1>
<div
class="text-gray-500 mb-4 flex align-middle justify-center md:justify-start"
>
<i
class="pi pi-map-marker text-xl text-orange-700 mr-2"
></i>
<p class="text-orange-700">{{ state.job.location }}</p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-green-800 text-lg font-bold mb-6">
Job Description
</h3>
<p class="mb-4">
{{ state.job.description }}
</p>
<h3 class="text-green-800 text-lg font-bold mb-2">Salary</h3>
<p class="mb-4">{{ state.job.salary }} / Year</p>
</div>
</main>
<!-- Sidebar -->
<aside>
<!-- Company Info -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-6">Company Info</h3>
<h2 class="text-2xl">{{ state.job.company.name }}</h2>
<p class="my-2">
{{ state.job.company.description }}
</p>
<hr class="my-4" />
<h3 class="text-xl">Contact Email:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">
{{ state.job.company.contactEmail }}
</p>
<h3 class="text-xl">Contact Phone:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">{{ state.job.company.contactPhone }}</p>
</div>
<!-- Manage -->
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-xl font-bold mb-6">Manage Job</h3>
<RouterLink
:to="`/jobs/edit/${state.job.id}`"
class="bg-green-500 hover:bg-green-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>Edit Job</RouterLink
>
<button
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>
Delete Job
</button>
</div>
</aside>
</div>
</div>
</section>
<div v-else class="text-center text-gray-500 py-6">
<PulseLoader />
</div>
</template>
Toast Notifications
- 安裝 vue-toastification 套件
npm i vue-toastification@next - 修改 main.js 檔案
- 修改 AddJobView.vue 檔案
- 測試表單送出後彈跳訊息是否能正常運作
// src/main.js
import './assets/main.css'
import 'primeicons/primeicons.css'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'
import router from './router'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.use(Toast)
app.mount('#app')
// src/views/AddJobView.vue
<script setup>
import router from '@/router';
import { reactive } from 'vue';
import { useToast } from 'vue-toastification';
import axios from 'axios';
const form = reactive({
type: 'Full-Time',
title: '',
description: '',
salary: '',
location: '',
company: {
name: '',
description: '',
contactEmail: '',
contactPhone: ''
}
});
const toast = useToast();
const handleSubmit = async () => {
const newJob = {
title: form.title,
type: form.type,
location: form.location,
description: form.description,
salary: form.salary,
company: {
name: form.company.name,
description: form.company.description,
contactEmail: form.company.contactEmail,
contactPhone: form.company.contactPhone,
}
};
try {
const response = await axios.post(`/api/jobs`, newJob);
toast.success('Job Added Successfully');
router.push(`/jobs/${response.data.id}`);
} catch (error) {
console.error('Error fetching job', error);
toast.error('Job Was Not Added');
}
};
</script>
<template>
<section class="bg-green-50">
<div class="container m-auto max-w-2xl py-24">
<div
class="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
>
<form @submit.prevent="handleSubmit">
<h2 class="text-3xl text-center font-semibold mb-6">Add Job</h2>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Job Type</label
>
<select
v-model="form.type"
id="type"
name="type"
class="border rounded w-full py-2 px-3"
required
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2"
>Job Listing Name</label
>
<input
v-model="form.title"
type="text"
id="name"
name="name"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
/>
</div>
<div class="mb-4">
<label
for="description"
class="block text-gray-700 font-bold mb-2"
>Description</label
>
<textarea
v-model="form.description"
id="description"
name="description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
></textarea>
</div>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Salary</label
>
<select
v-model="form.salary"
id="salary"
name="salary"
class="border rounded w-full py-2 px-3"
required
>
<option value="Under $50K">under $50K</option>
<option value="$50K - $60K">$50 - $60K</option>
<option value="$60K - $70K">$60 - $70K</option>
<option value="$70K - $80K">$70 - $80K</option>
<option value="$80K - $90K">$80 - $90K</option>
<option value="$90K - $100K">$90 - $100K</option>
<option value="$100K - $125K">$100 - $125K</option>
<option value="$125K - $150K">$125 - $150K</option>
<option value="$150K - $175K">$150 - $175K</option>
<option value="$175K - $200K">$175 - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">
Location
</label>
<input
v-model="form.location"
type="text"
id="location"
name="location"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="Company Location"
required
/>
</div>
<h3 class="text-2xl mb-5">Company Info</h3>
<div class="mb-4">
<label for="company" class="block text-gray-700 font-bold mb-2"
>Company Name</label
>
<input
v-model="form.company.name"
type="text"
id="company"
name="company"
class="border rounded w-full py-2 px-3"
placeholder="Company Name"
/>
</div>
<div class="mb-4">
<label
for="company_description"
class="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
v-model="form.company.description"
id="company_description"
name="company_description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
></textarea>
</div>
<div class="mb-4">
<label
for="contact_email"
class="block text-gray-700 font-bold mb-2"
>Contact Email</label
>
<input
v-model="form.company.contactEmail"
type="email"
id="contact_email"
name="contact_email"
class="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
/>
</div>
<div class="mb-4">
<label
for="contact_phone"
class="block text-gray-700 font-bold mb-2"
>Contact Phone</label
>
<input
v-model="form.company.contactPhone"
type="tel"
id="contact_phone"
name="contact_phone"
class="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
/>
</div>
<div>
<button
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Add Job
</button>
</div>
</form>
</div>
</div>
</section>
</template>
Delete Job
- 修改 JobView.vue 檔案
// src/views/JobView.vue
<script setup>
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import BackButton from '@/components/BackButton.vue';
import { reactive, onMounted } from 'vue';
import { useRoute, RouterLink, useRouter } from 'vue-router';
import { useToast } from 'vue-toastification';
import axios from 'axios';
const route = useRoute();
const router = useRouter();
const toast = useToast();
const jobId = route.params.id;
const state = reactive({
job: {},
isLoading: true
});
const deleteJob = async () => {
try {
const confirm = window.confirm('Are you sure you want to delete this job?');
if (confirm) {
await axios.delete(`/api/jobs/${jobId}`);
toast.success('Job Deleted Successfully');
router.push('/jobs');
}
} catch (error) {
console.error('Error deleting job', error);
toast.error('Job Not Deleted');
}
}
onMounted(async () => {
try {
const response = await axios.get(`/api/jobs/${jobId}`);
state.job = response.data;
} catch (error) {
console.error('Error fetching job', error);
} finally {
state.isLoading = false;
}
});
</script>
<template>
<BackButton />
<section v-if="!state.isLoading" class="bg-green-50">
<div class="container m-auto py-10 px-6">
<div class="grid grid-cols-1 md:grid-cols-70/30 w-full gap-6">
<main>
<div
class="bg-white p-6 rounded-lg shadow-md text-center md:text-left"
>
<div class="text-gray-500 mb-4">{{ state.job.type }}</div>
<h1 class="text-3xl font-bold mb-4">{{ state.job.title }}</h1>
<div
class="text-gray-500 mb-4 flex align-middle justify-center md:justify-start"
>
<i
class="pi pi-map-marker text-xl text-orange-700 mr-2"
></i>
<p class="text-orange-700">{{ state.job.location }}</p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-green-800 text-lg font-bold mb-6">
Job Description
</h3>
<p class="mb-4">
{{ state.job.description }}
</p>
<h3 class="text-green-800 text-lg font-bold mb-2">Salary</h3>
<p class="mb-4">{{ state.job.salary }} / Year</p>
</div>
</main>
<!-- Sidebar -->
<aside>
<!-- Company Info -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-bold mb-6">Company Info</h3>
<h2 class="text-2xl">{{ state.job.company.name }}</h2>
<p class="my-2">
{{ state.job.company.description }}
</p>
<hr class="my-4" />
<h3 class="text-xl">Contact Email:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">
{{ state.job.company.contactEmail }}
</p>
<h3 class="text-xl">Contact Phone:</h3>
<p class="my-2 bg-green-100 p-2 font-bold">{{ state.job.company.contactPhone }}</p>
</div>
<!-- Manage -->
<div class="bg-white p-6 rounded-lg shadow-md mt-6">
<h3 class="text-xl font-bold mb-6">Manage Job</h3>
<RouterLink
:to="`/jobs/edit/${state.job.id}`"
class="bg-green-500 hover:bg-green-600 text-white text-center font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>Edit Job</RouterLink
>
<button @click="deleteJob"
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>
Delete Job
</button>
</div>
</aside>
</div>
</div>
</section>
<div v-else class="text-center text-gray-500 py-6">
<PulseLoader />
</div>
</template>
Edit Page
- 在 views 資料夾裡面建立 EditJobView.vue 檔案
- 修改 EditJobView.vue 檔案
- 修改 index.js 檔案
- 到 views 資料夾裡面的 AddJobView.vue 檔案複製相關程式碼
- 修改 EditJobView.vue 檔案，把複製的程式碼貼上，然後做修改
// src/views/EditJobView.vue
<script setup>
import router from '@/router';
import { reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useToast } from 'vue-toastification';
import axios from 'axios';
const route = useRoute();
const router = useRouter();
const jobId = route.params.id;
const form = reactive({
type: 'Full-Time',
title: '',
description: '',
salary: '',
location: '',
company: {
name: '',
description: '',
contactEmail: '',
contactPhone: ''
}
});
const state = reactive({
job: {},
isLoading: true
});
const toast = useToast();
const handleSubmit = async () => {
const newJob = {
title: form.title,
type: form.type,
location: form.location,
description: form.description,
salary: form.salary,
company: {
name: form.company.name,
description: form.company.description,
contactEmail: form.company.contactEmail,
contactPhone: form.company.contactPhone,
}
};
try {
const response = await axios.post(`/api/jobs`, newJob);
toast.success('Job Added Successfully');
router.push(`/jobs/${response.data.id}`);
} catch (error) {
console.error('Error fetching job', error);
toast.error('Job Was Not Added');
}
};
</script>
<template>
<section class="bg-green-50">
<div class="container m-auto max-w-2xl py-24">
<div
class="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
>
<form @submit.prevent="handleSubmit">
<h2 class="text-3xl text-center font-semibold mb-6">Edit Job</h2>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Job Type</label
>
<select
v-model="form.type"
id="type"
name="type"
class="border rounded w-full py-2 px-3"
required
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2"
>Job Listing Name</label
>
<input
v-model="form.title"
type="text"
id="name"
name="name"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
/>
</div>
<div class="mb-4">
<label
for="description"
class="block text-gray-700 font-bold mb-2"
>Description</label
>
<textarea
v-model="form.description"
id="description"
name="description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
></textarea>
</div>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Salary</label
>
<select
v-model="form.salary"
id="salary"
name="salary"
class="border rounded w-full py-2 px-3"
required
>
<option value="Under $50K">under $50K</option>
<option value="$50K - $60K">$50 - $60K</option>
<option value="$60K - $70K">$60 - $70K</option>
<option value="$70K - $80K">$70 - $80K</option>
<option value="$80K - $90K">$80 - $90K</option>
<option value="$90K - $100K">$90 - $100K</option>
<option value="$100K - $125K">$100 - $125K</option>
<option value="$125K - $150K">$125 - $150K</option>
<option value="$150K - $175K">$150 - $175K</option>
<option value="$175K - $200K">$175 - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">
Location
</label>
<input
v-model="form.location"
type="text"
id="location"
name="location"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="Company Location"
required
/>
</div>
<h3 class="text-2xl mb-5">Company Info</h3>
<div class="mb-4">
<label for="company" class="block text-gray-700 font-bold mb-2"
>Company Name</label
>
<input
v-model="form.company.name"
type="text"
id="company"
name="company"
class="border rounded w-full py-2 px-3"
placeholder="Company Name"
/>
</div>
<div class="mb-4">
<label
for="company_description"
class="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
v-model="form.company.description"
id="company_description"
name="company_description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
></textarea>
</div>
<div class="mb-4">
<label
for="contact_email"
class="block text-gray-700 font-bold mb-2"
>Contact Email</label
>
<input
v-model="form.company.contactEmail"
type="email"
id="contact_email"
name="contact_email"
class="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
/>
</div>
<div class="mb-4">
<label
for="contact_phone"
class="block text-gray-700 font-bold mb-2"
>Contact Phone</label
>
<input
v-model="form.company.contactPhone"
type="tel"
id="contact_phone"
name="contact_phone"
class="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
/>
</div>
<div>
<button
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Update Job
</button>
</div>
</form>
</div>
</div>
</section>
</template>
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import JobsView from '@/views/JobsView.vue';
import NotFoundView from '@/views/NotFoundView.vue';
import JobView from '@/views/JobView.vue';
import AddJobView from '@/views/AddJobView.vue';
import EditJobView from '@/views/EditJobView.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/jobs',
name: 'jobs',
component: JobsView
},
{
path: '/jobs/:id',
name: 'job',
component: JobView
},
{
path: '/jobs/add',
name: 'add-job',
component: AddJobView,
},
{
path: '/jobs/edit/:id',
name: 'edit-job',
component: EditJobView,
},
{
path: '/:catchAll(.*)',
name: 'not-found',
component: NotFoundView
},
]
});
export default router;
Fetch Job To Edit
- 修改 EditJobView.vue 檔案
// src/views/EditJobView.vue
<script setup>
import router from '@/router';
import { reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useToast } from 'vue-toastification';
import axios from 'axios';
const route = useRoute();
const jobId = route.params.id;
const form = reactive({
type: 'Full-Time',
title: '',
description: '',
salary: '',
location: '',
company: {
name: '',
description: '',
contactEmail: '',
contactPhone: ''
}
});
const state = reactive({
job: {},
isLoading: true
});
const toast = useToast();
const handleSubmit = async () => {
const newJob = {
title: form.title,
type: form.type,
location: form.location,
description: form.description,
salary: form.salary,
company: {
name: form.company.name,
description: form.company.description,
contactEmail: form.company.contactEmail,
contactPhone: form.company.contactPhone,
}
};
try {
const response = await axios.post(`/api/jobs`, newJob);
toast.success('Job Added Successfully');
router.push(`/jobs/${response.data.id}`);
} catch (error) {
console.error('Error fetching job', error);
toast.error('Job Was Not Added');
}
};
onMounted(async () => {
try {
const response = await axios.get(`/api/jobs/${jobId}`);
state.job = response.data;
// Populate inputs
form.type = state.job.type;
form.title = state.job.title;
form.description = state.job.description;
form.salary = state.job.salary;
form.location = state.job.location;
form.company.name = state.job.company.name;
form.company.description = state.job.company.description;
form.company.contactEmail = state.job.company.contactEmail;
form.company.contactPhone = state.job.company.contactPhone;
} catch (error) {
console.error('Error fetching job', error);
} finally {
state.isLoading = false;
}
});
</script>
<template>
<section class="bg-green-50">
<div class="container m-auto max-w-2xl py-24">
<div
class="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
>
<form @submit.prevent="handleSubmit">
<h2 class="text-3xl text-center font-semibold mb-6">Edit Job</h2>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Job Type</label
>
<select
v-model="form.type"
id="type"
name="type"
class="border rounded w-full py-2 px-3"
required
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2"
>Job Listing Name</label
>
<input
v-model="form.title"
type="text"
id="name"
name="name"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
/>
</div>
<div class="mb-4">
<label
for="description"
class="block text-gray-700 font-bold mb-2"
>Description</label
>
<textarea
v-model="form.description"
id="description"
name="description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
></textarea>
</div>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Salary</label
>
<select
v-model="form.salary"
id="salary"
name="salary"
class="border rounded w-full py-2 px-3"
required
>
<option value="Under $50K">under $50K</option>
<option value="$50K - $60K">$50 - $60K</option>
<option value="$60K - $70K">$60 - $70K</option>
<option value="$70K - $80K">$70 - $80K</option>
<option value="$80K - $90K">$80 - $90K</option>
<option value="$90K - $100K">$90 - $100K</option>
<option value="$100K - $125K">$100 - $125K</option>
<option value="$125K - $150K">$125 - $150K</option>
<option value="$150K - $175K">$150 - $175K</option>
<option value="$175K - $200K">$175 - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">
Location
</label>
<input
v-model="form.location"
type="text"
id="location"
name="location"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="Company Location"
required
/>
</div>
<h3 class="text-2xl mb-5">Company Info</h3>
<div class="mb-4">
<label for="company" class="block text-gray-700 font-bold mb-2"
>Company Name</label
>
<input
v-model="form.company.name"
type="text"
id="company"
name="company"
class="border rounded w-full py-2 px-3"
placeholder="Company Name"
/>
</div>
<div class="mb-4">
<label
for="company_description"
class="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
v-model="form.company.description"
id="company_description"
name="company_description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
></textarea>
</div>
<div class="mb-4">
<label
for="contact_email"
class="block text-gray-700 font-bold mb-2"
>Contact Email</label
>
<input
v-model="form.company.contactEmail"
type="email"
id="contact_email"
name="contact_email"
class="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
/>
</div>
<div class="mb-4">
<label
for="contact_phone"
class="block text-gray-700 font-bold mb-2"
>Contact Phone</label
>
<input
v-model="form.company.contactPhone"
type="tel"
id="contact_phone"
name="contact_phone"
class="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
/>
</div>
<div>
<button
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Update Job
</button>
</div>
</form>
</div>
</div>
</section>
</template>
Update Job
- 修改 EditJobView.vue 檔案
- 測試更新資料功能是否正常運行
// src/views/EditJobView.vue
<script setup>
import router from '@/router';
import { reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useToast } from 'vue-toastification';
import axios from 'axios';
const route = useRoute();
const jobId = route.params.id;
const form = reactive({
type: 'Full-Time',
title: '',
description: '',
salary: '',
location: '',
company: {
name: '',
description: '',
contactEmail: '',
contactPhone: ''
}
});
const state = reactive({
job: {},
isLoading: true
});
const toast = useToast();
const handleSubmit = async () => {
const updatedJob = {
title: form.title,
type: form.type,
location: form.location,
description: form.description,
salary: form.salary,
company: {
name: form.company.name,
description: form.company.description,
contactEmail: form.company.contactEmail,
contactPhone: form.company.contactPhone,
}
};
try {
const response = await axios.put(`/api/jobs/${jobId}`, updatedJob);
toast.success('Job Updated Successfully');
router.push(`/jobs/${response.data.id}`);
} catch (error) {
console.error('Error fetching job', error);
toast.error('Job Was Not Updated');
}
};
onMounted(async () => {
try {
const response = await axios.get(`/api/jobs/${jobId}`);
state.job = response.data;
// Populate inputs
form.type = state.job.type;
form.title = state.job.title;
form.description = state.job.description;
form.salary = state.job.salary;
form.location = state.job.location;
form.company.name = state.job.company.name;
form.company.description = state.job.company.description;
form.company.contactEmail = state.job.company.contactEmail;
form.company.contactPhone = state.job.company.contactPhone;
} catch (error) {
console.error('Error fetching job', error);
} finally {
state.isLoading = false;
}
});
</script>
<template>
<section class="bg-green-50">
<div class="container m-auto max-w-2xl py-24">
<div
class="bg-white px-6 py-8 mb-4 shadow-md rounded-md border m-4 md:m-0"
>
<form @submit.prevent="handleSubmit">
<h2 class="text-3xl text-center font-semibold mb-6">Edit Job</h2>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Job Type</label
>
<select
v-model="form.type"
id="type"
name="type"
class="border rounded w-full py-2 px-3"
required
>
<option value="Full-Time">Full-Time</option>
<option value="Part-Time">Part-Time</option>
<option value="Remote">Remote</option>
<option value="Internship">Internship</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2"
>Job Listing Name</label
>
<input
v-model="form.title"
type="text"
id="name"
name="name"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="eg. Beautiful Apartment In Miami"
required
/>
</div>
<div class="mb-4">
<label
for="description"
class="block text-gray-700 font-bold mb-2"
>Description</label
>
<textarea
v-model="form.description"
id="description"
name="description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="Add any job duties, expectations, requirements, etc"
></textarea>
</div>
<div class="mb-4">
<label for="type" class="block text-gray-700 font-bold mb-2"
>Salary</label
>
<select
v-model="form.salary"
id="salary"
name="salary"
class="border rounded w-full py-2 px-3"
required
>
<option value="Under $50K">under $50K</option>
<option value="$50K - $60K">$50 - $60K</option>
<option value="$60K - $70K">$60 - $70K</option>
<option value="$70K - $80K">$70 - $80K</option>
<option value="$80K - $90K">$80 - $90K</option>
<option value="$90K - $100K">$90 - $100K</option>
<option value="$100K - $125K">$100 - $125K</option>
<option value="$125K - $150K">$125 - $150K</option>
<option value="$150K - $175K">$150 - $175K</option>
<option value="$175K - $200K">$175 - $200K</option>
<option value="Over $200K">Over $200K</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">
Location
</label>
<input
v-model="form.location"
type="text"
id="location"
name="location"
class="border rounded w-full py-2 px-3 mb-2"
placeholder="Company Location"
required
/>
</div>
<h3 class="text-2xl mb-5">Company Info</h3>
<div class="mb-4">
<label for="company" class="block text-gray-700 font-bold mb-2"
>Company Name</label
>
<input
v-model="form.company.name"
type="text"
id="company"
name="company"
class="border rounded w-full py-2 px-3"
placeholder="Company Name"
/>
</div>
<div class="mb-4">
<label
for="company_description"
class="block text-gray-700 font-bold mb-2"
>Company Description</label
>
<textarea
v-model="form.company.description"
id="company_description"
name="company_description"
class="border rounded w-full py-2 px-3"
rows="4"
placeholder="What does your company do?"
></textarea>
</div>
<div class="mb-4">
<label
for="contact_email"
class="block text-gray-700 font-bold mb-2"
>Contact Email</label
>
<input
v-model="form.company.contactEmail"
type="email"
id="contact_email"
name="contact_email"
class="border rounded w-full py-2 px-3"
placeholder="Email address for applicants"
required
/>
</div>
<div class="mb-4">
<label
for="contact_phone"
class="block text-gray-700 font-bold mb-2"
>Contact Phone</label
>
<input
v-model="form.company.contactPhone"
type="tel"
id="contact_phone"
name="contact_phone"
class="border rounded w-full py-2 px-3"
placeholder="Optional phone for applicants"
/>
</div>
<div>
<button
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline"
type="submit"
>
Update Job
</button>
</div>
</form>
</div>
</div>
</section>
</template>
Netlify Deployment
- 講解如何發布程式碼到 Netlify 網站