m.lom599.com_手机版乐白家网址_乐百家手机首页登录

js手风琴菜单组件开发实例,angular登录注册

作者: 手机版乐白家网址  发布:2019-08-22

Angular获取手机验证码实现移动端登录注册功能,angular登录注册

之前一直在用jQuery来做项目,使用比较熟练,目前公司要求使用angular来做项目,遇到一个登录模块如下所示,功能有两个方面,一个是点击按钮获取验证码,一个是点击登录验证表单。从用户体验角度来考虑有两个要注意的地方,默认两个按钮应该都是不可点击的,输入正确的手机号时验证码的按钮可点击,当再输入验证码时登录按钮可点击。

图片 1 

代码结构如下:

<form name="loginForm" ng-controller="loginCtrl" ng-submit="submitForm(loginForm.$valid)" novalidate>
  <div class="inputItem">
    <input type="number" name="phoneNum" placeholder="手机号" ng-model="userPhone" ng-pattern="/^1[3|4|5|7|8]d{9}$/" required/>
  </div>
  <div class="inputItem">
    <input type="number" name="phoneCode" placeholder="短信验证码" ng-model="userPhoneCode" ng-focus="errorHint=ture" required/>
    <div class="button01 null" ng-if="loginForm.phoneNum.$invalid">{{paracont}}</div>
    <div ng-class="paraclass" ng-click="loginCode()" ng-if="loginForm.phoneNum.$valid">{{paracont}}</div>
    <div class="errorHint fontred" ng-if="errorHint">验证码不正确</div>
  </div>
  <button type="submit" class="button02" ng-disabled="loginForm.$invalid">登 录</button>
</form>

之前写的一版没有对获取验证码按钮进行验证,后来修改了一下,验证码的按钮要在手机号输入正确时显示可点击,但是angular没有onInput这个方法,为了方便,写了两个按钮来实现这个效果。

样式如下:

.inputItem{
  width:6.4rem;
  height:0.9rem;
  margin:0 auto;
  border:1px solid #ccc;
  background:#fff;
}
.inputItem:first-child{
  border-bottom:none;
}
.inputItem input{
  padding:0.1rem 0;
  margin:0.2rem;
  width:3.7rem;
}
.button01{
  width:2rem;
  height:0.7rem;
  border:1px solid #ccc;
  text-align: center;
  line-height:0.7rem;
  font-size:0.26rem;
  float:right;
  margin:0.1rem 0.2rem 0 0;
  box-sizing:border-box;
}
.button01.null{
  color:#999;
}
.fontred{
  color:#red;
}
.button02{
  display:block;
  width:6.4rem;
  height:0.9rem;
  text-align: center;
  line-height:0.9rem;
  border:1px solid #ccc;
  margin:0.8rem auto 0;
  background:#fff; 
}
.errotHint{
  line-height:0.6rem;
  font-size:0.24rem;
  padding-left:0.2rem;
  }

接下来就是比较重要的AngularJS代码了:

angular.module('loginModule',[]).controller('loginCtrl',['$scope','$interval',function($scope,$interval){
  //获取验证码
  $scope.paracont = '获取验证码';
  $scope.paraclass = 'button01';
  $scope.errorHint = false;
  $scope.paraevent = true;
  $scope.loginCode = function(){
    if($scope.paraevent){
      var second = 59;
      $scope.paracont = second   '秒后重发';
      $scope.paraclass = 'null button01';
      var timer = $interval(function(){
        if(second <=0){
          $interval.cancel(timer);
          $scope.paracont = '重发验证码';
          second = 59;
          $scope.paraclass = 'button01';
          $scope.paraevent = true;
        }else{
          second--;
          $scope.paracont = second   '秒后重发';
          $scope.paraevent = false;
        }        
      },1000);
    }
  }
  //提交
  $scope.submitForm = function(isValid){
    if(isValid){
      alert("success!");   
    }
  }  
}])

最终写出来的效果就是下面这个样子了。

图片 2

以上所述是小编给大家介绍的Angular获取手机验证码实现移动端登录注册功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对帮客之家网站的支持!

之前一直在用jQuery来做项目,使用比较熟练,目前公司要求使用angular来做项...

Vue.js手风琴菜单组件开发实例,vue.js手风琴

