精华内容
下载资源
问答
  • 一、背景我们平时做系统为了保证用户操作数据的安全性,很多时候当用户长时间不再操作电脑的时候,应该给用户自动退出系统,这样可以防止有别人使用电脑操作上一个用户的数据。二、设计想法监听鼠标移动以及键盘操作...

    一、背景

    我们平时做系统为了保证用户操作数据的安全性,很多时候当用户长时间不再操作电脑的时候,应该给用户自动退出系统,这样可以防止有别人使用电脑操作上一个用户的数据。

    二、设计想法监听鼠标移动以及键盘操作。

    设置timer,timer到达指定值后进行跳转并提示。

    开启timer并且关闭timer

    三、代码实现

    设定一个计数值,利用js原生的事件,对鼠标,键盘进行监听,如果一有触发的鼠标,键盘的话,就将计数值清零,否则,计数值一直累加,当累加到一个目标值,即那个无操作退出系统的时间就可以触发退出系统函数。

    完整的代码:

    data () {

    return {

    count: 0

    }

    },

    mounted () {

    // 监听鼠标

    document.onmousemove = (event) => {

    let x1 = event.clientX

    let y1 = event.clientY

    if (this.x !== x1 || this.y !== y1) {

    this.count = 0

    }

    this.x = x1

    this.y = y1

    }

    // 监听键盘

    document.onkeydown = () => {

    this.count = 0

    }

    // 监听Scroll

    document.onscroll = () => {

    this.count = 0

    }

    this.setTimer()

    },

    // 最后在beforeDestroy()生命周期内清除定时器:

    beforeDestroy () {

    this.clearTimer()

    },

    methods: {

    clearTimer () {

    clearInterval(window.myTimer)

    window.myTimer = null

    },

    setTimer () {

    this.count = 0

    if (!window.myTimer) {

    window.myTimer = window.setInterval(this.cookieTimeout, 1000)

    }

    },

    cookieTimeout () {

    // 判断用户5分钟无操作就自动登出

    let outTime = 5

    this.count++

    if (this.count === outTime * 60) {

    this.$message({

    message: '系统已经五分钟无操作,将在十秒后退出登录,如不想退出系统,请任意操作鼠标键盘...',

    type: 'error'

    })

    setTimeout(this.logout, 10000)

    // console.log('aaaa', this.count)

    }

    },

    logout () {

    // console.log('bbb', this.count)

    if (this.count >= 5 * 60) {

    sessionStorage.setItem('loginname', '')

    this.$router.replace({name: 'Login'})

    }

    },

    }

    功能实现还是相对简单的,仅仅作为记录一下。

    展开全文
  • Vue-cli 微博注册登录系统 展示 下载链接 链接:https://pan.baidu.com/s/1h7GcnPzGe0AmztnSD9gv1A 提取码:na37 流程 首先花了点事件撸出页面 然后设计逻辑,其中有些坑记录一下 Input框样式参考这个连接 express...

    Vue-cli 项目

    展示

    Vue-cli 微博注册登录系统

    下载链接

    链接:https://pan.baidu.com/s/1h7GcnPzGe0AmztnSD9gv1A
    提取码:na37

    流程

    • 首先花了点事件撸出页面
    • 然后设计逻辑,其中有些坑记录一下
    • Input框样式参考这个连接
    • express的使用
    展开全文
  • Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库. element官网:http://element-cn.eleme.io/#/zh-CN elementUI的快速使用:http://element-cn.eleme.io/#/zh-CN/component/quickstart...

    Login.vue页面

    elementUI

    Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.
    element官网:http://element-cn.eleme.io/#/zh-CN
    elementUI的快速使用:http://element-cn.eleme.io/#/zh-CN/component/quickstart

    登录页面代码分析(Login.vue)

    <template>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
        <h3 class="title">系统登录</h3>
        <el-form-item prop="account">
          <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
          <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
        </el-form-item>
      </el-form>
    </template>
    
      import { requestLogin } from '../api/api';
      //import NProgress from 'nprogress'
      export default {
        data() {
          return {
            logining: false,
            ruleForm2: {
              account: 'admin',
              checkPass: '123456'
            },
            rules2: {
              account: [
                { required: true, message: '请输入账号', trigger: 'blur' },
                //{ validator: validaePass }
              ],
              checkPass: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                //{ validator: validaePass2 }
              ]
            },
            checked: true
          };
        },
        methods: {
          handleReset2() {
            this.$refs.ruleForm2.resetFields();
          },
          handleSubmit2(ev) {
            var _this = this;
            this.$refs.ruleForm2.validate((valid) => {
              if (valid) {
                //_this.$router.replace('/table');
                this.logining = true;
                //NProgress.start();
                var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
                requestLogin(loginParams).then(data => {
                  this.logining = false;
                  //NProgress.done();
                  let { msg, code, user } = data;
                  if (code !== 200) {
                    this.$message({
                      message: msg,
                      type: 'error'
                    });
                  } else {
                    sessionStorage.setItem('user', JSON.stringify(user));
                    this.$router.push({ path: '/table' });
                  }
                });
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          }
        }
      }
    

    :model 表单数据对象 用于绑定数据(即date与绑定的model同名的data数据)
    还需要在对应的表单中,确定赋值(v-model=“ruleForm2.checkPass”),即可。
    prop 传入 Form 组件的 model 中的字段
    rules 表单验证规则

       rules2: {
         account: [
           { required: true, message: '请输入账号', trigger: 'blur' },
           //{ validator: validaePass }
         ],
         checkPass: [
           { required: true, message: '请输入密码', trigger: 'blur' },
           //{ validator: validaePass2 }
         ]
       },
    

    参数说明:required 是否必填,如不设置,则会根据校验规则自动生成;message:是提示的内容;trigger:是什么事件触发。
    这段代码的含义:当输入为空的情况下,当对应的输入框失去焦点时,会显示报错信息(即message的内容)。
    ref 被用来给元素或者子组件注册引用信息。是vue中的属性,el中没得,相关文档:https://www.cnblogs.com/xumqfaith/p/7743387.html
    label-position 表单域标签的位置,如果值为 left 或者 right 时,则需要设置 label-width
    auto-complete on 默认。规定启用自动完成功能。off 规定禁用自动完成功能。
    http://www.w3school.com.cn/tags/att_input_autocomplete.asp
    @click.native.prevent vue 里面所有键盘事件都是需要加.native才能生效,如果在当前按钮之前绑定过键盘点击事件,后面的按钮都需要加.native才能生效。prevent是阻止冒泡。
    loading 加载数据时显示效果
    表单验证: this.$refs.ruleForm2.validate((valid)=>{.....}); //不是特别理解
    验证form上的添加的表单验证是否正确。

      if (valid) {
        //_this.$router.replace('/table');
        this.logining = true;    //显示加载数据效果
        //NProgress.start();
        var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };       //读取表单数据
        requestLogin(loginParams).then(data => {     //请求数据
          this.logining = false;					 //关闭数据加载效果
          //NProgress.done(); 
          let { msg, code, user } = data;           //读取返回的值
          if (code !== 200) {                       //返回码为200时,报错
            this.$message({
              message: msg,
              type: 'error'
            });
          } else {                                  //否则(即返回码为200时)
            sessionStorage.setItem('user', JSON.stringify(user));  
            this.$router.push({ path: '/table' });
          }
        });
      } else {
        console.log('error submit!!');
        return false;
      }
    

    关于sessionStorage: https://www.cnblogs.com/polk6/p/5512979.html
    sessionStorage是HTML5新增的会话存储对象,用于保存保存同一窗口(标签页的数据),在关闭窗口或标签页的时候会删除这些数据。
    sessionStorage.setItem(string key, string value) 该方法接受一个键名(key)和值(value)作为参数,将键值对添加到存储中;如果键名存在,则更新其对应的值。value的值必须是字符串,如果不是也会自动转换成字符串。
    sessionStorage也可存储Json对象:存储时,通过JSON.stringify()将对象转换为字符串格式;读取时,通过JSON.parse()将字符串转换回对象。
    $router.push 编程式导航,同<router-link>创建a定义导航链接类似。
    编程式导航:https://router.vuejs.org/zh/guide/essentials/navigation.html

    展开全文
  • 现在给大家带来的是一个基于Springboot+Vue实现的基于前后端分离的校园招聘兼职平台设计系统一共有3个角色包括求职用户,企业公司和管理员。前端用户注册登录后可以查询企业招聘信息,查看的时候可以按照企业名称...

    开发软件:Eclipse或者Idea 数据库:mysql
    技术栈框架:Vue,Vuex,Vue-Router,ElementUI,Springboot

    现在给大家带来的是一个基于Springboot+Vue实现的基于前后端分离的校园招聘兼职平台设计,系统一共有3个角色包括求职用户,企业公司和管理员。前端用户注册登录后可以查询企业招聘信息,查看的时候可以按照企业名称、岗位名称关键词、岗位分类、学历过滤查询,可以查看职位详情页面并且投递简历应聘,也可以收藏感兴趣的职位,还可以对职位进行评论,也可以查看其它的求职用户方便私下交流经验,可以查询网站友情链接,用户在个人中心可以修改自己的资料和密码等,个人后台用户可以登记求职者信息包括姓名、电话、照片、学历、简历、工作经历等,可以查看自己申请的应聘职位请求是否通过企业审核等;企业注册登录后可以修改企业信息,可以发布职位招聘信息,处理求职者发来的应聘简历等;管理员登录后可以修改个人信息和密码,可以管理所有用户信息,可以管理所有企业信息,设置职位分类和学历参数,管理网站友情链接信息,管理员所有的招聘信息,管理所有的应聘记录,管理所有的求职者信息等!

    访问地址:http://localhost:8080/springbootjlvpC/front/index.html
    用户账号密码:zhangsan/1
    企业账号密码:tengxun/1
    管理员账号密码:abo/1

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 员工登录系统后可以查看系统新闻公告,查看公司待办事件,员工主要是进行各种申请包括请假申请、加班申请、出差申请、公章类信息申请、离职申请,查看管理员的审批结果。管理员登录后可以添加管理员工信息,可以审批...
  • 本项目前端使用的是vue3,后端使用了node框架Koa2,数据库使用了MongoDB, 为前后端分离项目,现在已经部署到了阿里云服务器。 3.效果图 4.源码获取(不免费) 583710676(QQ及微信) ...
  • 开发软件: WebStorm 开发环境:Springboot + Vue + mysql数据库 整个项目一个有三个身份:普通学生,社长和管理员。用户打开网站后可以注册成为普通学生,普通学生可以查询社团信息,申请加入感兴趣的社团,评论...
  • 开发工具: WebStorm 开发环境:Nodejs + vue + express + mongodb数据库 本考试系统一共3个身份,学生、老师和管理员。老师登录后可以添加题库,添加生成试卷,其中的试题类型包括了单选,多选,判断,填空和问题,...
  • 开发工具: WebStorm 开发环境:Nodejs + vue + express + mongodb数据库 失物招领平台主要使用JavaScript作为开发语言,前端使用当前最热门的三大框架之一Vue,后端使用以Node.js为基础的express框架,使用mongodb...
  • 技术介绍:前端上采用vue-cli脚手架创建项目,通过axios进行相关的数据请求(类似jQuery的ajax)。 后端上使用的是nodejs平台下的express框架,主要用来定义后端请求接口的具体实现逻辑。 数据库采用的是非关系型...
  • 该代码是根据Vue和Meteor最佳实践以及Vuetify设计系统(材料)构建的。 流星的帐户系统登录,注册,访问控制,忘记密码 基于功能的结构是中型和大型应用程序的最佳实践 用户管理和角色 能够在基于模式的身份验证...
  • 系统是一个基于SSM+Vue.js的网上家电商城系统。...基于以上技术,本系统经过数据库设计系统功能设计系统实现等开发流程,完成了软件开发的相关工作,满足实际生产生活中网上家电商城的功能需求。
  • 人事管理系统(电子) 这个小项目是我在数据库课程设计时完成的,功能比不是很完善,漏洞也比较多。支持邮箱密码登录,也支持微信扫码登录。微信扫码登录那里使用websocket完成后端到前端的消息传递。 前端 ...
  • 实现了登录权限验证,动态路由生成(新加入模块,根据模块生成对应模块的菜单信息),参考和 ,实现更标准化的前端实例模型,根据自己的业务修整该对应的路由信息​​等模块信息,快速构建后台管理系统模板。...
  • 基于Vue的管理后台设计(布局篇)

    千次阅读 2019-08-17 17:28:47
    基于Vue的管理后台设计登录鉴权篇) 基于Vue的管理后台设计(打包部署篇) 前言 我打算把接下来要写的几篇文章写成一个系列,用来记录一下如何基于Vue一步一步地搭建一个后台管理系统。 文章前传: 《Vue组件...
  • 开发技术:Vue前端 + Vant组件 + Java后台服务器端 + mysql数据库 用户成员可以客户端注册登录登录后进入首页显示了最新的表扬信记录用于弘扬中华民族拾金不昧的精神,用户可以发布自己的寻物启事和失物招领信息,...
  • <div><h1>Vue 项目架构设计与工程化实践 转载文章请注明出处,谢谢 https://github.com/berwin/Blog/issues/14</p> 文中会讲述我从0~1搭建一个前后端分离的vue项目详细过程 <p>Feature: * 一套很实用...
  • 管理员办理读者的借阅登记和图书归还操作,客户端用户注册登录后可以查询自己的借阅记录,也可以修改个人信息。 图书类型: 图书类别id,类别名称,可借阅天数 图书: 图书条形码,图书名称,图书所在类别,图书价格,库存,...
  • 登录页 列表操作 动态图 4.表结构设计 用户表 CREATE TABLE `tb_user` ( `id` int(10) NOT NULL AUTO_INCREMENT COMMENT 'id', `username` varchar(100) DEFAULT NULL COMMENT '用户名', `ni
  • 开发技术:Vue前端 + Vant组件 + Java后台服务器端 + mysql数据库 系统有管理员和用户2个身份。客户可以通过注册登陆后查询区域和停车位信息,可以选择停车位进行预约,预约的时候自动估算大概的价格,后台管理员再...
  • 还深入讲解了数据库设计及后台管理系统开发,例如后台登录模块、产品发布模块、订单管理模块、用户管理等模块等,为了演示接口创建和调用,全程演示了webapi的创建和部署。通过本套教程的学习,你不仅可以学到vue的...
  • JAVA8、MySQL5.7、SpringBoot2.1.0、Vue、ElementUI、JPA 主要功能 学生信息:学号、姓名、性别、联系方式、班级、 成绩管理:学号、课程编号、成绩 班级管理:班级名称,班主任、工号、联系方式 年级管理:年级名称...
  • 简单学生信息管理前端 基于Vue.js实现 前后端数据交互使用Axios 提交日志 根据模板搭建项目结构 + ...Home.vue : 登录系统后的系统主页面 HomeSidebar.vue : 系统主页的菜单条 Info.vue : 学生信息显示页面 Initial.vu
  • JAVA8、MySQL5.7、SpringBoot2.1.0、Vue、ElementUI、JPA 主要功能 销售开单:客户名称、仓库、商品、开单日期 销货历史:客户名称、仓库、商品、日期 进货开单:供应商、仓库、商品 供应商管理:供应商名称、联系人...
  • 详细演示了vue组件开发,组件之间的参数传递、表单验证、数据双向绑定、列表渲染、使用VUEX进行全局变量状态控制、使用axios与webapi进行数据交换,此教程不仅仅讲解了前端,还深入讲解了数据库设计及后台管理系统...
  • vue-demo 青否云 vue demo 官网 http://cloud.qingful.com 演示 https://qingful.github.io/jquery-demo/index.html 账号:13253522080 密码:mmmmmm 使用 登录青否云 创建应用 数据设置。 创建数据表。 创建数据...
  • 基于Java+vue的IM系统

    2021-03-30 22:00:55
    IM系统(代码实现+设计思路)设计思路MVC架构(基于Springmvc实现)代码实现一、数据库表实现1.MySQL数据库2.数据库各类表设计3.SQL文件二、业务逻辑实现1.单点登录功能(JWT+拦截器+redis)代码实现2.集成阿里云oss...
  • 项目简介 本项目前后端分离,mistore为前端部分,mistore-server为后端部分。密码使用双重MD5加密,使用redis来储存商品信息和用户...前端:Vue+Vue-router+Vuex+Element-ui+Axios 后端:SpringBoot+Mybatis+Sprin.
  • 毕业设计:微博用户情感分析系统 (2020/02/02)更新,近日有过多童鞋来问我这个项目跑不起的问题,当时水平有点不够,写的确实有点乱,这里简单说明一下项目下下来直接跑起的方法。 1,pip install requirements....
  • 单点登录,在企业的应用中是多样的。上篇文章中,我们提到企业的一个域名承载着不同的应用。...不同域名 SSO 原理设计认证系统根据浏览器的登录信息,进行身份认证。如果通过,返回给浏览器一个证明 [ 认证系统_ti...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 276
精华内容 110
关键字:

vue登录系统设计

vue 订阅