整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

简单小程序：登录页面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    /*总体的样式*/
    <style>
    	/*盒子样式*/
        #box{
            width: 350px; //宽
            height: 450px; //高
            border: 1px solid black; //边框
            border-radius: 10px; //边框弧度
            font-family: 黑体; //字体
            letter-spacing:8px; //段间距
            word-spacing: 10px; //字间距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            color: darkgray; //颜色
        }
        /*class选择器*/
        .box_a{
            width: 50px; //宽
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景图片
            background-repeat: no-repeat; // 是否平铺
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

久没有写jquery控制页面的代码了，今天前端没有来，我来应付一下：

先来看一下HTML登录的代码：

1、页面代码

<div class="page-box">
        <div class="login-container">
          <div class="login-ban"></div>
          <div class="login-wrapper">
            <ul class="login-nav">
              <li class="active">密码登录</li>
              <li>手机登录</li>
            </ul>
            <form class="login-form" action="" method="get">

              <!--password type-->
              <div class="login-type" id="passwordLogin">
                <div class="login-group">
                  <!--
                    报错样式
                    1、'login-box'添加class 'page-form-error'
                    2、'login-input'添加class 'page-input-error'
                  -->
                  <div class="login-box page-form-error">
                    <span class="login-icon-phone"></span>
                    <input maxlength="11" class="login-input" type="tel" name="mobile" value="" placeholder="请输入您的手机号">
                    <p class="page-form-tip"></p>
                  </div>
                </div>
                <div class="login-group">
                  <div class="login-box page-form-error">
                    <span class="login-icon-psd"></span>
                    <input class="login-input" type="password" name="password" value="" placeholder="请输入密码">
                  </div>
                </div>
              </div>
              <!--/password type-->

              <!--phone type-->
              <div style="display: none;" class="login-type" id="verifyLogin">
                <div class="login-group">
                  <div class="login-box page-form-error">
                    <span class="login-icon-phone"></span>
                    <input maxlength="11" class="login-input" type="tel" name="mobile" value="" placeholder="请输入您的手机号">
                  </div>
                </div>
                <div class="login-group">
                  <div class="login-box page-form-error">
                    <span class="login-icon-code"></span>
                    <input class="login-input" type="tel" name="verifyCode" value="" placeholder="请输入手机验证码">
                    <a class="login-identify-code">获取验证码</a>
                  </div>
                </div>
              </div>
              <!--/phone type-->
			  <span id="confirmMsg" style="color: red;font-size: 12px;margin-bottom: 5px;"></span>
              <a color="violet" id="submitBtn" size="block" class="page-button">立即登录</a>
            </form>

            <ul class="login-others-type">
              <li><a class="login-others-link" href=""><span class="login-icon-weixin"></span>微信登陆</a></li>
              <li><a class="login-others-link" href=""><span class="login-icon-qq"></span>QQ登陆</a></li>
            </ul>
            
            <div class="login-footer">
              <a class="login-footer-item" href="">忘记密码？</a>
              <a class="login-footer-item blue" href="reg-step-01.html">立即注册</a>
            </div>
          </div>
        </div>
      </div>

2、页面效果

3、jquery控制代码

3.1、切换登录区域

	$(".login-nav li").click(function(){
		var liText = $(this).text();
		$(".login-nav li").removeClass("active");
		$(this).addClass("active");
		if(liText.indexOf("密码登录")>-1){
			$("#passwordLogin").show();
			$("#verifyLogin").hide();
		}
		
		if(liText.indexOf("手机登录")>-1){
			$("#passwordLogin").hide();
			$("#verifyLogin").show();
		}
	})

3.2、手机号校验

//手机号校验
$(".login-type input[name='mobile']").blur(function(){
	var mobilePhone = $(this).val();
	var isPhone = isPhoneNo(mobilePhone);
	console.log(isPhone);
	if(!isPhone){
		console.log("手机号校验");
		$(this).addClass("page-input-error");
	}else{
		$(this).removeClass("page-input-error");
	}
})
	
// 验证手机号
function isPhoneNo(phone) {
	var pattern = /^1[34578]\d{9}$/;
	return pattern.test(phone);
}

3.3、发送验证码

效果图

发送按钮涉及到到的代码包括倒计时：

天我们做一下设置页面和登录页面的布局，因为这个系统如果不登录的话，几乎是没有任何权限可以操作的。

再说明一点：现在的APP普遍要求做到一打开后不需要任何操作就能看到界面和基本页面，哪怕页面是空的，用户在操作时再弹出提示要登录才能继续。说这样的要求是为了用户体验；

就比如银行APP这样要求安全的软件，也是在打开后不需要登录就可以看到一些东西，等具体操作时，才会要求登录。

如果不这样做，你把APP设计成一打开就要求登录，多半是在应用市场和小程序后台审核不过去的。

登录和设计页面大概样式

上面就是“登录”和“设置”页面的大概布局，以后有需要我们会随时改动。为了测试方便，我在登录下面做了三个为了调试而设置的快速登录按钮，按一下就会以相应身份登录。

这两个页面的代码如下（我尽量把注释写全）：

登录页面：

<template>
	<view><!--每个uniapp的vue文件都要至少有一个view-->
		<view class="input-box"><!--标签的class属性控制着它的样子，在下面的style里定义的-->
			<view class="input-item">
				<view class="input-label">手机号</view>
				<view class="input-body">
					<input v-model="phone" maxlength="11" type="text" placeholder="请输入手机号" class="input">
					<button :disabled="!isCanSendCode" class="btn-code">{{sendMsg}}</button>
					<!--uniapp中标签属性前面带:号时，后面引号里代表是VUE的变量名-->
					<!--如果不是标签里想引用VUE变量，要用{{变量名}}来引用-->
				</view>
			</view>
			<view class="input-item">
				<view class="input-label">验证码</view>
				<view class="input-body">
					<input v-model="vCode" type="text" style="margin-right: 50upx;" placeholder="请输入验证码" maxlength="20" class="input" />
            <!--上面这个v-model是双向绑定，变量改变时这里的值变，这里的值变时，变时内容也会变-->
				</view>
			</view>
		</view>
<!--如果只有一两个标签的样式需要改变，而我又懒，就直接在标签里用style来指定样式，不需要在下面去定义-->
		<button class="button" style="background-color: #08B6F2;color: #fff;">登录</button>
		<button class="button" type="default" style="margin-top:30rpx;color:#999;">返回首页</button>
		<view style="margin-top:50rpx;">
			调试账号登录
			<button class="button" type="warn">老赵1，管理员</button>
			<button class="button" type="default">老赵2，员工</button>
			<button class="button" type="primary">老赵3，业主</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        /*VUE的变量们，这里的变量可以和上面模板里绑定，然后会互动*/
				sendMsg: "发送验证码",
				isCanSendCode: true,
				phone: "",
				vCode: ""
			}
		},
		methods: {
	/*VUE事件函数放这里，因为我们还没做逻辑，所以这里是空的。*/
		}
	}
