仿小米商城注册登录 —— vue

已于 2023-04-15 19:23:42 修改
阅读量761 收藏 9
点赞数 3
分类专栏： 作业 文章标签： vue.js javascript 前端
于 2023-04-15 18:09:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69444691/article/details/130173166
版权

对于一个前端人员来说，小米商城一直都是一个经典的练手案例。本篇文章也是也将继续仿写一下小米商城的登录个注册功能，只不过不再是原生，而是vue。 

因为本次知识简单的作业，所以并没有用脚手架、也没有写接口，只是简单的实现了一下功能。

话不多说，直接上代码：

html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="./css/index.css" />
    <script src="https://unpkg.com/vue@3"></script>
  </head>

  <body>
    <div id="app"></div>
    <template id="root">
      <div class="box">
        <!-- 左侧背景 -->
        <div class="left_bg"></div>
        <!-- 右侧内容 -->
        <div class="right">
          <div class="right_header">
            <!-- logo -->
            <div class="logo">
              <img src="https://s1.ax1x.com/2023/04/14/ppzXmFI.png" alt="" />
              <span>小米账号</span>
            </div>
            <!-- 右侧选项 -->
            <div class="r_option">
              <a href="javascript:;">用户协议</a>
              <a href="javascript:;">隐私政策</a>
              <a href="javascript:;">帮助中心</a>
              <select name="" id="">
                <option value="">中文(简体)</option>
                <option value="">中文(繁体)</option>
                <option value="">English</option>
              </select>
            </div>
          </div>
          <div class="right_body">
            <div class="log_reg">
              <a :class="isActice?['isActice']:[]" @click="login">登录</a>
              <a :class="isActice?[]:['isActice']" @click="register">注册</a>
            </div>
            <!-- 登录 -->
            <div class="login_content" v-if="isActice">
              <form action="">
                <div class="uname">
                  <input type="text" placeholder="邮箱/手机号码/小米ID" class="ipt" v-model="username" />
                </div>
                <div class="pwd">
                  <input type="password" placeholder="密码" class="ipt" v-model="password" />
                </div>
                <div class="change">
                  <input type="checkbox" v-model="isChecked" @click="l_change" />
                  <span
                    >已阅读并同意小米账号<a href="javascript:;">用户协议</a>和
                    <a href="javascript:;">隐私政策</a>
                  </span>
                </div>
              </form>
              <button class="log_btn" @click="goLogin">登录</button>
              <div class="forget">
                <a href="javascript:;">忘记密码？</a>
                <a href="javascript:;">手机号登录</a>
              </div>
              <div class="other">其他方式登录</div>
              <div class="other_content">
                <img :src="item.path" alt="" v-for="item in otherLogin" :key="item.key" />
              </div>
            </div>
            <!-- 注册 -->
            <div class="register_content" v-else>
              <form action="">
                <div>
                  <select class="ipt" v-model="cityvalue">
                    <option :value="item.value" v-for="item in city">{{ item.text }}</option>
                  </select>
                </div>
                <div>
                  <input type="text" placeholder="手机号" class="ipt" v-model.number="phone" />
                </div>
                <div class="yzm">
                  <input type="password" placeholder="密码" class="ipt" v-model.trim="r_password" />
                  <!-- <input type="text" placeholder="请输入验证码" class="ipt" maxlength="4" v-model.number="yzm" /> -->
                  <!-- <span>获取验证码</span> -->
                </div>
                <div class="change">
                  <input type="checkbox" v-model="isChecked1" @click="r_change" />
                  <span
                    >已阅读并同意小米账号<a href="javascript:;">用户协议</a>和
                    <a href="javascript:;">隐私政策</a>
                  </span>
                </div>
                <!-- <input type="submit" class="reg_btn" @click="goRegister" value="注册" /> -->
              </form>
              <button class="reg_btn" @click="goRegister">注册</button>
              <div class="Unavailable">收不到验证码？</div>
              <div class="other">其他方式登录</div>
              <div class="other_content">
                <img :src="item.path" alt="" v-for="item in otherLogin" :key="item.key" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
 </body>
