案例一：博客系统
项目概述：
一个简单的博客系统，包括文章列表展示、文章详情查看、分类筛选、用户登录注册等功能。
技术栈：
- Vue.js
- Vue Router
- Vuex
- Axios
- Bootstrap
主要功能实现：
- 文章列表展示：
- 使用 Axios 从后端 API 获取文章列表数据。
- 在 Vue 组件中展示文章标题、摘要和发布日期等信息。
<template>
<div>
<h1>博客文章列表</h1>
<ul>
<li v-for="article in articles" :key="article.id">
<a :href="'/article/' + article.id">{{ article.title }}</a>
<p>{{ article.summary }}</p>
<small>{{ article.publishedDate }}</small>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
articles: []
};
},
async created() {
try {
const response = await axios.get('/api/articles');
this.articles = response.data;
} catch (error) {
console.error('获取文章列表失败：', error);
}
}
};
</script>
- 文章详情查看：
- 通过 Vue Router 的动态路由参数获取文章 ID。
- 从后端获取特定文章的详细内容并展示。
<template>
<div>
<h1>{{ article.title }}</h1>
<p>{{ article.content }}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
article: {}
};
},
async created() {
const articleId = this.$route.params.id;
try {
const response = await axios.get(`/api/articles/${articleId}`);
this.article = response.data;
} catch (error) {
console.error('获取文章详情失败：', error);
}
}
};
</script>
- 分类筛选：
- 展示不同的文章分类，用户点击分类可筛选出相应的文章列表。
<template>
<div>
<h1>博客文章列表</h1>
<ul>
<li v-for="category in categories" :key="category.id">
<a @click.prevent="filterArticlesByCategory(category.id)">{{ category.name }}</a>
</li>
</ul>
<ul>
<li v-for="article in filteredArticles" :key="article.id">
<a :href="'/article/' + article.id">{{ article.title }}</a>
<p>{{ article.summary }}</p>
<small>{{ article.publishedDate }}</small>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
articles: [],
categories: [],
filteredArticles: []
};
},
async created() {
try {
const articlesResponse = await axios.get('/api/articles');
this.articles = articlesResponse.data;
const categoriesResponse = await axios.get('/api/categories');
this.categories = categoriesResponse.data;
} catch (error) {
console.error('获取数据失败：', error);
}
},
methods: {
filterArticlesByCategory(categoryId) {
this.filteredArticles = this.articles.filter(article => article.categoryId === categoryId);
}
}
};
</script>
- 用户登录注册：
- 提供登录和注册表单，用户输入用户名、密码等信息进行操作。
- 使用 Axios 与后端进行交互，验证用户信息并处理登录注册流程。
<template>
<div>
<h2>登录</h2>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<button type="submit">登录</button>
</form>
<h2>注册</h2>
<form @submit.prevent="register">
<input type="text" v-model="newUsername" placeholder="用户名">
<input type="password" v-model="newPassword" placeholder="密码">
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: '',
newUsername: '',
newPassword: ''
};
},
methods: {
async login() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
});
// 处理登录成功后的操作
console.log('登录成功', response.data);
} catch (error) {
console.error('登录失败：', error);
}
},
async register() {
try {
const response = await axios.post('/api/register', {
username: this.newUsername,
password: this.newPassword
});
// 处理注册成功后的操作
console.log('注册成功', response.data);
} catch (error) {
console.error('注册失败：', error);
}
}
}
};
</script>
案例二：电商购物网站
项目概述：
一个具有商品展示、购物车、订单管理等功能的电商购物网站。
技术栈：
- Vue.js
- Vue Router
- Vuex
- Axios
- Element UI
主要功能实现：
- 商品展示：
- 从后端获取商品列表数据，包括商品图片、名称、价格、描述等信息。
- 使用 Vue 的列表渲染指令展示商品列表。
<template>
<div>
<h1>商品列表</h1>
<ul>
<li v-for="product in products" :key="product.id">
<img :src="product.image" alt="Product Image">
<h2>{{ product.name }}</h2>
<p>{{ product.price }}</p>
<button @click="addToCart(product)">加入购物车</button>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
products: []
};
},
async created() {
try {
const response = await axios.get('/api/products');
this.products = response.data;
} catch (error) {
console.error('获取商品列表失败：', error);
}
},
methods: {
addToCart(product) {
// 将商品添加到购物车的逻辑
console.log('添加商品到购物车：', product);
}
}
};
</script>
- 购物车功能：
- 维护一个购物车状态，包括已添加的商品和数量。
- 提供购物车页面展示购物车中的商品列表，以及总价计算等功能。
<template>
<div>
<h1>购物车</h1>
<ul>
<li v-for="item in cartItems" :key="item.product.id">
<img :src="item.product.image" alt="Product Image">
<h2>{{ item.product.name }}</h2>
<p>{{ item.product.price }}</p>
<input type="number" v-model="item.quantity">
<button @click="removeFromCart(item.product.id)">移除</button>
</li>
</ul>
<p>总价：{{ totalPrice }}</p>
<button @click="checkout">结算</button>
</div>
</template>
<script>
export default {
data() {
return {
cartItems: [],
totalPrice: 0
};
},
computed: {
totalPrice() {
return this.cartItems.reduce((total, item) => total + item.product.price * item.quantity, 0);
}
},
methods: {
addToCart(product) {
const existingItem = this.cartItems.find(item => item.product.id === product.id);
if (existingItem) {
existingItem.quantity++;
} else {
this.cartItems.push({ product, quantity: 1 });
}
},
removeFromCart(productId) {
this.cartItems = this.cartItems.filter(item => item.product.id!== productId);
},
checkout() {
// 结算逻辑
console.log('结算购物车');
}
}
};
</script>
- 订单管理：
- 用户提交订单后，将订单信息发送到后端进行处理。
- 提供订单列表页面，展示用户的历史订单。
<template>
<div>
<h1>订单列表</h1>
<ul>
<li v-for="order in orders" :key="order.id">
<p>订单编号：{{ order.id }}</p>
<p>订单日期：{{ order.orderDate }}</p>
<ul>
<li v-for="item in order.items" :key="item.product.id">
<img :src="item.product.image" alt="Product Image">
<h2>{{ item.product.name }}</h2>
<p>{{ item.product.price }}</p>
<p>数量：{{ item.quantity }}</p>
</li>
</ul>
<p>总价：{{ order.totalPrice }}</p>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
orders: []
};
},
async created() {
try {
const response = await axios.get('/api/orders');
this.orders = response.data;
} catch (error) {
console.error('获取订单列表失败：', error);
}
}
};
</script>
案例三：任务管理应用
项目概述：
一个用于管理个人或团队任务的应用，包括任务创建、编辑、标记完成、分类等功能。
技术栈：
- Vue.js
- Vue Router
- Vuex
- Bootstrap Vue
主要功能实现：
- 任务列表展示：
- 从后端获取任务列表数据，展示任务的标题、描述、截止日期等信息。
<template>
<div>
<h1>任务列表</h1>
<ul>
<li v-for="task in tasks" :key="task.id">
<input type="checkbox" v-model="task.completed">
<span v-if="task.completed" class="completed">{{ task.title }}</span>
<span v-else>{{ task.title }}</span>
<p>{{ task.description }}</p>
<small>{{ task.dueDate }}</small>
<button @click="editTask(task.id)">编辑</button>
<button @click="deleteTask(task.id)">删除</button>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
tasks: []
};
},
async created() {
try {
const response = await axios.get('/api/tasks');
this.tasks = response.data;
} catch (error) {
console.error('获取任务列表失败：', error);
}
},
methods: {
async editTask(taskId) {
// 编辑任务的逻辑
console.log('编辑任务：', taskId);
},
async deleteTask(taskId) {
try {
await axios.delete(`/api/tasks/${taskId}`);
this.tasks = this.tasks.filter(task => task.id!== taskId);
} catch (error) {
console.error('删除任务失败：', error);
}
}
}
};
</script>
- 任务创建和编辑：
- 提供任务创建表单，用户输入任务标题、描述、截止日期等信息创建新任务。
- 编辑现有任务时，预填充任务信息并允许用户修改。
<template>
<div>
<h2 v-if="editingTask">编辑任务</h2>
<h2 v-else>创建任务</h2>
<form @submit.prevent="submitTask">
<input type="text" v-model="task.title" placeholder="任务标题">
<textarea v-model="task.description" placeholder="任务描述"></textarea>
<input type="date" v-model="task.dueDate">
<button type="submit">{{ editingTask? '保存' : '创建' }}</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
task: {
title: '',
description: '',
dueDate: ''
},
editingTask: false
};
},
methods: {
async submitTask() {
if (this.editingTask) {
try {
await axios.put(`/api/tasks/${this.task.id}`, this.task);
// 更新任务列表
console.log('任务编辑成功');
} catch (error) {
console.error('任务编辑失败：', error);
}
} else {
try {
const response = await axios.post('/api/tasks', this.task);
// 将新任务添加到任务列表
console.log('任务创建成功');
} catch (error) {
console.error('任务创建失败：', error);
}
}
this.task = {
title: '',
description: '',
dueDate: ''
};
this.editingTask = false;
}
}
};
</script>
- 任务分类：
- 允许用户为任务添加标签或分类，以便更好地组织任务。
案例四：音乐播放器
项目概述：
一个简单的音乐播放器，支持播放、暂停、上一曲、下一曲、音量调节等功能。
技术栈：
- Vue.js
- Vue Router
- Axios
- Howler.js
主要功能实现：
- 音乐播放：
- 使用 Howler.js 库加载和播放音乐文件。
- 在 Vue 组件中设置播放按钮，点击时触发播放或暂停操作。
<template>
<div>
<h1>音乐播放器</h1>
<audio ref="audioPlayer" controls>
<source :src="currentSong.url" type="audio/mpeg">
</audio>
<button @click="togglePlay">播放/暂停</button>
</div>
</template>
<script>
import Howl from 'howler';
export default {
data() {
return {
currentSong: {
url: '',
title: ''
},
isPlaying: false
};
},
mounted() {
// 假设从后端获取音乐列表后设置当前歌曲
this.currentSong = {
url: 'path/to/song.mp3',
title: 'Song Title'
};
},
methods: {
togglePlay() {
if (this.isPlaying) {
this.$refs.audioPlayer.pause();
} else {
this.$refs.audioPlayer.play();
}
this.isPlaying =!this.isPlaying;
}
}
};
</script>
- 上一曲 / 下一曲：
- 维护一个音乐列表，当用户点击上一曲或下一曲按钮时，切换当前播放的歌曲。
<template>
<div>
<h1>音乐播放器</h1>
<audio ref="audioPlayer" controls>
<source :src="currentSong.url" type="audio/mpeg">
</audio>
<button @click="previousSong">上一曲</button>
<button @click="togglePlay">播放/暂停</button>
<button @click="nextSong">下一曲</button>
</div>
</template>
<script>
import Howl from 'howler';
export default {
data() {
return {
songs: [
{ url: 'path/to/song1.mp3', title: 'Song 1' },
{ url: 'path/to/song2.mp3', title: 'Song 2' },
{ url: 'path/to/song3.mp3', title: 'Song 3' }
],
currentSongIndex: 0,
currentSong: {
url: '',
title: ''
},
isPlaying: false
};
},
mounted() {
this.currentSong = this.songs[this.currentSongIndex];
},
methods: {
togglePlay() {
if (this.isPlaying) {
this.$refs.audioPlayer.pause();
} else {
this.$refs.audioPlayer.play();
}
this.isPlaying =!this.isPlaying;
},
previousSong() {
if (this.currentSongIndex > 0) {
this.currentSongIndex--;
} else {
this.currentSongIndex = this.songs.length - 1;
}
this.currentSong = this.songs[this.currentSongIndex];
this.$refs.audioPlayer.load();
this.$refs.audioPlayer.play();
this.isPlaying = true;
},
nextSong() {
if (this.currentSongIndex < this.songs.length - 1) {
this.currentSongIndex++;
} else {
this.currentSongIndex = 0;
}
this.currentSong = this.songs[this.currentSongIndex];
this.$refs.audioPlayer.load();
this.$refs.audioPlayer.play();
this.isPlaying = true;
}
}
};
</script>
- 音量调节：
- 通过输入框或滑块来调整音乐的音量大小。
<template>
<div>
<h1>音乐播放器</h1>
<audio ref="audioPlayer" controls>
<source :src="currentSong.url" type="audio/mpeg">
</audio>
<button @click="previousSong">上一曲</button>
<button @click="togglePlay">播放/暂停</button>
<button @click="nextSong">下一曲</button>
<input type="range" min="0" max="1" step="0.1" v-model="volume" @input="setVolume">
</div>
</template>
<script>
import Howl from 'howler';
export default {
data() {
return {
songs: [
{ url: 'path/to/song1.mp3', title: 'Song 1' },
{ url: 'path/to/song2.mp3', title: 'Song 2' },
{ url: 'path/to/song3.mp3', title: 'Song 3' }
],
currentSongIndex: 0,
currentSong: {
url: '',
title: ''
},
isPlaying: false,
volume: 1
};
},
mounted() {
this.currentSong = this.songs[this.currentSongIndex];
},
methods: {
togglePlay() {
if (this.isPlaying) {
this.$refs.audioPlayer.pause();
} else {
this.$refs.audioPlayer.play();
}
this.isPlaying =!this.isPlaying;
},
previousSong() {
if (this.currentSongIndex > 0) {
this.currentSongIndex--;
} else {
this.currentSongIndex = this.songs.length - 1;
}
this.currentSong = this.songs[this.currentSongIndex];
this.$refs.audioPlayer.load();
this.$refs.audioPlayer.play();
this.isPlaying = true;
},
nextSong() {
if (this.currentSongIndex < this.songs.length - 1) {
this.currentSongIndex++;
} else {
this.currentSongIndex = 0;
}
this.currentSong = this.songs[this.currentSongIndex];
this.$refs.audioPlayer.load();
this.$refs.audioPlayer.play();
this.isPlaying = true;
},
setVolume() {
this.$refs.audioPlayer.volume(this.volume);
}
}
};
</script>案例五：天气应用
项目概述：
一个显示当前天气状况和未来天气预报的应用。
技术栈：
- Vue.js
- Vue Router
- Axios
- OpenWeatherMap API
主要功能实现：
- 获取天气数据：
- 使用 Axios 调用 OpenWeatherMap API 获取当前天气和未来天气预报数据。
<template>
<div>
<h1>天气应用</h1>
<p v-if="loading">正在加载天气数据...</p>
<div v-else>
<h2>{{ cityName }}</h2>
<p>{{ currentWeather.temperature }}°C</p>
<p>{{ currentWeather.description }}</p>
<ul>
<li v-for="forecast in forecastData" :key="forecast.date">
<p>{{ forecast.date }}</p>
<p>{{ forecast.temperature }}°C</p>
<p>{{ forecast.description }}</p>
</li>
</ul>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
cityName: '',
currentWeather: {},
forecastData: [],
loading: true
};
},
async created() {
const apiKey = 'your_api_key';
const city = 'your_city';
try {
const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`);
this.cityName = response.data.name;
this.currentWeather = {
temperature: response.data.main.temp - 273.15,
description: response.data.weather[0].description
};
const forecastResponse = await axios.get(`https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}`);
this.forecastData = forecastResponse.data.list.map(item => ({
date: item.dt_txt,
temperature: item.main.temp - 273.15,
description: item.weather[0].description
}));
this.loading = false;
} catch (error) {
console.error('获取天气数据失败：', error);
this.loading = false;
}
}
};
</script>
- 显示天气信息：
- 在页面上展示当前城市名称、温度、天气描述以及未来几天的天气预报。
<template>
<div>
<h1>天气应用</h1>
<p v-if="loading">正在加载天气数据...</p>
<div v-else>
<h2>{{ cityName }}</h2>
<p>{{ currentWeather.temperature }}°C</p>
<p>{{ currentWeather.description }}</p>
<ul>
<li v-for="forecast in forecastData" :key="forecast.date">
<p>{{ forecast.date }}</p>
<p>{{ forecast.temperature }}°C</p>
<p>{{ forecast.description }}</p>
</li>
</ul>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
cityName: '',
currentWeather: {},
forecastData: [],
loading: true
};
},
async created() {
const apiKey = 'your_api_key';
const city = 'your_city';
try {
const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`);
this.cityName = response.data.name;
this.currentWeather = {
temperature: response.data.main.temp - 273.15,
description: response.data.weather[0].description
};
const forecastResponse = await axios.get(`https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}`);
this.forecastData = forecastResponse.data.list.map(item => ({
date: item.dt_txt,
temperature: item.main.temp - 273.15,
description: item.weather[0].description
}));
this.loading = false;
} catch (error) {
console.error('获取天气数据失败：', error);
this.loading = false;
}
}
};
</script>
这些案例展示了 Vue.js 在不同项目中的应用，可以帮助你更好地理解 Vue.js 的实际开发过程和各种功能的实现方法。每个案例都可以根据具体需求进行进一步的扩展和优化。
