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

作者主页：编程指南针

作者简介：Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师

主要内容：Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助

收藏点赞不迷路  关注作者有好处

文末获取源码 

项目编号：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开发，并采用前后端分离的方式开发实现，前端页面和后台页面采用独立的工程实现，界面设计丰满，充实而且大方得体，是一个不错的前端毕业设计作品。