仿小米商城注册登录 —

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

效果图：

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

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

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

仿小米商城注册登录 —— vue相关推荐

仿小米商城和登录的静态页面
仿小米商城和登录的静态页面以下仅为参考,下载学习请前往本人gitee仓库主页(index).html index.css search.js login.html login.css login. ...
Node.js+express+MySQL仿美团注册登录绑定第三方登录
原文连接准备在开始做这个前,希望你已经配置好的Node,express和MySQL的开发环境.也可以参考参考文章开发环境的配置新建项目参考Mac下express的安装和新建项目 mysql模 ...
Java项目:仿小米商城系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
源码获取:博客首页 "资源" 里下载! 一.项目简述本系统功能包括: 基于vue + Springboot前后端分离项目精简版仿小米商城系统,注册登录,首页展示,商品展示,商品 ...
package.json 封装 vue模块_vue仿小米商城 -- 我知道的都在这里了
vue仿小米商城 -- 小作坊实战记录这是一个仿小米商城的vue全家桶项目,点击预览项目环境介绍: 系统:macos 包管理工具: yarn Node: v12.4.0 项目会完成的页面和功能: ...
JavaWeb - 仿小米商城网(3) 登录与退出
JavaWeb - 仿小米商城网(3) :登录与退出 1 业务描述接上篇仿小米商城网(2):用户注册,本篇博客将分析和实现用户登录与退出.登录是后台获取当前访客身份的方式,也是提供个性化服务的基础. ...
express+vue+mongodb+session 实现注册登录
上个月写了一篇文章是 express+mongodb+vue 实现增删改查. 只是简单的实现了增删改查功能,那么今天是在那个基础之上做了扩展,首先实现的功能有如下: 1. 支持注册,登录功能,用户可以 ...
用vue+element-ui快速写一个注册登录页面
vue+element-ui可以快速开发一个页面,免除大部分的css代码. 一.用表单来做: 1.代码:  <template><div ...
Vue实战篇一：使用Vue搭建注册登录界面
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
仿手机QQ 登录、注册、找回密码、好友列表、QQ状态等功能的实现
仿手机QQ 登录.注册.找回密码.好友列表.QQ状态等功能的实现全文图 + 代码 .... 福利!!!(QQ登录背景,过度页面背景) 1.加载过程中的背景 2.登录页面 ==1. 登录页面布局 ...

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

仿小米商城注册登录 —— vue相关推荐

最新文章

热门文章