开发陪玩游戏源码的后台管理系统，登录的实现是第一步！

最新推荐文章于 2024-07-02 08:52:02 发布
最新推荐文章于 2024-07-02 08:52:02 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 游戏陪玩约单源码
原文链接：https://blog.csdn.net/qq_34235864/article/details/113798385
版权

在开发陪玩游戏源码时，不仅需要开发Android端和iOS端，还需要开发服务端，也就是后台管理系统，由于后天管理系统掌控者用户端的陪玩游戏源码使用效果，所以非常重要，今天我们先来了解一下号后台管理系统中的基础功能模块，也就是登录页的实现。

陪玩游戏源码的登录页面开发：

1.用户名和密码input标签中使用name属性，通过e.target.name可以获取(Bootstrap文档组件-panel完成登录界面)

import React        from 'react';
import MUtil        from 'util/mm.jsx'
import User         from 'service/user-service.jsx'
 
const _mm   = new MUtil();
const _user = new User();
 
import './index.scss';
 
class Login extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            username: '',
            password: '',
            redirect: _mm.getUrlParam('redirect') || '/'
        }
    }
    componentWillMount(){
        document.title = '登录 - MMALL ADMIN';
    }
    // 当用户名、密码发生改变
    onInputChange(e){
        let inputValue  = e.target.value,
            inputName   = e.target.name;
        this.setState({
            [inputName] : inputValue
        });
    }
    onInputKeyUp(e){
        if(e.keyCode === 13){
            this.onSubmit();
        }
    }
    // 当用户提交表单
    onSubmit(){
        let loginInfo = {
                username : this.state.username,
                password : this.state.password
            },
            checkResult = _user.checkLoginInfo(loginInfo);
        // 验证通过
        if(checkResult.status){
            _user.login(loginInfo).then((res) => {
                _mm.setStorage('userInfo', res);
                this.props.history.push(this.state.redirect);
            }, (errMsg) => {
                _mm.errorTips(errMsg);
            });
        }
        // 验证不通过
        else{
            _mm.errorTips(checkResult.msg);
        }
            
    }
    render(){
        return (
            <div className="col-md-4 col-md-offset-4">
                <div className="panel panel-default login-panel">
                    <div className="panel-heading">欢迎登录 - MMALL管理系统</div>
                    <div className="panel-body">
                        <div>
                            <div className="form-group">
                                <input type="text"
                                    name="username"
                                    className="form-control"
                                    placeholder="请输入用户名" 
                                    onKeyUp={e => this.onInputKeyUp(e)}
                                    onChange={e => this.onInputChange(e)}/>
                            </div>
                            <div className="form-group">
                                <input type="password" 
                                    name="password"
                                    className="form-control" 
                                    placeholder="请输入密码" 
                                    onKeyUp={e => this.onInputKeyUp(e)}
                                    onChange={e => this.onInputChange(e)}/>
                            </div>
                            <button className="btn btn-lg btn-primary btn-block"
                                onClick={e => {this.onSubmit(e)}}>登录</button>
                        </div>
                    </div>
                </div>
            </div>
                    
        );
    }
}
 
export default Login;

2.index.html引用jquery的CDN版本

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

3.src->util->mm.jsx封装ajax请求

