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

相关文章
|
22天前
|
缓存 JavaScript 前端开发
前端vue的性能优化都有那些方式?
【4月更文挑战第8天】 Vue.js 性能优化技巧包括:路由懒加载,按需加载路由以加快页面加载;组件优化,如用`v-show`替换`v-if`,使用计算属性代替方法;虚拟滚动提升大数据列表性能;图片优化,如使用懒加载;减少不必要的重渲染,借助`v-once`或`shouldComponentUpdate`;以及考虑使用服务端渲染(SSR)提升首屏加载速度。注意平衡优化与代码复杂性之间的关系。
23 0
|
1月前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
111 0
|
10天前
|
缓存 安全 JavaScript
前端安全:Vue应用中防范XSS和CSRF攻击
【4月更文挑战第23天】本文探讨了在Vue应用中防范XSS和CSRF攻击的重要性。XSS攻击通过注入恶意脚本威胁用户数据,而CSRF则利用用户身份发起非授权请求。防范措施包括:对输入内容转义、使用CSP、选择安全的库;采用Anti-CSRF令牌、同源策略和POST请求对抗CSRF;并实施代码审查、更新依赖及教育团队成员。通过这些实践,可提升Vue应用的安全性,抵御潜在攻击。
|
1天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
7 0
|
2天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
3天前
|
JSON JavaScript 前端开发
前端框架vue的样式操作,以及vue提供的属性功能应用实战
前端框架vue的样式操作,以及vue提供的属性功能应用实战
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(二)
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(二)
|
3天前
|
JavaScript 前端开发 Python
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(一)
优秀的前端框架vue,原理剖析与实战技巧总结【干货满满】(一)
|
3天前
|
开发框架 缓存 前端开发
|
14天前
|
前端开发 JavaScript
vue 前端参值后端接收的几种方式
vue 前端参值后端接收的几种方式
16 0