vue.js项目实战案例源码

前端码趣逗士

已于 2024-09-02 10:40:33 修改

阅读量1.5k

点赞数 35

文章标签： vue.js

于 2024-09-02 10:17:00 首次发布

本文链接：https://blog.csdn.net/m0_54829066/article/details/141812721

版权

案例一：博客系统

项目概述：
一个简单的博客系统，包括文章列表展示、文章详情查看、分类筛选、用户登录注册等功能。

技术栈：

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 的实际开发过程和各种功能的实现方法。每个案例都可以根据具体需求进行进一步的扩展和优化。