先说一下为什么写这样一个程序吧。因为 作业!作业!作业!!!
作业内容是做一个登录和注册功能,登陆成功后可以跳转到公司主页。公司主页是上次的作业,当然了,我是在我的测试站点上扒下来的代码搞得。点此前往查看。
作业要用JavaScript写登录注册功能。但是用JavaScript不好操作数据库,注册登录做出来了应该也就只是个壳子。所以我就用php写了一下。。。为了表示我还是用了HTML、JavaScript、css的,所以文件结构可能有些奇怪,完全不需要我这么麻烦。
php操作数据库,跟我之前写的那个表白网页的差不多。点此查看
代码
文件结构:
config.php为数据库的配置文件。
<?php
/**
* Created by PhpStorm.
* User: xg
* Date: 2018/11/17
* Time: 21:53
*/
//数据库相关配置,使用前需配置好
define('MYSQL_HOST','ip.ip.ip.ip');//数据库地址,需要先修改!
define('MYSQL_USER','study');//数据库用户名
define('MYSQL_PW','yourpassw');//数据库密码
?>
functions.php连接数据库
<?php
/**
* Created by PhpStorm.
* User: xg
* Date: 2018/11/17
* Time: 21:54
*/
require_once 'config.php';
function connectDb(){
$conn = mysqli_connect(MYSQL_HOST,MYSQL_USER,MYSQL_PW);
if (!$conn){
die('不能连接到数据库,请检查网络环境、数据库配置');
}
mysqli_select_db($conn,'study');
return $conn;
}
?>
regist.html注册页面
<!DOCTYPE HTML>
<html class="ch-cn">
<head>
<link rel="shortcut icon" href="favicon.ico"/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>用户注册</title>
<script src="js/function.js"></script>
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css?v=75ec36c67e" rel="stylesheet">
<link rel="stylesheet" href="css/rl-style.css">
</head>
<body>
<div id="wrapper"></div>
<div id="nav-menu" role="navigation">
<div id="nav-left">
<a href="https://blog.xgblack.top/">
<img id="site-avatar" no-lazyload src="https://img.xgblack.top/blog/181019/12FGlI6ghi.png">
臾离云服务中心
</a>
</div>
<div id="nav-right">
<ul class="nav-right-list">
<li class="nav-right-item">
<a href="https://blog.xgblack.top/" target="_blank">
<i class="iconfont icon-aria-home">
</i>
公司首页
</a>
</li>
<li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-archives"></i>业务</a></li>
<li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-guestbook"></i>联系客服</a></li>
<li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-friends"></i>合作伙伴</a></li>
<li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-about"></i>关于</a></li>
<li class="nav-right-item"><a href="login.html" ><i class="iconfont icon-aria-about"></i>登录</a></li>
</ul>
</div>
</div>
<div id="pjax-container">
<style>
#background {
width: 100%;
height: 100%;
background: url(img/tom-van-hoogstraten-134606.jpg) center center no-repeat;
background-size: cover;
z-index: -1;
position: relative;
}
</style>
<header id="header" class="clearfix animated fadeInDown">
<div id="site-meta">
<div id="content">
<h2 align="center">注册</h2>
<form id="myform" method="post" action="db.php">
<p>*账 号:
<input id="uname" type="text" name="user" placeholder="账号首字符为字母">
</p>
<p>*邮 箱:
<input id="mail" type="email" name="mail" placeholder="youemil@xx.com">
</p>
<p>*联系电话:
<input id="phnum" type="text" name="phnum" placeholder="电话号码">
</p>
<p>*密 码:
<input id="upass" type="password" name="psw" placeholder="请输入密码">
</p>
<p>*确认密码:
<input id="dupass" type="password" name="dpsw" placeholder="请再输入一次密码">
</p>
<p id="sex-p">*性 别:
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="fmale">女
</p>
<p id="ques-p">密保问题:
<select name="ques" id="ques-select">
<option value="ques00">你的大名?</option>
<option value="ques01">你的外号?</option>
<option value="ques02">你的生日?</option>
</select>
</p>
<p>问题答案:
<input id="answer" type="text" name="ans" placeholder="请输入密保问题的答案">
</p>
<p>职业选择:
<input type="checkbox" value="job1" name="check" checked>前端开发
<input type="checkbox" value="job2" name="check">后端开发
<input type="checkbox" value="job3" name="check">算法
</p>
</form>
<div id="error_box"><br></div><br>
<button id="register-btn" onclick="register()">注册</button>
<button id="go-regist-btn" type="button" onclick="window.location.href='login.html';">登录</button>
</div>
</div>
<div id="background"></div>
</header>
</div>
<script>
function register() {
// alert("yunxingle ");
var uname =document.getElementById("uname").value;
var mail = document.getElementById("mail").value;
var phnum = document.getElementById("phnum").value;
var upass = document.getElementById("upass").value;
var dupass = document.getElementById("dupass").value;
var sex = document.getElementsByName("sex").value;
var ques = document.getElementsByName("ques").value;
var ans = document.getElementById("answer").value;
var check = document.getElementsByName("check").value;
var oerror = document.getElementById("error_box");
// alert(uname);
if (isEmpty(uname)||isEmpty(mail)||isEmpty(phnum)||isEmpty(upass)) {
oerror.innerHTML="账户、邮箱、联系电话、密码、性别 为必填项";
// alert("账户、邮箱、联系电话、密码 为必填项");
}else if(!(upass==dupass)) {
oerror.innerText="两次密码不一致,请重新输入";
document.getElementById("upass").value="";
document.getElementById("dupass").value="";
}else{
// alert("注册成功,即将跳转到登录页面");
var form=document.getElementById("myform");
form.submit();
}
}
</script>
</body>
</html>
db.php获取post数据,并存入数据库
<?php
/**
* Created by PhpStorm.
* User: xg
* Date: 2018/11/17
* Time: 21:17
*/
require_once 'functions.php';
//获取参数
$username=$_POST['user'];
$mail=$_POST['mail'];
$phnum=$_POST['phnum'];
$psw=$_POST['psw'];
$sex=$_POST['sex'];
$ques=$_POST['ques'];
$ans=$_POST['ans'];
$mycheck=$_POST['check'];
$conn= connectDb();
$result= mysqli_query($conn,"SELECT * FROM webGisUsers WHERE username='$username'");
$result_arr=mysqli_fetch_assoc($result);
$id = $result_arr['id'];
if($id){
echo '<script>alert("用户名已存在,请重新注册,点击确定返回注册");history.go(-1);</script>';
}else{
// echo '用户名可用';
mysqli_query($conn,"INSERT INTO webGisUsers(username,mail,phnum,psw,sex,ques,ans,mycheck) VALUES ('$username','$mail','$phnum','$psw','$sex','$ques','$ans','$mycheck')");
echo '<script>alert("注册成功,即将跳转到登录");window.location.href = "login.html";</script>';
}
login.html登录界面
<!DOCTYPE HTML>
<html class="ch-cn">
<head>
<link rel="shortcut icon" href="favicon.ico"/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>用户登录</title>
<script src="js/function.js"></script>
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css?v=75ec36c67e" rel="stylesheet">
<link rel="stylesheet" href="css/rl-style.css">
</head>
<body>
<div id="wrapper"></div>
<div id="nav-menu" role="navigation">
<div id="nav-left">
<a href="https://blog.xgblack.top/">
<img id="site-avatar" no-lazyload src="https://img.xgblack.top/blog/181019/12FGlI6ghi.png">
臾离云服务中心
</a>
</div>
<div id="nav-right">
<ul class="nav-right-list">
<li class="nav-right-item">
<a href="https://blog.xgblack.top/" target="_blank">
<i class="iconfont icon-aria-home">
</i>
公司首页
</a>
</li>
<li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-archives"></i>业务</a></li>
<li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-guestbook"></i>联系客服</a></li>
<li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-friends"></i>合作伙伴</a></li>
<li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-about"></i>关于</a></li>
<li class="nav-right-item"><a href="login.html" ><i class="iconfont icon-aria-about"></i>登录</a></li>
</ul>
</div>
</div>
<div id="pjax-container">
<style>
#background {
width: 100%;
height: 100%;
background: url(img/tom-van-hoogstraten-134606.jpg) center center no-repeat;
background-size: cover;
z-index: -1;
position: relative;
}
</style>
<header id="header" class="clearfix animated fadeInDown">
<div id="site-meta">
<div id="box">
<form id="login-form" method="post" action="login.php">
<h2>用户登录</h2>
<p>
用户名:
<input id="uname" type="text" name="luser" placeholder="请输入用户名">
</p>
<p>
密 码:
<input id="upass" type="password" name="lpsw" placeholder="请输入密码">
</p>
</form>
<div id="error_box"><br></div>
<p>
<button id="login-btn" type="button" onclick="login()">登录</button>
<button id="go-regist-btn" type="button" onclick="window.location.href='regist.html';">注册</button>
</p>
</div>
</div>
<div id="background"></div>
</header>
</div>
<script>
function login() {
var luser = document.getElementById("uname").value;
var lpsw = document.getElementById("upass").value;
var oerror = document.getElementById("error_box");
if (isEmpty(luser) || isEmpty(lpsw)) {
oerror.innerHTML = "错误提示:用户名、密码不能为空";
} else {
var login_from = document.getElementById("login-form");
login_from.submit();
}
}
</script>
</body>
</html>
login.php检查登录信息是否正确
<?php
/**
* Created by PhpStorm.
* User: xg
* Date: 2018/11/17
* Time: 23:04
*/
require_once 'functions.php';
//获取参数
$luser =$_POST['luser'];
$lpsw = $_POST['lpsw'];
$conn= connectDb();
$result = mysqli_query($conn,"SELECT * FROM webGisUsers WHERE username='$luser'");
$result_arr=mysqli_fetch_assoc($result);
$username = $result_arr['username'];
if($username){
$psw=$result_arr['psw'];
if(($username==$luser)&&($psw==$lpsw)){
echo '<script>alert("登录成功,即将跳转到公司主页");window.location.href = "index.html";</script>';
}else{
echo '<script>alert("用户名或密码错误,点击确定返回重新登录");history.go(-1);</script>';
}
}else{
echo '<script>alert("用户名不存在,请注册!");history.go(-1);</script>';
}
?>
假的登入,session/cookie 都没有,怎么判断是否已经登录了
嗯嗯,是的。当时还没有学到,现在在学java,刚好学到这块了,可以用java复写一下,顺便练练手
你是在学习吗?自学还是?
php是七八月份的时候自学过一部分,算是刚刚入门,不过现在忘得差不多了。
那很棒啊,我现在也在自学,加油
嗯嗯,共勉。哈哈