添加课程列表大体框架
This commit is contained in:
parent
f45e9e3fe7
commit
746be7afe0
100
package-lock.json
generated
100
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "itbaima-child-program-client",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"axios": "^1.7.7",
|
||||
"pinia": "^2.2.6",
|
||||
"vue": "^3.5.12",
|
||||
"vue-router": "^4.4.5"
|
||||
@ -839,12 +840,50 @@
|
||||
"integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.7.7",
|
||||
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.7.tgz",
|
||||
"integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
|
||||
@ -902,6 +941,40 @@
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.9",
|
||||
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
|
||||
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
|
||||
@ -926,6 +999,27 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
|
||||
@ -1030,6 +1124,12 @@
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.24.4",
|
||||
"resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.24.4.tgz",
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.7",
|
||||
"pinia": "^2.2.6",
|
||||
"vue": "^3.5.12",
|
||||
"vue-router": "^4.4.5"
|
||||
|
||||
@ -5,7 +5,7 @@ import {useHeaderSticky} from "@/utils/common.js";
|
||||
const routes = [
|
||||
{ name: '首页', route: "/" },
|
||||
{ name: '课程列表', children: [
|
||||
{ name: '购买课程', route: '' },
|
||||
{ name: '购买课程', route: '/course/list' },
|
||||
{ name: '充值会员', route: '' }
|
||||
]
|
||||
},
|
||||
|
||||
59
src/components/course/CourseBreadcrumb.vue
Normal file
59
src/components/course/CourseBreadcrumb.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<script setup>
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
defineProps({
|
||||
courseCount: Number,
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="breadcrumb-area relative">
|
||||
<div class="container h-100">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="col-12">
|
||||
<div class="breadcrumb-conetnt">
|
||||
<ul class="bread-list">
|
||||
<li>首页</li>
|
||||
<li><i class="icon-down-arrow-11"></i></li>
|
||||
<li>课程</li>
|
||||
<li><i class="icon-down-arrow-11"></i></li>
|
||||
<li>所有课程列表</li>
|
||||
</ul>
|
||||
<h4>所有课程列表</h4>
|
||||
<p>欢迎选购我们为小朋友精心准备的编程课程，让小朋友在学习过程中发现更多精彩</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter Search -->
|
||||
<div class="grid-filter-area relative">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Filter -->
|
||||
<div class="grid-filter-search relative d-flex align-items-center justify-content-between">
|
||||
<div class="grid-filter-btn d-flex align-items-center">
|
||||
<div class="grid-filter-btn-list">
|
||||
<button class="grid-btn boxButton toggle-btn" @click="router.push('/course/grid')">
|
||||
<i class="icon-mingcute_grid-line"></i>
|
||||
<span>表格查看</span></button>
|
||||
<button class="list-btn" @click="router.push('/course/list')">
|
||||
<i class="icon-cil_list"></i>
|
||||
<span>列表查看</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="mb-0">已上架 {{ courseCount }} 个编程课程，欢迎选购</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -7,6 +7,20 @@ const router = createRouter({
|
||||
path: '',
|
||||
name: 'welcome',
|
||||
component: () => import('@/views/Welcome.vue'),
|
||||
}, {
|
||||
path: '/course',
|
||||
name: 'course',
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'course-list',
|
||||
component: () => import('@/views/course/CourseList.vue')
|
||||
}, {
|
||||
path: 'grid',
|
||||
name: 'course-grid',
|
||||
component: () => import('@/views/course/CourseGrid.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
})
|
||||
|
||||
3
src/utils/data.js
Normal file
3
src/utils/data.js
Normal file
@ -0,0 +1,3 @@
|
||||
export function createRandomInt() {
|
||||
return Math.floor(Math.random() * 100)
|
||||
}
|
||||
101
src/views/course/CourseGrid.vue
Normal file
101
src/views/course/CourseGrid.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
import CourseBreadcrumb from "@/components/course/CourseBreadcrumb.vue";
|
||||
import axios from "axios";
|
||||
import {ref} from "vue";
|
||||
import {createRandomInt} from "../../utils/data.js";
|
||||
|
||||
const data = ref([])
|
||||
|
||||
axios.get('http://localhost:8080/system/course/list').then((res) => {
|
||||
data.value = res.data.rows
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<course-breadcrumb :course-count="data.length"/>
|
||||
<div class="featured-course-4-area single-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Single Card -->
|
||||
<div class="col-md-6 col-lg-4" v-for="course in data">
|
||||
<div class="course-card-4-area">
|
||||
<!-- Shape -->
|
||||
<div class="care-shape-4 wow fadeInDown" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInDown;">
|
||||
<img src="@/assets/img/bg-img/home-2/care-shap.png" alt="">
|
||||
</div>
|
||||
<div class="course-img-4 bg-img" style="background-image: url(@/assets/img/bg-img/home-4/shape-2.png);">
|
||||
<div class="course-sub-title">
|
||||
<h6>主讲老师 {{ course.teacher }}</h6>
|
||||
</div>
|
||||
<div class="course-title-img">
|
||||
<img src="@/assets/img/bg-img/home-4/c-1.png" alt="">
|
||||
</div>
|
||||
<!-- Shape -->
|
||||
<div class="course-shape-4">
|
||||
<img src="@/assets/img/bg-img/home-4/shape-3.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="course-offer-4">
|
||||
<div class="offer-bg-shape relative">
|
||||
<img src="@/assets/img/bg-img/home-4/shape-4.png" alt="">
|
||||
</div>
|
||||
<div class="offer-content-4 ">
|
||||
<p>-20%</p>
|
||||
<span>Off</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="course-content-info-4">
|
||||
<div class="course-content-rating d-flex justify-content-between align-items-center">
|
||||
<p><i class="icon-star1"></i> 4.5 <span>(100 次购买)</span></p>
|
||||
<div class="ribbon-icon">
|
||||
<i class="icon-icon_ribbon_alt"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- info -->
|
||||
<div class="course-info-meta-4 d-flex align-items-center">
|
||||
<p><i class="icon-Home"></i> {{ createRandomInt() }} 名学生正在学习</p>
|
||||
<p><i class="icon-book-solid-1"></i> 共 {{ course.lessone }} 节课</p>
|
||||
</div>
|
||||
<h2><a href="course-details.html">{{ course.title }}</a></h2>
|
||||
<p class="course-desc-4">{{ course.about }}</p>
|
||||
<div class="auth-info-4 d-flex align-items-center">
|
||||
<img class="auth-img" src="@/assets/img/bg-img/home-4/c-2.png" alt="">
|
||||
<p>主讲老师 <a href="#">{{ course.teacher }}</a></p>
|
||||
</div>
|
||||
<!-- Price & Cart -->
|
||||
<div class="course-footer-4 d-flex align-items-center justify-content-between">
|
||||
<div class="course-price">
|
||||
<p>￥{{ (course.price * 0.9).toFixed(0) }} <span>￥{{ course.price }}</span></p>
|
||||
</div>
|
||||
<div class="course-buy">
|
||||
<p><a href="#"><i class="icon-icon_cart_alt"></i> <span>添加到购物车</span></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<div class="load-btn-area text-center mt-20">
|
||||
<a class="load-btn" href="#"><i class="icon-icon_document_alt"></i> 加载更多</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
76
src/views/course/CourseList.vue
Normal file
76
src/views/course/CourseList.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<script setup>
|
||||
import axios from "axios";
|
||||
import {ref} from "vue";
|
||||
import {createRandomInt} from "@/utils/data.js";
|
||||
import CourseBreadcrumb from "@/components/course/CourseBreadcrumb.vue";
|
||||
|
||||
const data = ref([])
|
||||
|
||||
axios.get('http://localhost:8080/system/course/list').then((res) => {
|
||||
data.value = res.data.rows
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<course-breadcrumb :course-count="data.length"/>
|
||||
<div class="featured-course-4-area single-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12" v-for="course in data">
|
||||
<div class="course-card-4-area course-list d-flex ">
|
||||
<div class="course-img-4 single">
|
||||
<div class="cr-img relative">
|
||||
<img src="@/assets/img/bg-img/inner/list-1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-content-info-4 single">
|
||||
<div class="course-content-rating d-flex justify-content-between align-items-center">
|
||||
<p><i class="icon-star1"></i> 4.5 <span>(100 次购买)</span></p>
|
||||
<div class="ribbon-icon">
|
||||
<i class="icon-icon_ribbon_alt"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h2><a href="course-details.html">{{ course.title }}</a></h2>
|
||||
<!-- info -->
|
||||
<div class="course-info-meta-4 d-flex align-items-center">
|
||||
<p><i class="icon-Home"></i> {{ createRandomInt() }} 名学生正在学习</p>
|
||||
<p><i class="icon-book-solid-1"></i>共 {{ course.lessone }} 节课</p>
|
||||
</div>
|
||||
<p class="course-desc-4">{{ course.about }}</p>
|
||||
<div class="auth-info-4 d-flex align-items-center">
|
||||
<img class="auth-img" src="@/assets/img/bg-img/home-4/c-2.png" alt="">
|
||||
<p>主讲老师 <a href="#">{{ course.teacher }}</a></p>
|
||||
</div>
|
||||
<!-- Price & Cart -->
|
||||
<div class="course-footer-4 d-flex align-items-center justify-content-between">
|
||||
<div class="course-price">
|
||||
<p>￥{{ (course.price * 0.9).toFixed(0) }} <span>￥{{ course.price }}</span></p>
|
||||
</div>
|
||||
<div class="course-buy">
|
||||
<p><a href="#">
|
||||
<i class="icon-icon_cart_alt"></i>
|
||||
<span>添加到购物车</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
|
||||
<div class="col-12">
|
||||
<div class="load-btn-area text-center mt-20">
|
||||
<a class="load-btn" href="all-course.html"><i class="icon-icon_document_alt"></i> 加载更多课程</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user