客户管理系统开发定制html+css+php+mysql实现注册+登录+修改密码（附完整代码）

注：客户管理系统开发定制转载及使用源代码请注明来源！客户管理系统开发定制如疑问可私信！

目的：在利用QT客户管理系统开发定制软件进行登录软件开发时，客户管理系统开发定制就想要实现点击按钮跳客户管理系统开发定制转到指定网页进行注册客户管理系统开发定制以及修改密码等操作，就像QQ客户管理系统开发定制客户端那样可以实现网客户管理系统开发定制页端修改密码，申请账户等操作；体验地址：（因需要开启花生壳内网穿透，如需体验可私聊！）

目前已经实现的操作：html界面；html跳转php；php连接数据库；php实现对数据库的增删改查。

注：QT客户端界面部分暂时不做过多介绍，详细界面如：

一、HTML界面及连接数据库

页面布局：style.css

/* 清除浏览器默认边距，使边框和内边距的值包含在元素的width和height内 */ * {    margin: 0;    padding: 0;    box-sizing: border-box;} /* 使用flex布局，让内容垂直和水平居中 */ section {    /* 相对定位 */    position: relative;    overflow: hidden;    display: flex;    justify-content: center;    align-items: center;    min-height: 100vh;    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);} /* 背景颜色 */ section .color {    /* 绝对定位 */    position: absolute;    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/    filter: blur(200px);} /* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */ section .color:nth-child(1) {    top: -350px;    width: 600px;    height: 600px;    background: #ff359b;} section .color:nth-child(2) {    bottom: -150px;    left: 100px;    width: 500px;    height: 500px;    background: #fffd87;} section .color:nth-child(3) {    bottom: 50px;    right: 100px;    width: 500px;    height: 500px;    background: #00d2ff;} .box {    position: relative;	border-radius: 10px;} /* 背景圆样式 */ .box .circle {    position: absolute;    background: rgba(255, 255, 255, 0.1);    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */    backdrop-filter: blur(5px);    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);    border: 1px solid rgba(255, 255, 255, 0.5);    border-right: 1px solid rgba(255, 255, 255, 0.2);    border-bottom: 1px solid rgba(255, 255, 255, 0.2);    border-radius: 50%;    /* 使用filter(滤镜) 属性，改变颜色。    hue-rotate(deg)  给图像应用色相旋转     calc() 函数用于动态计算长度值     var() 函数调用自定义的CSS属性值x*/    filter: hue-rotate(calc(var(--x) * 70deg));    /* 调用动画animate，需要10s完成动画，    linear表示动画从头到尾的速度是相同的，    infinite指定动画应该循环播放无限次*/    animation: animate 10s linear infinite;    /* 动态计算动画延迟几秒播放 */    animation-delay: calc(var(--x) * -1s);} /* 背景圆动画 */ @keyframes animate {    0%, 100%, {        transform: translateY(-50px);    }    50% {        transform: translateY(50px);    }} .box .circle:nth-child(1) {    top: -50px;    right: -60px;    width: 100px;    height: 100px;} .box .circle:nth-child(2) {    top: 150px;    left: -100px;    width: 120px;    height: 120px;    z-index: 2;} .box .circle:nth-child(3) {    bottom: 50px;    right: -60px;    width: 80px;    height: 80px;    z-index: 2;} .box .circle:nth-child(4) {    bottom: -80px;    left: 100px;    width: 60px;    height: 60px;} .box .circle:nth-child(5) {    top: -80px;    left: 140px;    width: 60px;    height: 60px;} /* 登录框样式 */ .container {    position: relative;    width: 400px;    min-height: 400px;    background: rgba(255, 255, 255, 0.3);    display: flex;    justify-content: center;    align-items: center;    backdrop-filter: blur(5px);    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);    border: 1px solid rgba(255, 255, 255, 0.5);    border-right: 1px solid rgba(255, 255, 255, 0.2);    border-bottom: 1px solid rgba(255, 255, 255, 0.2);} .form {    position: relative;    width: 100%;    height: 100%;    padding: 50px;}.checkip {	position: absolute;	left:0px;	bottom:-10px;    width: 100%;	height: 6%;} /* 登录标题样式 */ .form h2 {    position: relative;    color: #00aaff;    font-size: 24px;    font-weight: 600;    letter-spacing: 5px;    margin-bottom: 30px;    cursor: pointer;} /* 登录标题的下划线样式 */ .form h2::before {    content: "";    position: absolute;    left: 0;    bottom: -10px;    width: 0px;    height: 3px;    background: #fff;    transition: 0.5s;} .form h2:hover:before {    width: 53px;} .form .inputBox {    width: 100%;    margin-top: 20px;}.checkip .inputText {    width: 100%;	height:100%;    margin-top: 20px;}/* 输入框样式 */ .form .inputBox input {    width: 100%;    padding: 10px 20px;    background: rgba(255, 255, 255, 0.2);    outline: none;    border: none;    border-radius: 30px;    border: 1px solid rgba(255, 255, 255, 0.5);    border-right: 1px solid rgba(255, 255, 255, 0.2);    border-bottom: 1px solid rgba(255, 255, 255, 0.2);    font-size: 16px;    letter-spacing: 1px;    color: #666;    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}/*.form .inputBox button {    width: 100%;    padding: 10px 20px;    background: rgba(255, 255, 255, 0.2);    outline: none;    border: none;    border-radius: 30px;    border: 1px solid rgba(255, 255, 255, 0.5);    border-right: 1px solid rgba(255, 255, 255, 0.2);    border-bottom: 1px solid rgba(255, 255, 255, 0.2);    font-size: 16px;    letter-spacing: 1px;    color: #666;    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}*//* 下面的ip */.checkip .inputText input {	position: absolute;	width:55%;	right:20%;	bottom:50%;    background: rgba(255, 255, 255, 0);    outline: none;    border: 1px solid rgba(255, 255, 255, 0);    font-size: 14px;    letter-spacing: 1px;    color: #00aaff    } .form .inputBox input::placeholder {    color: #666;} /* 登录按钮样式 */ .form .inputBox input[type="submit"] {    background: #fff;    color: #666;    max-width: 100px;    margin-bottom: 20px;    font-weight: 600;    cursor: pointer;}  /*.form .inputBox button[type="button"] {    background: #fff;    color: #666;    max-width: 300px;    margin-bottom: 20px;    font-weight: 600;    cursor: pointer;} */ .forget {    margin-top: 6px;    color: #236;    letter-spacing: 1px;}.goto {	position: absolute;	right:3%;	bottom:50%;	margin-top: 6px;    color: #236;    letter-spacing: 1px;}.goto a {	font:12px;    color: #aaaa00;    font-weight: 600;    text-decoration: none;} .forget a {    color: #236;    font-weight: 600;    text-decoration: none;}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308

1.登录界面效果如下：

登录界面代码：login.html

<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="style.css">	<link rel="shortcut icon" href="logins.png" type="image/x-icon" />    <title>登录客户端</title>	<script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script><script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script><script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script><script type="text/javascript">	function randoms()	{		document.getElementById("id").value = "";		document.getElementById("password").value = "";		}//参考链接：https://www.runoob.com/try/try.php?filename=jquery_validate_demo1		//添加检测机制 参考链接：https://blog.csdn.net/huangleijay/article/details/11569317	jQuery.validator.addMethod("mobile", function(value, element) {		var length = value.length;		var mobile = /^(((13)|1[5-9]{1})+\d{9})$/		return this.optional(element) || (length == 11 && mobile.test(value));	}, "手机号码格式错误");		// 字母和数字的验证	jQuery.validator.addMethod("chrnum", function(value, element) {		var chrnum = /^([a-zA-Z0-9]+)$/;		return this.optional(element) || (chrnum.test(value));	}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");	//下面是表单拦截提示，可取消，否则无法跳转	/*	$.validator.setDefaults({		submitHandler: function() {			//alert("提交事件!");		}	});*/	$().ready(function() {	// 在键盘按下并释放及提交后验证提交表单	$("#loginform").validate({	    rules: {	      id: "required",//用户名		  //密码是6位以上	      password: {	        required: true,			minlength:6,			maxlength:10,	        chrnum: true	      }	    },	    messages: {	      id: "请输入您的账户名",	      password: {	        required: "请输入密码",			minlength: "请输入6~10位密码",			maxlength:"请输入6~10位密码"	      }	    }		});	});	</script><style>.error{	color:red;}</style></head> <body onload="randoms()">    <section>        <!-- 背景颜色 -->        <div class="color"></div>        <div class="color"></div>        <div class="color"></div>        <div class="box">            <!-- 背景圆 -->            <div class="circle" style="--x:0"></div>            <div class="circle" style="--x:1"></div>            <div class="circle" style="--x:2"></div>            <div class="circle" style="--x:3"></div>            <div class="circle" style="--x:4"></div>            <!-- 登录框 -->            <div class="container">                <div class="form">                    <h2>登录</h2>                    <form id = "loginform" action="login.php" method="post" name = "form1">                        <div class="inputBox">                            <input type="text" placeholder="账户" name="id" id="id">                         </div>                        <div class="inputBox">                            <input type="password" placeholder="密码" name="password" id="password">                         </div>                        <div class="inputBox">                            <input type="submit" value="登录" id="input1">                         </div>                        <p class="forget">忘记密码?<a href="forget.html">                                点击这里                            </a></p>                        <p class="forget">没有账户?<a href="register.html">                                注册                            </a></p>                    </form>                </div>            </div>        </div>    </section></body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120

登录界面php：login.php

<!DOCTYPE html><!-- 参考链接：https://www.runoob.com/php/php-mysql-where.html --><html><head><meta charset="utf-8">	<title></title></head><body>	<?php		$file_path = "info.txt";		if(file_exists($file_path)){			$fp = fopen($file_path, "w");			$str = $_POST["id"] . PHP_EOL . $_POST["password"];			echo(id);			fwrite($fp, $str);					}		fclose($fp);	?>	<?php			$mydbhost = "localhost";			$mydbuser = "root";			$mydbpass = '123456';			$dbname = "qqpass";			$conn = mysqli_connect($mydbhost, $mydbuser, $mydbpass ,$dbname);			if(! $conn){				die("连接失败: " . mysqli_error($conn));			}			 else			{ 				/*里面可以不写内容*/			}			$sql="SELECT  id,password FROM information WHERE id = $_POST[id] AND password = '$_POST[password]'";						$result = mysqli_query($conn, $sql);									if($row = mysqli_fetch_array($result))			{				//echo $row['id'] . " " . $row['password'];				//echo "<br>";				$url='https://jcs-blog.gitee.io/';				echo "<script>location.href='$url'</script>";			}else{					$url = 'http://3s193c9047.51vip.biz:50504/login/login.html';					echo "<script> alert('账户或密码输入有误！'); </script>"; 					echo "<meta http-equiv='Refresh' content='0;URL=$url'>";  			}								mysqli_close($conn);		?></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

2.注册界面效果如下：

注册界面代码： register.html

<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="style.css">    <title>注册账户</title>	<link rel="shortcut icon" href="login.ico" type="image/x-icon" />	<!--	<meta http-equiv="X-UA-Compatible" content="ie=edge">	<meta http-equiv="Refresh" content="2"> --><script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script><script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script><script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script><script type="text/javascript">	function randoms()	{		var number=Math.random();		document.getElementById("id").value=parseInt(number*1000000000);		document.getElementById("name").value = "";		document.getElementById("phone").value = "";		document.getElementById("repassword").value = "";		document.getElementById("password").value = "";		document.getElementById("IpAddress").value = returnCitySN.cip + returnCitySN.cname;				//document.getElementById("IpAddress").value = returnCitySN.cip;	}//参考链接：https://www.runoob.com/try/try.php?filename=jquery_validate_demo1		//添加检测机制 参考链接：https://blog.csdn.net/huangleijay/article/details/11569317	jQuery.validator.addMethod("mobile", function(value, element) {		var length = value.length;		var mobile = /^(((13)|1[5-9]{1})+\d{9})$/		return this.optional(element) || (length == 11 && mobile.test(value));	}, "手机号码格式错误");		// 字母和数字的验证	jQuery.validator.addMethod("chrnum", function(value, element) {		var chrnum = /^([a-zA-Z0-9]+)$/;		return this.optional(element) || (chrnum.test(value));	}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");	//下面是表单拦截提示，可取消，否则无法跳转	/*	$.validator.setDefaults({		submitHandler: function() {			//alert("提交事件!");		}	});*/	$().ready(function() {	// 在键盘按下并释放及提交后验证提交表单	$("#loginform").validate({	    rules: {	      name: "required",//用户名		  //密码是6位以上	      password: {	        required: true,			minlength:6,			maxlength:10,	        chrnum: true	      },		  //验证密码	      repassword: {	        required: true,				        chrnum: true,	        equalTo: "#password"	      },		  //手机号	      phone: {	        required: true,			mobile:true	      },	    },	    messages: {	      name: "请输入您的用户名",	      password: {	        required: "请输入密码",			minlength: "请输入6~10位密码",			maxlength:"请输入6~10位密码"	      },	      repassword: {	        required: "请输入密码",	        equalTo: "两次密码输入不一致"	      },	      phone: 		  {			required: "请输入一个正确的手机号"		  }	    }		});	});	</script><style>.error{	color:red;}</style></head> <body onload="randoms()" >    <section>        <!-- 背景颜色 -->        <div class="color"></div>        <div class="color"></div>        <div class="color"></div>        <div class="box">            <!-- 背景圆 -->            <div class="circle" style="--x:0"></div>            <div class="circle" style="--x:1"></div>            <div class="circle" style="--x:2"></div>            <div class="circle" style="--x:3"></div>            <div class="circle" style="--x:4"></div>            <!-- 登录框 -->            <div class="container">                <div class="form">                    <h2>注册</h2>                    <form id = "loginform" action="welcome.php" method="post" name = "form1">                        <div class="inputBox">                            <input type="text" placeholder="账户" name="id" id="id">                         </div>                        <div class="inputBox">                            <input type="text" placeholder="昵称" name="name" id="name">                         </div>                        <div class="inputBox">                            <input type="password" placeholder="请输入6~10位密码" name="password" id="password">                         </div>                        <div class="inputBox">                            <input type="password" placeholder="再次输入密码" name="password" id="repassword">                         </div>	                        <div class="inputBox">                            <input type="text" placeholder="请输入手机号" name="phone" id="phone">		                        </div>							                        <div class="inputBox">							<input type="submit" value="注册" id="input1">                        </div>                        <p class="forget">已有账户?<a href="login.html">                                点击登录                            </a></p>                    </form>                </div>				<div class = "checkip">					    <div class="inputText">                            <input type="text" name="IpAddress"  id="IpAddress">							<p class="goto"><a href="http://pv.sohu.com/cityjson?ie=utf-8">                                点击查询                            </a></p>                        </div>					</div>            </div>        </div>    </section></body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167

注册界面PHP：welcome.php

<!DOCTYPE html><html><head><meta charset="utf-8">	<title></title></head><body>	<?php		$file_path = "info.txt";		if(file_exists($file_path)){			$fp = fopen($file_path, "w");			$str = $_POST["id"] . PHP_EOL . $_POST["name"] . PHP_EOL . $_POST["password"] .PHP_EOL . $_POST["phone"] .PHP_EOL . $_POST["IpAddress"];			fwrite($fp, $str);					}		fclose($fp);	?>	<?php			$mydbhost = "localhost";			$mydbuser = "root";			$mydbpass = '123456';			$ip = $_SERVER["REMOTE_ADDR"];			$conn = mysqli_connect($mydbhost, $mydbuser, $mydbpass);			if(! $conn){				die("connect error: " . mysqli_error($conn));			}			 else			{ 				/*echo ('用户信息注册成功！')."<br/>"; */  /* Close the connection 关闭连接*/				 	$url='../login/login.html';					echo "<script>location.href='$url'</script>";			}			mysqli_select_db( $conn, 'qqpass');			$sql="INSERT INTO information (id, name, password , phone, qauto, remember, lastlogin, readpolicy, IpAddress, showstatus, loginflag, showlogin,email)			VALUES			('$_POST[id]','$_POST[name]','$_POST[password]','$_POST[phone]' ,'1','1','0','1','$ip','离线','2','0', '$_POST[id]@qq.com')";			$retval = mysqli_query($conn, $sql);			if(! $retval){				die("create error" . mysqli_error($conn));			}			mysqli_close($conn);		?></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

3.修改密码界面效果如下：

修改密码界面代码：forget.html

<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="style.css">	<link rel="shortcut icon" href="forget.png" type="image/x-icon" />    <title>忘记密码</title>			<script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script><script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script><script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script><script type="text/javascript">	function randoms()	{		document.getElementById("id").value = "";		document.getElementById("phone").value = "";		document.getElementById("email").value = "";		document.getElementById("repassword").value = "";		document.getElementById("password").value = "";	}//参考链接：https://www.runoob.com/try/try.php?filename=jquery_validate_demo1		//添加检测机制 参考链接：https://blog.csdn.net/huangleijay/article/details/11569317	jQuery.validator.addMethod("mobile", function(value, element) {		var length = value.length;		var mobile = /^(((13)|1[5-9]{1})+\d{9})$/		return this.optional(element) || (length == 11 && mobile.test(value));	}, "手机号码格式错误");		// 字母和数字的验证	jQuery.validator.addMethod("chrnum", function(value, element) {		var chrnum = /^([a-zA-Z0-9]+)$/;		return this.optional(element) || (chrnum.test(value));	}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");	//下面是表单拦截提示，可取消，否则无法跳转	/*	$.validator.setDefaults({		submitHandler: function() {			//alert("提交事件!");		}	});*/	$().ready(function() {	// 在键盘按下并释放及提交后验证提交表单	$("#forgetform").validate({	    rules: {		  //密码是6位以上	      password: {	        required: true,			minlength:6,			maxlength:10,	        chrnum: true	      },		  //验证密码	      repassword: {	        required: true,				        chrnum: true,	        equalTo: "#password"	      },		  //手机号	      phone: {	        required: true,			mobile:true	      },	    },	    messages: {	      password: {	        required: "请输入密码",			minlength: "请输入6~10位密码",			maxlength:"请输入6~10位密码"	      },	      repassword: {	        required: "请输入密码",	        equalTo: "两次密码输入不一致"	      },	      phone: 		  {			required: "请输入一个正确的手机号"		  }	    }		});	});	</script><style>.error{	color:red;}</style>	</head> <body onload="randoms()">    <section>        <!-- 背景颜色 -->        <div class="color"></div>        <div class="color"></div>        <div class="color"></div>        <div class="box">            <!-- 背景圆 -->            <div class="circle" style="--x:0"></div>            <div class="circle" style="--x:1"></div>            <div class="circle" style="--x:2"></div>            <div class="circle" style="--x:3"></div>            <div class="circle" style="--x:4"></div>            <!-- 登录框 -->            <div class="container">                <div class="form">                    <h2>忘记密码</h2>                    <form id = "forgetform" action="forget.php" method="post" name = "form">                        <div class="inputBox">                            <input type="text" placeholder="账户" name="id" id="id">                         </div>                        <div class="inputBox">                            <input type="text" placeholder="邮箱" name="email" id="email">                         </div>						<div class="inputBox">                            <input type="text" placeholder="手机号" name="phone" id="phone">                         </div>						<div class="inputBox">                            <input type="password" placeholder="请输入6~10位密码" name="password" id="password">                         </div>						<div class="inputBox">                            <input type="password" placeholder="再次输入密码" name="repassword" id="repassword">                         </div>						                        <div class="inputBox">                            <input type="submit" value="修改">                         </div>                        <p class="forget">已有账户?<a href="login.html">                                点击登录                            </a></p>                        <p class="forget">没有账户?<a href="register.html">                                注册                            </a></p>                    </form>                </div>            </div>        </div>    </section></body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156

修改密码界面PHP：forget.php

<!DOCTYPE html><html><head><meta charset="utf-8">	<title></title></head><body>	<?php		$file_path = "info.txt";		if(file_exists($file_path)){			$fp = fopen($file_path, "w");			$str = $_POST["id"] . PHP_EOL . $_POST["email"] . PHP_EOL . $_POST["phone"];			fwrite($fp, $str);					}		fclose($fp);	?>	<?php			$mydbhost = "localhost";			$mydbuser = "root";			$mydbpass = '123456';			$ip = $_SERVER["REMOTE_ADDR"];			$conn = mysqli_connect($mydbhost, $mydbuser, $mydbpass);			if(! $conn){				die("connect error: " . mysqli_error($conn));			}			 else			{ 				/*echo ('用户信息注册成功！')."<br/>"; */  /* Close the connection 关闭连接*/				 	$url='../login/login.html';					echo "<script>location.href='$url'</script>";			}			mysqli_select_db( $conn, 'qqpass');			$sql="UPDATE information SET password='$_POST[password]' WHERE id='$_POST[id]' AND email='$_POST[email]' AND phone='$_POST[phone]'";			$retval = mysqli_query($conn, $sql);			if(! $retval){				die("create error" . mysqli_error($conn));			}			mysqli_close($conn);		?></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

到此为止，登录界面展示完毕，体验地址：
注：因使用花生壳内网穿透，本机花生壳客户端在线方可体验！可私聊体验！
此外，生成的注册信息存于本机mysql数据库，请合理设置密码！

图标：如下（可自行下载添加，无序一致）


二、如何复现上述界面？

1.下载Apache软件进行安装

安装步骤省略，请自行百度（傻瓜式安装）
软件地址：链接：
提取码：N414



注意：在进行安装时有需要填写端口的步骤，端口号通常设置为：8080

2.打开浏览器查询

浏览器端输入：http://localhost:8080/login/login.html

其他界面仅需将后面文件名字换一下！
另外：在同一局域网内也可用使用ip地址进行查看，进而实现手机端访问该网页！主机ip查询请自行百度！


完整界面已经介绍完毕，以上为本次设计的全部代码以及操作方式，由于Apache无法使用外网访问，接下来主要介绍怎么使用进行内网穿透，以便进行外网访问！

3.开启花生壳穿透

这里需要开启http服务（需要花6块钱）


开启花生壳服务之后，手机4G以及外网都可进行访问，注：合理需要开启服务才可外网访问，服务关闭，网页无法访问！

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发