登陆/注册

最新推荐文章于 2023-07-26 17:58:40 发布
最新推荐文章于 2023-07-26 17:58:40 发布
阅读量2.3k 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/puLiQingbopu/article/details/107599089
版权

第一步 ： 我的页面

<template>
     <div class="home">
       <!-- 头部 -->
       <van-nav-bar style="background-color:#2F8FEA" :border="false">
         <template #title>
           <div style="color:#fff">
           我的
           </div>
         </template>
         <template #left>
           <div>
             <van-icon name="arrow-left"  color="#fff" />
           </div>
         </template>
       </van-nav-bar>
     <!-- 登录 -->
       <div class="box" @click="goto">
       <div class="box-left"><van-image width="50" round height="50" src="https://img.yzcdn.cn/vant/cat.jpeg" /></div>
       <div class="box-center">
         <p  v-if="username==''" style="font-size:20px;">登录/注册</p>
         <p v-else style="font-size:20px;">{{username}}</p>
         <p class="iconfont icon-shouji" style="font-size:13px">暂无绑定手机号</p>
       </div>
       <div class="box-right">
         <van-icon name="arrow" />
       </div>
        </div>
    <!-- 宫格 -->
     
   <van-row class="text">
     <van-col span="8">
       <p><span class="jin" style="color: #FA9C2D;">00.0</span>元</p>
       <p class="text-p">我的余额</p>
     </van-col>
     <van-col span="8">
       <p><span class="jin" style=" color:#EE724F ;">0</span>个</p>
       <p class="text-p">我的优惠</p>
     </van-col>
     <van-col span="8">
       <p><span class="jin" style="color:green">0</span>分</p>
       <p class="text-p">我的积分</p>
     </van-col>
   </van-row>
   
   <!-- 单元格 -->
          <div class="group">
             <van-cell-group>
             <van-cell title="我的订单"  icon="records"  is-link   />
             </van-cell-group>
             <van-cell-group>
               <van-cell title="积分商城"  icon="bag"  is-link   />
             </van-cell-group>
             <van-cell-group>
               <van-cell title="饿了么会员卡"  icon="diamond"  is-link   />
             </van-cell-group>
          </div>
          <div>
             <van-cell-group>
              <van-cell title="服务中心"  icon="card"  is-link   />
             </van-cell-group>
             <van-cell-group>
              <van-cell title="下载饿了么APP"  icon="replay"  is-link   />
             </van-cell-group>
         </div>
         <van-tabbar>
           <van-tabbar-item icon="home-o" style="color:#000" >外卖</van-tabbar-item>
           <van-tabbar-item icon="search">搜索</van-tabbar-item>
           <van-tabbar-item icon="friends-o">订单</van-tabbar-item>
           <van-tabbar-item icon="setting-o" style="color:#1989fa">我的</van-tabbar-item>
         </van-tabbar>
   </div>
 </template>
   
 <script>
export default {
     data(){
       return{
         username:''
       }
     },
     created(){
       let user= sessionStorage.user
       if(user){
         this.username = user
       }
     },
     methods:{
      goto(){
        if(this.username == ''){
          this.$router.push({
          path:"/endty"
        })
        }else{
            this.$router.push({
          path:"/user" 
        })
        }
        
      }
     }
     
     
   };
 </script>
 <style scoped>
   .home{
     background:#F6F6F5 ;
   }
   .box{
     width: 100%;
     height: 80px;
     background:#2F8FEA ;
     display: flex;
     align-items: center;
     color:#fff;
   }
   .box-left{
     margin-left: 10px;
   }
   .box-center{
     width: 70%;
     margin-left: 10px;
   }
   .text{
     text-align: center;
      padding:20px  0px;
      font-size: 13px;
      background: #fff;
   }
   .text-p{
     
     color:gray;
   }
   .jin{
     font-size: 20px;
   }
   .group{
     margin: 10px 0px;
   }
</style>

在这里插入图片描述

点击登陆/注册 ，如果未登录跳转到登陆页

<template>
  <div class="endty">
      <van-nav-bar style="background-color:#2F8FEA" :border="false" @click-left="goto">
         <template #title>
           <div style="color:#fff">
           登录
           </div>
         </template>
         <template #left>
           <div>
             <van-icon name="arrow-left"  color="#fff" />
           </div>
         </template>
       </van-nav-bar>
      <div class="main">
        <van-cell-group>
            <van-field
              v-model="username"
              label="用户名"
              placeholder="请输入手机号"
              :rules="[{required:true,message:'请填写用户名'},{pattern:/^[1][3,6,5,7,8,9][0-9]{9}$/ , message:'请输入正确的手机号'}]"
            />
            <van-field
              type="password"
              v-model="password "
              label="密码"
              placeholder="请输入密码"
                :rules="[{required:true,message:'请填写密码'},{pattern:/^\w{6,}$/ , message:'密码不得少于6位'}]"
            />
         </van-cell-group>
         <van-button type="primary" block @click="noSubmit">登录</van-button>
         <router-link to="/reg" style="margin-left: 75%;padding-top: 20px;">新用户注册</router-link>
       </div>
  </div>
