示範用 API:vue3-course-api.hexschool.io/v2/api/casper-hexschool/products/all
// .env
VITE_APP_URL=https://vue3-course-api.hexschool.io/
VITE_APP_PATH=casper-hexschool
<template>
<h1>This is About page.</h1>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<div >
<ul style="min-height:100px">
<li v-for="product in products" :key="product.id">
<h3>{{ product.title }}</h3>
<img :src="product.imageUrl" width="200" alt="">
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
const { VITE_APP_URL, VITE_APP_PATH } = import.meta.env
export default {
data () {
return {
products: []
}
},
methods: {
getProducts () {
axios.get(`${VITE_APP_URL}/v2/api/${VITE_APP_PATH}/products/all`)
.then((res) => {
this.products = res.data.products
})
}
},
mounted () {
this.getProducts()
}
}
</script>
<style scoped>
</style>
Swal.fire({
title: '新增產品資訊',
input: 'text',
confirmButtonText: '儲存',
inputPlaceholder: '請輸入產品資訊'
}).then((result) => {
console.log(result)
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
Swal.fire('Saved!', '', 'success')
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
})
<template>
<h1>This is About page.</h1>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<div>
<input type="button" @click="getProducts" value="取得所有產品資料">
<ul>
<li v-for="product in products" :key="product.id">
<h3>{{ product.title }}</h3>
<img :src="product.imageUrl" width="200" alt="">
</li>
</ul>
</div>
</template>
<script>
import Swal from 'sweetalert2'
import axios from 'axios'
const { VITE_APP_URL, VITE_APP_PATH } = import.meta.env
export default {
data () {
return {
products: []
}
},
methods: {
getProducts () {
axios.get(`${VITE_APP_URL}/v2/api/${VITE_APP_PATH}/products/all`)
.then((res) => {
this.products = res.data.products
Swal.fire('成功取得產品資訊')
})
}
}
}
</script>
<style scoped>
</style>
<template>
<h1>This is About page.</h1>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<div >
<loading v-model:active="isLoading"
:can-cancel="true"
:color="color"
:on-cancel="onCancel"
:is-full-page="fullPage"/>
<ul style="min-height:100px">
<li v-for="product in products" :key="product.id">
<h3>{{ product.title }}</h3>
<img :src="product.imageUrl" width="200" alt="">
</li>
</ul>
</div>
</template>
<script>
import Swal from 'sweetalert2'
import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/css/index.css'
import axios from 'axios'
const { VITE_APP_URL, VITE_APP_PATH } = import.meta.env
export default {
data () {
return {
color: '#ff0000',
products: [],
isLoading: false,
fullPage: true
}
},
components: {
Loading
},
methods: {
getProducts () {
axios.get(`${VITE_APP_URL}/v2/api/${VITE_APP_PATH}/products/all`)
.then((res) => {
this.products = res.data.products
this.isLoading = false
Swal.fire({
title: '載入成功!',
icon: 'success',
confirmButtonText: '確定'
})
})
}
},
mounted () {
this.isLoading = true
setTimeout(() => {
this.getProducts()
}, 5000)
}
}
</script>
<style scoped>
</style>
import { createApp } from 'vue'
import { LoadingPlugin } from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/css/index.css'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(LoadingPlugin, {
color: '#FF0000'
})
app.use(router)
app.mount('#app')
<template>
<h1>This is About page.</h1>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<div >
<ul style="min-height:100px" class="vl-parent"
ref="formContainer">
<li v-for="product in products" :key="product.id">
<h3>{{ product.title }}</h3>
<img :src="product.imageUrl" width="200" alt="">
</li>
</ul>
</div>
</template>
<script>
import Swal from 'sweetalert2'
import axios from 'axios'
const { VITE_APP_URL, VITE_APP_PATH } = import.meta.env
export default {
data () {
return {
fullPage: false,
products: []
}
},
methods: {
getProducts () {
const loader = this.$loading.show({
// Optional parameters
container: this.fullPage ? null : this.$refs.formContainer,
canCancel: true,
onCancel: this.onCancel
})
setTimeout(() => {
axios.get(`${VITE_APP_URL}/v2/api/${VITE_APP_PATH}/products/all`)
.then((res) => {
this.products = res.data.products
loader.hide()
Swal.fire({
title: '載入成功!',
icon: 'success',
confirmButtonText: '確定'
})
})
}, 3000)
}
},
mounted () {
this.getProducts()
}
}
</script>
<style scoped>
</style>
<template>
<h1>This is About page.</h1>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<div><input type="button" value="手動取得購物車" @click="getMore()">
<img src="../assets/loading.gif" width="20" alt="loading" v-if="isLoading" >
</div>
<div >
<ul style="min-height:100px" class="vl-parent"
ref="formContainer">
<li v-for="product in products" :key="product.id">
<h3>{{ product.title }}</h3>
<img :src="product.imageUrl" width="200" alt="">
</li>
</ul>
</div>
</template>
<script>
import Swal from 'sweetalert2'
import axios from 'axios'
const { VITE_APP_URL, VITE_APP_PATH } = import.meta.env
export default {
data () {
return {
isLoading: false,
products: []
}
},
methods: {
getMore () {
this.isLoading = true
setTimeout(() => {
axios.get(`${VITE_APP_URL}/v2/api/${VITE_APP_PATH}/products/all`)
.then((res) => {
this.products = res.data.products
this.isLoading = false
Swal.fire({
title: '載入成功!',
icon: 'success',
confirmButtonText: '確定'
})
})
}, 3000)
}
}
}
</script>
<style scoped>
</style>
使用 Discord、ZOOM、GoogleMeet 來討論,組員沒麥克風也可以一個人分享畫面,其他組員用文字討論,解答此問題集
Jun 8, 2025(提示:記得更改直播成今天日期、確認 tags 是否正確,沒問題後這一行可以刪除)
Jun 6, 2025影音課程連結:https://courses.hexschool.com/courses/enrolled/2522456
Jun 6, 2025同學們好,感謝您註冊程式勇者村系統(以下簡稱 RPG),為了方便管理,我們於 2024 年全新改版升級系統,RPG 整合了 Teachable 第三方帳號登入了!接下來,請依照以下指示使用 Teachable 帳號登入 RPG。
Jun 4, 2025or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up