class MUtil{
    request(param){
        return new Promise((resolve, reject) => {
            $.ajax({
                type        : param.type        || 'get',
                url         : param.url         || '',
                dataType    : param.dataType    || 'json',
                data        : param.data        || null,
                success     : res => {
                    //console.log(res)
 
                    // 数据请求成功
                    if(0 === res.status){
                        typeof resolve === 'function' && resolve(res.data, res.msg);
                    }
                    // 没有登录状态，强制登录
                    else if(10 === res.status){
                        this.doLogin();
                    }
                    else{
                        typeof reject === 'function' && reject(res.msg || res.data);
                    }
                },
                error       : err => {
                    //console.log(err)
                    typeof reject === 'function' && reject(err.statusText);
                }
            });
        });  
    }
    // 跳转登录
    doLogin(){
        window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
    }
    // 获取URL参数
    getUrlParam(name){
        // xxxx.com?param=123&param1=456
        let queryString = window.location.search.split('?')[1] || '',
            reg         = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
            result      = queryString.match(reg);
        //result: ['param=123', '', '123', '&']    
        return result ? decodeURIComponent(result[2]) : null;
    }
    // 成功提示
    successTips(successMsg){
        alert(successMsg || '操作成功！');
    }
    // 错误提示
    errorTips(errMsg){
        alert(errMsg || '好像哪里不对了~');
    }
    // 本地存储
    setStorage(name, data){
        let dataType = typeof data;
        // json对象
        if(dataType === 'object'){
            window.localStorage.setItem(name, JSON.stringify(data));
        }
        // 基础类型
        else if(['number','string','boolean'].indexOf(dataType) >= 0){
            window.localStorage.setItem(name, data);
        }
        // 其他不支持的类型
        else{
            alert('该类型不能用于本地存储');
        }
    }
    // 取出本地存储内容
    getStorage(name){
        let data = window.localStorage.getItem(name);
        if(data){
            return JSON.parse(data);
        }
        else{
            return '';
        }
    }
    // 删除本地存储
    removeStorage(name){
        window.localStorage.removeItem(name);
    }
}
 
export default MUtil;

陪玩游戏源码后台用户接口的response　
在这里插入图片描述
4.webpack中配置proxy服务端代理跨域

class MUtil{
    request(param){
        return new Promise((resolve, reject) => {
            $.ajax({
                type        : param.type        || 'get',
                url         : param.url         || '',
                dataType    : param.dataType    || 'json',
                data        : param.data        || null,
                success     : res => {
                    //console.log(res)
 
                    // 数据请求成功
                    if(0 === res.status){
                        typeof resolve === 'function' && resolve(res.data, res.msg);
                    }
                    // 没有登录状态，强制登录
                    else if(10 === res.status){
                        this.doLogin();
                    }
                    else{
                        typeof reject === 'function' && reject(res.msg || res.data);
                    }
                },
                error       : err => {
                    //console.log(err)
                    typeof reject === 'function' && reject(err.statusText);
                }
            });
        });  
    }
    // 跳转登录
    doLogin(){
        window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
    }
    // 获取URL参数
    getUrlParam(name){
        // xxxx.com?param=123&param1=456
        let queryString = window.location.search.split('?')[1] || '',
            reg         = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
            result      = queryString.match(reg);
        //result: ['param=123', '', '123', '&']    
        return result ? decodeURIComponent(result[2]) : null;
    }
    // 成功提示
    successTips(successMsg){
        alert(successMsg || '操作成功！');
    }
    // 错误提示
    errorTips(errMsg){
        alert(errMsg || '好像哪里不对了~');
    }
    // 本地存储
    setStorage(name, data){
        let dataType = typeof data;
        // json对象
        if(dataType === 'object'){
            window.localStorage.setItem(name, JSON.stringify(data));
        }
        // 基础类型
        else if(['number','string','boolean'].indexOf(dataType) >= 0){
            window.localStorage.setItem(name, data);
        }
        // 其他不支持的类型
        else{
            alert('该类型不能用于本地存储');
        }
    }
    // 取出本地存储内容
    getStorage(name){
        let data = window.localStorage.getItem(name);
        if(data){
            return JSON.parse(data);
        }
        else{
            return '';
        }
    }
    // 删除本地存储
    removeStorage(name){
        window.localStorage.removeItem(name);
    }
}
 
export default MUtil;

5.把数据请求接口分到src->service->user-service.jsx中

