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

这篇具有很好参考价值的文章主要介绍了前端毕业设计|基于Vue+Nodejs实现游戏资讯平台。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作者主页:编程指南针

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

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

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

文末获取源码 

项目编号:BS-QD-007

一,环境介绍

开发技术:Vue+Nodejs+ElementUI

数据库:Mysql: mysql5.7

应用服务器:nodejs

开发工具:IDEA或VSCode

二,项目简介

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

三,系统展示

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

主界面如下

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

资讯浏览:含有热点推荐

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

 分类查看游戏资讯

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

游戏浏览

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

 游戏详情

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

 用房注册

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

用房登录

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

 

 在线交流论坛

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

 个人中心

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

 后台管理展示

轮播图管理

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

 

公告管理

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

 

游戏资讯管理

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

 游戏管理

前端毕业设计|基于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开发,并采用前后端分离的方式开发实现,前端页面和后台页面采用独立的工程实现,界面设计丰满,充实而且大方得体,是一个不错的前端毕业设计作品。文章来源地址https://www.toymoban.com/news/detail-468333.html

到了这里,关于前端毕业设计|基于Vue+Nodejs实现游戏资讯平台的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【毕业论文】| 基于Unity3D引擎的冒险游戏的设计与实现

    📢博客主页:肩匣与橘 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! 📢本文由 肩匣与橘 编写,首发于 CSDN 🙉 📢生活依旧是美好而又温柔的,你也是✨  基于Unity3D引擎的冒险游戏的设计与实现 📢前言 摘要 Abstract 1 绪论 1.1 选题背景 1.2 研究目的及意义 2 开发工具

    2024年02月05日
    浏览(46)
  • nodejs+vue城市轨道交通线路查询系统-计算机毕业设计

    着社会的快速发展,计算机的影响是全面且深入的。社会生产水平的不断提高,日常生活中人们对备忘记账系统方面的要求也在不断提高,因特网的使用越来越广泛,而在众多的因特网中,万维网更是为人们带来了新鲜的体验。在这当中,由互联网平台进行的工作是比较受欢

    2024年02月08日
    浏览(42)
  • nodejs+vue高校实验室预约管理系统-计算机毕业设计

    开发一款实验室预约管理系统,解决当前学校存在的实验室信息不透明,实验室空余时间不清晰,预约实验室过程繁琐费时的问题。提高实验室利用率。 对于学生, 系统应该分为实验室管理员模块和用户模块。实验室管理员模 块使用者为用户进行录入信息操作,查看实验室

    2024年02月06日
    浏览(38)
  • 基于python的小游戏毕业设计,python小游戏毕业设计

    大家好,本文将围绕基于python的小游戏毕业设计展开说明,python小游戏毕业设计是一个很多人都想弄明白的事情,想搞清楚利用python设计小游戏需要先了解以下几个事情。 文章目录 0 项目简介 1 游戏介绍 2 实现效果 3 开发工具 3.1 环境配置 3.2 Pygame介绍 4 具体实现 5 最后 🔥

    2024年01月15日
    浏览(36)
  • 基于SpringBoot+Vue的毕业生信息招聘平台设计与实现

    博主介绍 : 大家好,我是一名在Java圈混迹十余年的程序员,精通Java编程语言,同时也熟练掌握微信小程序、Python和Android等技术,能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架下进行项目开发,具有丰富的项目经验和开发技能。我的代

    2024年02月06日
    浏览(81)
  • (附源码)springboot+mysql+基于vue焕心眼镜商城的设计与实现 毕业设计091546

    摘  要 近年来,随着移动互联网的快速发展,电子商务越来越受到网民们的欢迎,电子商务对国家经济的发展也起着越来越重要的作用。简单的流程、便捷可靠的支付方式、快捷畅通的物流快递、安全的信息保护都使得电子商务越来越赢得网民们的青睐。现今,大量的计算机

    2024年04月10日
    浏览(40)
  • Springboot+mysql+基于VUE框架的商城综合项目设计与实现 毕业设计-附源码111612

    基于VUE框架的商城综合项目设计与实现 随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外。商城综合项目是以实际运用为开发背景,运用软件工程原理和开发方法,采用

    2024年02月01日
    浏览(47)
  • 基于SpringBoot+Vue的毕业设计与实现——Java毕设思路分享

    毕设选题经验分享:很多互联网专业的小伙伴们在选择自己的毕设主题的时候不知道做什么,在这时候就可以结合生活日常和当下较为流行的事物,通过对往年毕设的项目进行总结归纳,主题基本上都离不开旅游管理、移动办公、民宿服务系统、商城、博客、在线课程网站等

    2024年02月02日
    浏览(65)
  • 毕业设计项目 基于SpringCloud+Hadoop+Vue的企业级网盘系统设计与实现

    基于SpringCloud+Hadoop+Vue的企业级网盘系统设计与实现 提示:适合用于课程设计或毕业设计,工作量达标,源码开放 前端:vue-projectManage 后台:mycloud-admin 提供前端服务:mycloud 文件在线预览服务:file-online-preview 编程语言:Java、Mybatis、Spring、SpringBoot、SpringCloud、Node、Vue 开发环

    2024年04月24日
    浏览(42)
  • vue.js毕业设计,基于vue.js前后端分离在线小说电子书阅读小程序系统设计与实现

    用户首次登陆系统需要注册一个用户作为账号,用户在登录平台后,可以进行平台的操作。主要模块包括以下几点: 登录功能:注册普通账号登录;登录后可以修改用户的基本信息,也可以退出。 资讯功能:后台录入资讯,在微信小程序在线电子书阅读系统的资讯模板展示

    2024年02月07日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包