前端毕业设计|基于Vue+Nodejs实现游戏资讯平台

简介: 前端毕业设计|基于Vue+Nodejs实现游戏资讯平台

项目编号:BS-QD-007

一,环境介绍

开发技术:Vue+Nodejs+ElementUI

数据库:Mysql: mysql5.7

应用服务器:nodejs

开发工具:IDEA或VSCode

二,项目简介

  本系统主要基于前端开发技术,使用Vue+Nodejs来开发实现一款游戏资讯信息平台网站。主要实现了前端用户在查查看游戏资讯、分类浏览、在线交流互动、查看最新发布的游戏信息、游戏装备信息,完成详细浏览和视频观看,并进行点赞、收藏、评论等操作。后台管理员主要完成用户管理、资讯管理、资讯分类管理、游戏管理、游戏分类管理、装备管理、装备分管理、公告管理等。

三,系统展示

下面展示一下游戏资讯信息平台的实现界面。

主界面如下

资讯浏览:含有热点推荐

分类查看游戏资讯

游戏浏览

游戏详情

用房注册

用房登录

在线交流论坛

个人中心

后台管理展示

轮播图管理

公告管理

游戏资讯管理

游戏管理

四,核心代码展示

用户注册后台服务接口

const md5 = require("md5");
var Controller = require("../core/controller.js");
/**
 * 登录
 */
class Register extends Controller {
  /**
   * 构造函数
   * @param {Object} config 配置参数
   */
  constructor(config) {
    // 传参给父类构造函数
    super(
      Object.assign({
          // 选择的模板那路径模板
          tpl: "./register/",
          // 选择的服务
          service: "user",
        },
        config
      )
    );
  }
}
/**
 * 注册页
 * @param {Object} ctx http请求上下文
 */
Register.prototype.index = async function(ctx) {
  var group_list = await $.services["user_group"].get_list({}, Object.assign({}, this.config));
  return await ctx.render(this.config.tpl + "index.html", {
    group_list
  });
};
/**
 * 注册API
 * @param {Object} ctx http请求上下文
 */
Register.prototype.api = async function(ctx) {
  var user = $.services.user;
  var body = ctx.request.body;
  var username = body.username;
  var obj = await user.get_obj({
    username
  });
  if (obj) {
    return {
      error: {
        code: 70000,
        message: "账户名已存在",
      },
    };
  } else {
    var password = md5(body.password);
    var nickname = body.nickname;
    var user_group = body.user_group;
    var email = body.email;
    var email_state= body.hasOwnProperty('email_state') ? body.email_state : 0;
    var phone = body.phone;
    var phone_state= body.hasOwnProperty('phone_state') ? body.phone_state : 0;
    var avatar = body.avatar;
    var bl_reg = await user.add({
      username,
      password,
      nickname,
      user_group,
      email,
      email_state,
      phone,
      phone_state,
      avatar
    });
    if (bl_reg) {
      return {
        result: "注册成功"
      };
    } else {
      return {
        error: {
          code: 70000,
          message: "注册失败",
        },
      };
    }
  }
};
module.exports = Register;

用户管理后台服务接口

var Controller = require('../core/controller.js');
const md5 = require("md5");
/**
 * 用户
 */
class User extends Controller {
  /**
   * 构造函数
   * @param {Object} config 配置参数
   */
  constructor(config) {
    // 传参给父类构造函数
    super(Object.assign({
      // 选择的模板那路径模板
      tpl: './user/',
      // 选择的服务
      service: 'user',
      // 注册get API路由
      get_api: ["state", "quit"]
    }, config));
  }
}
/**
 * 获取用户登录状态
 * @param {Object} ctx http请求上下文
 */
User.prototype.state = async function(ctx) {
  var token = ctx.headers["x-auth-token"];
  // 根据登录态获取用户ID
  var access_token =  await $.services.access_token.get_obj({token});
  if(access_token && access_token.user_id ){
    var user = await this.service.get_obj({"user_id":access_token.user_id});
    if (user) {
      user.token = token;
      return {
        result: {obj: user}
      }
    } else {
      return {
        error: {
          code: 50000,
          message: "账户未登录!"
        }
      }
    }
  }else {
    return {
      error: {
        code: 50000,
        message: "账户未登录!"
      }
    }
  }
};
/**
 * 退出登录
 * @param {Object} ctx http请求上下文
 */
User.prototype.quit = async function(ctx) {
  var user = ctx.session.user;
  if (user) {
    ctx.session.user = null;
    var token = ctx.headers["x-auth-token"];
    if (token) {
      var service = $.services["access_token"];
      await service.del({
        token
      });
    }
    return {
      result: {
        bl: true,
        tip: "已退出"
      }
    }
  } else {
    return {
      error: {
        code: 50000,
        tip: "账户未登录!"
      }
    }
  }
};
/**
 * 添加用户
 */
User.prototype.add = async function(ctx) {
  ctx.request.body.password = md5(ctx.request.body.password);
  var result = await this.service.add(ctx.request.body, this.config);
  if (this.service.error) {
    return {
      error: this.service.error,
    };
  }
  return {
    result,
  };
}
module.exports = User;

五,项目总结

  整个系统功能实现完整,采用Vue+Nodejs开发,并采用前后端分离的方式开发实现,前端页面和后台页面采用独立的工程实现,界面设计丰满,充实而且大方得体,是一个不错的前端毕业设计作品。

相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
55 0
|
6天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
39 4
|
1月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
158 4
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
2月前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
109 0