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

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

前端毕业设计|基于Vue+Nodejs实现游戏资讯平台(一)https://developer.aliyun.com/article/1423388


游戏资讯管理

游戏管理

四,核心代码展示

用户注册后台服务接口

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 前端开发
前端技术分享:使用Vue.js与Vuex管理状态
【10月更文挑战第1天】前端技术分享:使用Vue.js与Vuex管理状态
54 6
|
6天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
7天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
34 3
|
2月前
|
移动开发 JavaScript 前端开发
💻揭秘!如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心,通过随机生成的颜色矩阵和一个变化点,玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能,包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外,作者展示了使用Vue 3和TypeScript开发的代码实现,带领读者一步步深入了解游戏的逻辑与细节。
143 69
|
2月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
87 41
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
44 0
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
39 4
|
2月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
63 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
3月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
2月前
|
JavaScript 前端开发 API
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
26 2