</template>
  

<script>
export default {
  data() {
    return {
      username:"",
      password:""
    }
  },
  methods: {
    goto(){
      this.$router.push({
        path:"/"
      })
    },
    noSubmit(){
      if(this.username.trim() == "" && this.password.tirm() == ""){
        return
      }
      if(this.username.match(/^[1][3,6,5,7,8,9][0-9]{9}$/) && this.password.match(/^\w{6,}$/)){
        return
      }
      let users = localStorage.users;
      if(users){
        users = JSON.parse(users)
        let isLogin= false
        users.map(item=>{
          if(item.username == this.username && item.password == this.password){
              isLogin =true
              return
          }
        })

        if(isLogin){
          sessionStorage.user= this.username
          this.$router.push({
            path:'/'
          })
        }else{
          this.$notify({
          type:"danger",
          message:"输入账号或密码有误！！！"
        })
        }
      }else{
        this.$notify({
          type:"danger",
          message:"用户不存在！！！"
        })
      }

    }
  },
}
</script>

<style scoped>
.endty{
  height: 635px;
  width: 100%;
  background:#c7c7c4;
}
.main{
  margin-top: 10px;
  height: 300px;
  width: 100%;
  background: #fff;
}

</style>

在这里插入图片描述

未注册请点击新用户注册跳转到注册页面

<template>
  <div class="endty">
      <van-nav-bar style="background-color:#2F8FEA" :border="false" @click-left="goto">
         <template #title>
           <div style="color:#fff">
           注册页
           </div>
         </template>
         <template #left>
           <div>
             <van-icon name="arrow-left"  color="#fff" />
           </div>
         </template>
       </van-nav-bar>
         <div class="main">
        <van-cell-group>
            <van-field
              v-model="username"
              label="用户名"
              placeholder="请输入手机号"
              :rules="[{required:true,message:'请填写用户名'},{pattern:/^[1][3,6,5,7,8,9][0-9]{9}$/ , message:'请输入正确的手机号'}]"
            />
            <van-field
              type="password"
              v-model="password "
              label="密码"
              placeholder="请输入密码"
                :rules="[{required:true,message:'请填写密码'},{pattern:/^\w[6,]$/ , message:'密码不得少于6位'}]"
            />
         </van-cell-group>
         <van-button type="primary" block @click="noSubmit">注册</van-button>
         <router-link to="/endty" style="margin-left: 80%;padding-top: 20px;">立即登录</router-link>
       </div>
  </div>
</template>

<script>
export default {
   data() {
    return {
      username:"",
      password:"",

    }
  },
  methods: {
     goto(){
      this.$router.push({
        path:"/endty"
      })
    },
     noSubmit(){
      if(this.username.trim() == "" && this.password.tirm() == ""){
        return
      }
      if(this.username.match(/^[1][3,6,5,7,8,9][0-9]{9}$/) && this.password.match(/^\w[6,]$/)){
        return
      }
      let users = localStorage.users;
      if(users){
        users = JSON.parse(users)
      }else{
        users=[]
      }

      users.push({
        username:this.username,
        password:this.password
      })
      localStorage.users = JSON.stringify(users)
      this.$notify({
        type:"success",
        message:"新用户注册成功"
      })
      setTimeout(()=>{
        this.$router.push({
          path:"/endty"
        })
      },2000)
  },
  }
}
</script>

<style scoped>
.endty{
  height: 635px;
  width: 100%;
  background:#c7c7c4;
}
.main{
  margin-top: 10px;
  height: 300px;
  width: 100%;
  background: #fff;
}

</style>

在这里插入图片描述

如果已登录点击登陆/注册跳转信息页