class MUtil{
    request(param){
        return new Promise((resolve, reject) => {
            $.ajax({
                type        : param.type        || 'get',
                url         : param.url         || '',
                dataType    : param.dataType    || 'json',
                data        : param.data        || null,
                success     : res => {
                    //console.log(res)
 
                    // 数据请求成功
                    if(0 === res.status){
                        typeof resolve === 'function' && resolve(res.data, res.msg);
                    }
                    // 没有登录状态，强制登录
                    else if(10 === res.status){
                        this.doLogin();
                    }
                    else{
                        typeof reject === 'function' && reject(res.msg || res.data);
                    }
                },
                error       : err => {
                    //console.log(err)
                    typeof reject === 'function' && reject(err.statusText);
                }
            });
        });  
    }
    // 跳转登录
    doLogin(){
        window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
    }
    // 获取URL参数
    getUrlParam(name){
        // xxxx.com?param=123&param1=456
        let queryString = window.location.search.split('?')[1] || '',
            reg         = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
            result      = queryString.match(reg);
        //result: ['param=123', '', '123', '&']    
        return result ? decodeURIComponent(result[2]) : null;
    }
    // 成功提示
    successTips(successMsg){
        alert(successMsg || '操作成功！');
    }
    // 错误提示
    errorTips(errMsg){
        alert(errMsg || '好像哪里不对了~');
    }
    // 本地存储
    setStorage(name, data){
        let dataType = typeof data;
        // json对象
        if(dataType === 'object'){
            window.localStorage.setItem(name, JSON.stringify(data));
        }
        // 基础类型
        else if(['number','string','boolean'].indexOf(dataType) >= 0){
            window.localStorage.setItem(name, data);
        }
        // 其他不支持的类型
        else{
            alert('该类型不能用于本地存储');
        }
    }
    // 取出本地存储内容
    getStorage(name){
        let data = window.localStorage.getItem(name);
        if(data){
            return JSON.parse(data);
        }
        else{
            return '';
        }
    }
    // 删除本地存储
    removeStorage(name){
        window.localStorage.removeItem(name);
    }
}
 
export default MUtil;

6.webpack中配置util和service的resolve

class MUtil{
    request(param){
        return new Promise((resolve, reject) => {
            $.ajax({
                type        : param.type        || 'get',
                url         : param.url         || '',
                dataType    : param.dataType    || 'json',
                data        : param.data        || null,
                success     : res => {
                    //console.log(res)
 
                    // 数据请求成功
                    if(0 === res.status){
                        typeof resolve === 'function' && resolve(res.data, res.msg);
                    }
                    // 没有登录状态，强制登录
                    else if(10 === res.status){
                        this.doLogin();
                    }
                    else{
                        typeof reject === 'function' && reject(res.msg || res.data);
                    }
                },
                error       : err => {
                    //console.log(err)
                    typeof reject === 'function' && reject(err.statusText);
                }
            });
        });  
    }
    // 跳转登录
    doLogin(){
        window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
    }
    // 获取URL参数
    getUrlParam(name){
        // xxxx.com?param=123&param1=456
        let queryString = window.location.search.split('?')[1] || '',
            reg         = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
            result      = queryString.match(reg);
        //result: ['param=123', '', '123', '&']    
        return result ? decodeURIComponent(result[2]) : null;
    }
    // 成功提示
    successTips(successMsg){
        alert(successMsg || '操作成功！');
    }
    // 错误提示
    errorTips(errMsg){
        alert(errMsg || '好像哪里不对了~');
    }
    // 本地存储
    setStorage(name, data){
        let dataType = typeof data;
        // json对象
        if(dataType === 'object'){
            window.localStorage.setItem(name, JSON.stringify(data));
        }
        // 基础类型
        else if(['number','string','boolean'].indexOf(dataType) >= 0){
            window.localStorage.setItem(name, data);
        }
        // 其他不支持的类型
        else{
            alert('该类型不能用于本地存储');
        }
    }
    // 取出本地存储内容
    getStorage(name){
        let data = window.localStorage.getItem(name);
        if(data){
            return JSON.parse(data);
        }
        else{
            return '';
        }
    }
    // 删除本地存储
    removeStorage(name){
        window.localStorage.removeItem(name);
    }
}
 
export default MUtil;

到这陪玩游戏源码中后台管理系统的登录页面基本就完成了，虽然过程比较复杂，但好在实现的效果还不错，希望对大家有帮助。