</script>

<style lang="scss">
  /*页面样式类的存放地方*/
	button::after {
		border: none;
	}

	.input-box {
		padding: 50upx;
		font-size: 30upx;

		.input-item {
			display: flex;
			background: white;
			border-bottom: 1upx solid #eeeeee;
			line-height: 100upx;
			height: 100upx;

			.input-label {
				width: 150upx;
			}

			.input-body {
				position: relative;
				height: 100upx;
				width: calc(100% - 150upx);

				.input {
					line-height: 100upx;
					height: 100upx;
					position: relative;
					font-size: 28upx;
					width: 300rpx;
				}

				.eye {
					position: absolute;
					height: 50upx;
					width: 50upx;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				.btn-code {
					position: absolute;
					right: 0upx;
					top: 50%;
					transform: translateY(-50%);
					background: none;
					color: #205592;
					width: 160upx;
					font-size: 24upx;
					box-sizing: border-box;
					text-align: right;
					padding: 0;
					height: 100upx;
					line-height: 100upx;
				}
			}

		}

		.select {
			padding-top: 40upx;
			display: flex;
			justify-content: space-between;
			color: #003B67;
		}
	}

	.button {
		margin: 0 30upx;
		border-radius: 50upx;
		line-height: 80upx;
		height: 80upx;
		font-size: 32upx;
	}
</style>

注意一下rpx这个单位，一般我们在做HTML、CSS时，都是用px，1px就代表1个显示器上的物理像素，在uniapp中也是这样1px等于一个物理像素，但是手机的分辨率是很多样的，因此我们不能方便地控制大小，所以才有了rpx这个单位，这个单位会把屏幕总宽度当成750，当屏幕宽度不足750的时候，1rpx会小于1像素，屏幕宽度大于750的时候，1rpx会大于1个像素。1rpx=屏幕宽度物理像素数量/750。

关键的地方我在上面用注释写了一下，要是都解释一下的话，估计得好几万字，有不清楚的留言吧。


下面是设置页面的代码：

<template>
	<view>
		<view class="set_header">
			<view class="shd_topBar">
				<view class="avatar"><image src="../../static/avatar.png"></image></view>
				<view class="title">
					<view class="nickName">老赵和他的</view>
					<view><uni-tag text="管理员" type="error" :circle="true" size="small"></uni-tag></view>
				</view>
				<view class="setBtn"><uni-icons type="gear-filled" color="#fff" size="26"></uni-icons></view>
			</view>
			<view class="iCounter">
				<view class="item">
					<view>999</view>
					<view>发布</view>
				</view>
				<view class="item">
					<view>888</view>
					<view>解决</view>
				</view>
				<view class="item">
					<view>999天</view>
					<view>任职</view>
				</view>
			</view>
		</view>
		
		<uni-list>
			<uni-list-item class="listItem" title="这里能有些什么功能呢？" :show-badge="true" badge-text="12"></uni-list-item>
			<uni-list-item class="listItem" title="我们以后用的时候再设计" :show-switch="true"></uni-list-item>
		</uni-list>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onShow() {
			console.log(this.getLoginMsg());
		},
		methods: {

		}
	}
