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

相关文章
|
29天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
55 10
|
3月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
116 58
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
4月前
|
移动开发 JavaScript 前端开发
💻揭秘!如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心,通过随机生成的颜色矩阵和一个变化点,玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能,包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外,作者展示了使用Vue 3和TypeScript开发的代码实现,带领读者一步步深入了解游戏的逻辑与细节。
174 69
|
2月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
179 3
|
4月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
126 41
|
3月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
3月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
4月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
4月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
278 4

热门文章

最新文章

  • 1
    node-DeepResearch:开源复现版OpenAI Deep Research,支持多步推理和复杂查询的AI智能体
  • 2
    一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
  • 3
    一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
  • 4
    Node.js 中实现多任务下载的并发控制策略
  • 5
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 6
    深度剖析:共享文件怎么设置密码和权限的 Node.js 进阶算法
  • 7
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    详解智能编码在前端研发的创新应用