</html>

css:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a{
  text-decoration: none;
  color: #838383;
}

.box {
  display: flex;
  justify-content: space-between;
}

.left_bg {
  width: 25%;
  height: 100vh;
  background-image: url(https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.92c693b4..jpg);
  background-size: 100%;
  /* background-color: pink; */
}

.right {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75%;
  height: 100vh;
  background-color: #fff;
  /* background-color: lightblue; */
}

.right_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80px;
  padding: 0 30px;
  /* background-color: pink; */
}
.logo{
  display: flex;
  align-items: center;
  height: 100%;
}
.logo span{
  font-size: 26px;
  color: #333;
  margin-left: 10px;
}
.r_option{
  display: flex;
  align-items: center;
  height: 100%;
}
.r_option a{
  font-size: 14px;
  margin: 0 10px;
}
.r_option a:hover{
  color: orange;
}
select{
  color: #838383;
  border: 0;
}

.right_body {
  width: 35%;
  /* height: 75%; */
  margin-top: 3%;
  padding-bottom: 15px;
  border: 1px solid #eee;
  box-shadow: 2px 3px 5px #eee;
}
.log_reg{
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin: 30px;
  /* background-color: pink; */
}
.log_reg a{
  font-size: 22px;
  margin: 0 10px;
  padding: 5px 0;
  cursor: pointer;
}
.isActice{
  color: #000;
  font-weight: 400;
  border-bottom: 3px solid rgb(255,92,0);
}
.login_content,
.register_content{
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
form{
  width: 100%;
  text-align: center;
  /* background-color: pink; */
}

.ipt{
  width: 80%;
  height: 60px;
  border: none;
  outline: none;
  padding: 0 20px;
  margin: 10px 0;
  font-size: 17px;
  background-color: #f9f9f9;
}
.change{
  width: 80%;
  margin: 0 auto;
  text-align: left;
  font-size: 14px;
  color: #838383;
  margin-top: 10px;
}
.change input{
  vertical-align: middle;
  margin-right: 5px;
}
.change a{
  color: #000;
  margin: 0 5px;
}
.log_btn,
.reg_btn{
  width: 80%;
  height: 50px;
  margin-top: 20px;
  margin-bottom: 10px;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  outline: none;
  background-color: #ff5c00;
}
.forget{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.forget a{
  font-size: 17px;
  color: #ff5c00;
}
.other{
  color: #aaa;
  font-size: 17px;
  font-weight: 400;
  line-height: 40px;
  text-align: center;
}
.other_content{
  width: 100%;
  /* background-color: pink; */
}
.other_content img{
  width: 10%;
  margin: 10px 10px 0;
}

/* 注册 */
.register_content{
  margin-top: 10px;
}
.yzm{
  position: relative;
}
.yzm .span{
  position: absolute;
  right: 0;
}
.yzm span{
  position: absolute;
  right: 12%;
  top: 50%;
  transform: translateY(-50%);
  color: orange;
  font-size: 14px;
  z-index: 99;
  cursor: pointer;
}
.Unavailable{
  width: 80%;
  margin: 0 auto;
  text-align: left;
  font-size: 17px;
  color: #ff5c00;
  /* background-color: pink; */
}

js:

 <script>
      Vue.createApp({
        template: '#root',
        data() {
          return {
            isActice: true,
            username: '',
            password: '',
            r_password: '',
            phone: '',
            isChecked: false,
            isChecked1: false,
            userList: [],
            cityvalue: 'China',
            city: [
              { value: 'China', text: '中国' },
              { value: 'mg', text: '美国' },
              { value: 'other', text: '其他' }
            ],
            otherLogin: [
              {
                id: 1,
                name: '支付宝',
                path: 'https://s1.ax1x.com/2023/04/14/p9SEuQJ.png'
              },
              {
                id: 2,
                name: '微信',
                path: 'https://s1.ax1x.com/2023/04/14/p9SEGFK.png'
              },
              {
                id: 3,
                name: 'QQ',
                path: 'https://s1.ax1x.com/2023/04/14/p9SEJJO.png'
              },
              {
                id: 4,
                name: '微博',
                path: 'https://s1.ax1x.com/2023/04/14/p9SEUQH.png'
              }
            ]
          }
        },
        methods: {
          // 登录注册切换
          login() {
            this.isActice = !this.isActice
          },
          register() {
            this.isActice = !this.isActice
          },
          // 用户条款勾选
          l_change() {
            this.isChecked = !this.isChecked
          },
          r_change() {
            this.isChecked1 = !this.isChecked1
          },
          // 登录
          goLogin() {
            if (this.username == '' || this.password == '') {
              alert('账号或密码为空，请输入')
            } else {
              if (!this.isChecked) {
                alert('请同意用户条款')
              } else {
                this.userList.forEach(item => {
                  if (item.phone == this.username && item.password == this.password) {
                    alert('登录成功')
                  } else {
                    alert('登录失败')
                  }
                })
              }
            }
          },
          // 注册
          goRegister() {
            if (this.phone == '' || this.r_password == '') {
              alert('输入不能为空')
            } else {
              if (!this.isChecked1) {
                alert('请同意用户条款')
              } else {
                const regCN = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
                if (!regCN.test(this.phone)) {
                  alert('请输入正确的手机号')
                } else {
                  let isRegister
                  this.userList.forEach(item => {
                    if (item.phone == this.phone) {
                      isRegister = true
                    } else {
                      isRegister = false
                    }
                  })
                  if (isRegister) {
                    alert('用户名已存在')
                  } else {
                    let data = {
                      id: +new Date(),
                      phone: this.phone,
                      password: this.r_password,
                      city: this.cityvalue
                    }
                    this.userList.push(data)
                    alert('注册成功')
                    console.log(this.userList)
                    this.phone = ''
                    this.r_password = ''
                  }
                }
              }
            }
          }
        }
      }).mount('#app')
    </script>

效果图： 

代码和我，反正有一个能跑。 

代码并不完美，各位看官需要可自行优化改进。

我们都在改变，又何必感慨从前！

五彩斑斓黑123
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
商城-用户注册-创建用户中心
shenzhen_zsw的专栏
06-18 423
商城-用户注册-创建用户中心1.创建用户中心1.1.创建父module1.2.创建leyou-user-interface1.3.创建leyou-user-service1.4.添加网关路由 1.创建用户中心 用户搜索到自己心仪的商品，接下来就要去购买，但是购买必须先登录。所以接下来我们编写用户中心，实现用户的登录和注册功能。 用户中心的提供的服务： 用户的注册 用户登录 用户个人信息管理 用户...
全新完美版仿小米商城网页源码.zip
06-18
仿小米商城网页源码，静态，基于html+css，适合初学者作为前端练习使用，注释详细，代码简洁明了易懂
使用vuejs模仿小米官网的作品
08-10
使用vue.js模仿小米官网的作品
仿小米官网首页和登录页面静态的
12-27
本资源属于仿小米商城首页和登录页面及购物车页面 页面内容纯静态，不包含JavaScript代码，只包含css和html文件， 首页简化，去掉了一些复杂逻辑页面，简单明了，适合用于学校布置的html网页设计课题。
项目三《小米官网仿写》
敏敏的博
03-10 1779
小米官网原生js仿写/ / HTML+CSS+JavaScript配合实现页面交互效果 // 整体感知页面组成 // 小米官方仿写部分功能实现方法分享
商城网站（添加购物车登录注册功能等）
05-30
仿魅族的商城网站，动画效果，以及添加购物车和登录注册的功能。如果用登录注册需要mysql数据库，模拟ajax获取数据.
商城注册登录
yee22a的博客
01-20 1765
1.首先先完成静态页面组件 在完成静态页面之后需要进行验证码的获取，我们还是先看文档看看需要发送什么请求能获得验证码， 我们发现需要带一个手机号码的参数，所以我们双向绑定手机号码和验证码， 接下来我们写api接口 接下来就是写store仓库 在写完之后，我们就可以通过点击发送验证码按钮发送请求，获得code通过双向绑定直接显示 到这里我们就完成了获得验证码的功能。 2.然后我们进行完成注册功能 完成注册功能与发送验证码类似，我就不详细写...
优品商城-注册登录（User、Member）
qq_39497997的博客
08-09 938
1 登录 2 注册
(毕业开发设计项目)基于vue开发的仿小米商城电商系统静态网页适用于微信小程序，网站，android、ios
10-14
这是一个基于Vue技术栈的毕业设计项目，主要目的是构建一个仿小米商城的电商系统，该系统不仅适配于网站，还支持微信小程序以及Android和iOS移动端。在这个项目中，开发者运用了HBuilder工具来开发uni-app应用，这是...
高仿小米商城用户端 包括前端,后端sprintboot +vue,商城UI设计、初学、毕业设计
12-09
高仿小米商城用户端 分为商城前端和商城后端两部分，是Vue + SpringBoot的前后端分离项目，用户端包括首页门户、商品分类、首页轮播、商品展示、商品推荐、购物车、地址管理、下订单、扫码支付等功能模块。...
vue仿小米商城demo
04-10
vue仿小米商城demo
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
06-15
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目。本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户收藏列表以及错误处理功能。后端采取了MVC模式，根据前端需要的数据分模块设计了相应的接口、控制层、数据持久层
个人实战项目仿小米商城
07-04
【个人实战项目仿小米商城】是一个使用Vue.js技术栈实现的电商购物平台的实战项目，旨在帮助开发者提升前端开发技能并熟悉实际项目开发流程。在这个项目中，你将学习到如何构建一个类似小米商城的在线购物网站，涵盖...
2022最新仿小米商城首页html+css+js
09-22
在仿小米商城的项目中，CSS将用于实现页面的颜色搭配、字体设置、布局定位以及动画效果。例如，CSS可能会定义轮播图的过渡动画，使图片平滑切换；或者设定产品展示区的网格系统，使得商品可以整齐地按行滑动。使用...
仿小米商城网页版（全套）
09-28
【仿小米商城网页版（全套）】项目是一个全面复刻小米商城在线购物平台的Web应用。这个项目旨在提供一个与小米商城类似的功能齐全、用户体验优良的网页版本，涵盖了多个核心功能模块，包括首页、订单管理、商品列表...
用vue实现小米商城登录注册页面
qq_55299191的博客
04-16 3102
代码有些不规范，大多是html＋css实现的，目前是静态页面的实现。vue课堂作业，记录下。
vue+element简单实现电商商城网站，模仿小米电商商城
热门推荐
lucky_fang的博客
11-25 3万+
vue+element简单实现商城网站首页，模仿小米电商商城
使用vue.js模仿小米官网的作品
大灰狼的小绵羊哥哥的博客
01-14 1万+
使用vue.js模仿小米官网的作品 https://github.com/wendaosanshou/mi-by-vue 运行步骤 # 安装依赖 npm install # 在本地启动服务，并且通过localhost:8080地址进行访问 npm run dev # 编译并且压缩代码 npm run build 访问路径 http://vue.fecss
vue+element简单实现商城网站首页，模仿电商商城
lucky_fang的博客
04-17 9670
vue+element简单实现商城网站首页，模仿电商商城，简洁易懂的经典vue项目布局，无论是作为学习模板还是产品实现都是可以的，拓展性强大
仿小米商城springboot vue
最新发布
07-27
小米商城是一个电商平台，包括用户注册登录、商品展示、购物车、订单管理等功能。将这些功能列出来，作为你开发的基础。 2. 搭建后端环境：使用Spring Boot来构建后端。你可以使用Maven或Gradle来管理依赖，选择...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值