2019-07-29 PHP+MySQL开发简单的留言板（1）

~~进来之后先一起喊：PHP是世界上最好的语言！~~

小组里布置了一个任务：使用PHP开发一个简单的留言板，要有会话控制和数据库功能。终于有了对PHP大搞特搞的机会（手动滑稽），虽然实在是对PHP这门语言爱不起来就是了……

项目的GitHub地址：https://github.com/7ermina1/PHPbbs/tree/master，请各位大佬多多指教。

虽然任务目标里明确写了前端不做要求，但是作为一个~~一直想当全栈菜鸟的~~前端菜鸟，不对前端来一番大搞特搞，那可不是我的风格。

这一部分的内容是：项目的整体结构与部分前端界面设计

项目的整体结构

使用ProcessOn画了一个大体的结构图：

登录与注册页面的前端设计

随便画了一个大体的设计图：

大概的想法：

顶端菜单栏为自适应设计，能够适应不同的窗口大小。在登录与注册页面，都显示“首页”，点击后回到首页。
内容区域大小固定，输入框与提交按钮大小固定。
提交按钮的下方有文字提示，可以在注册页面与登录页面之间相互跳转。
使用JavaScript对用户输入内容的合法性做初步判断，当然出于安全考虑，在后台还要再判断一次。
不用框架（主要是那几个框架写出来的页面都快看腻了……）

HTML

login.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="register.css">
</head>
<body>
<div class="topbar">
    <a href="index.html" class="indexbtn">首页</a>
</div>
<div class="bigbox">
    <div class="loginBox">
        <form class="loginForm" id="loginForm" action="login.php" method="post">
            <div class="title">欢迎登录</div>
            <div class="inputarea">
                <input id="username" class="textbox" type="text" placeholder="用户名" name="username">
                <input id="pwd" class="textbox" type="password" placeholder="密码" name="password">
                <input id="submitbtn" class="submitbtn" type="submit" value="提交">
            </div>
            <a class="login" href="register.html">没有账号？点此注册</a>
        </form>
    </div>
</div>
<script src="login.js"></script>
</body>
</html>

register.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="register.css">
</head>
<body>
    <div class="topbar">
        <a href="index.html" class="indexbtn">首页</a>
    </div>
    <div class="bigbox">
        <div class="loginBox">
            <form class="loginForm" id="loginForm" action="register.php" method="post">
                <div class="title">欢迎注册</div>
                <div class="inputarea">
                    <input id="username" class="textbox" type="text" placeholder="用户名" name="username">
                    <input id="pwd" class="textbox" type="password" placeholder="密码" name="password">
                    <input id="repwd" class="textbox" type="password" placeholder="重复密码" name="repassword">
                    <input id="submitbtn" class="submitbtn" type="submit" value="提交">
                </div>
                <a class="login" href="login.html">已有账号？点此登录</a>
            </form>
        </div>
    </div>
    <script src="login.js"></script>
</body>
</html>

CSS

register.css

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: DengXian, "Microsoft YaHei";
    background-color: #dFdFdF;
}

.bigbox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /*background-color: #dFdFdF;*/
    /*background: linear-gradient(45deg, #9CBFFD, #C4ECFB);*/
}

.loginBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 540px;
    box-shadow: 0 5px 10px grey;
    background-color: white;
}

.textbox {
    display: block;
    outline: none;
    border: none;
    /*background-color: cornflowerblue;*/
    width: 240px;
    height: 30px;
    color: #036;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    text-decoration: underline;
    box-shadow: 0 0 10px darkgrey inset;
}

.textbox::placeholder {
    color: #036;
}

.submitbtn {
    display: block;
    outline: none;
    border: none;
    width: 240px;
    height: 30px;
    color: white;
    font-weight: 700;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    background-color: #036;
}

.submitbtn:hover {
    cursor: pointer;
}

.title {
    font-size: 3em;
    font-weight: 800;
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 10px;
    color: #036;
    border-bottom: 1px solid #003366;
}

.inputarea {
    display: block;
    align-items: center;
    justify-content: center;
}

.topbar {
    display: flex;
    width: 100%;
    height: 40px;
    background-color: #036;
    position: fixed;
}

.indexbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 1.2em;
    color: white;
    text-decoration: none;
}

.login {
    display: block;
    color: #036;
    text-decoration: none;
    text-align: center;
    margin-top: 30px;
}

JavaScript

register.js

var usernameInput = document.getElementById('username')
var passwordInput = document.getElementById('pwd')
var repasswordInput = document.getElementById('repwd')
var loginForm = document.getElementById('loginForm')

// 提交验证：用户名不能为空，密码不能为空，两次输入的密码不能不一致，不能含有非法字符
loginForm.onsubmit = function () {
  var patten = '[^A-Za-z0-9]';
  var unameUnsafe = usernameInput.value.search(patten)
  var passwordUnsafe = passwordInput.value.search(patten)

  if (unameUnsafe !== -1) {
    alert('用户名含有非法字符！')
    return false
  } else if (passwordUnsafe !== -1) {
    alert('密码含有非法字符！')
    return false
  } else {

  }

  if (passwordInput.value !== repasswordInput.value) {
    alert('两次输入的密码不一致！')
    return false
  } else if (usernameInput.value === '') {
    alert('用户名不能为空！')
    return false
  } else if (passwordInput.value === '') {
    alert('密码不能为空！')
    return false
  } else {
    return true
  }
}

login.js

var usernameInput = document.getElementById('username')
var passwordInput = document.getElementById('pwd')
var loginForm = document.getElementById('loginForm')

// 提交验证：用户名不能为空，密码不能为空，两次输入的密码不能不一致
loginForm.onsubmit = function () {
  if (usernameInput.value === '') {
    alert('用户名不能为空！')
    return false
  } else if (passwordInput.value === '') {
    alert('密码不能为空！')
    return false
  } else {
    return true
  }
}

最终效果