</script>

<style>
	.listItem{
		 background-color: #fafafa;
	}
	.set_header {
		padding:50rpx;
		margin: 30rpx;
		border-radius: 20rpx;
		background-image: linear-gradient(to right bottom, #0ba360 0%, #3cba92 100%);
    /*上面这一行是给头部加渐变色的CSS，有一个网站专门提供这个代码，挺有意思的*/
		height: 200rpx;
	}
	
	.shd_topBar{
		display: flex;
	}
	.shd_topBar .avatar{
		width:100rpx;
		height:100rpx;
		overflow: hidden;
	}
	.shd_topBar .avatar image{
		width:100rpx;
		height:100rpx;
	}
	.shd_topBar .title{
		flex:1;
		padding:5rpx 0 0 30rpx;
	}
	.shd_topBar .title .nickName{
		color:#fff;
		font-weight: bold;
		text-shadow: 1rpx 1rpx 1rpx #999;
	}
	.shd_topBar .setBtn{
		width:60rpx;
		height:100rpx;
		overflow: hidden;
		line-height: 100rpx;
	}
	.iCounter{
		display: flex;
		margin-top:50rpx;
	}
	.iCounter .item{
		flex:1;
		text-align: center;
		color:#fff;
		font-size:8rpx;
	}
</style>

**这个页面使用了uni-tag组件，别忘了安装一下。

一个APP通常由很多个页面组件，那么他们之间肯定要调用很多相同的方法，我们不能每个页都重写一遍所有方法，所以我们要找一个定义一次就可以在整个APP、内调用的办法，那就是在main.js里定义。我写了一个检查登录状态的函数，那么现在我的main.js代码就是这样的了：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/**
 * 检查是否登录的全局方法
 * =========================
 * 如果登录了，返回一个对象，里面有pid
 * 这个函数不验证具体的身份是否正常。
 * 它只是记录了登录信息，具体在调用API时在服务端会对这些信息进行验证。
 * 所以这里不用操心是否正确。
 */
Vue.prototype.getLoginMsg = function(){
	var loginMsg = {}; //定义一个空对象
	loginMsg.pid = uni.getStorageSync("login_pid"); //用同步的方法在磁盘中读取保存的pid
	if(loginMsg.pid.length < 1){
		//login_pid是空的，就是没登录，直接返回false，连调用API的机会都没有。
		return false;
	}
	loginMsg.userPhone = uni.getStorageSync("login_userPhone"); //登录手机
	loginMsg.vCode = uni.getStorageSync("login_vCode"); //md5后的验证码
	loginMsg.startDate = uni.getStorageSync("login_startDate"); //登录的日期
	loginMsg.Identity = uni.getStorageSync("login_Identity"); //用户身份（管理员、员工、业主）
	console.log(loginMsg); //调用试用的，这句代码是在控制台输出东西。
	return loginMsg;
}

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

大概就是这样，先做个样子，还没做逻辑功能。以后用到什么功能再加。


在线咨询
上一篇：HTML中的图片区域链接方法详解-零基础自学网页制作
下一篇：HTML网页编程之按钮详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 石家庄看香高人 镇赉县 怀仁县 吉木萨尔县 原平 清河门区 市中区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com   www.hmttv.cn
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服