<template>
  <div class="users">
       <van-nav-bar style="background-color:#2F8FEA" :border="false">
         <template #title>
           <div style="color:#fff">
           账户信息
           </div>
         </template>
         <template #left>
           <div>
             <van-icon name="arrow-left"  color="#fff" />
           </div>
         </template>
       </van-nav-bar>
        <div class="group">
             <van-cell-group>
             <van-cell title="头像" is-link center>
               <template #default>
                 <div>
                   <van-image width="50" round height="50" src="https://img.yzcdn.cn/vant/cat.jpeg" />
                 </div>
               </template>
             </van-cell>
             </van-cell-group>
             <van-cell-group>
               <van-cell title="用户名" is-link :value="username"/>
             </van-cell-group>
             <van-cell-group>
               <van-cell title="收货地址" is-link />
             </van-cell-group>
          </div>
        <p class="title">账号绑定</p>
         <van-cell-group style="margin-top:10px ;">
               <van-cell title="手机" class="iconfont icon-shouji" is-link />
         </van-cell-group>
          <p class="title">安全设置</p>
         <van-cell-group style="margin:10px 0px ;">
               <van-cell title="登录密码"  value="修改" is-link />
         </van-cell-group>
         <van-button type="danger" block @click="black">退出登录</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username:""
    }
  },
  created(){
    let username = sessionStorage.user
    if(username){
      this.username = JSON.parse(username)
    }
  },
  methods: {
  goto(){
      this.$router.push({
          path:"/"
        })
  },
  black(){
    this.$dialog.confirm({
      message:"确定要退出吗？"
    }).then(()=>{
      sessionStorage.removeItem('user')
       this.$router.push({
          path:"/"
        })
    })

  }
},
}
</script>

