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

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

article 2025/1/13 10:17:25

以下是一个基于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>