uniapp学习-登录/注册页面搭建

已于 2024-01-10 15:55:51 修改
阅读量3.6k 收藏 81
点赞数 14
文章标签： uni-app 学习 vue.js 前端 前端框架 javascript css
于 2024-01-10 15:53:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dd_lcdw/article/details/135497540
版权

1.创建路由

2.页面搭建

点击登录/注册切换页面

效果：

代码：

<style lang="scss">
  .container {
    font-family: PingFangSC, PingFang SC;
  }

  .top {
    position: relative;
    left: 0;
    top: 0;

    .title {
      display: inline-block;
      width: 440rpx;
      padding: 3rpx;
      color: #ffffff;
      font-size: 44rpx;
      line-height: 62rpx;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .box {
    width: 100%;
    display: flex;
    justify-content: center;

    .main {
      position: relative;
      width: 670rpx;
      height: 590rpx;
      background-color: #ffffff;
      box-shadow: 0px 0px 9px 0px rgba(10, 53, 74, 0.19);
      border-radius: 40rpx;
      margin-top: -150rpx;
    }
  }

  .box2 {
    width: 100%;
    padding: 39rpx;
    display: flex;
    align-items: center;

    view {
      margin-right: 50rpx;
      font-size: 28rpx;
      color: #999999;
      line-height: 40rpx;
      font-weight: 600;
    }

    .active {
      font-size: 46rpx;
      font-weight: 600;
      color: #333333;
      line-height: 65rpx;
    }

    .line {
      width: 100%;
      height: 6rpx;
      background: linear-gradient(122deg, #2AB1E7 0%, #51B1FF 100%);
      border-radius: 3rpx;
      position: relative;
      left: 0;
      top: 0;

      .y {
        width: 30rpx;
        height: 30rpx;
        background: rgba(0, 145, 255, 0.2);
        border-radius: 15rpx;
        position: absolute;
        right: -15rpx;
        top: -15rpx;
        margin-right: 0;
      }
    }
  }

  .box3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .items {
      width: 550rpx;
      height: 92rpx;
      background: #F8F8F8;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
    }

    .uni-input-placeholder {
      color: #C7D4DD;
    }

    .uni-input {
      flex: 1;
      font-size: 26rpx;
      font-weight: 400;
      color: #333333;
      line-height: 37rpx;
    }

    .input2 {
      width: 200rpx;
      flex: none;
    }

    .yzm {
      font-size: 22rpx;
      font-weight: 400;
      color: #0087C9;
      line-height: 30rpx;
      padding: 6rpx 25rpx;
      border-left: 1rpx solid #C7D4DD;
    }
  }

  .submitValue {
    width: 56rpx;
    height: 32rpx;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 32rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -0);
  }
</style>

 3.逻辑

 页面

<template>
  <view class="container">
    <view class="top">
      <image src="../static/login/login.png" mode="widthFix" style="width: 100%;"></image>
      <text class="title">泡面dididid管理系统</text>
    </view>
    <view class="box">
      <view class="main">
        <view class="box2">
          <view :class="navId=='login'?'active':'unactive'" @click="itemclick('login')">登录
            <view class="line" v-show="navId=='login'">
              <view class="y"></view>
            </view>
          </view>
          <view :class="navId=='register'?'active':'unactive'" @click="itemclick('register')">注册
            <view class="line" v-show="navId=='register'">
              <view class="y"></view>
            </view>
          </view>
        </view>
        <!-- 登录 -->
        <view class="box3" v-show="navId=='login'">
          <view class="items">
            <uni-icons type="person" size="20" style="margin-right:16rpx ;color: #C7D4DD;"></uni-icons>
            <input class="uni-input" focus placeholder="请输入账号" v-model="submitParams.username" />
          </view>
          <view class="items" style="margin-top: 30rpx;justify-content: space-between;">
            <view class="" style="display: flex;justify-content: center;">
              <image src="../static/login/lock.png" mode="widthFix" style="width: 40rpx;margin-right:16rpx ;"></image>
              <input class="uni-input input2" placeholder="请输入验证码" v-model="submitParams.yzm">
            </view>
            <view class="yzm" @click="getYZM(yanzhengma)">{{yanzhengma}}</view>
          </view>
          <view class="" style="position: relative;left: 0;top: 0;" @click="login()">
            <image src="../static/login/submit1.png" mode="widthFix" style="width: 550rpx;margin-top: 40rpx;"></image>
            <text class="submitValue">确认</text>
          </view>

        </view>
        <!-- 注册 -->
        <view class="box3" v-show="navId=='register'">
          注册
        </view>
      </view>
    </view>
    <view class="" style="width: 100%;text-align: center;font-size: 24rpx;line-height: 33rpx;margin-top: 93rpx;">
      登录即同意 <text style="color: #1C85C8;"> <text @click="userText">用户协议</text>、<text
          @click="SecretText">隐私协议</text></text>
    </view>
  </view>
</template>

逻辑

<script>
  export default {
    data() {
      return {
        navId: 'login',
        yanzhengma: '获取验证码',
        submitParams: {
          username: "",
          yzm: ""
        },
        token: "",
      };
    },
    mounted() {
      // 判断登录状态。已登录就跳转到首页
      this.getToken();
      if (this.token != '' && this.token != null) {
        // 跳转主页
        uni.navigateTo({
          url: '/pages/home'
        });
      } else {
        this.getAccount();
      }
    },
    methods: {
      saveToken(token) {
        // 本地缓存存储token
        uni.setStorageSync('token', token);
      },
      getToken() {
        // 本地缓存获取token
        this.token = uni.getStorageSync('token');
      },
      saveAccount() {
        // 本地缓存存储
        uni.setStorageSync('username', this.submitParams.username);
      },
      getAccount() {
        // 本地缓存获取
        let username = uni.getStorageSync('username');
        if (username && username != '') {
          this.submitParams.username = username;
        }
      },
      //切换登录or注册
      itemclick(value) {
        this.navId = value
      },
      //获取验证码
      getYZM(yzm) {
        if (this.yanzhengma == '获取验证码') {
          //调接口
          let time = 60
          let timer = setInterval(() => {
            this.yanzhengma = `( ${time--} )`
            if (time == -1) {
              clearInterval(timer)
              this.yanzhengma = '获取验证码'
            }
          }, 1000)
        }
      },
      //登录
      login() {
        const params = this.submitParams
        if (params.username == '' || params.username == null) {
          uni.showToast({
            title: '请输入账号',
            icon: 'none',
            duration: 2000
          })
        } else if (params.yzm == '' || params.yzm == null) {
          uni.showToast({
            title: '请输入验证码',
            icon: 'none',
            duration: 2000
          })
        } else {
          // 调用登录接口
          // 调用成功后执行下述
          const res = {
            roken: '1234567890'
          }
          this.saveToken(res.token)
          this.saveAccount();
          // 跳转路由
          uni.navigateTo({
            url: '/pages/home'
          });
          console.log('登录成功')
        }
      },
      //用户协议
      userText() {
        // 跳转
      },
      //隐私协议
      SecretText() {
        //跳转
      }
    }
  }
</script>

 样式

<style lang="scss">
  .container {
    font-family: PingFangSC, PingFang SC;
  }

  .top {
    position: relative;
    left: 0;
    top: 0;

    .title {
      display: inline-block;
      width: 440rpx;
      padding: 3rpx;
      color: #ffffff;
      font-size: 44rpx;
      line-height: 62rpx;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .box {
    width: 100%;
    display: flex;
    justify-content: center;

    .main {
      position: relative;
      width: 670rpx;
      height: 590rpx;
      background-color: #ffffff;
      box-shadow: 0px 0px 9px 0px rgba(10, 53, 74, 0.19);
      border-radius: 40rpx;
      margin-top: -150rpx;
    }
  }

  .box2 {
    width: 100%;
    padding: 39rpx;
    display: flex;
    align-items: center;

    view {
      margin-right: 50rpx;
      font-size: 28rpx;
      color: #999999;
      line-height: 40rpx;
      font-weight: 600;
    }

    .active {
      font-size: 46rpx;
      font-weight: 600;
      color: #333333;
      line-height: 65rpx;
    }

    .line {
      width: 100%;
      height: 6rpx;
      background: linear-gradient(122deg, #2AB1E7 0%, #51B1FF 100%);
      border-radius: 3rpx;
      position: relative;
      left: 0;
      top: 0;

      .y {
        width: 30rpx;
        height: 30rpx;
        background: rgba(0, 145, 255, 0.2);
        border-radius: 15rpx;
        position: absolute;
        right: -15rpx;
        top: -15rpx;
        margin-right: 0;
      }
    }
  }

  .box3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .items {
      width: 550rpx;
      height: 92rpx;
      background: #F8F8F8;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
    }

    .uni-input-placeholder {
      color: #C7D4DD;
    }

    .uni-input {
      flex: 1;
      font-size: 26rpx;
      font-weight: 400;
      color: #333333;
      line-height: 37rpx;
    }

    .input2 {
      width: 200rpx;
      flex: none;
    }

    .yzm {
      font-size: 22rpx;
      font-weight: 400;
      color: #0087C9;
      line-height: 30rpx;
      padding: 6rpx 25rpx;
      border-left: 1rpx solid #C7D4DD;
    }
  }

  .submitValue {
    width: 56rpx;
    height: 32rpx;
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 32rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -0);
  }
</style>

组件应用

1. image组件

官网地址：https://uniapp.dcloud.net.cn/component/image.html#image

属性：

mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式：

 

2.input

官网地址：input | uni-app官网 (dcloud.net.cn)

 

3.icon

官网地址：uni-icons 图标 | uni-app官网 (dcloud.net.cn)

iiiiis泡面
关注
  • 14
    点赞
  • 踩
  • 81
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uniapp--登录和注册页面-- login
weixin_54721820的博客
04-16 1468
直接使用即可，可以根据自己的需求修改样式！
uni-app登录注册
yolo23505的博客
06-19 905
在 Login.vue 文件中添加登录表单，包括账号输入框、密码输入框、登录按钮等。在 js 中实现登录和注册的逻辑：获取表单提交的数据、验证用户输入是否合法、将用户数据发送到后台进行验证等。通过 addInterceptor 方法可以拦截所有的路由跳转，判断用户是否已经登录，未登录则强制跳转至登录页面。在登录状态下，可以通过缓存或者存储 cookie 等方式保存登录状态，以便用户再次打开应用时不需要重复登录。建议在需要授权登录的页面中加入登录状态的鉴权逻辑，以确保只有登录用户才能访问该页面。
uni-app登录实例的实现
10-29
使用HBuilderX开发登录实例。我的博客主页：https://blog.csdn.net/k571039838k?orderby=UpdateTime
简单登陆注册页面
05-30
新手初学者看得懂的 登陆注册页面，注册有用正则表达式来表单验证。希望小白能从我的代码里了解学习到一些
uniapp简单的登录页实现
Sue_sy的博客
06-16 547
uni-app是一个使用开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app，腾讯课堂官方为uni-app录制培训课程，开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，uni-app。
uni-app前端用户登录实现
qq_44469428的博客
03-31 1369
跳转的页面，暂时用的就是自动生成的index就不再粘贴代码了，后面会进行修改。向后台请求数据的url是spring后台项目中接口地址。安装编辑器不再一一赘述，网上有很多教程。填写项目名称，vue版本选择2。
uniapp-含有后端的登录注册页面编写
jakelihua
05-14 4297
uniapp写前端登录和注册页面，springboot写后端，跨域问题解决办法。
写一个uniapp的登录注册页面
weixin_68443051的博客
04-15 4354
【代码】写一个uniapp的登录注册页面。
uni-app 微信小程序之好看的ui登录页面（五）
@必意玲
12-07 7132
【代码】uni-app 微信小程序之好看的ui登录页面（五）
uniapp小程序中的登录完整代码（兼容小程序和app）
前端-尔嵘
10-18 1930
一、index.vue。三、login.css。四、main.json。
uni-app登录页面实例
weixin_63643304的博客
08-18 1387
uni-app登录页面
知了配音小程序源码UNIAPP-Cloud前后端源码.rar
06-21
后端部分则处理数据的存储和处理逻辑，比如用户注册、登录验证、内容生成等，这部分代码通常使用uniapp-cloud提供的云函数来实现。 对于个人开发者来说，知了配音小程序的一大优势在于其支持商业闭环。这意味着...
电商系统-uniapp-master_电商app
09-21
2. **电商应用架构**：该电商系统可能包含以下主要模块：用户模块（用户注册、登录、个人信息管理）、商品模块（商品分类、搜索、详情展示）、购物车模块（添加、删除、修改购物车商品数量）、订单模块（订单创建、...
开源商城商品管理介绍：若依Springboot+vue+uniapp支持微信小程序/H5/微信支付/订单管理/会员管理
最新发布
06-21
会员管理则涉及用户注册、登录、个人信息维护、积分系统等功能，提升用户的黏性和忠诚度。 综上所述，这个开源商城商品管理系统利用了Spring Boot、Vue.js、UniApp等现代技术，构建了一个全方位的电商平台，支持多...
基于HBuilder+uniapp+u-view框架实现的简单项目
02-22
项目可能包括了登录注册、首页展示、商品列表、详情页、购物车等功能模块，这些模块都使用了u-view的组件来构建，使得界面美观且交互流畅。 【安全性】 在移动应用开发中，安全问题不容忽视。uniapp提供了数据加密...
HBuilderX uni-app简单实现静态登录页面（加实例）
2203_75805980的博客
05-22 2257
input type="text" password="true" class="font_1" @input="onInput" placeholder="请输入密码" v-model="phonePassword"><input type="text" password="true" class="font_1" @input="onInput" placeholder="请输入用户密码" v-model="idPassword">uni-app简单实现邮箱验证码发送点击后读秒样式。
20个用户看了每天都想打开app的登录页面模板
热门推荐
hzp666的博客
07-03 2万+
20个用户看了每天都想打开app的登录页面模板 #精选UX设计产品设计 http://collectui.com/challenges/sign-up   就像两个人第一次见面一样，第一印象非常重要，你总不希望当用户打开你的APP的时候被登录页丑哭吧。。。同时用户平时要登录的APP实在是太多了，见惯了千篇一律的设计风格，突然来一个充满设计感的登录页，一定会惊艳到用户，留下深刻的印象。 ...
Android Studio学习02：App首页布局
junqiduhang的博客
08-25 8910
Android Studio；页面布局；ScrollView, RelativeLayout
Uniapp好看登录注册页面
code袁的博客
05-02 925
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
面试：线程和进程的区别
07-28
回答: 面试中经常会问到线程和进程的区别。进程是指一个运行中的程序，它在计算机中拥有独立的内存空间和系统资源，可以进行通信、同步和竞争，并在某些情况下可能出现死锁。而线程是进程中的执行上下文或执行序列，它是为了实现在CPU上同时执行多个任务而引入的概念。与进程不同的是，线程共享进程的内存空间，可以方便地进行通信。\[3\]进程与线程的区别还可以从内存结构、通信方式等方面进行深入探讨。进程与进程之间不能共享内存，而线程可以共享进程的内存空间。进程之间的通信相对不方便，而线程之间的通信更加方便。进程之间的通信方式包括管道、消息队列、共享内存等，而线程之间的通信可以直接通过共享内存进行。不同的通信方式有各自的优劣点，需要根据具体的场景来选择合适的方式。\[2\]了解这些内容可以帮助你更好地回答面试中关于线程和进程的区别的问题。 #### 引用[.reference_title] - *1* *2* *3* [面试高频题：线程与进程的区别](https://blog.csdn.net/J_avaSmallWhite/article/details/111320085)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值