当前位置：首页 > news >正文

【论文+源码】一个基于Vue.js的MOBA类游戏攻略分享平台

news 2025/1/12 5:34:49

以下是一个基于Vue.js的MOBA类游戏攻略分享平台的前端案例代码。这个平台包括用户注册登录、攻略发布、攻略浏览、评论、点赞等功能。代码结构清晰，适合初学者学习和参考。
在这里插入图片描述

1. 项目结构

src/├── assets/               # 静态资源（图片、样式等）├── components/           # 可复用的Vue组件│   ├── NavBar.vue        # 导航栏组件│   ├── GuideCard.vue     # 攻略卡片组件│   ├── CommentList.vue   # 评论列表组件│   └── Footer.vue        # 页脚组件├── views/                # 页面视图│   ├── Home.vue          # 首页│   ├── GuideDetail.vue   # 攻略详情页│   ├── CreateGuide.vue   # 发布攻略页│   ├── Login.vue         # 登录页│   └── Register.vue      # 注册页├── router/               # 路由配置│   └── index.js          # 路由配置文件├── store/                # Vuex状态管理│   └── index.js          # Vuex配置文件├── services/             # API服务│   └── api.js            # 封装API请求├── App.vue               # 根组件└── main.js               # 项目入口文件

2. 依赖配置 (`package.json`)

{"name": "moba-guide-platform","version": "1.0.0","dependencies": {"vue": "^3.2.0","vue-router": "^4.0.0","vuex": "^4.0.0","axios": "^0.21.0","element-plus": "^2.0.0",  // UI组件库"sass": "^1.32.0"          // 支持Sass}
}

安装依赖：

npm install

3. 路由配置 (`router/index.js`)

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import GuideDetail from '@/views/GuideDetail.vue';
import CreateGuide from '@/views/CreateGuide.vue';
import Login from '@/views/Login.vue';
import Register from '@/views/Register.vue';const routes = [{ path: '/', component: Home },{ path: '/guide/:id', component: GuideDetail, props: true },{ path: '/create', component: CreateGuide },{ path: '/login', component: Login },{ path: '/register', component: Register },
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

4. Vuex状态管理 (`store/index.js`)

import { createStore } from 'vuex';export default createStore({state: {user: null, // 当前登录用户guides: [], // 攻略列表},mutations: {SET_USER(state, user) {state.user = user;},SET_GUIDES(state, guides) {state.guides = guides;},ADD_GUIDE(state, guide) {state.guides.push(guide);},},actions: {login({ commit }, user) {commit('SET_USER', user);},fetchGuides({ commit }) {// 模拟从API获取攻略列表const guides = [{ id: 1, title: '如何玩好ADC', author: '玩家1', content: '...', likes: 10 },{ id: 2, title: '打野技巧分享', author: '玩家2', content: '...', likes: 5 },];commit('SET_GUIDES', guides);},createGuide({ commit }, guide) {commit('ADD_GUIDE', guide);},},
});

5. API服务封装 (`services/api.js`)

import axios from 'axios';const api = axios.create({baseURL: 'http://localhost:3000/api', // 后端API地址
});export default {// 获取攻略列表getGuides() {return api.get('/guides');},// 获取单个攻略详情getGuide(id) {return api.get(`/guides/${id}`);},// 发布攻略createGuide(guide) {return api.post('/guides', guide);},// 用户登录login(credentials) {return api.post('/login', credentials);},// 用户注册register(user) {return api.post('/register', user);},
};

6. 页面组件示例

首页 (`views/Home.vue`)

<template><div><NavBar /><div class="guide-list"><GuideCard v-for="guide in guides" :key="guide.id" :guide="guide" /></div><Footer /></div>
</template><script>
import { mapState, mapActions } from 'vuex';
import GuideCard from '@/components/GuideCard.vue';
import NavBar from '@/components/NavBar.vue';
import Footer from '@/components/Footer.vue';export default {components: { GuideCard, NavBar, Footer },computed: {...mapState(['guides']),},created() {this.fetchGuides();},methods: {...mapActions(['fetchGuides']),},
};
</script><style scoped>
.guide-list {padding: 20px;
}
</style>

攻略卡片组件 (`components/GuideCard.vue`)

<template><div class="guide-card"><h3>{{ guide.title }}</h3><p>作者: {{ guide.author }}</p><p>{{ guide.content.slice(0, 100) }}...</p><button @click="$router.push(`/guide/${guide.id}`)">查看详情</button></div>
</template><script>
export default {props: {guide: {type: Object,required: true,},},
};
</script><style scoped>
.guide-card {border: 1px solid #ccc;padding: 10px;margin-bottom: 10px;
}
</style>

发布攻略页 (`views/CreateGuide.vue`)

<template><div><NavBar /><h2>发布攻略</h2><form @submit.prevent="submitGuide"><input v-model="title" placeholder="标题" required /><textarea v-model="content" placeholder="内容" required></textarea><button type="submit">发布</button></form><Footer /></div>
</template><script>
import { mapActions } from 'vuex';
import NavBar from '@/components/NavBar.vue';
import Footer from '@/components/Footer.vue';export default {components: { NavBar, Footer },data() {return {title: '',content: '',};},methods: {...mapActions(['createGuide']),submitGuide() {const guide = {title: this.title,content: this.content,author: '当前用户', // 实际项目中应从Vuex获取当前用户};this.createGuide(guide);this.$router.push('/');},},
};
</script>