云豹科技程序猿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2022商业版游戏陪玩陪聊系统最新源码+视频教程+全套素材
weixin_46206109的博客
11-25 2937
提供在线聊天功能，在线下单功能，手机支持WAP，公众号，并可以封装成APP。源代码完全开源，不需要授权，不加密，这款是新版的 旧版的不带聊一聊这些东西 ，新版的优化了不少。网友分享给会员的，拿去学习研究吧，写法简单明晰，可以做项目但是一定要审核好，遵守好法律法规！互站价值15800商业版游戏陪玩陪聊系统最新。以及详细搭建教程包含素材图，内附小白搭建教程。破解版+视频教程+全套素材。
Java开发陪玩系统源码小程序app详细介绍
m0_73514975的博客
04-14 570
6. 统计报表：根据订单、服务、陪玩师等方面进行数据报表的分析和汇总，在后台查看各类信息的分布情况、统计数据的分析等。2. 服务列表：用户可以浏览选择陪玩师提供的服务类型和价格，包括游戏种类、等级、时长等。2. 服务管理：陪玩师可以发布自己的服务信息，包括提供的游戏、等级、价格等。3. 订单管理：陪玩师可以查看自己的订单、订单状态等情况，及时响应客户要求。4. 订单管理：管理所有的订单信息，包括订单状态的更新、支付情况等。2. 陪玩师管理：管理陪玩师信息和审核，包括审核申请、管理资料等。
游戏陪玩系统源码线上陪玩软件开发电竞陪练小程序陪玩APP
一个有节操的码农
06-05 641
提现手续费（用户提现时候的手续费，可以作为平台服务费使用，设置0.3就是百分之30，举例提现100服务费30，到账70，也可以使用系统配置的陪玩官佣金获取） 新增分销模式后使用分销模块，陪玩官的佣金配置，这块可以设置标准的提现手续费即可，比如百分之3。手动的意思是：用户申请提现 -管理后台财务中心-用自己的支付宝转账，或者微信扫码-转账完毕点击转账按钮（如果没有给手动用户付款 ，点了转账用户钱包也会扣款，但是不会实际到账，钱还在你的微信商户或者支付宝商户，如果管理后台充值的那就你自己理解）
2024最新最好用的陪玩系统，线上线下双结合加一键派单等成熟型陪玩小程序陪玩公众号搭建
wensiman的博客
04-02 629
陪玩程序源码不仅实现了约单陪玩功能，还实现了娱乐、社交等多种功能，可满足不同用户需求；游戏陪玩源码采用原生开发方式，代码完整，支持全球任意服务点搭建、部署。既有成品游戏陪玩源码，也支持二次开发，满足不同客户需求；提供完整源码，及售后服务。三、网站备案服务器在国内的话要进行备案，如果是国外的服务器则不需要备案，备案好再进行网站安装工作。搭建网站的环节为：购买域名、购买服务器、网站程序模块、网站备案、网站部署上线和网站推广组成。全开源陪玩平台源码MM约玩声优服务陪玩系统源码开黑约玩源码可封装APP教程。
最新游戏陪玩源码V2.0升级版/商业版语音聊天系统源码
geref的博客
11-20 1308
完整标题:此次更新在原有版本上传再次升级，修复部分逻辑以及bug。​修复bug：店员拒单后，退款会退到店员账号里而不是用户账户里。修复bug：客户在盲盒下单后，马上取消了订单，但是店员还是可以抢单（虽然点开模板消息右上角显示了已取消，但是依然可以接到单），会造成店员不知情用户取单，还是会去加客户微信。优化部分逻辑，此版本已趋于完美，毕竟是商业版。​同时增加一些常见的搭建问题解决方案（都是没操作对导致的）。
物联网后台管理系统源码.rar
03-23
物联网后台管理系统源码是开发和实现物联网应用的关键组成部分，它为设备管理、数据处理、用户交互等提供了核心支持。此压缩包"物联网后台管理系统源码.rar"可能包含了一系列的源代码文件，这些文件用于构建一个完整...
基于spring boot的后台管理系统(java源码+数据库完整版)
05-02
Guns项目代码简洁,注释丰富,上手容易,同时Guns包含许多基础模块(用户管理,角色管理,部门管理,字典管理等10个模块),可以直接作为一个后台管理系统的脚手架.Guns v3.0新增rest api服务,提供对接服务端接口的支持,并...
ASP.NET WebAPI+mvc4.0+EasyUI快速开发框架+通用权限管理系统源码
07-14
5、采用Knockout，，提供了一个数据模型与用户UI界面进行关联的高层次方式（采用行为驱动开发） 6、数据访问层采用强大的Fluentdata完美地支持多数据库操作 7、封装了一大部分比较实用的控件和组件，如自动完成控件...
java开发的网站后台管理系统
05-24
Java开发的网站后台管理系统是一个基于Java技术构建的用于管理网站后台功能的应用程序。这个系统通常包含用户管理、权限控制、内容发布、数据管理等多个模块，是企业级应用开发中的常见案例，非常适合Java初学者和...
.net(EF+MVC+Bootchart)通用后台管理系统框架源码带数据库十分强大界面漂亮可用作商城等项目
08-17
在本项目中，.NET 框架与 Entity Framework（EF）、MVC 和 Bootchart 结合，构建了一个强大的通用后台管理系统框架，特别适合用于开发如商城等商业项目。 1. **Entity Framework (EF)**：这是一个对象关系映射（ORM...
游戏代练工作室网站源码 后台完全改版
06-10
游戏代练工作室网站源码 后台完全改版版
adminSysS:游戏后台管理系统（整体）
03-11
管理系统 游戏后台管理系统（整体）
24个带后台的小程序源码
11-10
24个带有后台的小程序源码下载,供大家交流学习(后台语言多种)
游戏后端代码
11-19
后端源码，当作学习使用，能快速的使代码的技术得到提升
运营版仿比心游戏陪玩平台源码tt语音聊天美女约玩声优服务陪玩系统源码开黑约玩源码
11-05
运营版仿比心游戏陪玩平台源码tt语音聊天美女约玩声优服务陪玩系统源码开黑约玩源码
多客陪玩系统-开源陪玩系统平台源码-支持游戏线上陪玩家政线下预约等多场景应用支持H5+小程序+APP
最新发布
wensiman的博客
07-02 986
前端：Uniapp-vue2.0 后端：Thinkphp6 前后端分离 前端支持： H5+小程序+双端APP（安卓+苹果）【商业版】系统安装环境及步骤（仔细看要求）： 1.安装环境，Nginx或者Apache 请选择PHP7.3 数据库mysql5.62.上传后端源码到宝塔并解压，建立网站时同步创建数据库，开启thinkphp伪静态，申请SSL域名证书，绑定网站目录为/pulic3.在根目录里有个.evn文件，在输入数据库连接和授权码(最后一行auth_code那里填写/仅限商业版授权，开源不需要)4.导入
陪玩圈子APP小程序H5，免费源码，允许二开
xiaoxiaoheduoke的博客
06-30 687
代码基于vue 2语法编写，拷贝出来需保存为.vue文件。该示例代码中，包括三大模块：,,，三大模块的作用分别是：控制元素逻辑和数据绑定,编写组织页面元素的渲染,控制和渲染元素的样式。
现如今市场竞争激烈，语音交友陪玩APP源码如何适配用户？
bogokj__Cai的博客
10-14 1176
互联网+是两化融合的升级版，将互联网作为当前信息化发展的核心特征，提取出来，并与工业、商业、金融业、服务业等全面融合。这其中关键就是创新，只有创新才能让这个+真正有价值、有意义。 语音交友陪玩APP源码即可作为插件还可以进行独立运营交友语音源码可以作为部分功能应用于直播软件、线上社交软件或陪玩系统中。 在游戏陪玩源码开发中，并非所有事都能一帆风顺，当出现问题时，需要耐下心来仔细分析问题出现的原因并及时解决，以下是在游戏陪玩源码开发中，可能会遇到的一些分析以及解决方式。 图片缩放后模糊 我们在开发
BaseAdmin：一套开源的简单通用后台管理系统
"开源一套基于SpringBoot的简单通用后台管理系统，包括权限管理、菜单管理、用户管理等功能，采用layui作为前端框架，后端技术栈包括SpringBoot、Thymeleaf、WebSocket、Spring Security、SpringData-Jpa和MySql。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值