<style scoped>
.group{
  margin: 10px 0px;
  
}
.users{
  height: 635px;
  width: 100%;
  background:#c7c7c4;
}
.title{
  margin-left: 20px;
  font-size: 13px;
}
</style>
码农小商贩
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
二、用户登录和注册
beyond谚语的博客
06-09 3万+
一共四个页面 主页面Form1，登录页面login，注册页面resister，主菜单页面main_page 系统运行进入Form1，单击登录按钮跳转到login，数据库中得存在数据信息且输入正确才可登录成功，跳转到main_page 单击注册按钮跳转到register，用户需要注册账号、密码、性别、手机号信息Form1 login register main_page 四个页面如下 创建fiber_yy数据库，在其下创建yy_user表，其中id为主键自增 整体结构如下 Form1代码 login
登录注册的实现
weixin_44602430的博客
10-14 6万+
摘要:登录注册是一个网站最常用的也是最基本的功能，本文就来详细的介绍一下在网页中，实现这两个最基本的需求从后端到前端需要做些什么。 一.前置知识 1.首先我们至少需要了解HTTP最基本的request请求和response响应的相关概念。可以先查看一位博主的文章:HTTP入门(请求与响应的基本知识). 2.再看一下服务端和客户端之间的交互,如下图: 用文字描述一下： 1.客户端（即浏览器）向服务端发起request请求 2.服务端通过监听80端口（http）或443端口（https）来接收请求 3.服务端
登录与注册
uoprewqsnh的博客
12-25 2373
一、基本控件 1、标签控件（TextView） 常用属性：text、textSize、textColor…… 2、编辑框控件（EditText） 常用属性：text、textSize、textColor、hint…… 3、按钮控件（Button） 常用属性：text、background、layout_width、layout_height…… 二、知识点 线性布局（LinearLayout） 标签（TextView） 编辑框（EditText） 按钮（Button） 安卓事件处理机制（Eve
简单的登录注册-注册
m0_69045017的博客
04-02 344
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
APP的注册和登录功能设计
再见孙悟空的专栏
11-30 2248
一、为什么需要注册和登录? 　　是否需要注册和登录的关键取决于产品形态。 　　如果用户注册登录对于用户需求、产品功能、商业模式本身带不来任何价值的话，就没必要设计这样的功能。比如一些实用工具类的产品：计算器、手电筒、无社交属性的天气预报等等。 　　其它像强社交需求的产品(微信)、涉及到较多用户财产安全的产品(支付宝)、用户对信息使用比较关注的产品(邮箱)等，都需要账户体系的支持，
登录注册
TSBBjc
10-21 476
pubic class Fragment1 extends Fragment { EditText name,pass; Button b1; MSQlitead helper; //相关变量 private String dbname="happy"; //数据库名字 SQLiteDatabase
Android通过Http连接MySQL 实现登陆/注册（数据库+服务器+客户端）
05-31
在Android应用开发中，与远程服务器进行数据交互是常见的需求，比如实现用户的登录和注册功能。本教程将探讨如何利用HTTP连接与MySQL数据库交互，从而完成登录和注册功能的搭建。我们将从服务器端和客户端两个角度来...
简约清爽的HTML登陆/注册模板
04-13
【HTML登陆/注册模板】是一种常见的前端开发资源，主要用于创建网站的用户登录和注册界面。在网页设计中，一个简洁、清晰的登录/注册模板能够提升用户体验，使用户更容易理解和操作，进而增加网站的访问满意度。 ...
仿天猫静态页面 登陆/注册/首页/天猫超市页/购物车/手机列表页 Tmall.zip
04-08
在本项目中，"仿天猫静态页面 登陆/注册/首页/天猫超市页/购物车/手机列表页 Tmall.zip" 是一个前端学习者在一个月内完成的作品，旨在模仿天猫网站的部分关键页面，包括登录、注册、首页、天猫超市、购物车以及手机...
百思不得姐之立即登录注册模块(五)
不良少年
04-09 6582
一 功能图和实现思路具体功能图:实现思路:—-> 1 关注控制器模块搭建(xib)—-> 2 登录和注册界面的总体模块数量(三个模块),可以用三个view来装各自的子控件—-> 2.2 先做上面的view—>中间的view—>底部的view(顺序自定)—-> 2.3 创建两个xib,用同一个类来管理两个xib—-> 2.4 将中间的view的宽度改为屏幕的两倍—-> 2.5 用拖线的方式修改约束,达
一个简单的登录注册界面流程介绍
qq_43717065的博客
04-11 9905
登录页面实现 其他页面的实现可以到github上克隆下来 一、用户登录 1、密码登录 流程： 用户输入密码； 表单使用正则验证用户名和密码格式； 点击登录，对密码进行加密，并发送登录验证请求； 后台验证用户登录信息是否正确； 正确则生成token返回至前端，否则提示用户名或密码错误。 2、忘记密码 流程： 输入手机号； 表单正则验证手机号格式； 点击获取验证码按钮； 后台验证手机号是否存在； 存在，则生成验证码，加密后保存在服务器session当中，否则提示手机号不存在； 获取到验证码并输入；.
注册 / 登录步骤
LQS000的博客
06-10 281
（1）发送 res.code 到后台换取 openId, sessionKey, unionId。【如果已经注册，则返回 token 和 用户信息，缓存起来】（2）请求 wxmini-id 接口，获取 openid。【 如果返回 6001 ，则是未注册，跳转注册 】（3）请求 login 登录接口，获取token。注册成功后，则缓存 token 和 用户信息。注意：用 token 判断用户是否注册。【 返回 openid ，缓存起来 】【 返回 code 】
JSP实现简单的登录和注册
weixin_61370021的博客
03-19 1万+
JSP实现简单的登录和注册，使用Map集合模拟数据库存储数据
使用PHP实现登录注册功能的完整指南
最新发布
黑夜开发者的博客
07-26 7069
PHP是一种广泛用于开发Web应用的编程语言，其灵活性和易用性使得它成为一个非常受欢迎的选择。在本篇博文中，我们将介绍如何使用PHP实现一个完整的登录注册功能。一个完整的登录页面需要实现主要的页面编写、数据库设计、登录逻辑处理三部分。下面就开始实现起来。通过使用PHP，我们可以很容易地实现登录注册功能。使用MySQL数据库来存储用户信息，并利用PHP的数据库操作函数来进行插入和查询。通过session机制来跟踪用户的登录状态，以及提供注销功能给用户。完成以上步骤后，我们可以轻松实现基本的登录注册功能。
Django用户登录与注册系统
weixin_34343000的博客
03-16 8950
一、创建项目 1.1.创建项目和app django-admin startproject mysite_login python manage.py startapp login 1.2.设置时区和语言 Django默认使用美国时间和英语，在项目的settings文件中，如下所示： LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC...
springboot实现最基础的登录注册功能(步骤详细，逻辑清晰)
qq_44697268的博客
08-15 3万+
springboot实现最基础的登录注册功能
HTML+CSS做登录注册界面
热门推荐
风从北方来的博客
05-29 14万+
在登录界面点注册会进入注册界面登录界面代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&am
登录和注册的基本实现，超简单！
m0_68987535的博客
05-16 3723
**相信有很多的人在刚刚做项目的实现，登录与注册功能的实现是基本的要求，要是刚刚开始写的小伙伴肯定会有很多的困惑，这里我介绍一下自己的写法，希望能帮到你，也希望能免费点个小 ** 首先是登录操作 我这里为之前写的一个抗疫的网站弄的功能，大家可以根据自己的规则来更改 登录的 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http
电子数据提存系统开题报告 用户自助注册 - 微信授权用户登录 通过身份证和手机 公安部身份证登录接入系统 管理员对注册用户信息审核管理 管理员进行系统权限管理（超级用户、管理员、运营商操作员、普通用户等角色） 权限管理：系统生成超级管理员账号（具有所有权限），超级管理员可以新增/删除管理员账号及对应的权限。 用户管理：管理员可以查看并管理用户端的账号信息。管理员可以添加新用户；用户也可以自己注册信息，但需要管理员的审核通过后方可使用。 用户注册登陆功能：用户可根据身份证和手机短信验证码的方式登陆/注册账号
02-26
- 提供用户注册登陆功能，用户可根据身份证和手机短信验证码的方式登陆/注册账号。 2. 系统架构和技术实现 本系统采用的技术包括： - 前端技术：HTML、CSS、JavaScript、jQuery、Vue.js等； - 后端技术：Python、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农小商贩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值