本文为大家分享了vuejs组件开发之手风琴菜单组件实例,供大家参考,具体内容如下

小图标是引入font-awesome字体图标库绘制的。效果如下图所示:

图片 3

代码:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>index</title>
 <link rel="stylesheet" href="css/font-awesome.min.css">
 <link rel="stylesheet" href="css/index.css">
 <script type="text/javascript" src="../lib/vue.min.js"></script>
 <script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>
 <style>
 * {
  margin: 0;
  padding: 0;
 }

 body {
  padding-top: 100px;
 }

 #tabPanel {
  width: 120px;
  height: auto;
  margin: 0 auto;
 }

 #tabPanel .item .sildermun ul li {
  height: 40px;
  line-height: 40px;
  list-style: none;
 }

 #tabPanel .item .sildermun ul li:hover {
  background: #ccc;
 }

 #tabPanel .item .menutitle {
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #ccc;
 }

 #tabPanel .item .sildermun {
  text-align: center;
  background: #eee;
 }
 </style>
</head>

<body>

 <div id="tabItem">
 <slider-item></slider-item>
 <slider-item></slider-item>
 <slider-item></slider-item>
 <slider-item></slider-item>
 </div>

 <!--组件模板,也可以使用template标签方式引入模板-->
 <template id="tab">
 <div id="tabPanel">
  <div class="item">
  <div class="menutitle" @click="toggle()"><i class="icon-th-list"></i> {{parentItem}}</div>
   <div class="sildermun" v-show="status">
   <ul>
    <li v-for="(index,v) in childItems"><i class="icon-star"></i> {{v index}}</li>
   </ul>
   </div>
  </div>
  </div>
 </div>
 </template>
 <!--组件模板,也可以使用template标签方式引入模板-->
</body>

</html>

<script>
 var vue = new Vue({
 el: "#tabItem",
 data: {

 },
 components: {
  'slider-item': {
  template: '#tab',
  data: function() {
   return {
   status: false,
   parentItem: "父级菜单",
   childItems: ["子级菜单", "子级菜单", "子级菜单", "子级菜单"]
   }
  },
  methods: {
   //切换滑块
   toggle: function() {
   this.status = !this.status;
   }
  }
  }
 }
 });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

本文为大家分享了vuejs组件开发之手风琴菜单组件实例,供大家参考,具体内容如下 小图标是引...

微信小程序中做用户登录与登录态维护的实现详解,小程序用户登录

总结

大家都知道,在开发中提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情。像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件。

让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情。我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Session)状态。下面来看看详细的介绍:

在微信小程序中,我们大致会涉及到以下三类登录方式:

  • 自有的账号注册和登录
  • 使用其他第三方平台账号登录
  • 使用微信账号登录(即直接使用当前已登录的微信账号来作为小程序的用户进行登录)

第一和第二种方式是目前Web应用中最常见的两种方式,在微信小程序中同样可以使用,但是需要值的注意的是,小程序中没有Cookie的机制,所以在使用这2种方式前,请确认你们或第三方的API是否需要依赖Cookie;还有小程序中也不支持HTML页面,那些需要使用页面重定向来进行登录的第三方API就需要改造,或不能用了。

我们今天主要来讨论一下第三种方式,即如何使用微信账号进行登录,因为这种方式和微信平台结合最紧密,用户体验比较好。

登录流程

引用小程序官方文档的登录流程图,整个登录流程基本如下图所示:

图片 4
登录流程图

该图中,“小程序”指的就是我们使用小程序框架写的代码部分,“第三方服务器”一般就是我们自己的后台服务程序,“微信服务器”是微信官方的API服务器。

下面我们来逐步分解一下这个流程图。

步骤1:在客户端获取当前登录微信用户的登录凭证(code)

在小程序中登录的第一步,就是先获取登录凭证。我们可以使用wx.login()方法并得到一个登录凭证。

我们可以在小程序的App代码中发起登录凭证请求,也可以在其他任何Page页面代码中发起登录凭证请求,主要根据你小程序的实际需要。

App({
 onLaunch: function() {
 wx.login({
  success: function(res) {
  var code = res.code;
  if (code) {
   console.log('获取用户登录凭证:'   code);
  } else {
   console.log('获取用户登录态失败:'   res.errMsg);
  }
  }
 });
 }
})

