Vue+Node+MongoDB高级全栈开发---789it.top/14264/
Vue + Node + MongoDB 全栈开发课程介绍
我将为您设计一个展示全栈开发课程的响应式网页，包含课程介绍、技术栈展示、课程大纲和项目演示等功能。
设计思路
这个页面需要：
- 展示课程的核心价值和技术栈
- 提供清晰的课程大纲和项目演示
- 响应式设计，适配各种设备
- 使用Vue.js实现交互功能
下面是完整的实现代码：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue+Node+MongoDB 全栈开发课程</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 导航栏样式 */
header {
background: linear-gradient(135deg, #42b883 0%, #35495e 100%);
color: white;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
display: flex;
align-items: center;
}
.logo i {
margin-right: 10px;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.nav-links a:hover {
color: #e0f7fa;
}
.menu-toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
/* 英雄区域样式 */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
color: white;
padding: 6rem 0;
text-align: center;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 2rem;
}
.cta-button {
display: inline-block;
background: #42b883;
color: white;
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(66, 184, 131, 0.4);
}
.cta-button:hover {
background: #369b6f;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(66, 184, 131, 0.6);
}
/* 课程特色区域 */
.features {
padding: 5rem 0;
background-color: white;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
}
.section-title h2 {
font-size: 2.5rem;
color: #35495e;
margin-bottom: 1rem;
}
.section-title p {
color: #7f8c8d;
max-width: 700px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background: #f8f9fa;
border-radius: 10px;
padding: 2rem;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-top: 4px solid #42b883;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.feature-card i {
font-size: 3rem;
color: #42b883;
margin-bottom: 1.5rem;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #35495e;
}
/* 技术栈展示 */
.tech-stack {
padding: 5rem 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.tech-icons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
margin-top: 3rem;
}
.tech-item {
text-align: center;
background: white;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
width: 150px;
}
.tech-item:hover {
transform: scale(1.05);
}
.tech-item i {
font-size: 3rem;
margin-bottom: 1rem;
}
.tech-item.vue i {
color: #42b883;
}
.tech-item.node i {
color: #68a063;
}
.tech-item.mongo i {
color: #4db33d;
}
.tech-item.express i {
color: #000;
}
/* 课程大纲 */
.curriculum {
padding: 5rem 0;
background-color: white;
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.tab {
padding: 10px 20px;
background: #f8f9fa;
border: none;
border-radius: 30px;
margin: 0 10px 10px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.tab.active {
background: #42b883;
color: white;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.module-list {
list-style: none;
max-width: 800px;
margin: 0 auto;
}
.module-item {
background: #f8f9fa;
margin-bottom: 1rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.module-header {
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background: #e9ecef;
}
.module-header h3 {
margin: 0;
color: #35495e;
}
.module-content {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.module-content.active {
padding: 1.5rem;
max-height: 500px;
}
.module-content ul {
padding-left: 1.5rem;
}
.module-content li {
margin-bottom: 0.5rem;
}
/* 项目演示 */
.projects {
padding: 5rem 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.project-slider {
position: relative;
max-width: 900px;
margin: 0 auto;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.project-slides {
display: flex;
transition: transform 0.5s ease;
}
.project-slide {
min-width: 100%;
padding: 2rem;
background: white;
text-align: center;
}
.project-image {
height: 300px;
background-size: cover;
background-position: center;
border-radius: 8px;
margin-bottom: 1.5rem;
}
.project-slide h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: #35495e;
}
.slider-nav {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ccc;
margin: 0 5px;
cursor: pointer;
transition: background 0.3s ease;
}
.slider-dot.active {
background: #42b883;
}
/* 页脚 */
footer {
background: #35495e;
color: white;
padding: 3rem 0 1.5rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
margin-bottom: 1.5rem;
font-size: 1.3rem;
}
.footer-section ul {
list-style: none;
}
.footer-section li {
margin-bottom: 0.8rem;
}
.footer-section a {
color: #bdc3c7;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section a:hover {
color: #42b883;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.social-links a:hover {
background: #42b883;
transform: translateY(-3px);
}
.copyright {
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #bdc3c7;
font-size: 0.9rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.nav-links {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #35495e;
flex-direction: column;
align-items: center;
padding: 1rem 0;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: clip-path 0.3s ease;
}
.nav-links.active {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.nav-links li {
margin: 0.8rem 0;
}
.hero h1 {
font-size: 2.2rem;
}
.hero p {
font-size: 1rem;
}
.section-title h2 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div id="app">
<!-- 导航栏 -->
<header>
<div class="container">
<nav>
<div class="logo">
<i class="fas fa-code"></i>
<span>全栈开发者</span>
</div>
<div class="menu-toggle" @click="toggleMenu">
<i class="fas fa-bars"></i>
</div>
<ul class="nav-links" :class="{ active: menuActive }">
<li><a href="#features">课程特色</a></li>
<li><a href="#tech">技术栈</a></li>
<li><a href="#curriculum">课程大纲</a></li>
<li><a href="#projects">项目演示</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</div>
</header>
<!-- 英雄区域 -->
<section class="hero">
<div class="container">
<h1>Vue + Node + MongoDB 全栈开发</h1>
<p>从零开始掌握现代Web开发全流程，学习构建和部署功能完整的全栈应用程序。本课程将带你从前端到后端，成为一名全能开发者。</p>
<a href="#enroll" class="cta-button">立即报名</a>
</div>
</section>
<!-- 课程特色 -->
<section id="features" class="features">
<div class="container">
<div class="section-title">
<h2>课程特色</h2>
<p>专为想要掌握全栈开发技能的学员设计，理论与实践相结合</p>
</div>
<div class="features-grid">
<div class="feature-card">
<i class="fas fa-laptop-code"></i>
<h3>项目驱动学习</h3>
<p>通过实际项目学习，掌握从需求分析到部署上线的完整开发流程。</p>
</div>
<div class="feature-card">
<i class="fas fa-layer-group"></i>
<h3>前后端一体化</h3>
<p>深入理解前后端交互原理，学会设计RESTful API和数据库模型。</p>
</div>
<div class="feature-card">
<i class="fas fa-rocket"></i>
<h3>现代化技术栈</h3>
<p>使用Vue 3、Node.js、Express和MongoDB等前沿技术构建应用。</p>
</div>
</div>
</div>
</section>
<!-- 技术栈展示 -->
<section id="tech" class="tech-stack">
<div class="container">
<div class="section-title">
<h2>技术栈</h2>
<p>掌握现代Web开发的核心技术，构建高性能应用程序</p>
</div>
<div class="tech-icons">
<div class="tech-item vue">
<i class="fab fa-vuejs"></i>
<h4>Vue.js</h4>
</div>
<div class="tech-item node">
<i class="fab fa-node-js"></i>
<h4>Node.js</h4>
</div>
<div class="tech-item mongo">
<i class="fas fa-database"></i>
<h4>MongoDB</h4>
</div>
<div class="tech-item express">
<i class="fas fa-server"></i>
<h4>Express.js</h4>
</div>
</div>
</div>
</section>
<!-- 课程大纲 -->
<section id="curriculum" class="curriculum">
<div class="container">
<div class="section-title">
<h2>课程大纲</h2>
<p>系统化的学习路径，从基础到高级，循序渐进</p>
</div>
<div class="tabs">
<button class="tab" :class="{ active: activeTab === 'frontend' }"
@click="activeTab = 'frontend'">前端开发</button>
<button class="tab" :class="{ active: activeTab === 'backend' }"
@click="activeTab = 'backend'">后端开发</button>
<button class="tab" :class="{ active: activeTab === 'fullstack' }"
@click="activeTab = 'fullstack'">全栈项目</button>
</div>
<div class="tab-content" :class="{ active: activeTab === 'frontend' }">
<ul class="module-list">
<li class="module-item" v-for="(module, index) in frontendModules" :key="index">
<div class="module-header" @click="toggleModule(index, 'frontend')">
<h3>{{ module.title }}</h3>
<i class="fas" :class="module.open ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
</div>
<div class="module-content" :class="{ active: module.open }">
<ul>
<li v-for="(item, i) in module.items" :key="i">{{ item }}</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="tab-content" :class="{ active: activeTab === 'backend' }">
<ul class="module-list">
<li class="module-item" v-for="(module, index) in backendModules" :key="index">
<div class="module-header" @click="toggleModule(index, 'backend')">
<h3>{{ module.title }}</h3>
<i class="fas" :class="module.open ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
</div>
<div class="module-content" :class="{ active: module.open }">
<ul>
<li v-for="(item, i) in module.items" :key="i">{{ item }}</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="tab-content" :class="{ active: activeTab === 'fullstack' }">
<ul class="module-list">
<li class="module-item" v-for="(module, index) in fullstackModules" :key="index">
<div class="module-header" @click="toggleModule(index, 'fullstack')">
<h3>{{ module.title }}</h3>
<i class="fas" :class="module.open ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
</div>
<div class="module-content" :class="{ active: module.open }">
<ul>
<li v-for="(item, i) in module.items" :key="i">{{ item }}</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- 项目演示 -->
<section id="projects" class="projects">
<div class="container">
<div class="section-title">
<h2>项目演示</h2>
<p>实战项目展示，将所学知识应用于真实场景</p>
</div>
<div class="project-slider">
<div class="project-slides" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
<div class="project-slide" v-for="(project, index) in projects" :key="index">
<div class="project-image" :style="{ backgroundImage: `url(${project.image})` }"></div>
<h3>{{ project.title }}</h3>
<p>{{ project.description }}</p>
</div>
</div>
<div class="slider-nav">
<div class="slider-dot"
v-for="(project, index) in projects"
:key="index"
:class="{ active: currentSlide === index }"
@click="currentSlide = index"></div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer id="contact">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>关于课程</h3>
<p>本课程旨在帮助开发者掌握现代全栈开发技能，通过实际项目学习Vue.js、Node.js和MongoDB等技术。</p>
</div>
<div class="footer-section">
<h3>快速链接</h3>
<ul>
<li><a href="#features">课程特色</a></li>
<li><a href="#tech">技术栈</a></li>
<li><a href="#curriculum">课程大纲</a></li>
<li><a href="#projects">项目演示</a></li>
</ul>
</div>
<div class="footer-section">
<h3>联系我们</h3>
<ul>
<li><i class="fas fa-envelope"></i> contact@fullstackcourse.com</li>
<li><i class="fas fa-phone"></i> +86 123-4567-8900</li>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村</li>
</ul>
<div class="social-links">
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="copyright">
<p>© 2023 Vue+Node+MongoDB全栈开发课程. 保留所有权利.</p>
</div>
</div>
</footer>
</div>
<script>
new Vue({
el: '#app',
data: {
menuActive: false,
activeTab: 'frontend',
currentSlide: 0,
frontendModules: [
{
title: 'Vue.js 基础',
open: true,
items: [
'Vue实例与数据绑定',
'指令与事件处理',
'计算属性与侦听器',
'组件化开发基础'
]
},
{
title: 'Vue Router 与状态管理',
open: false,
items: [
'Vue Router路由配置',
'导航守卫与路由传参',
'Vuex状态管理核心概念',
'模块化状态管理'
]
},
{
title: '高级Vue特性',
open: false,
items: [
'组合式API与Composition API',
'自定义指令与插件开发',
'服务端渲染(SSR)基础',
'性能优化与最佳实践'
]
}
],
backendModules: [
{
title: 'Node.js 基础',
open: true,
items: [
'Node.js环境搭建与模块系统',
'异步编程与事件循环',
'文件系统与流操作',
'HTTP服务器与客户端'
]
},
{
title: 'Express.js 框架',
open: false,
items: [
'Express应用结构与中间件',
'路由设计与RESTful API',
'模板引擎与静态文件服务',
'错误处理与日志记录'
]
},
{
title: 'MongoDB 数据库',
open: false,
items: [
'MongoDB安装与基本操作',
'Mongoose ODM使用',
'数据建模与关系设计',
'聚合管道与高级查询'
]
}
],
fullstackModules: [
{
title: '用户认证系统',
open: true,
items: [
'JWT令牌认证机制',
'用户注册与登录流程',
'权限控制与路由守卫',
'OAuth第三方登录集成'
]
},
{
title: '实时功能实现',
open: false,
items: [
'WebSocket基础与Socket.io',
'实时聊天功能开发',
'通知系统设计与实现',
'数据同步与冲突解决'
]
},
{
title: '部署与运维',
open: false,
items: [
'Docker容器化应用',
'云服务器环境配置',
'CI/CD自动化部署',
'性能监控与错误追踪'
]
}
],
projects: [
{
title: '任务管理应用',
description: '一个完整的全栈任务管理应用，支持用户注册、任务创建、分配和状态跟踪。',
image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
},
{
title: '电子商务平台',
description: '具备商品展示、购物车、支付集成和订单管理的电子商务解决方案。',
image: 'https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
},
{
title: '社交网络应用',
description: '类似微博的社交平台，支持发帖、关注、点赞和实时消息功能。',
image: 'https://images.unsplash.com/photo-1535016120720-40c646be5580?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
}
]
},
methods: {
toggleMenu() {
this.menuActive = !this.menuActive;
},
toggleModule(index, type) {
const modules = this[`${type}Modules`];
modules[index].open = !modules[index].open;
// 关闭其他模块
modules.forEach((module, i) => {
if (i !== index) {
module.open = false;
}
});
}
},
mounted() {
// 自动轮播项目演示
setInterval(() => {
this.currentSlide = (this.currentSlide + 1) % this.projects.length;
}, 5000);
}
});
</script>
</body>
</html>功能说明
这个全栈课程展示页面包含以下主要功能：
- 响应式导航栏：适配移动设备，点击菜单图标可展开/收起导航链接
- 课程特色展示：使用卡片式布局展示课程的三大核心特色
- 技术栈图标展示：直观展示Vue、Node、MongoDB和Express等技术
- 交互式课程大纲 ：
- 选项卡切换前端、后端和全栈项目内容
- 可折叠的模块列表，点击可展开/收起详细内容
- 项目演示轮播：自动轮播展示三个实战项目
- 响应式页脚：包含课程信息、快速链接和联系方式
页面采用了现代化的设计风格，使用了Vue.js实现交互功能，并确保在各种设备上都有良好的显示效果。
您可以直接复制上面的代码到HTML文件中运行，无需任何外部依赖（除了Vue.js和Font Awesome图标库通过CDN引入）。