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