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

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

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

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

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

项目的整体结构

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

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

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

大概的想法：

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

HTML

login.html

register.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
  }
}

最终效果