步骤2:将登录凭证发往你的服务端,并在你的服务端使用该凭证向微信服务器换取该微信用户的唯一标识(openid)和会话密钥(session_key)

首先,我们使用wx.request()方法,请求我们自己实现的一个后台API,并将登录凭证(code)携带过去,例如在我们前面代码的基础上增加:

App({
 onLaunch: function() {
 wx.login({
  success: function(res) {
  var code = res.code;
  if (code) {
   console.log('获取用户登录凭证:'   code);

   // --------- 发送凭证 ------------------
   wx.request({
   url: 'https://www.my-domain.com/wx/onlogin',
   data: { code: code }
   })
   // ------------------------------------

  } else {
   console.log('获取用户登录态失败:'   res.errMsg);
  }
  }
 });
 }
})

你的后台服务(/wx/onlogin)接着需要使用这个传递过来的登录凭证,去调用微信接口换取openid和session_key,接口地址格式如下所示:

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

这里是我使用了Node.js Express构建的后台服务的代码,仅供参考:

router.get('/wx/onlogin', function (req, res, next) {
 let code = req.query.code

 request.get({
 uri: 'https://api.weixin.qq.com/sns/jscode2session',
 json: true,
 qs: {
  grant_type: 'authorization_code',
  appid: '你小程序的APPID',
  secret: '你小程序的SECRET',
  js_code: code
 }
 }, (err, response, data) => {
 if (response.statusCode === 200) {
  console.log("[openid]", data.openid)
  console.log("[session_key]", data.session_key)

  //TODO: 生成一个唯一字符串sessionid作为键,将openid和session_key作为值,存入redis,超时时间设置为2小时
  //伪代码: redisStore.set(sessionid, openid   session_key, 7200)

  res.json({ sessionid: sessionid })
 } else {
  console.log("[error]", err)
  res.json(err)
 }
 })
})

这段后台代码成功执行的话,就可以得到openid和session_key。这个信息就是当前微信账户在微信服务器那边的登录态了。

但是,为了安全方面的原因,请不要直接使用这些信息作为你小程序的用户标识和session标识回传到小程序客户端中去,我们应该在服务器端做一层自己的session,将这个微信账号登录态生成一个session id并维护在我们自己的session机制中,然后把这个session id派发到小程序客户端作为session标识来使用。

关于如何在服务器端做这个session机制,我们现在一般采用键值对存储工具来做,比如redis。我们为每个session生成一个唯一的字符串作为键,然后可以将session_key和openid作为值,存入redis中,为了安全,存入的时候还应设置一个超时的时间。

步骤3:在客户端保存sessionid

开发Web应用的时候,在客户端(浏览器)中,我们通常将session id存放在cookie中,但是小程序没有cookie机制,所以不能采用cookie了,但是小程序有本地的storage,所以我们可以使用storage来保存sessionid,以供后续的后台API调用所使用。

在之后,调用那些需要登录后才有权限的访问的后台服务时,你可以将保存在storage中的sessionid取出并携带在请求中(可以放在header中携带,也可以放在querystring中,或是放在body中,根据你自己的需要来使用),传递到后台服务,后台代码中获取到该sessionid后,从redis中查找是否有该sessionid存在,存在的话,即确认该session是有效的,继续后续的代码执行,否则进行错误处理。

这是一个需要session验证的后台服务示例,我的sessionid是放在header中传递的,所以在这个示例中,是从请求的header中获取sessionid:

router.get('/wx/products/list', function (req, res, next) {
 let sessionid = req.header("sessionid")
 let sessionVal = redisStore.get(sessionid)

 if (sessionVal) {
 // 执行其他业务代码
 } else {
 // 执行错误处理
 }
})

好了,通过微信账号进行小程序登录和状态维护的简单流程就是这样,了解这些知识点之后,再基于此进行后续的开发就会变得更容易了。

另外,腾讯前端团队也开源了他们封装的相关库,可以借鉴和使用。

服务器端库 weapp-session

小程序端库 weapp-session-client

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对帮客之家的支持。

总结 大家都知道,在开发中提供用户登录以及维护用户的登录状态,...

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:js手风琴菜单组件开发实例,angular登录注册

关键词: m.lom599.com