vue用户登录

最新推荐文章于 2024-05-15 19:06:59 发布
最新推荐文章于 2024-05-15 19:06:59 发布
阅读量542 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyp5201314/article/details/81780643
版权

话不多说，直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="user-scalable=yes" />
    <meta name="description" content="<?php echo $setting->description?>">
    <meta name="keywords" content="<?php echo $setting->keywords?>">
    <title>登陆</title>
    <?php include YILU_DIR.'/app/view/page/cssPath.php'?>
    <style>
        .login input{
            padding-left: 10px;
        }
        .form{
            width: 330px;
        }
        .form .tabs .tab{
            color: #888888;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <?php include YILU_DIR.'/app/view/page/head.php'?>
    <div class="top clearfix">
        <div class="container">
            <img class="pointer" src="<?php echo DOMAIN.$setting->logo; ?>" onclick="window.location.href='<?php echo yilu_site_url() ?>'"/>
        </div>
    </div><!--top-->
    <div class="login">
        <div class="container">
            <img src="<?php echo DOMAIN.$setting->login_banner; ?>" style="margin-left: -362px"/>
            <div class="form form-change" id="login">
                <div class="tabs">
                    <div class="tab on" data-target="loginForm">密码登陆</div>
                    <div class="tab" data-target="codeLoginForm">验证码登陆</div>
                </div>

                <div class="tab-contents" id="loginForm">
                    <div class="content">
                        <input type="text" class="input" name="mobile" value="<?php echo $nickname; ?>" placeholder="手机号"/>
                        <input type="password"  name="password" class="input" value="<?php echo $token; ?>" placeholder="密码"/>
                        <div class="input-group">
                            <input type="text" name="code" class="input input-change" placeholder="验证码"/>
                            <img class="btn pointer" src="<?php echo yilu_site_url('web_code') ?>" align="absbottom" onclick="this.src='<?php echo yilu_site_url('web_code') ?>&t='+Math.random();" />
                        </div>
                        <div class="tip-both">
                            <a name="forgetPassword">忘记密码</a>
                            <input type="checkbox" name="holdPas" <?php if($holdPass){echo 'checked="checked"';} ?> value="autoLogin"/>7天内自动登陆
                        </div>
                        <button type="button" class="primary" name="login">登陆</button>
                        <div class="tip-center">没有账号？<a href="<?php echo yilu_site_url();?>">免费注册</a></div>
                    </div>
                </div>
                <div class="tab-contents" id="codeLoginForm" style="display: none">
                    <div class="content">
                        <input type="text" class="input" name="mobile" value="<?php echo $mobile; ?>" placeholder="手机号"/>
                        <div class="input-group" style="display: flex">
                            <input style="width: 60%;height: 34px" type="text" name="mobileCode" class="input" placeholder="请输入短信验证码" data-pattern="\S+" data-error="短信验证码不能为空"/>
                            <button style="width: 40%" class="btn" name="sendCode">发送验证码</button>
                        </div>
<!--                        <div class="tip-both">-->
<!--                            <a href="--><?php //echo yilu_site_url('edit'); ?><!--">忘记密码</a>-->
<!--                            <input type="checkbox" name="holdPas" --><?php //if($holdPass){echo 'checked="checked"';} ?><!-- value="autoLogin"/>7天内自动登陆-->
<!--                        </div>-->
                        <button type="button" class="primary" name="login">登陆</button>
                        <div class="tip-center">没有账号？<a href="<?php echo yilu_site_url('register');?>">免费注册</a></div>
                    </div>
                </div>
            </div>
            <div class="form" id="forgetPas" style="display: none">
                <div class="tabs">
                    <div>找回密码</div>
                </div>

                <div class="tab-contents">
                    <div class="tab-contents">
                        <div class="content">
                            <input type="text" class="input" name="mobile" placeholder="请输入手机号" data-pattern="\d+" data-error="手机号不能为空"/>
                            <div class="input-group">
                                <input type="text" class="input" name="mobileCode" placeholder="输入短信验证码"  data-pattern="\S+" data-error="短信验证码不能为空"/>
                                <button class="btn" name="sendCode">获取</button>
                            </div>
                            <div class="input-group">
                                <input type="password" style="width: 100%" class="input" name="password" placeholder="输入新密码"/>
                            </div>
                            <div class="input-group">
                                <input type="password" style="width: 100%" class="input" name="checkPassword" placeholder="请再输入一次新密码"/>
                            </div>
                            <button type="button" class="primary" name="resetPassword">重置密码</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php include YILU_DIR.'/app/view/page/foot.php'?>
</div>
<?php include YILU_DIR.'/app/view/page/bottomScript.php'?>
<!-- jQuery -->


<script type="text/javascript">
    (function() {
        $(".tab").click(function () {
            $(".tab").removeClass('on');
            $(this).addClass("on");

            var target = $(this).attr("data-target");
            $(".tab-contents").hide();
            $("#" + target).show();
        });

        var form = $("#loginForm");
        form.find("input").keydown(function(e){
            e = e || window.event;
            if (e.keyCode == 13){
                login();
            }
        });

        form.find("button[name='login']").click(function(){
            login()
        });
        function login(){
            var params = Util.parseForm(form);
            console.log(params)
            params['password'] = hex_md5(params['password']);

            var urlString = "<?php echo yilu_site_url('check_login'); ?>";
            Util.post(urlString,params,function(){
                if(document.referrer.indexOf('f=register') != -1){
                    window.location.href = 'http://www.tuilala.com/index.php';
                } else{
                    //window.history.back();
                    window.location.href = 'http://www.tuilala.com/index.php';
                }
                //location.href = "<?php echo yilu_site_url()?>";
            });
        }

        var codeLoginForm = $("#codeLoginForm");
        codeLoginForm.find("input").keydown(function(e){
            e = e || window.event;
            if (e.keyCode == 13){
                mobileLogin();
            }
        });

        codeLoginForm.find("button[name='login']").click(function(){
            mobileLogin()
        });

        function mobileLogin(){
            var params = Util.parseForm(codeLoginForm);
            var urlString = "<?php echo yilu_site_url('check_mobile_login'); ?>";
            Util.post(urlString,params,function(){
                if(document.referrer.indexOf('f=register') != -1){
                    window.location.href = 'http://www.tuilala.com/index.php';
                } else{
                    //window.history.back();
                    window.location.href = 'http://www.tuilala.com/index.php';
                }

//                showFail('登陆成功',function () {
//
//                    location.href = "<?php //echo yilu_site_url()?>//";
//                });
            });
        }


        var forgetPassForm = $("#forgetPas");
        $("a[name='forgetPassword']").click(function () {
            $(".form").hide();
            forgetPassForm.find(".tab-contents").show();
            forgetPassForm.show();
        });

        forgetPassForm.find("button[name='resetPassword']").click(function(){
            if(!Util.checkValidity(forgetPassForm)){
                return;
            }

            var params = Util.parseForm(forgetPassForm);
            if(params['password'] != params['checkPassword']){
                showFail('密码输入不一致');
                return;
            }
            params.password = hex_md5(params.password);
            var urlString = "<?php echo yilu_site_url('reset_password'); ?>";
            Util.post(urlString,params,function (data) {
                showFail("设置成功",function () {
                    window.location.reload();
                });

            });
        });

        $("button[name='sendCode']").click(function () {
            var sendCodeButton = $(this);
            var mobile = sendCodeButton.closest(".tab-contents").find("input[name='mobile']").val();
            if(!Util.checkMobile(mobile)){
                return;
            }
            var params = {mobile:mobile};
            var urlString = "<?php echo yilu_site_url('send_mobile_code'); ?>";
            Util.post(urlString,params,function () {
                showFail("验证码已发送");
                codeTime(sendCodeButton[0]);
            });
        });
    })();
</script>
</body>
</html>
yyp5201314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE搭建一个Login页面和Home页
qq_45709416的博客
08-10 446
发现页头宽度没有占满浏览器，在index.html的body添加去除浏览器默认样式。发现左菜单栏，如果要添加其他的菜单就要在页面重复添加菜单的代码，就用一个办法。添加菜单激活回调事件，可以获取到子组件的index。在main.js引入element-ui。效果不对，应该展示到页头最右边，添加样式。在主页就展示了Test1测试组件的页面。加入Container 布局容器。删除一些只留下导航一，展示效果。在左侧菜单index添加路径。可以遍历router的内容。测试组件配置router。
Vue实现登录功能全套详解（含封装axios）
陈新科的博客
08-24 2万+
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面5、每次调后端接口，都要在请求头中加token。
linux centos7安装qpress工具
最新发布
学亮编程手记
05-15 303
【代码】linux centos7安装qpress工具。
Vue3入门笔记----登录功能
panzhixiang
11-15 1万+
通过axios、jwt和vuex实现登录功能
vue登陆页面
qq_45179361的博客
02-11 8076
vue登陆页面实现。
快速上手vue的登录界面(最新版)
热门推荐
呼啦啦啦啦啦的博客
07-22 3万+
快速上手vue的登录界面(最新版)
vue 实现用户登录方式的切换功能
10-15
在Vue.js开发中，用户登录方式的切换是一个常见的需求，特别是在多模式登录的场景下。本文将深入探讨如何在Vue中实现这个功能，通过实例代码详细讲解，帮助开发者理解和实践。 首先，我们需要在Vue组件的数据（data...
vue实现登录拦截
10-15
用户登录 用户名" v-model="username" @blur="inputUserBlur" @focus="inputFocus"> <i class="fa fa-user"></i> 密码" v-model="psd" @blur="inputPsdBlur"> <i class="fa fa-lock"></i> ...
vue登录注册实例详解
12-10
1.安装脚手架:npm install vue-cli -g 2.wepack生成html模版：vue init webpack ‘ 文件名’ 3.安装axios、js-cookie、element-ui、stylus等等常用插件 步骤二 1.在main.js中引入router、element-ui等 import Vue ...
django rest framework vue 实现用户登录详解
09-18
主要介绍了django rest framework vue 实现用户登录详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue网页登录界面
12-21
8. **路由**：如果你的应用使用Vue Router进行页面导航，登录成功后，你可以通过`router.push`方法将用户重定向到主页面或其他授权后的区域。 9. **样式**：Vue项目通常结合CSS预处理器（如Sass、Less）或CSS模块...
qpress-11-linux-x64.rar
08-31
用xtrabckup备份还原的时候做了压缩，还原的时候解压缩的报错qpress命令不存在。 解决方法是下载qpress安装包，解压后将qpress文件移动到/usr/bin/目录下，然后授予执行权限 mv qpress /usr/bin/ cd /usr/bin/ chmod +x qpress
qpress 64位安装包
09-22
QuickLZ 是一个号称世界压缩速度最快的压缩库，并且也是个开源的压缩库，其遵守 GPL 1, 2 或 3协议。 在QuickLZ的官网上有个关于QuickLZ的测试： QuickLZ的前端程序叫qpress，可以用于网络传输时的压缩
qpress-11-1.el7.x86_64.rpm
02-27
最近在搭建pxc集群时发现缺少这个包在百度一直找不到合适的，从谷歌下载了下载，欢迎使用qpress-11-1.el7
使用vue编写登录页面代码
weixin_35754962的博客
12-19 986
使用 Vue 编写登录页面代码的一种方法是： 在页面中引入 Vue 库，并创建 Vue 实例。 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { ...
vue实现简单登录界面
StringBuffer Obj 的博客
06-27 5710
记录一个简单登录界面实现
vue简单注册登入
qq_60954460的博客
06-16 4714
随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架代码如下（示例）： 2.账号密码存入vuex的代码 代码如下（示例）： 该处使用的url网络请求的数据。代码如下（示例）： 四、获取接口数据 1.首页数据 代码如下（示例）： 总结 提示：vue简单注册、登入、数据获取。 例如：以上就是今天要讲的内容，本文仅仅简单介绍了注册、登入、数据获取的使...
关于在vue中实现7天免登录
zhou981130的博客
07-19 1699
在vue中实现7天免登录 核心即利用vue的路由守卫beforeEach import Vue from 'vue' import App from './App.vue' import router from './router/index.js' import './assets/css/icons.css' import './assets/css/font.css' import ElementUi from 'element-ui' import './assets/css/theme-chal
Vue实现记住账号密码功能
weixin_44979432的博客
12-24 1929
Vue实现记住账号密码功能
vue用户登录注册案例
05-31
1. 创建一个名为`Login.vue`的登录组件，并设置登录表单： ``` 用户登录 ... const user = users.find(u => u.username ...以上是一个简单的Vue用户登录和注册的案例，您可以根据自己的实际需求进行修改和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值