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

相关文章
|
1月前
|
存储 JavaScript 前端开发
前端技术分享:使用Vue.js与Vuex管理状态
【10月更文挑战第1天】前端技术分享:使用Vue.js与Vuex管理状态
46 6
|
1月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
64 3
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
40 0
|
1月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
65 41
|
24天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
21 4
|
1月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
53 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
1月前
|
JavaScript 前端开发 API
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
18 2
|
1月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
1月前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
42 6